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
@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 :)