home.social

#hypermedia — Public Fediverse posts

Live and recent posts from across the Fediverse tagged #hypermedia, aggregated by home.social.

  1. 🥳 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

  2. 🥳 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

  3. Rich and balanced comparison of the performance of SPA and hypermedia based web app with interesting findings 👏 The post includes limitations/caveats along with balanced when-to-use recommendations 👍

    #SPA #web #hypermedia #performance

    zweiundeins.gmbh/en/methodolog

  4. This year you can meet both our organizers at #springio25 in Barcelona🥳
    @thjanssen123 will do a full day workshop about #spring data #jpa and a regular session why spring data jpa might the cause of death for your application. @atomfrede will do a talk about how #hypermedia and #htmx can simplify your everyday #webDevelopment

    Who else will be there? #SpringData #springboot #java #community #hibernate

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

    vimeo.com/1050714714

    ¹ kitten.small-web.org
    ² Place is in early development at the moment (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

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

    vimeo.com/1049055406

    Learn more about Kitten:

    kitten.small-web.org

    If you like what you see and want us to keep existing, we could definitely use your support:

    small-tech.org/fund-us/

    :kitten:💕

    #Kitten #SmallWeb #SmallTech #StreamingHTML #objectOriented #eventBased #hypermedia #htmx #WebSocket #HTML #JavaScript #CSS #NodeJS

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

    ¹ codeberg.org/place/app

    #Kitten #StreamingHTML #SmallWeb #htmx #hypermedia #WebSockets #web #dev #eventDriven #objectOriented #JavaScript #NodeJS

  8. (As such, I’ve sadly had to turn off the built-in HTML validator’s no deprecated attributes rule¹ as using a `name` attribute on an anchor tag is a valid use case in Kitten’s Streaming HTML workflow² if you want to trigger an action based on link activation.)

    ¹ html-validate.org/rules/no-dep
    ² kitten.small-web.org/tutorials

    #Kitten #SmallWeb #HTML #validation #anchors #name #hypermedia #htmx

  9. How to choose the right API style and technology for your software architecture

    redhat.com/architect/api-style

    "The key aspect of these five API styles is that there is no "best style." When choosing an API style, it all boils down to the following three classes: problem, consumers, and context." -- #BoburUmurzokov #RedHat

    #api360 #Resource #Hypermedia #Query #Tunnel #EventBased