home.social

#phosphoricons — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #phosphoricons, aggregated by home.social.

  1. 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: phosphoricons.com

    The designers are Helena Zhang (⁠@minoraxis, helenazhang.com⁠) and Tobias Fried (⁠@rektdeckard, 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:
    wernerprise.com

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

  2. Right, the Kitten icon explorer is now fully functional.

    • Type to filter results (searches component names, categories, and tags).
    • Press the component button to copy the component code to your clipboard.

    kitten.small-web.org/reference

    I quickly whipped this up using the new generic script in Markdown frontmatter feature I added to Kitten. And I’d imagine this is about the most amount of functionality you’d add using it before refactoring to something more maintainable. (Hey, just because I’m the author of Kitten doesn’t mean I’m not also learning how to use it as build it.) :)

    Source: codeberg.org/kitten/site/raw/b

    Enjoy!

    :kitten:💕

    #Kitten #SmallWeb #web #dev #icons #iconExplorer #PhosphorIcons #StreamingHTML #markdown #components #events

  3. Right, the Kitten icon explorer is now fully functional.

    • Type to filter results (searches component names, categories, and tags).
    • Press the component button to copy the component code to your clipboard.

    kitten.small-web.org/reference

    I quickly whipped this up using the new generic script in Markdown frontmatter feature I added to Kitten. And I’d imagine this is about the most amount of functionality you’d add using it before refactoring to something more maintainable. (Hey, just because I’m the author of Kitten doesn’t mean I’m not also learning how to use it as build it.) :)

    Source: codeberg.org/kitten/site/raw/b

    Enjoy!

    :kitten:💕

    #Kitten #SmallWeb #web #dev #icons #iconExplorer #PhosphorIcons #StreamingHTML #markdown #components #events

  4. Right, the Kitten icon explorer is now fully functional.

    • Type to filter results (searches component names, categories, and tags).
    • Press the component button to copy the component code to your clipboard.

    kitten.small-web.org/reference

    I quickly whipped this up using the new generic script in Markdown frontmatter feature I added to Kitten. And I’d imagine this is about the most amount of functionality you’d add using it before refactoring to something more maintainable. (Hey, just because I’m the author of Kitten doesn’t mean I’m not also learning how to use it as build it.) :)

    Source: codeberg.org/kitten/site/raw/b

    Enjoy!

    :kitten:💕

    #Kitten #SmallWeb #web #dev #icons #iconExplorer #PhosphorIcons #StreamingHTML #markdown #components #events

  5. Right, the Kitten icon explorer is now fully functional.

    • Type to filter results (searches component names, categories, and tags).
    • Press the component button to copy the component code to your clipboard.

    kitten.small-web.org/reference

    I quickly whipped this up using the new generic script in Markdown frontmatter feature I added to Kitten. And I’d imagine this is about the most amount of functionality you’d add using it before refactoring to something more maintainable. (Hey, just because I’m the author of Kitten doesn’t mean I’m not also learning how to use it as build it.) :)

    Source: codeberg.org/kitten/site/raw/b

    Enjoy!

    :kitten:💕

    #Kitten #SmallWeb #web #dev #icons #iconExplorer #PhosphorIcons #StreamingHTML #markdown #components #events

  6. Right, the Kitten icon explorer is now fully functional.

    • Type to filter results (searches component names, categories, and tags).
    • Press the component button to copy the component code to your clipboard.

    kitten.small-web.org/reference

    I quickly whipped this up using the new generic script in Markdown frontmatter feature I added to Kitten. And I’d imagine this is about the most amount of functionality you’d add using it before refactoring to something more maintainable. (Hey, just because I’m the author of Kitten doesn’t mean I’m not also learning how to use it as build it.) :)

    Source: codeberg.org/kitten/site/raw/b

    Enjoy!

    :kitten:💕

    #Kitten #SmallWeb #web #dev #icons #iconExplorer #PhosphorIcons #StreamingHTML #markdown #components #events

  7. 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:

    kitten.small-web.org/reference

    And see the code for it here:

    codeberg.org/kitten/site/src/b

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

    codeberg.org/kitten/site/raw/b

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

  8. 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:

    kitten.small-web.org/reference

    And see the code for it here:

    codeberg.org/kitten/site/src/b

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

    codeberg.org/kitten/site/raw/b

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

  9. 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:

    kitten.small-web.org/reference

    And see the code for it here:

    codeberg.org/kitten/site/src/b

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

    codeberg.org/kitten/site/raw/b

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

  10. 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:

    kitten.small-web.org/reference

    And see the code for it here:

    codeberg.org/kitten/site/src/b

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

    codeberg.org/kitten/site/raw/b

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

  11. 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:

    kitten.small-web.org/reference

    And see the code for it here:

    codeberg.org/kitten/site/src/b

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

    codeberg.org/kitten/site/raw/b

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

  12. 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.) kitten.small-web.org/reference

    • 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 :) codeberg.org/kitten/app/src/br

    Enjoy!

    :kitten:💕

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

  13. 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.) kitten.small-web.org/reference

    • 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 :) codeberg.org/kitten/app/src/br

    Enjoy!

    :kitten:💕

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

  14. New Kitten release 🎉

    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! :kitten:💕

    ¹ kitten.small-web.org/reference

    ² mastodon.ar.al/@aral/114381983

    ³ kitten.small-web.org/reference (also see mastodon.ar.al/@aral/114381462)

    kitten.small-web.org/tutorials

    ⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: codeberg.org/kitten/app/src/br 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: codeberg.org/kitten/app/src/br

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

  15. New Kitten release 🎉

    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! :kitten:💕

    ¹ kitten.small-web.org/reference

    ² mastodon.ar.al/@aral/114381983

    ³ kitten.small-web.org/reference (also see mastodon.ar.al/@aral/114381462)

    kitten.small-web.org/tutorials

    ⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: codeberg.org/kitten/app/src/br 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: codeberg.org/kitten/app/src/br

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

  16. New Kitten release 🎉

    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! :kitten:💕

    ¹ kitten.small-web.org/reference

    ² mastodon.ar.al/@aral/114381983

    ³ kitten.small-web.org/reference (also see mastodon.ar.al/@aral/114381462)

    kitten.small-web.org/tutorials

    ⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: codeberg.org/kitten/app/src/br 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: codeberg.org/kitten/app/src/br

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

  17. New Kitten release 🎉

    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! :kitten:💕

    ¹ kitten.small-web.org/reference

    ² mastodon.ar.al/@aral/114381983

    ³ kitten.small-web.org/reference (also see mastodon.ar.al/@aral/114381462)

    kitten.small-web.org/tutorials

    ⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: codeberg.org/kitten/app/src/br 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: codeberg.org/kitten/app/src/br

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

  18. New Kitten release 🎉

    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! :kitten:💕

    ¹ kitten.small-web.org/reference

    ² mastodon.ar.al/@aral/114381983

    ³ kitten.small-web.org/reference (also see mastodon.ar.al/@aral/114381462)

    kitten.small-web.org/tutorials

    ⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: codeberg.org/kitten/app/src/br 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: codeberg.org/kitten/app/src/br

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

  19. 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

    kitten.small-web.org

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

  20. New Kitten feature: Icons!

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

    kitten.small-web.org/reference

    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:💕

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

  21. New Kitten feature: Icons!

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

    kitten.small-web.org/reference

    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:💕

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

  22. New Kitten feature: Icons!

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

    kitten.small-web.org/reference

    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:💕

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

  23. New Kitten feature: Icons!

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

    kitten.small-web.org/reference

    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:💕

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

  24. New Kitten feature: Icons!

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

    kitten.small-web.org/reference

    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:💕

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

  25. 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: 💕

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

  26. 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: 💕

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

  27. 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: 💕

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

  28. 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: 💕

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

  29. 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: 💕

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