Today I learned…

1. there's a card game where you complete a task from Unix pipe commands: https://punkx.org/unix-pipe-game/ (via https://mamot.fr/@bearstech/114275843048191227)
2. there's a JavaScript x86 machine emulator so you can play that game without needing a real computer around: https://bellard.org/jslinux/tech.html
3. that JS VM gets network connectivity because someone decided to make a websocket-based VPN that passes Ethernet frames: http://www.benjamincburns.com/2013/11/10/jor1k-ethmac-support.html

New Kitten update

https://kitten.small-web.org

• Added `remove()` method to kitten.Component class. Use this when working with live pages and components and you want to remove a component from the page (or its parent). It will handle removing event listeners for you so you don’t end up with any memory leaks.

• Improved `update()` method so it similarly removes listeners on child components before updating the component itself in case you have class-based child components that will be reinstantiated on render.

• Updated the `send()` methods on `page.everyone` and `page.everyoneElse` so you can pass a swap target to insert the element being streamed to the page before, after, asFirstChildOf, or asLastChildOf another. (This was already there for the page.send() but now the two broadcast objects have the same consistent interface.

The @small-web/kitten npm package (Kitten’s types package) has also been updated to version 5.1.0 to reflect the latest changes.

(Remember that the new class and event-based page and component model is still experimental and largely undocumented and fully backwards compatible with the classic functional way of authoring your page routes and components.)

Enjoy!

> What started as an exploration into #WebSockets led us to a surprisingly effective "old-school" solution: #HTTP long polling with #Postgres

https://www.inferable.ai/blog/posts/postgres-nodejs-longpolling.mdx

A quick demonstration of using the State: Overview page in Kitten’s¹ settings while developing to keep an eye on your event and event listener counts to avoid memory leaks.

Notice how the events and listeners counts change as I navigate between the People and Settings pages in my Place² node and that they are consistent. If they were rising as I navigated back and forth I’d know I had a memory leak somewhere.

If you use Kitten’s built-in features (e.g., the `addEventHandler()` method on your `kitten.Component` subclasses, Kitten will handle adding and removing listeners for you automatically during your component’s lifecycle. You can also do so manually in your component’s automatically-called `onConnect()` and `onDisconnect()` event handlers.

This view is useful during development to ensure you don’t have any memory leaks as pages are loaded and unloaded.

https://vimeo.com/1050714714

¹ https://kitten.small-web.org
² Place is in early development at the moment (https://codeberg.org/place/app)

Pretty soon, you’re going to be able to view your live pages and the events on them in real time while developing Kitten apps.

The improved component model with support for class-based routes (and a server-side component hiearchy that lets you build well-encapsulated components and pages and work in an event-driven way) is coming along nicely and I’m back to writing Place¹ using it.

(In the GIF, you’re looking at Place’s profile settings page. Not shown here but those profile changes reflect in realtime on all open pages. The highlighted piece of code is what streams the event details to the browser.)

¹ https://codeberg.org/place/app

Feeling more like myself today after getting my ass kicked by this bug for the past few weeks and I’m finally making progress on improving Kitten’s¹ component model.

Soon, you’ll be able to implement page event handlers in an even simpler way than before. Is your connected DOM element named `pixel`? Then export an event handler called `onPixel()` on your page route and it’ll get called when that element triggers its event.

And there’s so much more coming, including a class-based page and component model with DOM-style event bubbling on the server. This should really let you make the most of the Streaming HTML² workflow in Kitten by writing event-driven GUI-like code but for a web app without really caring about the client/server separation.

Need to update the examples, test, test, test, and update docs but this had me stumped for a while now with several false starts and I feel this implementation might just be it

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

My takeaway from this is that #WebSockets are a poor choice for inter-process communication. Mostly because of the hoops they have to go through to work over HTTP.

If your client is a browser it's an acceptable trade-off because there are no real alternatives, but on the server you have lots of other options.

https://social.lansky.name/@hn50/113437743933717944

Today @ 18:30 in Dublin: Come hear me talk about the Small Web and watch me demonstrate the current state of Kitten, Domain, and Place.

https://meetu.ps/e/Ny9vK/H1WXJ/i

I’m going to present a talk on Small Web at the Dub|Sec meetup this Wednesday (October 30th at 6:30PM). The event takes place at The Camden Court Hotel in Dublin.

Pop by and say hi if you’re around.

https://www.meetup.com/dub-sec/events/303879614

Just added a code breakdown for the Draw Together¹ Kitten² app to my blog post with the tutorial video:

https://ar.al/2024/03/26/draw-together/

Draw Together, in ~50 lines of code, is a real-time collaborative drawing tool on a 20×20 pixel grid where people can click to toggle the colour of each pixel.

(The full source and explanations fit the four screenshots on this post.)

¹ https://draw-together.small-web.org
² https://kitten.small-web.org

Server-Sent Events are under-appreciated. I get that people are scared of them because each ties up one of six connections (browser-wide) to the domain. But that's only under http 1.1. Under http/2 you get 100 usually. So no biggie?

The advantages are: amazingly simple API. You can have something useful, with automatic reconnects, in a few lines of JS. #WebSockets almost always involve loading a 3rd party library to take care of all the tricky bits.

https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events

To keep my sanity a bit I've skipped Unreal Engine for today but instead messed around with #React and #Websockets

Just something small "multiplayer" in the web browser

Just added the Streaming HTML tutorial to the Kitten web site.

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

It’s called Streaming HTML because you stream HTML updates to the client via WebSockets. Kitten’s implementation makes this simple and fun to do.

The tutorial also goes deep, breaking down all of Kitten’s magic, and even showing you how to implement Streaming HTML *without* Kitten.

Enjoy!

Heads up: if you were playing with Kitten¹ on macOS, you might have noticed that some of the commands were exiting with a truncated header.

This has now been fixed and all commands should look and work exactly the same on macOS as they do on Linux.

¹ https://codeberg.org/kitten/app