#streaminghtml — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #streaminghtml, aggregated by home.social.
-
🥳 New Kitten Release
• Fix: Events on `KittenComponent` hierarchies are now bubbled in reverse (from children down to parents). This provides for predictable event firing in cases where parents might emit events (e.g., a page emitting an event from its `onConnect()` handler). Your existing code should work as before with certain edge cases that might have broken before no longer breaking.
Enjoy!
:kitten:💕
#Kitten #KittenReleases #SmallWeb #SmallTech #web #dev #events #serverSide #eventBased #components #hypermedia #streamingHTML
-
🥳 New Kitten Release
• `KittenComponent` (and thereby `KittenPage`) gains an `emit()` method.
Use this to bubble events from your page to all child components or from any component to all of its child components.
This is useful, for example, for setting the state of a page or a component where each child component knows how to present itself for that state.
(That, in turn, is useful if you want to be able to restore state based on URLs.)
The naming convention-based mapping of event names to event handler names is the same as for the events you receive from the client. So an event called `myEvent` will result in `onMyEvent` handlers on child components being called.(Also update @small-web/kitten to version 7.1.0 to get language intelligence for the new method.)
Enjoy!
:kitten:💕
#Kitten #KittenReleases #SmallWeb #SmallTech #web #dev #events #serverSide #eventBased #components #hypermedia #streamingHTML
-
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://kitten.small-web.org
² Place is in early development at the moment (https://codeberg.org/place/app)#Kitten #SmallWeb #SmallTech #demo #developerExperience #developerTools #design #eventModel #events #memory #memoryLeaks #observerPattern #listeners #web #dev #HTML #CSS #JavaScript #NodeJS #server #platform #framework #WebSockets #hypermedia #htmx #StreamingHTML #place #peerToPeer #peerToPeerWeb
-
Little preview video: Kitten’s improved component model
• Class-based page routes and components
• Object-oriented
• Event-based
• Seamless hypermedia-driven WebSocket-based event mapping and interface updates (Streaming HTML)
• A light server-side live component hierarchy with event bubbling
• Almost as if you’re building a desktop or mobile app instead of a web app…… another authoring simplification made possible because on the Small Web – which is a peer-to-peer web – you build a web app/site as a tool for one person (the owner of the site/app) instead of as a tool for you to farm millions of people.
… still experimental ;)
Learn more about Kitten:
If you like what you see and want us to keep existing, we could definitely use your support:
https://small-tech.org/fund-us/
:kitten:💕
#Kitten #SmallWeb #SmallTech #StreamingHTML #objectOriented #eventBased #hypermedia #htmx #WebSocket #HTML #JavaScript #CSS #NodeJS
-
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
#Kitten #StreamingHTML #SmallWeb #htmx #hypermedia #WebSockets #web #dev #eventDriven #objectOriented #JavaScript #NodeJS