Conversation

Notices

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 21:58:59 JST Aral Balkan

   🍞 Kitten toast, anyone?

   A short 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:

   https://vimeo.com/925828491

   Source code:

   https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

   Enjoy!

   :kitten: 💕

   ¹ Almost half of which is CSS.
   ² https://ar.al/2024/03/08/streaming-html/
   ³ https://codeberg.org/kitten/app

   #Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 22:05:29 JST Aral Balkan

     in reply to

     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.

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 22:12:37 JST Aral Balkan

     in reply to

     PS. Those 42 lines are all the source code.

     That’s it.

     No scaffolding. No npx 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.

     :kitten: 💕

     ¹ https://codeberg.org/kitten/app

     # Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

   • Embed this notice
     Christian Tietze (ctietze@mastodon.social)'s status on Thursday, 21-Mar-2024 22:55:27 JST Christian Tietze

     in reply to

     @aral I can imagine how things relate to each other by looking for symbol names but this really looks like black magic :)

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 22:55:27 JST Aral Balkan

     in reply to

     • Christian Tietze

     @ctietze Here’s a (long) post where I peel away the magic one layer at a time :)

     https://ar.al/2024/03/08/streaming-html/

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 23:53:31 JST Aral Balkan

     in reply to

     • Mayank

     @hi_mayank Good catch, I just noticed the aria-live attribute is missing. Will fix, thanks :)

   • Embed this notice
     Mayank (hi_mayank@hachyderm.io)'s status on Thursday, 21-Mar-2024 23:53:33 JST Mayank

     in reply to

     @aral how does a screen-reader user get notified of the toast message?

   • Embed this notice
     Ben Pate 🤘🏻 (benpate@mastodon.social)'s status on Friday, 22-Mar-2024 00:04:41 JST Ben Pate 🤘🏻

     in reply to

     @aral Kitten looks pretty cool. Aimed mostly at JavaScript/HTML developers?

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 00:04:41 JST Aral Balkan

     in reply to

     • Ben Pate 🤘🏻

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

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 00:08:03 JST Aral Balkan

     in reply to

     • Christian Tietze

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

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 01:04:55 JST Aral Balkan

     in reply to

     • Ben Pate 🤘🏻

     @benpate Thank you 💕

   • Embed this notice
     Ben Pate 🤘🏻 (benpate@mastodon.social)'s status on Friday, 22-Mar-2024 01:04:56 JST Ben Pate 🤘🏻

     in reply to

     @aral Well keep it up. It looks super fun!

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 01:52:29 JST Aral Balkan

     in reply to

     • Mayank

     Update: I forgot to make the toast message 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!

     :kitten: 💕

     #Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast #accessibility @a11y

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 22-Mar-2024 19:19:44 JST Aral Balkan

     in reply to

     • Mayank

     @hi_mayank Thanks. The toast div is on the page to begin with and, in my testing, screen readers read out updates correctly when they’re morphed into place (if you don’t use morph, you need a container, as you’ re replacing the whole element and, again in my own testing, I see that Chrome’s engine handles even these well but Firefox doesn’t.)

   • Embed this notice
     Mayank (hi_mayank@hachyderm.io)'s status on Friday, 22-Mar-2024 19:19:45 JST Mayank

     in reply to

     @aral@mastodon.ar.al one small suggestion: you might want to create a ToastWrapper that's always in the page, because live regions should generally be present *before* sending updates

     see https://www.sarasoueidan.com/blog/accessible-notifications-with-aria-live-regions-part-2/#make-sure-the-live-region-container-is-in-the-dom-as-early-as-possible and https://www.scottohara.me/blog/2022/02/05/are-we-live.html