Recent searches
Search options
Kitten toast, anyone?
A fifteen-second demo of how you can create a toast message in 42 lines of code¹ without writing any client-side JavaScript using Streaming HTML² in Kitten³.
Video:
Source code:
https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js
Enjoy!
¹ Almost half of which is CSS.
² https://ar.al/2024/03/08/streaming-html/
³ https://codeberg.org/kitten/app
Notice how:
- A 2 second settle duration is set. Coupled with the 0.7 second transition set in CSS, this makes toast messages fade + slide in for 0.7 seconds, remain displayed for 1.3 seconds, then fade + slide out in 0.7 seconds.
- We first stream a new Toast fragment followed by a MessageInput fragment to clear the message input.
- The message input doesn’t lose focus. This is due to the morph attribute on it making Kitten surgically replace changed attributes instead of the whole element.
PS. Those 42 lines are all the source code.
That’s it.
No scaffolding. No npm create this-or-that.
1. Create a folder called toast.
2. Add those 42 lines of code to a file called index.page.js in that folder.
3. Run kitten¹.
Now hit https://localhost in your browser and you will see the example running just like in the video in the first post.
¹ https://codeberg.org/kitten/app
# Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast
Update: I forgot to make the toast message `div` into an `aria-live` region so toast messages are read out when they arrive for people who use screen readers.
Now fixed.
Source code: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js
Thanks to @hi_mayank for catching that one. Appreciate it!
@aral I can imagine how things relate to each other by looking for symbol names but this really looks like black magic :)
@ctietze Here’s a (long) post where I peel away the magic one layer at a time :)
@ctietze TL; DR: element names on form elements, as well as any other element wired up via the `connect` attribute, get mapped to event handlers on the server where the event name matches the element name.
If you want to learn the intricacies of the wiring, you’ll have to read the post :) (Or else, I’d have to rewrite the post here.) It involves htmx and a little Kitten magic with an automatically-created WebSocket route and event routing logic.
@aral thanks! I was thinking that from the code in the video, it looks similar to the triggers and emplacement rules that HTMX uses.
Now that you clarify that HTMX is actually used under the hood, that clarifies things :)
@aral Kitten looks pretty cool. Aimed mostly at JavaScript/HTML developers?
@benpate At web developers, yes. Uniquely, for folks who want to develop peer-to-peer Small Web apps but also to make garden-variety web development as easy as possible.
@aral Well keep it up. It looks super fun!
@benpate Thank you
@aral Only learned that neologism three years ago. Any idea of the origin? To me and many others, it's a "notification".
The use of a word that can mean either:
1. A charred piece of bread OR
2. A salutation typically delivered while holding aloft an alcoholic beverage
... seems an odd choice for a UX pattern.
@elight Yeah, I guess it came from the analogy of movement between toast popping out of a toaster and how the messages usually appear on screen.
@bekopharm @aral So say we all. (There's only one viable reply here...)
