Conversation

Notices

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 03:53:25 JST Aral Balkan

   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

   #Kitten #SmallWeb #React #BigWeb #porting #experiment #kawaii

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 03:59:11 JST Aral Balkan

     in reply to

     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.)

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 04:01:34 JST Aral Balkan

     in reply to

     • Alien

     @alien Yep, just saw ;)

     https://mastodon.ar.al/@aral/112910946643638319

     (I might have made it but I’m still new to the Kitten way of thinking/making things.) ;)

   • Embed this notice
     Alien (alien@mastodon.green)'s status on Tuesday, 06-Aug-2024 04:01:35 JST Alien

     in reply to

     @aral as a side note, when I tried on my phone, the main figure changed when changing the mood. Meaning that if I had, for example "human cat", and used the slide to change the mood, suddenly an once cream, a human dinosaur or something random would appear instead. But the title would still say "human cat"

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 04:05:35 JST Aral Balkan

     in reply to

     • Coralie Renée

     @globcoco Yep, I just noticed a bug that means that everyone’s sharing the same state right after I posted it. Oops… :)

   • Embed this notice
     Coralie Renée (globcoco@mamot.fr)'s status on Tuesday, 06-Aug-2024 04:05:37 JST Coralie Renée

     in reply to

     @aral

     That is cute! And a cat appears randomly when you use the back and forth button.

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 04:08:41 JST Aral Balkan

     in reply to

     Just added a webhook (a recent Kitten feature) so that when I push to the Kitten Kawaii repository on Codeberg after fixing this shared state bug, the site will automatically update :)

     #Kitten #webhook #git #workflow

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 04:58:29 JST Aral Balkan

     in reply to

     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

     #Kitten #kawaii

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 05:00:15 JST Aral Balkan

     in reply to

     (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.) :)

     https://kitten.small-web.org/tutorials/streaming-html/

     #Kitten #SmallWeb #StreamingHTML #web #dev

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 05:01:40 JST Aral Balkan

     in reply to

     • ⊥ᵒᵚ⁄Cᵸᵎᶺᵋᶫ∸ᵒᵘ ☑️

     @falken Hey, It Worked On My Machine™ ;P

   • Embed this notice
     ⊥ᵒᵚ⁄Cᵸᵎᶺᵋᶫ∸ᵒᵘ ☑️ (falken@qoto.org)'s status on Tuesday, 06-Aug-2024 05:01:41 JST ⊥ᵒᵚ⁄Cᵸᵎᶺᵋᶫ∸ᵒᵘ ☑️

     in reply to

     @aral sorry! Lol

   • Embed this notice
     DNA schedule (ryanprior@mastodon.social)'s status on Tuesday, 06-Aug-2024 05:18:58 JST DNA schedule

     in reply to

     @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?

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 05:18:58 JST Aral Balkan

     in reply to

     • DNA schedule

     @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.

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 05:24:33 JST Aral Balkan

     in reply to

     • Coralie Renée

     @globcoco You could screenshot it, I guess :)

     I still want to add a few more things. Perhaps a download of the configured SVG might be one of them.

   • Embed this notice
     Coralie Renée (globcoco@mamot.fr)'s status on Tuesday, 06-Aug-2024 05:24:35 JST Coralie Renée

     in reply to

     @aral

     Can you create avatars from it?

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 05:27:57 JST Aral Balkan

     in reply to

     • DNA schedule

     @ryanprior I’m already thinking about how to maintain page-level state (as opposed to session-level or global state) in your 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.

   • Embed this notice
     DNA schedule (ryanprior@mastodon.social)'s status on Tuesday, 06-Aug-2024 05:27:58 JST DNA schedule

     in reply to

     @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.

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 17:29:04 JST Aral Balkan

     in reply to

     • Christian Tietze

     @ctietze I need to add a bit with information on the API (Elizabet’s original has that, I just haven’t gotten round to it.) If you’re using them in your own apps, you can just pass any hex colour to the `colour` (note the ‘u’) attribute :)

   • Embed this notice
     Christian Tietze (ctietze@mastodon.social)'s status on Tuesday, 06-Aug-2024 17:29:05 JST Christian Tietze

     in reply to

     @aral That's nice! Custom colors when? :)

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 17:29:57 JST Aral Balkan

     in reply to

     • Quenti ✨:oc: ⏚

     @Quenti Merci.

   • Embed this notice
     Quenti ✨:oc: ⏚ (quenti@framapiaf.org)'s status on Tuesday, 06-Aug-2024 17:29:58 JST Quenti ✨:oc: ⏚

     in reply to

     @aral ooh trop chouette !

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 20:44:19 JST Aral Balkan

     in reply to

     Following the data scope bug I fixed yesterday, I just added a new feature to Kitten to make this sort of bug more difficult to introduce into your apps.

     Introducing: page storage (server-side, ephemeral page-scoped data).

     This is available only for the Streaming HTML workflow and the scope is shared between your page route and on your onConnect() handler. It’s great if you want state per page instead of per session, etc.

     New data scopes docs: https://kitten.small-web.org/reference/#data-scopes

     #Kitten #PageStorage

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 06-Aug-2024 20:47:19 JST Aral Balkan

     in reply to

     You should now get per-page state for the Kitten Kawaii example:

     https://kitten-kawaii.small-web.org

     See diff with the session-based fix I implemented yesterday:

     https://codeberg.org/aral/kitten-kawaii/commit/211ce86ab5d77fba0b511a4640d54f54a4629dc8

     For more information on Kitten’s Streaming HTML workflow, see this tutorial:

     https://kitten.small-web.org/tutorials/streaming-html/

     PS. I also improved the handling of dynamically-added HTML attributes in Kitten’s HTML parser in the process.

     Enjoy!

     :kitten: 💕

     #Kitten #KittenKawaii #SmallWeb #StreamingHTML #hypermedia #htmx #WebSockets #web #dev