Friendica Social Network

Very excited about the new stateful components model in Kitten¹ that I’m looking forward to releasing this week (finally) and the amount of visibility you can now get into the flow of your Kitten apps in the Kitten Interactive Shell (REPL)².

Since the new model is a breaking change (Kitten is prerelease) I’m in the middle of updating our own apps/sites and I still need to document everything. So it will take me a few days to do all that but then I’m very much looking forward to focussing on finishing up Catalyst and Yarn³ for launch this year.

It’s been a six year trek to reach what will essentially be the starting point of the Small Web :)

💕

PS. If you want to support our work, please see small-tech.org/fund-us/

¹ kitten.small-web.org
² kitten.small-web.org/tutorials…
³ ar.al/2024/06/24/small-web-com…

#SmallWeb #Kitten #web #dev #statefulComponents #streamingHTML #hypertext #webSockets

Screenshot of the Kitten REPL running in WezTerm:

🐢 Kitten Interactive Shell (REPL) ctrl-d to exit; .help for assistance.

Key
🐱 Kitten 📄 Page 🛜 Server event
🧩 Component ◉━◉ Connected ◉╌◌ Disconnected

🐱 💬 kitten.$showEventsOnTable('counter')

undefined

🐱 💬

📄 → 🐱: Client event

« update » Counter (KittenComponent) c9333a86
{
update: '',
value: 1,
_componentId: 'kid-c9333a86-208f-468a-93f6-c6c706a13148'
}

💾 Counter updated in memory.

{ count: 41 } => count = 42

🐱 → 📄: Streaming HTML

<div data-kitten-component id="kid-c9333a86-208f-468a-93f6-c6c706a13148" hx-swap-oob="morph" hx-ext="morph">
<div aria-live="assertive">42</div>
<button name="update" aria-label="decrement" ws-send hx-ext="ws" hx-vals="js:{value: -1}">-</button>
<button name="update" aria-label="increment" ws-send hx-ext="ws" hx-vals="js:{value: 1}">+</button>
<style inline>@scope { div { font-size: 3em; margin: 0.25em 0; } }</style>
</div>

💾 Counter table update.

kitten.db.counter.count = 42

Persisted as:

'_[[`count`]] = 42;\n'

Small Web: computer science colloquium at University of Groningen

Download the video and watch it with your favourite video player. Recording1 of the live stream of a computer science colloquium on the Small Web I presented at the University of Groningen on June 11th, 2024.

^{Aral Balkan}

#dev #web #SmallWeb #kitten #statefulcomponents #streaminghtml #hypertext #websockets

in reply to Aral Balkan

Darshak Parikh

in reply to Aral Balkan • 1 week ago • •

Yet to try out Kitten, but from the looks of it, it will be a joy to program in. REPL-driven development gives such a good feedback cycle, I'm glad Kitten has that.

Already supporting STF, thank you for all your work!

in reply to Aral Balkan

Aral Balkan

in reply to Aral Balkan • 1 week ago • •

PS. The updated component render you’re seeing streamed to the browser in the previous screenshot is the code rendered by Kitten (showing the underlying HTMX internals, etc.)

The code you write in Kitten is considerably less complicated.

The attached screenshot is all the code in the simple counter example (all in one file, index.page.ts). To run it, you’d just run `kitten` in the directory that file is in and then hit https://localhost.

#SmallWeb #Kitten #web #dev #statefulComponents #streamingHTML #hypertext #webSockets

Screenshot of Helix Editor showing all the code (52 lines) for the stateful counter example, split across two panes so it can be shown at a larger font size:

/**
Type-safe counter example using stateful Kitten components.
*/
import kitten from '@small-web/kitten'

// Declare database schema and initialise, if necessary.
type Schema = { counter?: { count: number } }
const database = (kitten.db as Schema).counter ??= { count: 0 }

export default class CounterPage extends kitten.Page {
counter

constructor () {
super()
this.counter = this.addChild(new Counter())
}

override html () {
return kitten.html`
<page css>
<h1>Counter</h1>
<${this.counter} />
`
}
}

class Counter extends kitten.Component {
override html () {
return kitten.html`
<div morph>
<div aria-live='assertive'>
${database.count}
</div>
<button name='update' connect data='{value: -1}' aria-label='decrement'>-</button>
<button name='update' connect data='{value: 1}' aria-label='increment'>+</button>
<style inline>
@scope {
div {
font-size: 3em;
margin: 0.25em 0;
}
}
</style>
</div>
`
}

onUpdate (data: { value: number } ) {
database.count += data.value
this.update()
}
}

#dev #web #SmallWeb #kitten #statefulcomponents #streaminghtml #hypertext #websockets

This entry was edited (1 week ago)

in reply to Aral Balkan

Layan🍉ayoub🇵🇸

in reply to Aral Balkan • 1 week ago • •

"Six years of work to reach this incredible point. A giant leap towards a self-contained and sustainable microweb." Congratulations, Oral! You deserve even more achievements🤍🕊️

in reply to Aral Balkan

Aral Balkan

in reply to Aral Balkan • 6 days ago • •

You also have some helpful new error messages to look forward to :)

#SmallWeb #Kitten #NodeJS #JavaScript #web #dev #statefulComponents #streamingHTML #hypertext #errorMessages

Screenshot of error message in Kitten (terminal output):

❌ Error: Cannot stream component update as component does not have a single root DOM node.

What your component update looks like currently:

<div id="counter" aria-live="assertive">3</div>
<style inline>#counter { color: green; }</style>
<style>#counter { font-size: 3em; margin: 0.25em 0; }</style>

What it would look like with a single root DOM node (e.g., a <div>):

<div>
<div id="counter" aria-live="assertive">3</div>
<style inline>#counter { color: green; }</style>
<style>#counter { font-size: 3em; margin: 0.25em 0; }</style>
</div>

#dev #web #javascript #nodejs #SmallWeb #kitten #statefulcomponents #streaminghtml #hypertext #errorMessages

This entry was edited (6 days ago)

in reply to Aral Balkan

Aral Balkan

in reply to Aral Balkan • 5 days ago • •

And here’s a real-world example of the lifecycle of an action performed on a local copy of the Gaza Verified web site¹ showing the event from the toggle button on the client being automatically mapped to the relevant event handler on the SignUpsSwitch Kitten component instance on the server and that handler setting a boolean on a JavaScript object in memory, which is automatically persisted to disk via Kitten’s default JSDB² database.

Note that Kitten is smart enough to automatically redact fields in the log output that look like they might be secrets.

All this is in the stateful-components-api-breaking-change branch³ at the moment and will be in the next release.

¹ gaza-verified.org
² codeberg.org/small-tech/jsdb
³ codeberg.org/kitten/app/src/br…

#SmallWeb #Kitten #web #dev #statefulComponents #streamingHTML #hypertext #GazaVerified

app

A web development kit that’s small, purrs, and loves you.

^Codeberg.org

#dev #web #SmallWeb #kitten #gazaverified #statefulcomponents #streaminghtml #hypertext

This entry was edited (5 days ago)

in reply to Aral Balkan

Layan🍉ayoub🇵🇸

in reply to Aral Balkan • 5 days ago • •

Seeing big technical and creative ideas come to life with every Kitten update is truly amazing. Attention to detail is what always makes the difference. All the best and much support to you @aral, keep up the great work!🤍🕊️🇵🇸🇵🇸 #SmallWeb #Kitten #GazaVerified

#SmallWeb #kitten #gazaverified @→@aral@mastodon.ar.al

in reply to Aral Balkan

Truth Collector

in reply to Aral Balkan • 5 days ago • •

Yes @Layan2002's right with the detail and so...

IDEA: Someone of reputation could launch their own respectful token (not currency but as #gift #exchange) as we agree most '#money' starts with nothing, #trust, or a #loan (coins / paper feel heavy as a material but useful when they can be exchanged) so why not #AralBalkan / a clever person to do the same, since we agree it can be made of nothing but by our respect for their work? And it's not for replacing all #Banks either.

Hmm...

#trust #banks #exchange #gift #loan #aralbalkan @Layan🍉ayoub🇵🇸

This entry was edited (5 days ago)

⇧

Aral Balkan 1 week ago • •

Aral Balkan
1 week ago • •