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

GIF

$Screenshot of code. The showPageEvent method is highlighted. onAddToPage () { this.addEventHandler(kitten.events, `kittenPageEvent-${this._page.id}`, this.showPageEvent) } /** Stream new page event details to top of the events list, hiding the placeholder if necessary. @param {{ name: string, data: {HEADERS: any} }} event */ showPageEvent (event) { delete event.data.HEADERS // Hide placeholder if necessary. if (this.placeHolderIsVisible) { this.page.send(kitten.html` <tr id='placeholder-${this.id}' swap-target='delete'> `) this.placeHolderIsVisible = false } // Send the new event row with event details. this.page.send(kitten.html` <tbody id=${this.id} swap-target='afterend:#${this.id}'> <tr> <td>${event.name}</td> <td>${util.inspect(event.data)}</td> </tr> </tbody> `) } } class Pages extends kitten.Component { html() { // We could just display a “loading” message here // as we’re going to refresh the list at onConnect(), // but given how fast it all happens, we might was well // send the whole list instead of having an odd flash. const pages = Object.values(kitten.pages)$

#Kitten #StreamingHTML #SmallWeb

**Aral Balkan** @aral@mastodon.ar.al · Jan 12

Jan 12

Aral Balkan @aral@mastodon.ar.al

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/

Screenshot of code. Highlighted section:

/** @param {Data} data */
const isValid = data => typeof data === 'object' && typeof data.rowIndex === 'number' && typeof data.columnIndex === 'number' && data.rowIndex >= 0 && data.rowIndex <= rows.length-1 && data.columnIndex >= 0 && data.columnIndex <= rows[0].length-1

/** @param {Data} data */
export function onPixel (data) {
if (!isValid(data)) return
rows[data.rowIndex][data.columnIndex]++
if (rows[data.rowIndex][data.columnIndex] === colours.length) {
rows[data.rowIndex][data.columnIndex] = 0
}
this.everyone.send(kitten.html`
<${Pixel} rowIndex=${data.rowIndex} columnIndex=${data.columnIndex} pixelColourIndex=${rows[data.rowIndex][data.columnIndex]} />
`)
}

const Pixel = ({ rowIndex, columnIndex, pixelColourIndex }) => kitten.html`
<button
id='pixel-${rowIndex}-${columnIndex}'
aria-label='pixel-${rowIndex}-${columnIndex}'
name='pixel'
style='

#Kitten #SmallWeb #hypermedia

**Anton Stöckl** @TonyBologni@mastodon.social · Nov 21, 2024

Nov 21, 2024

Anton Stöckl @TonyBologni@mastodon.social

Hey folks!
I‘m looking for new professional opportunities from February 25 on!
If your org is hiring or you have recommendations … shoot me a message, please!

#dddesign #golang #hexagonal #eventsourcing #cqrs #eventdriven #tdd

Reposts very much appreciated!

**Colin McNaughton** @cloin@techhub.social · Jun 16, 2023 *

Jun 16, 2023 *

Colin McNaughton @cloin@techhub.social

Just finished an exciting demo on bridging observability and automation using Event-Driven @ansible and #Dynatrace. We automated responses to events in real-time to remediate an issue on the fly, and logged an incident for later review!

Check out the video https://www.youtube.com/watch?v=7i_EzHyrKQc

GIF

#eventdriven #ansible #observability

Recent searches

Search options

Administered by:

Server stats:

#eventdriven