For my new website I was looking for an alternative to the ubiquitous Fontawesome icon webfont; not least because of potential data grabbing issues, see screenshot below — that’s the domains Noscript blocks on fontawesome.com.

And guess what — I found one, and an amazing one at that! Way better in many aspects, e. g. clarity at small sizes, aesthetics, sense of humour, to name a few. It’s called Phosphor Icons: https://phosphoricons.com

The designers are Helena Zhang (⁠@minoraxis, https://www.helenazhang.com⁠) and Tobias Fried (⁠@rektdeckard, https://tobiasfried.com⁠), a proper A-Team when it comes to typography and web design, obviously. Just take a look at their websites, each created by the respective other — it really doesn’t get any better, does it? So much eye for detail, so much humour, such lean, effective source code … // nerd mode off :)

See Phosphor at work on my site:
https://wernerprise.com

#Webdesign #IconFont #Usability #UI #UX #Typography #Creativity #PhosphorIcons

I just whipped up a simple icon search for Kitten Icons (based on Phosphor Icons). It’s not complete yet – I have a few other things to do before I can get back to it today – but you can play with it here:

https://kitten.small-web.org/reference/#finding-icons

And see the code for it here:

https://codeberg.org/kitten/site/src/branch/main/reference/IconExplorer.fragment.js

I popped the event handler into the Markdown page itself. Not the cleanest but works in a pinch:

https://codeberg.org/kitten/site/raw/branch/main/reference/index.page.md

#Kitten #icons #PhosphorIcons #iconExplorer #web #dev #markdown #components #StreamingHTML #SmallWeb #SmallTech #reference

New Kitten Release 🎉

• Breaking change: `kitten.icons` namespace is now flat (not alphabetically sharded). This should make it much nicer to author with. (The alphabetical sharding was an attempt to work around a size limitation with large objects when using automatic type inference in the TypeScript language server. Since I’m now generating a TypeScript type definition for the entire data structure, the limitation no longer applies and thus the sharding is no longer necessary.) https://kitten.small-web.org/reference/#icons

• The `tags` and `categories` hash tables on `kitten.icons` – which are included as authoring-time aids to help you find icons using metadata searches in your editor – are now marked as unenumerable properties so they no longer pollute the root icons namespace so you can, for example, safely iterate through all icons with a simple loop.

• I’ve started a change log even though Kitten is still pre-release so there is a better place to find them than looking through my Mastodon release notification posts :) https://codeberg.org/kitten/app/src/branch/main/CHANGELOG.md

Enjoy!

💕

#Kitten #KittenRelease #SmallWeb #SmallTech #icons #svg #PhosphorIcons #web #dev

New Kitten release 🎉

https://kitten.small-web.org

• New: Lovely new icons¹ and new callouts in Kitten Settings²

• New: Markdown now supports attributes and bracketed spans³

• New: client-side `kitten` global with `trigger` function for triggering events on the server from the client. (Useful when streaming client-side JavaScript when using Kitten’s Streaming HTML⁴ workflow. e.g., when you have to use a client-only web API like the Clipboard API but you want to keep all your logic on your server-side page.⁵)

• Fixed: The bound render function returned by `KittenComponent` class’s `component` getter now correctly awaits asynchronous templates. (In Kitten, you don’t have to care whether your templates contain promises. Kitten handles all that for you.)

Enjoy! 💕

¹ https://kitten.small-web.org/reference/#icons

² https://mastodon.ar.al/@aral/114381983893061099

³ https://kitten.small-web.org/reference/#markdown-support (also see https://mastodon.ar.al/@aral/114381462302862256)

⁴ https://kitten.small-web.org/tutorials/streaming-html/

⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33 Of course, you don’t have to use this and you can just write client-side JavaScript or use the built-in Alpine.js integration. e.g., how I do it on the (older) settings/identity page: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7

#Kitten #SmallWeb #web #dev #markdown #icons #PhosphorIcons #HTML #CSS #JavaScript #StreamingHTML #htmx #WebSocket #NodeJS

Coming soon: Kitten’s Settings pages are shedding their emoji for elegant `kitten.icons` thanks to the recently integrated Phosphor icons set by @minoraxis and @rektdeckard

https://kitten.small-web.org

#Kitten #SmallWeb #design #icons #PhosphorIcons #web #dev

New Kitten feature: Icons!

You can now make use of a subset of the icons in the Phosphor icons set by @minoraxis and @rektdeckard.

https://kitten.small-web.org/reference/#icons

Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.

Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):

export default function () {
return kitten.html`
<${kitten.icons.c.Cat}
size=40%
weight=duotone
colour=deeppink
/>
`
}

(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)

Enjoy!

💕

#Kitten #SmallWeb #SmallTech #icons #PhosphorIcons #web #dev #HTML #CSS #JavaScript #SVG #NodeJS #authoring #intellisense

Coming tomorrow to Kitten… Kitten icons!

Kitten will have built-in support for the Phosphor icons set with full authoring-time language intelligence where you can search for icons via category and tag (in addition to the canonical alphabetical categorisation).

Thought this was going to take me a few hours but it took a few days thanks to running into issues with size limits, type inference from JavaScript types in modules, etc., with the TypeScript language server but I believe I’ve finally cracked it :)

 💕

#Kitten #SmallWeb #icons #PhosphorIcons #staticTypes #taxonomy #web #dev #TypeScript #languageServer