Aral Balkan<p>Right, the Kitten icon explorer is now fully functional.</p><p>• Type to filter results (searches component names, categories, and tags).<br>• Press the component button to copy the component code to your clipboard.</p><p><a href="https://kitten.small-web.org/reference/#finding-icons" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#finding-icons</span></a></p><p>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.) :)</p><p>Source: <a href="https://codeberg.org/kitten/site/raw/branch/main/reference/index.page.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/site/raw/b</span><span class="invisible">ranch/main/reference/index.page.md</span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/iconExplorer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>iconExplorer</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>markdown</span></a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>components</span></a> <a href="https://mastodon.ar.al/tags/events" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>events</span></a></p>
eupolicy.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
This Mastodon server is a friendly and respectful discussion space for people working in areas related to EU policy. When you request to create an account, please tell us something about you.
Administered by:
Server stats:
202active users
eupolicy.social: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.1
#phosphoricons
0 posts · 0 participants · 0 posts today
Aral Balkan<p>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:</p><p><a href="https://kitten.small-web.org/reference/#finding-icons" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#finding-icons</span></a></p><p>And see the code for it here:</p><p><a href="https://codeberg.org/kitten/site/src/branch/main/reference/IconExplorer.fragment.js" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/site/src/b</span><span class="invisible">ranch/main/reference/IconExplorer.fragment.js</span></a></p><p>I popped the event handler into the Markdown page itself. Not the cleanest but works in a pinch:</p><p><a href="https://codeberg.org/kitten/site/raw/branch/main/reference/index.page.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/site/raw/b</span><span class="invisible">ranch/main/reference/index.page.md</span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/iconExplorer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>iconExplorer</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>markdown</span></a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>components</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/reference" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>reference</span></a></p>
Aral Balkan<p>New Kitten Release 🎉</p><p>• 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.) <a href="https://kitten.small-web.org/reference/#icons" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#icons</span></a></p><p>• 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.</p><p>• 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 :) <a href="https://codeberg.org/kitten/app/src/branch/main/CHANGELOG.md" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/CHANGELOG.md</span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/KittenRelease" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>KittenRelease</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/svg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svg</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a></p>
Aral Balkan<p>New Kitten release 🎉</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>• New: Lovely new icons¹ and new callouts in Kitten Settings²</p><p>• New: Markdown now supports attributes and bracketed spans³</p><p>• 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.⁵)</p><p>• 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.)</p><p>Enjoy! :kitten:💕</p><p>¹ <a href="https://kitten.small-web.org/reference/#icons" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#icons</span></a></p><p>² <a href="https://mastodon.ar.al/@aral/114381983893061099" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.ar.al/@aral/114381983</span><span class="invisible">893061099</span></a></p><p>³ <a href="https://kitten.small-web.org/reference/#markdown-support" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#markdown-support</span></a> (also see <a href="https://mastodon.ar.al/@aral/114381462302862256" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.ar.al/@aral/114381462</span><span class="invisible">302862256</span></a>)</p><p>⁴ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/</span></a></p><p>⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33</span></a> 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: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7</span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>markdown</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>NodeJS</span></a></p>
Aral Balkan<p>Coming soon: Kitten’s Settings pages are shedding their emoji for elegant `kitten.icons` thanks to the recently integrated Phosphor icons set by <span class="h-card" translate="no"><a href="https://typo.social/@minoraxis" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>minoraxis</span></a></span> and <span class="h-card" translate="no"><a href="https://hachyderm.io/@rektdeckard" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rektdeckard</span></a></span></p><p><a href="https://kitten.small-web.org" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>design</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a></p>
Aral Balkan<p>New Kitten feature: Icons!</p><p>You can now make use of a subset of the icons in the Phosphor icons set by <span class="h-card" translate="no"><a href="https://typo.social/@minoraxis" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>minoraxis</span></a></span> and <span class="h-card" translate="no"><a href="https://hachyderm.io/@rektdeckard" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rektdeckard</span></a></span>.</p><p><a href="https://kitten.small-web.org/reference/#icons" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#icons</span></a></p><p>Search through them in your editor by referencing `kitten.icons.categories` and `kitten.icons.tags`.</p><p>Add this to a file called index.page.js and run `kitten` to see a large duotone pink cat (because why not?):</p><p>export default function () {<br> return kitten.html`<br> <${kitten.icons.c.Cat}<br> size=40%<br> weight=duotone<br> colour=deeppink<br> /><br> `<br>}</p><p>(And yes, the set includes icons for the fediverse. This one of the reasons I chose it.) ;)</p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/authoring" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>authoring</span></a> <a href="https://mastodon.ar.al/tags/intellisense" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>intellisense</span></a></p>
Aral Balkan<p>Coming tomorrow to Kitten… Kitten icons!</p><p>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).</p><p>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 :)</p><p>:kitten: 💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>icons</span></a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PhosphorIcons</span></a> <a href="https://mastodon.ar.al/tags/staticTypes" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>staticTypes</span></a> <a href="https://mastodon.ar.al/tags/taxonomy" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>taxonomy</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/TypeScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TypeScript</span></a> <a href="https://mastodon.ar.al/tags/languageServer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>languageServer</span></a></p>
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload