Recent searches
Search options
New blog post – Kitten Kawaii: porting a React library and Next.js web site to Kitten
Small Web is the exact opposite of the Big Web. But what does that mean in practice? I wanted to find out by porting Elizabet Oliveira’s lovely React Kawaii app to Kitten. How does Kitten hold up to the frameworks of trillion-dollar and hundred-billion-dollar corporations?
(Spoiler: pretty darn well, actually.)
https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
React + Next.js vs Kitten: developer experience, getting started.
It takes ~30 seconds to get the React + Next.js web site up and running… how long does it take for Kitten? You’ll find out in the next post…
Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
React + Next.js vs Kitten: developer experience, getting started (cont.)
So it takes ~30 seconds to get the React + Next.js web site up and running…
How long does it take for Kitten?
~3 seconds.
Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
React + Next.js vs Kitten: developer experience, getting started (cont.)
In fact, it’s even faster if you install Kitten first (the equivalent of installing Node.js first, basically).
Kitten is still up and running with the Kitten Kawaii web site in ~18 seconds.
So that thing about web frameworks and workflows being slow… that’s a Big Web thing.
Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
Development is one thing, what about deployment?
Soon, you’ll be able to deploy your Kitten apps to small-web.org using Domain¹.
Here’s a recording of me deploying Kitten Kawaii to kitten-kawaii.small-web.org using Domain.
Here, domain is registering the domain (subdomain but it’s on the Public Suffix List) and installing Kitten Kawaii on a pre-warmed VPS server.
Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
Of course it’s not just quantitative differences but qualitative ones too…
Since all our time isn’t spent trying to create planet-scale factory farms for human beings (which are hard to do and involve lots of complexity), we can concentrate on nice things like maintaining state in the URL… like Kitten Kawaii does.
URL-based state: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/#url-based-state
Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
View source: https://codeberg.org/aral/kitten-kawaii
And just to underscore how simple Kitten is, here’s a demo of creating a new Kitten project that displays the character you’ve configured using Kitten Kawaii.
There’s a lot more in the blog post (this whole thing just ballooned up from what I thought would be a nice weekend project) but I hope the highlights/videos give you some idea of how web development can be if our goal isn’t to exploit and extract from people to become billionaires.
PS. I forgot to mention: use the back, forward, and refresh buttons on the browser. It should all work as expected. Because this is a *web* app, after all.
@tbss I’m sorry, I translated your reply but I don’t understand what you’re suggesting.
Gemini is a different protocol.
The Small Web uses web protocols (HTTP, etc.).
I’m glad Gemini exists but this is something different.
@aral this looks really interesting and I keep telling myself I’m going to use Kitten somewhere but I really have to convince myself to find the time to play around with your project
@aral why does my history look like this after reading your blog? All I did was scroll, but it's impossible to get back to where I came from.
@gundersen Very odd. It’s a static site; no idea what could be causing that.
Which browser/platform? I’ll try to recreate it.
@gundersen Aha! Figured it out… it’s not the scrolling.
So the Kitten Kawaii web site is embedded in the blog post and the Kitten Kawaii web site maintains state in the URL. Of course, you can’t see its URL because it’s in an iframe but it is still adding its state to the history and, apparenty, that’s not a separate history for iframes.
Interesting…
You can see what I mean by hitting it directly in the browser:
https://kitten-kawaii.small-web.org
:)
@aral it should probably use replaceState so that the state updates but doesn't add to the history
@gundersen Ah, but I do enjoy being able to use the back and forward buttons to go back and forth…
It definitely doesn’t make sense when in an iframe though.
@aral this sounds awesome, especially the streamming html part. Either way, the screenreader on linux might be broken, but it's not that broken that you can't test a webpage with it. So yeah, saying that you need windows or mac OS to use your computer at all if you want to use fedora and any distros with wayland by default, is false in a lot of cases, though it does depend on circumstances. Just for laughs, I downloaded today the most recent fedora workstation image, booted it, then pressed alt+super+s to start the screenreader. Not only that it started, but it also let me press insert+space to change from espeak-ng-mbrola to normal espeak-ng, because the pitch fluctuations are annoying. All that, yeah, in the installer. Perhaps the installer is gtk3 and that's why I can do that? I have no idea, but it works. I dk about silverblue either, but I suspect that doesn't work because of the things included in such an image, and I don't care about that anyway, because I have no inclination to use immutable, atomic, or however you wanna call them nowadays, distros at this point, because they give far too much control to the distributor and maker of the image than the actual user of the OS, and as an arch user primarily, I find that repugnant.
@esoteric_programmer How do you control the screen reader when the modifier key doesn’t work?
@esoteric_programmer Also, thank you for the kind words. It’s still a work-in-progress but slowly getting there :)
@aral that's the thing, it works for me, orca, or insert, +space opens the settings menu and that just worked. However, for anything which isn't mac OS or that stupid piece of shit chromevocs, or maybe android too, the screenreader modifier is specifically for controlling the screenreader, you can use applications normally, with native OS navigation keys, like tab and arrows. If you need focus mode, you can use orca+a to enable it, though it's probably not relevant in your case, until it is. Also, if you go to general in orca preferences, then switch keyboard layout to laptop, you'll use capslock as orca modifier. The issue with that is, capslock will also get triggered, but as I said before, that doesn't really matter since you can turn capslock off whenever you notice it's on. Also, this is temporary, because of the new a11y stack coming out, which is wayland aware, so should solve those issues