Aral Balkan
I’m really enjoying this new Streaming HTML workflow in Kitten…
In this 15 second video, I cycle through the options in a selection box using the keyboard and the rest of the interface updates in response.
✨ There’s no custom client-side JavaScript making that happen. ✨
It’s all server side.
The changes stream to the client as HTML and are morphed into place via idiomorph.
So simple and maintainable.
💕
#Kitten #SmallWeb #StreamingHTML #web #dev #html #JavaScript
Aral Balkan
I mean, if there is a simpler way to build web apps, I haven’t seen it.
I can’t wait for more folks to start playing with this. One of the things I’m hugely looking forward to is writing up a web development curriculum that teaches you how to build web apps and sites using #Kitten.
You’ll be learning the foundations of the web – HTML, CSS, and JavaScript – and making useful web apps with persisted data, etc. (not to mention peer-to-peer #SmallWeb apps) without the bloat of Big Tech.
Aral Balkan
@Miaourt I won’t be getting rid of htmx but abstracting some of it away. My approach is one of progressive enhancement and paving the cow paths.
In terms of the former, you throw Kitten a static site from 1993 and it’ll serve it. Everything else is layered on top of the foundational technology of the web. Similarly, htmx is an optional layer on top of that and any Kitten helpers are a layer of abstraction on top of that. At any point all lower layers are accessible/fully intact.
Miaourt 🏳️🌈✨
@aral that's looking great! You only mention idiomorph did you tried to get rid of HTMX and implement your own helpers ?
Aral Balkan
@Miaourt (This also means you that you can reuse your knowledge – both what you gain from Kitten and what you already have – and that each layer is already well documented elsewhere so we only need to document the bits introduced by Kitten. Ditto for tooling. Use any editor with language servers for HTML, CSS, and JS and you have a modern development environment and I don’t have to write or maintain any tooling.) :)
Aral Balkan
@Miaourt (And thank you for the initial compliment, by the way, appreciate it.)
:kitten: 💕
Aral Balkan
PS. Isiomorph isn’t seamlessly integrated into Kitten yet. I plan to integrate it tomorrow. (I’m basically sharing with you stuff that I got running minutes prior to recording a video. So expect a little time between what you see on my screen and a polished version you can use on yours.) :)
:kitten: 💕
fuzzyface
@aral I'd love to learn this but currently I'm having real issues finding any #kitten web dev tutorials because someone choose the most popular entirely unrelated word on the internet for its name. Which moron did that?
Aral Balkan
@fuzzyface That’d be me.
And the reason you can’t find any tutorials is because they don’t yet exist. Because I’m still working on the first stable release.
Aral Balkan
@shom 💕
shom 🐧📷🤿🏔️🪚
@aral that would be really cool! As someone with a programming background but not Javascript and little HTML/CSS knowledge a foundational course would be very helpful for getting started.
Aral Balkan
@Miaourt @gwil Will check it out, thanks. From a quick glance, looks like a replicated data type? Ala hypercore? If so, it’s not the sort of thing that’s at the core of the Small Web protocols I’m working on but there’s nothing to stop it being layered on top of a growing network of easily addressable and always on web nodes.
Miaourt 🏳️🌈✨
@aral that's some great goals, haven't really followed all your Kitten adventure since back then I had moved out of disgust of the waste of thousands hours of managing abstraction webdev have become, up to recently getting back to it thanks to HTMX + Go's pretty std lib, so seeing that your project did also made use of the same pattern make me regret not taking a look sooner ahah, that's awesome work.
Still, I'd miss types too much for getting back on JS.
I'll have a look on your p2p work tho 👀 just noticed that
(on this topic did you had the chance to look at https://willowprotocol.org ? As far as I'm aware, @gwil & Aljoscha's philosophy is really close to what you also promote thru ur Smol' Tech)
Aral Balkan
@sofiav Yay, will definitely make noise about it when it happens :) 💕
Sofia ☭🇧🇷☭
@aral ooh, I'd be interested in that!
fuzzyface
@aral Whilst I respect your technical abilities, your effort, your motives and just about everything else I've seen from you, please don't name anything else without checking with us first. 😉
Aral Balkan
@fuzzyface I quite like the name, actually. I’m not trying to win any SEO contests; word of mouth will do me just fine :)
Aral Balkan
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 Streaming HTML workflow.
(You must still manually add `htmx-swap-oob='morph'` to elements you want to morph. I might add syntactic sugar for this later.)
¹ https://github.com/bigskysoftware/idiomorph/tree/main?tab=readme-ov-file#%EF%B8%8F-idiomorph
０７６萌ＳＮＳ is a social network, courtesy of ０７６. It runs on GNU social, version 2.0.2-beta0, available under the GNU Affero General Public License.
All ０７６萌ＳＮＳ content and data are available under the Creative Commons Attribution 3.0 license.