Create accountLogin

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.gamedev.place is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon server focused on game development and related topics.

Administered by:

Server stats:

5.3K
active users

mastodon.gamedev.place: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.7

#icons

10 posts7 participants0 posts today
Public
Aral Balkan

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

Screenshot of the all icons example at the end of this section showing the icons sorted alphabetically and rendered in duotone deep pink. The icons starting with a and b are visible in the browser.
#Kitten#SmallWeb#SmallTech
Continued thread
Public
Aral Balkan

👆 Sorry, life got in the way; just deployed this but I haven’t had a chance to document it properly yet. I’ll make a proper announcement when I do.

Also, you can now use the `delete` attribute on a DOM node/Kitten component you’re streaming back from the server to have it removed from the DOM on the client. It’s syntactic sugar for hx-swap-oob='delete' in htmx.

kitten.small-web.org

#Kitten#SmallWeb#icons
Public *
Aral Balkan

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

Screenshot of detail of a Kitten template open in a code editor. Author is editing Kitten component reference in a markdown block, within a H2 header. The caret is at <${kitten.icons.tags. and the autocompletion box is open showing a list of possible fields: a11y, accessibility, accessible, accomodations, account, accounts, accuracy, acrobat, activity, add. The reasty of the line of code reads } weight=duotone size=1.5em/>
#Kitten#SmallWeb#icons
Replied in thread
Public *
Blake Patterson

@bitnacht Good point, re: the busy bee.

As for the spinning disc (or "beachball"), it got its start in NEXTSTEP as a greyscale spinning magneto-optical disc rendering indicating the system is busy / data is loading, which was seen quite often on the early NeXT Cube, as it came with no HD but only an MO drive, and it used that drive for _swap_, if you can imagine...

That spinning disc became color when NEXTSTEP gained a color display on later hardware, and from there it evolved into the spinning "beachball" we know today (macOS being structurally based upon and evolved from NEXTSTEP/OPENSTEP).

EDIT: Oh, I think I misread - you are talking about the busy mouse pointer icon in Windows, I think. I'm not sure of its specific history. Apologies.

NEXTSTEP OS loading screen showing spinning magento-optical mouse pointer icon indicating that the system is busy
Shot showing the evolution from NEXTSTEP's color spinning MO-disc to the curretn macOS spinning beachball indicating system is busy
#macOS#NeXT#NEXTSTEP
ExploreLive feeds
About