Aral Balkan<p>New Kitten Release</p><p>• Automatic message routing: if the element that triggers an event on the client does not have a `name` attribute, Kitten now falls back to using its `id` instead to route the event to the correct server-side event handler on your live Kitten pages. </p><p>If neither attribute exists, Kitten will fail to route the message but no longer crash as it was due to a regression introduced when I implemented support for colons in element names.¹</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>For more details on Kitten’s live pages and automatic message routing, please see the Streaming HTML tutorial:</p><p><a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/</span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ A colon in an element name is ignored for message routing purposes, letting you, for example, give unique names to <details> elements, allowing more than one to be open at a time, while having their events be handled by the same handler.</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/beautifulDefaults" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>beautifulDefaults</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a></p>
Recent searches
No recent searches
Search options
Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.
Administered by:
Server stats:
290active users
shakedown.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.3.4
#websocket
0 posts · 0 participants · 0 posts today
Aral Balkan<p>New Kitten release</p><p>• Fixes issue with routes where dynamic routes with file names that had more than two extensions were not recognised as the correct type of route. e.g., A route called index.xml.get.js would previously have been treated as a static route instead of a dynamic GET route.</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>For more details, see the Valid File Types section of the Kitten reference¹ and the Dynamic Pages tutorial².</p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ <a href="https://kitten.small-web.org/reference/#valid-file-types" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#valid-file-types</span></a><br>² <a href="https://kitten.small-web.org/tutorials/dynamic-pages/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/dynamic-pages/</span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>server</span></a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>framework</span></a> <a href="https://mastodon.ar.al/tags/kit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>kit</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/routing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>routing</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Aral Balkan<p>New Kitten release</p><p>• You can now use key paths in the names of your client-side live components and these will automatically be transformed into object hierarchies on the server for you.¹</p><p>• Self heals zombie live pages (see Streaming HTML workflow²) if they return to life due to client-side browser cache.³</p><p>• Removes htmx⁴ headers from `data` property into separate `header` property in Kitten Page events and the data your Kitten Page message handlers receive.</p><p>• Automatically passes references to the live page object (if any) and the request and response objects to the layout templates of Markdown pages⁵ (so you can, for example, check if `request.session.authenticated`⁶ is true from the your layout template and customise the layout accordingly).</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ e.g., See <a href="https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L356" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/small-tech/site/s</span><span class="invisible">rc/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L356</span></a> (markup) and <a href="https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L173" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/small-tech/site/s</span><span class="invisible">rc/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L173</span></a> (handler) and <a href="https://codeberg.org/small-tech/site/src/branch/kitten/app_modules/database/database.js#L95" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/small-tech/site/s</span><span class="invisible">rc/branch/kitten/app_modules/database/database.js#L95</span></a> (model class method). </p><p>² See Streaming HTML tutorial: <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/</span></a> (There’s actually more to it now but I haven’t had a chance to document the new class-based and event-driven live page workflow yet. It’s experimental but working very well for me so far so I will do so shortly.)</p><p>³ When a person leaves a live/connected page (a page connected to its default web socket), we clean up and remove that live page from memory. However, browsers being what they are, cache the page on the client. If a person uses the back/forward buttons to return to the page, the browser will serve the cached source from memory, which has the old page ID, for the page that no longer exists in Kitten’s memory. So now we have a problem. The only way to recover from this is to tell the page to reload itself. So we accept the WebSocket connection, send a command to the page for it to reload itself, and then close the socket. That makes the stale page self heal by replacing itself with a fresh one. Yay, go us!</p><p>⁴ HTMX: <a href="https://htmx.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">htmx.org</span><span class="invisible"></span></a></p><p>⁵ Kitten Markdown pages reference: <a href="https://kitten.small-web.org/reference/#markdown-pages-page-md-files" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/reference</span><span class="invisible">/#markdown-pages-page-md-files</span></a></p><p>⁶ See Session tutorial: <a href="https://kitten.small-web.org/tutorials/sessions/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/sessions/</span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/HTMX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTMX</span></a> <a href="https://mastodon.ar.al/tags/Markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Markdown</span></a> <a href="https://mastodon.ar.al/tags/sessions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>sessions</span></a> <a href="https://mastodon.ar.al/tags/data" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>data</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a></p>
Terry Yaki<p>Does anyone here have experience with the <a href="https://jorts.horse/tags/azure" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>azure</span></a> cognitive services <a href="https://jorts.horse/tags/api" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>api</span></a> in the browser client? I'm getting an unexplainable <a href="https://jorts.horse/tags/websocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>websocket</span></a> error 1006 that's only happening to my user in certain circumstances, and the reason is `undefined`</p><p>I'm confident it's not a bad key, because the same code and deployment works for another user. </p><p><a href="https://jorts.horse/tags/boosts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>boosts</span></a> welcome, <a href="https://jorts.horse/tags/help" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>help</span></a> please! This is for a <a href="https://jorts.horse/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FOSS</span></a> accessibility project.</p>
Aral Balkan<p>May I just say so myself that I‘m loving playing with Kitten¹ to build Domain² (shown below) and Place³.</p><p>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a><br>² <a href="https://codeberg.org/domain/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/domain/app</span><span class="invisible"></span></a><br>³ <a href="https://codeberg.org/place/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/place/app</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/Domain" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Domain</span></a> <a href="https://mastodon.ar.al/tags/Place" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Place</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/humanRights" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>humanRights</span></a> <a href="https://mastodon.ar.al/tags/democracy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>democracy</span></a> <a href="https://mastodon.ar.al/tags/technology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>technology</span></a> <a href="https://mastodon.ar.al/tags/peerToPeer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>peerToPeer</span></a> <a href="https://mastodon.ar.al/tags/peerToPeerWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>peerToPeerWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/objectOriented" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>objectOriented</span></a> <a href="https://mastodon.ar.al/tags/eventBased" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>eventBased</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a></p>
Aral Balkan<p>New Kitten¹ update</p><p>Experimental:</p><p>• Adds `data` property to Kitten components</p><p>• Adds swap target to `page.send` so you can have an element added before, after, as first child of, or as last child of another (this is syntactic sugar over htmx and works around some of the complexities with out-of-band swaps in htmx, especially when streaming table rows to tables).</p><p>Also, check out the latest live page and page events state view in Kitten’s Settings (every Kitten app has this settings view).</p><p><a href="https://vimeo.com/1050348456" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">vimeo.com/1050348456</span><span class="invisible"></span></a></p><p>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OOP</span></a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>eventModel</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/liveComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>liveComponents</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/RPC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>RPC</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>framework</span></a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>server</span></a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>platform</span></a></p>
Aral Balkan<p>So last night, while recording the preview of Kitten’s¹ improved component model², I made a silly mistake (copying raw HTML into a JavaScript function instead of wrapping it in a kitten.html`` tagged template, easy to do when you’re refactoring to pull out components from pages).</p><p>Then, once I figured out what I’d done, I made another one by forgetting to return the value from the function (easy to do when you’re used to using one-line closures as render functions).</p><p>I would have caught both of those so much faster if Kitten had helpful error messages for those two pitfalls. And guess what, this morning, it does :)</p><p>Attached are screenshot showing the before and after error messages.</p><p>Enjoy!</p><p>:kitten:💕</p><p>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a> <br>² Scroll up the thread to watch the video.</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/PeerToPeerWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PeerToPeerWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>server</span></a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>framework</span></a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>platform</span></a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://mastodon.ar.al/tags/usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>usability</span></a> <a href="https://mastodon.ar.al/tags/errorMessages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>errorMessages</span></a> <a href="https://mastodon.ar.al/tags/authoring" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>authoring</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a></p>
Aral Balkan<p>Little preview video: Kitten’s improved component model</p><p>• Class-based page routes and components<br>• Object-oriented<br>• Event-based<br>• Seamless hypermedia-driven WebSocket-based event mapping and interface updates (Streaming HTML)<br>• A light server-side live component hierarchy with event bubbling<br>• Almost as if you’re building a desktop or mobile app instead of a web app…</p><p>… another authoring simplification made possible because on the Small Web – which is a peer-to-peer web – you build a web app/site as a tool for one person (the owner of the site/app) instead of as a tool for you to farm millions of people.</p><p>… still experimental ;)</p><p><a href="https://vimeo.com/1049055406" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">vimeo.com/1049055406</span><span class="invisible"></span></a></p><p>Learn more about Kitten:</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>If you like what you see and want us to keep existing, we could definitely use your support:</p><p><a href="https://small-tech.org/fund-us/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">small-tech.org/fund-us/</span><span class="invisible"></span></a></p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/objectOriented" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>objectOriented</span></a> <a href="https://mastodon.ar.al/tags/eventBased" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>eventBased</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a></p>
Aral Balkan<p><span class="h-card" translate="no"><a href="https://colorid.es/@lumen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>lumen</span></a></span> Hey, thanks so much :)</p><p>The main two apps that will initially be using it are Place (<a href="https://codeberg.org/place/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/place/app</span><span class="invisible"></span></a>) and Domain (<a href="https://codeberg.org/domain/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/domain/app</span><span class="invisible"></span></a>) — both under heavy development at the moment.</p><p>There are some mini apps I made that you can play, each with their own tutorial.</p><p>• Draw Together (<a href="https://draw-together.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">draw-together.small-web.org</span><span class="invisible"></span></a>; tutorial: <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/</span></a>)<br>• Kitten Kawaii (<a href="https://kitten-kawaii.small-web.org/character/blissful/granny-smith-apple/cat/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten-kawaii.small-web.org/ch</span><span class="invisible">aracter/blissful/granny-smith-apple/cat/</span></a>, write up: <a href="https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">ar.al/2024/08/19/kitten-kawaii</span><span class="invisible">-porting-a-react-library-and-next-js-web-site-to-kitten/</span></a>)<br>• Streamiverse¹ (<a href="https://streamiverse.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">streamiverse.small-web.org</span><span class="invisible"></span></a>, tutorial: <a href="https://kitten.small-web.org/tutorials/htmx-the-htmx-web-socket-extension-and-socket-routes/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/htmx-the-htmx-web-socket-extension-and-socket-routes/</span></a>)</p><p>And you can find a host of little examples in the codebase:</p><p><a href="https://codeberg.org/kitten/app/src/branch/main/examples" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/examples</span></a></p><p>Hope that helps. Until the Small Web stuff is publicly released I don’t really foresee a lot of folks using it. Although I know a few people are playing with it.</p><p> ¹ Just noticed I need to improve it so it recaches profile images if they’ve changed. Noticed a couple of broken ones.</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/examples" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>examples</span></a> <a href="https://mastodon.ar.al/tags/tutorials" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tutorials</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/nodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>nodeJS</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a></p>
Aral Balkan<p>New Kitten release 🥳</p><p>• Live events view in /💕/settings/state/pages <br>• Fix automatic event handler binding</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>I’ve also updated the Kitten Count example in the Streaming HTML tutorial to use the new, simpler, event handler syntax in the improved (and experimental) Kitten component model. There’s more to the latter (e.g., class-based routes) that’s not documented yet but will be soon.</p><p><a href="https://kitten.small-web.org/tutorials/streaming-html/#o-counter-my-counter" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/streaming-html/#o-counter-my-counter</span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a></p>
Paolo Melchiorre<p>TIL Network protocols Sans I/O ⚡</p><p>“… network protocol implementations written in Python that perform no I/O (this means libraries that operate directly on text or bytes; this excludes libraries that just abstract out I/O).” 🤯</p><p>Read the reference page 👇<br><a href="https://sans-io.readthedocs.io/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">sans-io.readthedocs.io/</span><span class="invisible"></span></a></p><p><a href="https://fosstodon.org/tags/Reusability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Reusability</span></a> <a href="https://fosstodon.org/tags/Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Python</span></a> <a href="https://fosstodon.org/tags/FastCGI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FastCGI</span></a> <a href="https://fosstodon.org/tags/HTTP2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTTP2</span></a> <a href="https://fosstodon.org/tags/H11" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>H11</span></a> <a href="https://fosstodon.org/tags/IRC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>IRC</span></a> <a href="https://fosstodon.org/tags/OAuth2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OAuth2</span></a> <a href="https://fosstodon.org/tags/OAuthLib" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OAuthLib</span></a> <a href="https://fosstodon.org/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://fosstodon.org/tags/SOCKS5" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SOCKS5</span></a> <a href="https://fosstodon.org/tags/RFC2217" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>RFC2217</span></a> <a href="https://fosstodon.org/tags/SerialOverIP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SerialOverIP</span></a> <a href="https://fosstodon.org/tags/EPICS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>EPICS</span></a> <a href="https://fosstodon.org/tags/FIX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FIX</span></a> <a href="https://fosstodon.org/tags/QUIC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>QUIC</span></a> <a href="https://fosstodon.org/tags/LanguageServerProtocol" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LanguageServerProtocol</span></a> <a href="https://fosstodon.org/tags/SMTP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SMTP</span></a> <a href="https://fosstodon.org/tags/DBus" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DBus</span></a> <a href="https://fosstodon.org/tags/ThorlabsAPT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ThorlabsAPT</span></a> <a href="https://fosstodon.org/tags/Matrix" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Matrix</span></a> <a href="https://fosstodon.org/tags/SSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SSL</span></a> <a href="https://fosstodon.org/tags/TLS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>TLS</span></a> <a href="https://fosstodon.org/tags/CPython" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CPython</span></a> <a href="https://fosstodon.org/tags/multipart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>multipart</span></a> <a href="https://fosstodon.org/tags/formdata" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>formdata</span></a></p>
Aral Balkan<p>Streamiverse is written in Kitten and you can follow the “htmx, the htmx WebSocket extension, and socket routes” tutorial to create a Kitten app that consumes the API:</p><p><a href="https://kitten.small-web.org/tutorials/htmx-the-htmx-web-socket-extension-and-socket-routes/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kitten.small-web.org/tutorials</span><span class="invisible">/htmx-the-htmx-web-socket-extension-and-socket-routes/</span></a></p><p>To get started with Kitten, see:</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>(Could be a fun little thing to play with this weekend.)</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/streaming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>streaming</span></a> <a href="https://mastodon.ar.al/tags/fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fediverse</span></a> <a href="https://mastodon.ar.al/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Mastodon</span></a> <a href="https://mastodon.ar.al/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>API</span></a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallTech</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Paolo Melchiorre<p>RT <span class="h-card" translate="no"><a href="https://fosstodon.org/@marcelotryle" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>marcelotryle</span></a></span> </p><p>Starlette 0.41.0 released! 🎉 </p><p>✅ Allow to raise HTTPException before websocket.accept()</p><p><a href="https://github.com/encode/starlette/releases/tag/0.41.0" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/encode/starlette/re</span><span class="invisible">leases/tag/0.41.0</span></a></p><p><a href="https://fosstodon.org/tags/Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Python</span></a> <a href="https://fosstodon.org/tags/Starlette" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Starlette</span></a> <a href="https://fosstodon.org/tags/HTTPException" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTTPException</span></a> <a href="https://fosstodon.org/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a></p>
Aral Balkan<p>Kitten¹ update</p><p>I just added a new htmx header to <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> messages in Kitten that contains the actual event type (name) that triggered the message.</p><p>This is useful, for example, if your trigger is a horizontal swipe and you need to differentiate between whether it was a swipe left or a swipe right that caused it.</p><p>Upstream issue: <a href="https://github.com/bigskysoftware/htmx-extensions/issues/74" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/bigskysoftware/htmx</span><span class="invisible">-extensions/issues/74</span></a></p><p>Upstream merge request: <a href="https://github.com/aral/htmx-extensions/commit/359da12563fd0ef6709d801972f98ba1ab61c302" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/aral/htmx-extension</span><span class="invisible">s/commit/359da12563fd0ef6709d801972f98ba1ab61c302</span></a></p><p>Enjoy!</p><p>:kitten: 💕</p><p>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a></p>
Aral Balkan<p>Also, not immediately relevant to your current issue but something that might be worth considering for the future: using the htmx websocket extension, you can basically implement a streaming HTML approach (example using Kitten: <a href="https://ar.al/2024/03/08/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">ar.al/2024/03/08/streaming-htm</span><span class="invisible">l/</span></a>) where you can just stream errors to the page as they happen.</p><p><a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/webSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webSocket</span></a> <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/errorHandling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>errorHandling</span></a> (2/2)</p>
Aral Balkan<p>Let’s build Draw Together… umm, together.</p><p>Video: <a href="https://vimeo.com/927628184" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">vimeo.com/927628184</span><span class="invisible"></span></a></p><p>Blog post: <a href="https://ar.al/2024/03/26/draw-together/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">ar.al/2024/03/26/draw-together</span><span class="invisible">/</span></a></p><p>Play with it: <a href="https://draw-together.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">draw-together.small-web.org</span><span class="invisible"></span></a></p><p>:kitten:💕 </p><p><a href="https://mastodon.ar.al/tags/DrawTogether" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DrawTogether</span></a> <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/idiomorph" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>idiomorph</span></a> <a href="https://mastodon.ar.al/tags/tutorial" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tutorial</span></a> <a href="https://mastodon.ar.al/tags/howTo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>howTo</span></a></p>
Aral Balkan<p>I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)</p><p><a href="https://codeberg.org/aral/draw-together#draw-together" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/aral/draw-togethe</span><span class="invisible">r#draw-together</span></a></p><p><a href="https://mastodon.ar.al/tags/DrawTogether" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DrawTogether</span></a> <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a></p>
Aral Balkan<p>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. </p><p>Now fixed.</p><p>Source code: <a href="https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/examples/streaming-html/toast/index.page.js</span></a></p><p>Thanks to <span class="h-card" translate="no"><a href="https://hachyderm.io/@hi_mayank" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>hi_mayank</span></a></span> for catching that one. Appreciate it!</p><p>:kitten: 💕 </p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/toast" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>toast</span></a> <a href="https://mastodon.ar.al/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> <a href="https://mastodon.ar.al/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a></p>
Aral Balkan<p>PS. Those 42 lines are all the source code.</p><p>That’s it.</p><p>No scaffolding. No npm create this-or-that.</p><p>1. Create a folder called toast.<br>2. Add those 42 lines of code to a file called index.page.js in that folder.<br>3. Run kitten¹.</p><p>Now hit https://localhost in your browser and you will see the example running just like in the video in the first post.</p><p>:kitten: 💕 </p><p>¹ <a href="https://codeberg.org/kitten/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/kitten/app</span><span class="invisible"></span></a></p><p># Kitten <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/toast" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>toast</span></a></p>
Aral Balkan<p>🍞 Kitten toast, anyone?</p><p>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³.</p><p>Video:</p><p><a href="https://vimeo.com/925828491" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">vimeo.com/925828491</span><span class="invisible"></span></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 noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codeberg.org/kitten/app/src/br</span><span class="invisible">anch/main/examples/streaming-html/toast/index.page.js</span></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 noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">ar.al/2024/03/08/streaming-htm</span><span class="invisible">l/</span></a><br>³ <a href="https://codeberg.org/kitten/app" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codeberg.org/kitten/app</span><span class="invisible"></span></a></p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>htmx</span></a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hypermedia</span></a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebSocket</span></a> <a href="https://mastodon.ar.al/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.ar.al/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/toast" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>toast</span></a></p>
ExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload