Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.ar.al/users/aral/statuses/112133793594320159">Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 21-Mar-2024 21:58:59 JST</a><a href="https://mastodon.ar.al/@aral" title="aral@mastodon.ar.al"><img src="https://gnusocial.jp/avatar/4627-48-20250906071718.webp" width="48" height="48" alt="Aral Balkan" style="position: absolute; left: 0; top: 0;">Aral Balkan</a></section><article><p>🍞 Kitten toast, anyone?</p><p>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³.</p><p>Video:</p><p><a href="https://vimeo.com/925828491" rel="nofollow noreferrer">https://vimeo.com/925828491</a></p><p>Source code:</p><p><a href="https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js" rel="nofollow noreferrer">https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js</a></p><p>Enjoy!</p><p>:kitten: 💕 </p><p>¹ Almost half of which is CSS.<br>² <a href="https://ar.al/2024/03/08/streaming-html/" rel="nofollow noreferrer">https://ar.al/2024/03/08/streaming-html/</a><br>³ <a href="https://codeberg.org/kitten/app" rel="nofollow noreferrer">https://codeberg.org/kitten/app</a></p><p><a href="https://mastodon.ar.al/tags/Kitten" rel="tag">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" rel="tag">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" rel="tag">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" rel="tag">#web</a> <a href="https://mastodon.ar.al/tags/dev" rel="tag">#dev</a> <a href="https://mastodon.ar.al/tags/htmx" rel="tag">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" rel="tag">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSocket" rel="tag">#WebSocket</a> <a href="https://mastodon.ar.al/tags/html" rel="tag">#html</a> <a href="https://mastodon.ar.al/tags/css" rel="tag">#css</a> <a href="https://mastodon.ar.al/tags/JavaScript" rel="tag">#JavaScript</a> <a href="https://mastodon.ar.al/tags/toast" rel="tag">#toast</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/2848392#notice-5656217">In conversation</a><time datetime="2024-03-21T21:58:59+09:00" title="Thursday, 21-Mar-2024 21:58:59 JST">Thursday, 21-Mar-2024 21:58:59 JST</time> <span>from <span><a href="https://mastodon.ar.al/@aral/112133793594320159" rel="external" title="Sent from mastodon.ar.al via ActivityPub">mastodon.ar.al</a></span></span><a href="https://mastodon.ar.al/@aral/112133793594320159">permalink</a><h4>Attachments</h4><ol><li><article><header><div>Domain not in remote thumbnail source whitelist: codeberg.org</div><h5><a href="https://codeberg.org/kitten/app#Kitten">app</a></h5><div> from <span>kitten</span></div></header><div>A web development kit that’s small, purrs, and loves you.</div><footer></footer></article></li><li><article><header><img height="128" width="128" src="https://gnusocial.jp/thumbnail/2403430?w=128&amp;h=128"><h5><a href="https://ar.al/2024/03/08/streaming-html/">Streaming HTML</a></h5><div></div></header><div>Building the Streaming HTML counter example.
  Estimated reading time: 25 minutes.
Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.
Kitten, uniquely, enables you to build Small Web apps (peer-to-peer web apps). But it also aims to make creating any type of web app as easy as possible. The new Streaming HTML workflow is a big step in realising this goal.</div><footer></footer></article></li></ol></footer></blockquote>

Corresponding Notice

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
In conversationThursday, 21-Mar-2024 21:58:59 JST from mastodon.ar.alpermalink
Attachments
1. Domain not in remote thumbnail source whitelist: codeberg.org
  app
  from kitten
  A web development kit that’s small, purrs, and loves you.
2. Streaming HTML
  Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today. Kitten, uniquely, enables you to build Small Web apps (peer-to-peer web apps). But it also aims to make creating any type of web app as easy as possible. The new Streaming HTML workflow is a big step in realising this goal.

Public

Embed Notice

HTML Code

Corresponding Notice