Mathstodon

Aral BalkanNew Kitten release 🎉<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>• New: Lovely new icons¹ and new callouts in Kitten Settings²• New: Markdown now supports attributes and bracketed spans³• New: client-side `kitten` global with `trigger` function for triggering events on the server from the client. (Useful when streaming client-side JavaScript when using Kitten’s Streaming HTML⁴ workflow. e.g., when you have to use a client-only web API like the Clipboard API but you want to keep all your logic on your server-side page.⁵)• Fixed: The bound render function returned by `KittenComponent` class’s `component` getter now correctly awaits asynchronous templates. (In Kitten, you don’t have to care whether your templates contain promises. Kitten handles all that for you.)Enjoy! :kitten:💕¹ <a href="https://kitten.small-web.org/reference/#icons" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/reference/#icons</a>² <a href="https://mastodon.ar.al/@aral/114381983893061099" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.ar.al/@aral/114381983893061099</a>³ <a href="https://kitten.small-web.org/reference/#markdown-support" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/reference/#markdown-support</a> (also see <a href="https://mastodon.ar.al/@aral/114381462302862256" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://mastodon.ar.al/@aral/114381462302862256</a>)⁴ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a>⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33</a> Of course, you don’t have to use this and you can just write client-side JavaScript or use the built-in Alpine.js integration. e.g., how I do it on the (older) settings/identity page: <a href="https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#markdown</a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#icons</a> <a href="https://mastodon.ar.al/tags/PhosphorIcons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PhosphorIcons</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a>

Aral BalkanNew Kitten release• Fix: messages that are promises are properly awaited before being sent.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>Kitten automatically and transparently handles asynchronous content in your templates for you so you don’t have to worry about it. One place where this wasn’t working properly is if you addressed `this.component` to stream a custom update of your component manually instead of calling the `this.update()` method of Kitten component instances.e.g.,```js export default class AdminPage extends kitten.Page { // … onSelectedPost (data) { this.send(kitten.html`<${this.component} postId='${data.selectedPost.postId}' />`) } } ```:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#news</a> <a href="https://mastodon.ar.al/tags/updates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#updates</a> <a href="https://mastodon.ar.al/tags/promises" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#promises</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Aral Balkan👆 Sorry, life got in the way; just deployed this but I haven’t had a chance to document it properly yet. I’ll make a proper announcement when I do.Also, you can now use the `delete` attribute on a DOM node/Kitten component you’re streaming back from the server to have it removed from the DOM on the client. It’s syntactic sugar for hx-swap-oob='delete' in htmx.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/icons" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#icons</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#components</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Aral BalkanNew Kitten release• Socket routes now have precendence in the router.This stops wildcard page routes from capturing the default socket routes that Kitten creates to enable the Streaming HTML workflow.e.g., Previously, the following route:/videos/index_[slug].page.jsCould not connect to its default socket (/videos/default.socket) because default.socket would be captured by the [slug] parameter.Now, it will work as intended as the /videos/default.socket (a socket route) has precendence over index_[slug].page.js (a page route).Learn more about Kitten’s Streaming HTML workflow here: <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a>Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/routing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#routing</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a>

Aral BalkanNew Kitten Release• 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. 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.¹<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>For more details on Kitten’s live pages and automatic message routing, please see the Streaming HTML tutorial:<a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a>Enjoy!:kitten:💕¹ 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.<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/beautifulDefaults" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#beautifulDefaults</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Aral BalkanNew Kitten release• 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.<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>For more details, see the Valid File Types section of the Kitten reference¹ and the Dynamic Pages tutorial².Enjoy!:kitten:💕¹ <a href="https://kitten.small-web.org/reference/#valid-file-types" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/reference/#valid-file-types</a> ² <a href="https://kitten.small-web.org/tutorials/dynamic-pages/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/dynamic-pages/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#server</a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a> <a href="https://mastodon.ar.al/tags/kit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#kit</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/routing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#routing</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Aral BalkanNew Kitten release• 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.¹• Self heals zombie live pages (see Streaming HTML workflow²) if they return to life due to client-side browser cache.³• Removes htmx⁴ headers from `data` property into separate `header` property in Kitten Page events and the data your Kitten Page message handlers receive.• 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).<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>Enjoy!:kitten:💕¹ 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">https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L356</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">https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L173</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">https://codeberg.org/small-tech/site/src/branch/kitten/app_modules/database/database.js#L95</a> (model class method). ² See Streaming HTML tutorial: <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</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.)³ 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!⁴ HTMX: <a href="https://htmx.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://htmx.org</a>⁵ 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">https://kitten.small-web.org/reference/#markdown-pages-page-md-files</a>⁶ See Session tutorial: <a href="https://kitten.small-web.org/tutorials/sessions/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/sessions/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/HTMX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTMX</a> <a href="https://mastodon.ar.al/tags/Markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Markdown</a> <a href="https://mastodon.ar.al/tags/sessions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#sessions</a> <a href="https://mastodon.ar.al/tags/data" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#data</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Aral BalkanNew Kitten update<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>• Added `remove()` method to kitten.Component class. Use this when working with live pages and components and you want to remove a component from the page (or its parent). It will handle removing event listeners for you so you don’t end up with any memory leaks.• Improved `update()` method so it similarly removes listeners on child components before updating the component itself in case you have class-based child components that will be reinstantiated on render.• Updated the `send()` methods on `page.everyone` and `page.everyoneElse` so you can pass a swap target to insert the element being streamed to the page before, after, asFirstChildOf, or asLastChildOf another. (This was already there for the page.send() but now the two broadcast objects have the same consistent interface.The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.(Remember that the new class and event-based page and component model is still experimental and largely undocumented and fully backwards compatible with the classic functional way of authoring your page routes and components.)Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OOP</a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventModel</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Javascript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Aral BalkanA quick demonstration of using the State: Overview page in Kitten’s¹ settings while developing to keep an eye on your event and event listener counts to avoid memory leaks.Notice how the events and listeners counts change as I navigate between the People and Settings pages in my Place² node and that they are consistent. If they were rising as I navigated back and forth I’d know I had a memory leak somewhere.If you use Kitten’s built-in features (e.g., the `addEventHandler()` method on your `kitten.Component` subclasses, Kitten will handle adding and removing listeners for you automatically during your component’s lifecycle. You can also do so manually in your component’s automatically-called `onConnect()` and `onDisconnect()` event handlers.This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.<a href="https://vimeo.com/1050714714" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://vimeo.com/1050714714</a>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a> ² Place is in early development at the moment (<a href="https://codeberg.org/place/app" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/place/app</a>)<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/demo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#demo</a> <a href="https://mastodon.ar.al/tags/developerExperience" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developerExperience</a> <a href="https://mastodon.ar.al/tags/developerTools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developerTools</a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventModel</a> <a href="https://mastodon.ar.al/tags/events" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#events</a> <a href="https://mastodon.ar.al/tags/memory" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#memory</a> <a href="https://mastodon.ar.al/tags/memoryLeaks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#memoryLeaks</a> <a href="https://mastodon.ar.al/tags/observerPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#observerPattern</a> <a href="https://mastodon.ar.al/tags/listeners" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#listeners</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#server</a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#platform</a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/place" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#place</a> <a href="https://mastodon.ar.al/tags/peerToPeer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#peerToPeer</a> <a href="https://mastodon.ar.al/tags/peerToPeerWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#peerToPeerWeb</a>

Aral BalkanNew Kitten¹ updateExperimental:• Adds `data` property to Kitten components• 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).Also, check out the latest live page and page events state view in Kitten’s Settings (every Kitten app has this settings view).<a href="https://vimeo.com/1050348456" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://vimeo.com/1050348456</a>¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/OOP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OOP</a> <a href="https://mastodon.ar.al/tags/eventModel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventModel</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/liveComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#liveComponents</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/RPC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RPC</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#server</a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#platform</a>

Aral BalkanSo 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).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).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 :)Attached are screenshot showing the before and after error messages.Enjoy!:kitten:💕¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a> ² Scroll up the thread to watch the video.<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/PeerToPeerWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PeerToPeerWeb</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#server</a> <a href="https://mastodon.ar.al/tags/framework" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#framework</a> <a href="https://mastodon.ar.al/tags/platform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#platform</a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.ar.al/tags/usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#usability</a> <a href="https://mastodon.ar.al/tags/errorMessages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#errorMessages</a> <a href="https://mastodon.ar.al/tags/authoring" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#authoring</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a>

Aral BalkanLittle preview video: Kitten’s improved component model• Class-based page routes and components • Object-oriented • Event-based • Seamless hypermedia-driven WebSocket-based event mapping and interface updates (Streaming HTML) • A light server-side live component hierarchy with event bubbling • Almost as if you’re building a desktop or mobile app instead of a web app…… 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.… still experimental ;)<a href="https://vimeo.com/1049055406" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://vimeo.com/1049055406</a>Learn more about Kitten:<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>If you like what you see and want us to keep existing, we could definitely use your support:<a href="https://small-tech.org/fund-us/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://small-tech.org/fund-us/</a>:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/objectOriented" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#objectOriented</a> <a href="https://mastodon.ar.al/tags/eventBased" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventBased</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a>

Aral BalkanNew Kitten release 🥳• Live events view in /💕/settings/state/pages • Fix automatic event handler binding<a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a>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.<a href="https://kitten.small-web.org/tutorials/streaming-html/#o-counter-my-counter" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/#o-counter-my-counter</a>Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a>

Aral BalkanPS. I’m still not happy with the expressiveness of the htmx syntactic sugar. I’ve initially kept it as close as possible to htmx so as to help with reuse of knowledge if you already know it but I’ve been favouring semantics, internal consistency, and readability/ease of authoring in all things with Kitten so expect minor changes in syntax before I lock things down in API version 1.<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Aral BalkanPretty soon, you’re going to be able to view your live pages and the events on them in real time while developing Kitten apps.The improved component model with support for class-based routes (and a server-side component hiearchy that lets you build well-encapsulated components and pages and work in an event-driven way) is coming along nicely and I’m back to writing Place¹ using it.(In the GIF, you’re looking at Place’s profile settings page. Not shown here but those profile changes reflect in realtime on all open pages. The highlighted piece of code is what streams the event details to the browser.)¹ <a href="https://codeberg.org/place/app" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codeberg.org/place/app</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/eventDriven" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventDriven</a> <a href="https://mastodon.ar.al/tags/objectOriented" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#objectOriented</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a>

Aral BalkanFeeling more like myself today after getting my ass kicked by this bug for the past few weeks and I’m finally making progress on improving Kitten’s¹ component model.Soon, you’ll be able to implement page event handlers in an even simpler way than before. Is your connected DOM element named `pixel`? Then export an event handler called `onPixel()` on your page route and it’ll get called when that element triggers its event.And there’s so much more coming, including a class-based page and component model with DOM-style event bubbling on the server. This should really let you make the most of the Streaming HTML² workflow in Kitten by writing event-driven GUI-like code but for a web app without really caring about the client/server separation.Need to update the examples, test, test, test, and update docs but this had me stumped for a while now with several false starts and I feel this implementation might just be it 🤞:kitten: 💕¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a> ² <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/RPC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RPC</a> <a href="https://mastodon.ar.al/tags/eventDriven" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#eventDriven</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Aral BalkanNew Kitten updateAdds `:unique-suffix` support to automatic client-side element name to server-side event name mapping.(This lets you give unique names to your elements while having them share the same event name.)Read more in the “a magic connection” section of the Kitten Streaming HTML tutorial: <a href="https://kitten.small-web.org/tutorials/streaming-html/#a-magic-connection" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/#a-magic-connection</a>:kitten: 💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Aral BalkanToday @ 18:30 in Dublin: Come hear me talk about the Small Web and watch me demonstrate the current state of Kitten, Domain, and Place.<a href="https://meetu.ps/e/Ny9vK/H1WXJ/i" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://meetu.ps/e/Ny9vK/H1WXJ/i</a><a href="https://mastodon.ar.al/tags/ireland" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ireland</a> <a href="https://mastodon.ar.al/tags/dublin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dublin</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/talk" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#talk</a> <a href="https://mastodon.ar.al/tags/presentation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#presentation</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a> <a href="https://mastodon.ar.al/tags/selfHosting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#selfHosting</a> <a href="https://mastodon.ar.al/tags/decentralisation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#decentralisation</a> <a href="https://mastodon.ar.al/tags/p2p" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#p2p</a> <a href="https://mastodon.ar.al/tags/cryptography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cryptography</a> <a href="https://mastodon.ar.al/tags/dubSec" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dubSec</a> <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/Domain" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Domain</a> <a href="https://mastodon.ar.al/tags/Place" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Place</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallTech</a>

Aral BalkanJust added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:<a href="https://ar.al/2024/03/26/draw-together/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ar.al/2024/03/26/draw-together/</a>Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.(The full source and explanations fit the four screenshots on this post.)¹ <a href="https://draw-together.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://draw-together.small-web.org</a> ² <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/DrawTogether" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DrawTogether</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/WebSockets" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSockets</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Aral BalkanKitten¹ updateI just added a new htmx header to <a href="https://mastodon.ar.al/tags/WebSocket" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebSocket</a> messages in Kitten that contains the actual event type (name) that triggered the message.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.Upstream issue: <a href="https://github.com/bigskysoftware/htmx-extensions/issues/74" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/bigskysoftware/htmx-extensions/issues/74</a>Upstream merge request: <a href="https://github.com/aral/htmx-extensions/commit/359da12563fd0ef6709d801972f98ba1ab61c302" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/aral/htmx-extensions/commit/359da12563fd0ef6709d801972f98ba1ab61c302</a>Enjoy!:kitten: 💕¹ <a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://kitten.small-web.org</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/htmx" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#htmx</a> <a href="https://mastodon.ar.al/tags/hypermedia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypermedia</a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StreamingHTML</a>

Recent searches

Search options

Administered by:

Server stats:

#streaminghtml