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: https://ar.al/2024/03/08/streaming-html/) where you can just stream errors to the page as they happen.
The Evergreen Web section in Kitten’s¹ settings now has its own page too (and uses Kitten’s new Streaming HTML² workflow).
If you have the previous version of your site up somewhere, you can use the 404-to-307 technique³ to forward missing pages to your old site so as not to break the Web.
Introducing the Small Web, where you own and control your space online. Join Aral Balkan in a live coding demo using Kitten, a Small Web server empowering everyday folks to craft their own corner of the internet. Let's reclaim the web for people, not profits!
Watch: https://buff.ly/497SHNg and join us at the Conference!
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 :)
Minor Kitten¹ update: Even if your page routes now return nothing (e.g., null, undefined, empty string), a proper page will be rendered that includes the development-time WebSocket that powers hot reloads.
@lil5 Nope. It’s its own server + framework. The runtime is Node.js (which it downloads its own copy of during installation) and, while it will happily serve your static site from 1993 (ok, maybe not cgi-bin), the stuff you’re seeing in this example uses its Streaming HTML workflow based on htmx, WebSockets, and a little Kitten magic (https://ar.al/2024/03/08/streaming-html/) :)
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³.
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.
Just got it working in Domain² (a Kitten³ app). It’s such a sweet workflow. Store state keyed to session keys and use Streaming HTML⁴ to stream hypermedia interface updates.
Kitten update: session IDs now available in the request.session objects you get in your routes.
Kitten lets you persist arbitrary data in session objects to make it easy to work with sessions but you cannot store custom objects (instances of custom classes) as Kitten’s default database is not aware of custom classes in your application. Now, keyed to the session id, you can store custom objects in your app’s own database.
(The use case for this is pretty neat: keep your interface state in custom state class instances persisted in session objects and, using the Streaming HTML workflow*, send back pieces of the interface that take those state objects as their only prop. Quite a neat separation of concerns and state is maintained only on the server in those objects.)
Let me show you how easy it is to create a simple counter web app using the new Streaming HTML workflow in Kitten before peeling away the magic layer by layer so you learn how to make the same app using:
• HTMX & WebSockets
• Plain old JavaScript, and, finally,
• Without Kitten in pure Node.js.
I mean, I’m not saying you should stream CSS changes from the server every 300ms… just that you can if you want to ;P
(I’m playing around with the new/experimental Streaming HTML flow in Kitten* and testing its limits and trying to get a feel for how it wants to be used.)
Right, #idiomorph¹ is now integrated into #Kitten² and enjoys first-class support via the <page> tag like #htmx itself, the htmx #WebSocket extension, Alpine.js, and Water semantic #CSS library.
It’s auto-loaded for you if you expose onConnect() handlers in your pages when using the new #StreamingHTML workflow.
(You must still manually add htmx-swap-oob='morph' to elements you want to morph. I might add syntactic sugar for this later.)
Very excited about the latest feature/workflow I’m adding to Kitten. I call it… 🥁
✨ Streaming HTML ✨
Implement back-end functionality and stream HTML updates to the client without writing any front-end JavaScript.
Just give your forms names and listen for them in an onConnect() handler you export from your page. Kitten handles everything else – setting up a WebSocket route for you, mapping triggers to events, etc. – thanks to Kitten + #htmx magic 🪄