As a fun little exercise, I decided to port Miuki Miu’s (Elizabet Oliveira’s) adorable React Kawaii¹ to Kitten².
Going to write a blog post about the experience but, in the meanwhile, if you want to play with the cute little characters, here you go:
https://kitten-kawaii.small-web.org
And here’s the source code:
https://codeberg.org/aral/kitten-kawaii/
Things to try: the back and forward buttons ;)
¹ https://react-kawaii.vercel.app
² https://kitten.small-web.org
Ooh, oops, looks like I introduced a little shared state between sessions… looking into it now :)
(If your character switches when you change the colour, etc., that’ll be why.)
Right, fixed.
So genius here just kept state in global variables which were, of course, shared between all connections.
(So you were all just changing the same character, colour, mood settings but the updates were only getting sent to you so when someone else changed something, your character would reflect those changes too and appear to jump.)
Anyway, long story short, moved state to the session object and it should be good now.
Patch: https://codeberg.org/aral/kitten-kawaii/commit/fdb57e7794cc0c72f75a7273ac66b1514a667f0e
(Just because I implemented it doesn’t mean this Streaming HTML¹ workflow isn’t new to me either. I’m still learning how Kitten wants to be used even as I build it.) :)
@aral sorry! Lol
@falken Hey, It Worked On My Machine™ ;P
@aral and mine. And theirs. And everyone's :-)
@aral it seems shocking that one could easily write a bug that shares state outside your machine. Sounds like a footgun. Can there be some kind of more explicit mechanism where you mark consent for content to be shared over the network, and unmarked content warns or errors out?
@ryanprior This isn’t unique to Kitten, it’s easy enough to do in any language/framework/server. If you create a global variable in any server-side app and then use it in your responses, every page will reflect its state.
@aral you wouldn't normally use a server side framework for something like this react kawaii app, right? I guess that put me in the frame of mind to be surprised. Could be an interesting area to improve on the state of the art.
@ryanprior I’m already thinking about how to maintain page-level state (as opposed to session-level or global state) in your app with the Streaming HTML workflow as I realised that’s missing from Kitten right now. Once that’s in, that should help folks avoid this sort of mistake.