Login

Recent searches

No recent searches

Search options

Only available when logged in.
mastodon.ar.al is one of the many independent Mastodon servers you can use to participate in the fediverse.
This is my personal fediverse server.

Administered by:

Server stats:

1
active users

mastodon.ar.al: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.3.8

Public *
Aral Balkan

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

vimeo.com/925828491

Source code:

codeberg.org/kitten/app/src/br

Enjoy!

:kitten: 💕

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

VimeoKitten ToastBy Small Technology Foundation
#Kitten#SmallWeb#StreamingHTML
Aral Balkan

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: codeberg.org/kitten/app/src/br

Thanks to @hi_mayank for catching that one. Appreciate it!

:kitten: 💕

Screenshot of source code (42 lines): The following line is highlighted: <div id='toast' morph='settle:2s' aria-live='assertive'>${SLOT}</div> Full source follows: const Toast = ({ SLOT }) => kitten.html` <div id='toast' morph='settle:2s' aria-live='assertive'>${SLOT}</div> ` const MessageInput = () => kitten.html` <input type='text' id='message' name='message' morph> ` export default () => kitten.html` <page css> <h1>🍞 Mmm, Toast!</h1> <form name='toast'> <label for='message'>Message</label> <${MessageInput} /> <button type='submit'>Toast</button> </form> <${Toast} /> <style> #toast.settling { opacity: 1; top: 1em; } #toast { opacity: 0; top: -3em; position: fixed; transition: all 0.7s ease-out; left: 50%; transform: translate(-50%, 0); /* centre horizontally */ border-radius: 1em; background-color: var(--background-alt); padding: 1em; font-weight: bold; } button, input { display: inline; } label { display: block; } </style> ` export function onConnect ({ page }) { page.on('toast', data => { page.send(kitten.html`<${Toast}>${data.message}</>`) page.send(kitten.html`<${MessageInput} />`) }) }
#Kitten#SmallWeb#StreamingHTML
Mar 21, 2024, 04:51 PM·Public·Web
0boosts·8favorites
ExploreLive feeds
About