#websocket

New Kitten release

¹ https://kitten.small-web.org/reference/#icons

• New: Lovely new icons¹ and new callouts in Kitten Settings²

• New: Markdown now supports attributes and bracketed spans³

• New: client-side `kitten` global with `trigger` function for triggering events on the server from the client. (Useful when streaming client-side JavaScript when using Kitten’s Streaming HTML⁴ workflow. e.g., when you have to use a client-only web API like the Clipboard API but you want to keep all your logic on your server-side page.⁵)

• Fixed: The bound render function returned by `KittenComponent` class’s `component` getter now correctly awaits asynchronous templates. (In Kitten, you don’t have to care whether your templates contain promises. Kitten handles all that for you.)

Enjoy!

² https://mastodon.ar.al/@aral/114381983893061099

³ https://kitten.small-web.org/reference/#markdown-support (also see https://mastodon.ar.al/@aral/114381462302862256)

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

⁵ e.g., See how I use this to implement a copy to clipboard button in the database page of Kitten’s Settings: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/db/index.page.js#L33 Of course, you don’t have to use this and you can just write client-side JavaScript or use the built-in Alpine.js integration. e.g., how I do it on the (older) settings/identity page: https://codeberg.org/kitten/app/src/branch/main/web/%F0%9F%90%B1/settings%F0%9F%94%92/identity/index.page.js#L7

#Kitten #SmallWeb #web

**Aral Balkan** @aral@mastodon.ar.al · Feb 27 *

Feb 27 *

New Kitten Release

• Automatic message routing: if the element that triggers an event on the client does not have a `name` attribute, Kitten now falls back to using its `id` instead to route the event to the correct server-side event handler on your live Kitten pages.

If neither attribute exists, Kitten will fail to route the message but no longer crash as it was due to a regression introduced when I implemented support for colons in element names.¹

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

For more details on Kitten’s live pages and automatic message routing, please see the Streaming HTML tutorial:

Enjoy!

¹ A colon in an element name is ignored for message routing purposes, letting you, for example, give unique names to <details> elements, allowing more than one to be open at a time, while having their events be handled by the same handler.

**Aral Balkan** @aral@mastodon.ar.al · Feb 17

Feb 17

New Kitten release

• Fixes issue with routes where dynamic routes with file names that had more than two extensions were not recognised as the correct type of route. e.g., A route called index.xml.get.js would previously have been treated as a static route instead of a dynamic GET route.

¹ https://kitten.small-web.org/reference/#valid-file-types
² https://kitten.small-web.org/tutorials/dynamic-pages/

For more details, see the Valid File Types section of the Kitten reference¹ and the Dynamic Pages tutorial².

Enjoy!

#Kitten #SmallWeb #server

**Symfony Station** @SymfonyStation@drupal.community · Feb 17

Feb 17

Symfony Station @SymfonyStation@drupal.community

Golems GABB: Drupal and WebSocket for Real-time Data Rendering. #drupal #WebSocket
https://gole.ms/blog/drupal-and-websocket-real-time-data-rendering

gole.msDrupal and WebSocket for Real-time Data RenderingEnhance your Drupal website with real-time updates using WebSockets! Improve performance, enable instant data exchange, and optimize rendering for chat apps, live notifications, and more. Discover how WebSockets can supercharge your Drupal project today

**Aral Balkan** @aral@mastodon.ar.al · Feb 14 *

Feb 14 *

New Kitten release

• You can now use key paths in the names of your client-side live components and these will automatically be transformed into object hierarchies on the server for you.¹

• Self heals zombie live pages (see Streaming HTML workflow²) if they return to life due to client-side browser cache.³

• Removes htmx⁴ headers from `data` property into separate `header` property in Kitten Page events and the data your Kitten Page message handlers receive.

• Automatically passes references to the live page object (if any) and the request and response objects to the layout templates of Markdown pages⁵ (so you can, for example, check if `request.session.authenticated`⁶ is true from the your layout template and customise the layout accordingly).

Enjoy!

¹ e.g., See https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L356 (markup) and https://codeberg.org/small-tech/site/src/branch/kitten/admin%F0%9F%94%92/news/index_%5Boptional-postId%5D.page.js#L173 (handler) and https://codeberg.org/small-tech/site/src/branch/kitten/app_modules/database/database.js#L95 (model class method).

² See Streaming HTML tutorial: https://kitten.small-web.org/tutorials/streaming-html/ (There’s actually more to it now but I haven’t had a chance to document the new class-based and event-driven live page workflow yet. It’s experimental but working very well for me so far so I will do so shortly.)

³ When a person leaves a live/connected page (a page connected to its default web socket), we clean up and remove that live page from memory. However, browsers being what they are, cache the page on the client. If a person uses the back/forward buttons to return to the page, the browser will serve the cached source from memory, which has the old page ID, for the page that no longer exists in Kitten’s memory. So now we have a problem. The only way to recover from this is to tell the page to reload itself. So we accept the WebSocket connection, send a command to the page for it to reload itself, and then close the socket. That makes the stale page self heal by replacing itself with a fresh one. Yay, go us!

⁴ HTMX: https://htmx.org

⁵ Kitten Markdown pages reference: https://kitten.small-web.org/reference/#markdown-pages-page-md-files

⁶ See Session tutorial: https://kitten.small-web.org/tutorials/sessions/

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

Jan 29 *

May I just say so myself that I‘m loving playing with Kitten¹ to build Domain² (shown below) and Place³.

¹ https://kitten.small-web.org
² https://codeberg.org/domain/app
³ https://codeberg.org/place/app

Screenshot of code in Heilx editor on MacOS (index.page.js is active with other inactive tabs showing: another index.page.js, Settings.fragment.css, Navigation.fragment.js, Navigation.component.js, Place-)

Visible code listing is in the next post due to arbitrary Mastodon character limits on alt text.

Screenshot of dev.ar.al/settings/places: Places – This is the list of Small Web places that are currently being hosted by you. Nothing yet. Why not create one (last two words are a link). The navigation shows a title, Settings, and list of links: Sign out, 🐱 Kitten Settings, Places (sub heading), View (selected), Create, Import & Export, Pre-warmed, Troubleshoot, Setup (sub heading), Checkmark: Organisation, Checkmark: Applications.

Screenshot of dev.ar.al/settings/places/import-export/. Navigation is same as before only with Import & Export selected.

Import & Export (heading)
Import (sub heading)

Import the domain data you exported from a different Domain instance. The domains will be added to the existing list of places here. Duplicates will be discarded.

Callout: 💡 Both instances must be reachable from the same domain name. (This feature is meant to be used during development to move places between multiple computers all mapped to the same domain.)

Label: Domains to import (json)
Button: Choose File
Chosen file: domains-dev.ar...x-desktop.json

Import complete! (Sub heading)

Table: Domains
Found: 5
Imported: 5
Ignored (duplicates): 0

View places (link)

Screenshot of dev.ar.al/settings/places/import-export/. Navigation is same as before with View selected.

Places

This is a the list of Small Web places that are currently being hosted by you.

Table with column headings Domain, Application, and Actions
There are 5 rows.

The Application and Actions rows all have the same content, Custom (link) for the former, and View and Delete (links) for the latter.

The domain rows contain: laura-portfolio, kitten, draw-together, accessibilityforeveryone, and kitten-kawaii.

#Kitten #Domain #Place

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

Jan 25 *

https://vimeo.com/1050348456

New Kitten¹ update

Experimental:

• Adds `data` property to Kitten components

• Adds swap target to `page.send` so you can have an element added before, after, as first child of, or as last child of another (this is syntactic sugar over htmx and works around some of the complexities with out-of-band swaps in htmx, especially when streaming table rows to tables).

Also, check out the latest live page and page events state view in Kitten’s Settings (every Kitten app has this settings view).

¹ https://kitten.small-web.org

VimeoKitten settings: page and events statesA brief demo of the live state updates for live pages and page events in Kitten’s settings, implemented using the new and experimental object/event-based component…

#Kitten #SmallWeb #OOP

Continued thread

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

Jan 22

#Kitten #SmallWeb #PeerToPeerWeb

So last night, while recording the preview of Kitten’s¹ improved component model², I made a silly mistake (copying raw HTML into a JavaScript function instead of wrapping it in a kitten.html`` tagged template, easy to do when you’re refactoring to pull out components from pages).

Then, once I figured out what I’d done, I made another one by forgetting to return the value from the function (easy to do when you’re used to using one-line closures as render functions).

I would have caught both of those so much faster if Kitten had helpful error messages for those two pitfalls. And guess what, this morning, it does :)

Attached are screenshot showing the before and after error messages.

Enjoy!

¹ https://kitten.small-web.org
² Scroll up the thread to watch the video.

Screenshot of first error message (before):

500 TypeError: Cannot read properties of undefined (reading 'match')

Screenshot of first error message (after):

Error: Render function did not return kitten.html``

class Count extends kitten.Component {
html {
kitten.html`<h1 morph>${kitten.db.counter.count}</h1>`
}
onIncrement {
kitten.db.counter.count++
this.update
}
}

Screenshot of second error message (before):

500 SyntaxError: Unexpected token '<

Screenshot of second error message (after):

500 SyntaxError: Unexpected token '<

(Did you put raw HTML inside a function by mistake instead of wrapping it in a kitten.html`` tagged template?)

Continued thread

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

Jan 21 *

https://vimeo.com/1049055406

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:

https://small-tech.org/fund-us/

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

VimeoKitten: Improved component model previewA short preview of the object-oriented and event-based authoring options in Kitten’s improved component model. The changes are in Kitten at the moment but…

Replied in thread

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

Jan 20

https://codeberg.org/kitten/app/src/branch/main/examples

@lumen Hey, thanks so much :)

The main two apps that will initially be using it are Place (https://codeberg.org/place/app) and Domain (https://codeberg.org/domain/app) — both under heavy development at the moment.

There are some mini apps I made that you can play, each with their own tutorial.

• Draw Together (https://draw-together.small-web.org; tutorial: https://kitten.small-web.org/tutorials/streaming-html/)
• Kitten Kawaii (https://kitten-kawaii.small-web.org/character/blissful/granny-smith-apple/cat/, write up: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/)
• Streamiverse¹ (https://streamiverse.small-web.org, tutorial: https://kitten.small-web.org/tutorials/htmx-the-htmx-web-socket-extension-and-socket-routes/)

And you can find a host of little examples in the codebase:

Hope that helps. Until the Small Web stuff is publicly released I don’t really foresee a lot of folks using it. Although I know a few people are playing with it.

¹ Just noticed I need to improve it so it recaches profile images if they’ve changed. Noticed a couple of broken ones.

Codeberg.orgappPlace: a Small Web social network. (A peer-to-peer Web/personal web social network.)

Continued thread

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

Jan 20 *

New Kitten release

• Live events view in //settings/state/pages
• Fix automatic event handler binding

https://kitten.small-web.org/tutorials/streaming-html/#o-counter-my-counter

I’ve also updated the Kitten Count example in the Streaming HTML tutorial to use the new, simpler, event handler syntax in the improved (and experimental) Kitten component model. There’s more to the latter (e.g., class-based routes) that’s not documented yet but will be soon.

Enjoy!

Continued thread

**Aral Balkan** @aral@mastodon.ar.al · Nov 22, 2024

Nov 22, 2024

https://kitten.small-web.org/tutorials/htmx-the-htmx-web-socket-extension-and-socket-routes/

Streamiverse is written in Kitten and you can follow the “htmx, the htmx WebSocket extension, and socket routes” tutorial to create a Kitten app that consumes the API:

To get started with Kitten, see:

#nginxreverseproxy #nginx #server
#websocket #ntfy

(Could be a fun little thing to play with this weekend.)

#Kitten #SmallWeb #htmx

**Skalli** @Skalli@dresden.network · Oct 6, 2024

Oct 6, 2024

Skalli @Skalli@dresden.network

Kennt sich zufällig jemand mit Nginx als Reversproxy aus?
Habe seit längerem mehrere Services dahinter am laufen , nur der websocket für Ntfy macht Probleme.

**Aral Balkan** @aral@mastodon.ar.al · Aug 12, 2024

Aug 12, 2024

¹ https://kitten.small-web.org

Kitten¹ update

I just added a new htmx header to #WebSocket messages in Kitten that contains the actual event type (name) that triggered the message.

This is useful, for example, if your trigger is a horizontal swipe and you need to differentiate between whether it was a swipe left or a swipe right that caused it.

Upstream issue: https://github.com/bigskysoftware/htmx-extensions/issues/74

Upstream merge request: https://github.com/aral/htmx-extensions/commit/359da12563fd0ef6709d801972f98ba1ab61c302

Enjoy!

GitHub[ws] [ECR] Ability to differentiate response based on triggering event · Issue #74 · bigskysoftware/htmx-extensionsBy aral

#Kitten #htmx #hypermedia

Replied in thread

**Aral Balkan** @aral@mastodon.ar.al · May 14, 2024

May 14, 2024

Aral Balkan · Mar 8, 2024Streaming HTMLSorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player. Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today. Kitten, uniquely, enables you to build Small Web apps (peer-to-peer web apps).

Also, not immediately relevant to your current issue but something that might be worth considering for the future: using the htmx websocket extension, you can basically implement a streaming HTML approach (example using Kitten: https://ar.al/2024/03/08/streaming-html/) where you can just stream errors to the page as they happen.

#htmx #webSocket #Kitten #SmallWeb #StreamingHTML #errorHandling (2/2)

**Mike Kuketz** @kuketzblog@social.tchncs.de · Apr 16, 2024

Apr 16, 2024

Mike Kuketz @kuketzblog@social.tchncs.de

Neue Zeile in der Messenger-Matrix ergänzt: »Unterstützte Push-Benachrichtigungsdienste«. Ich habe nicht zu jedem Messenger ausreichend Informationen gefunden, daher wäre es lieb , wenn ihr dazu Feedback abgebt. Korrekturen nehme ich gerne vor.

https://www.messenger-matrix.de/messenger-matrix.html

www.messenger-matrix.deMessenger-Matrix • Kuketz IT-Security BlogMessenger: Vergleich sicherheits- und datenschutzrelevanter Eigenschaften von Messengern

#push #google #apple

**Mike Kuketz** @kuketzblog@social.tchncs.de · Apr 8, 2024

Apr 8, 2024

Mike Kuketz @kuketzblog@social.tchncs.de

Nach gut drei Wochen Test kann ich sagen: Die #UnifiedPush Version von #Molly (Signal Fork) funktioniert prima. Eine Benachrichtigung über neue Nachrichten erfolgt via #ntfy. Fazit: Akku-Verbrauch ist (deutlich) geringer als mit #WebSocket bei Signal. Insbesondere im Mobilfunknetz. Allerdings muss jeder selbst entscheiden, ob er einen Fork nutzen möchte.

#signal #molly #ntfy #unifiedpush #messenger #fork

https://github.com/mollyim/mollyim-android-unifiedpush

GitHubGitHub - mollyim/mollyim-android-unifiedpush: Molly with UnifiedPush support.Molly with UnifiedPush support. Contribute to mollyim/mollyim-android-unifiedpush development by creating an account on GitHub.

**Aral Balkan** @aral@mastodon.ar.al · Mar 26, 2024 *

Mar 26, 2024 *

VimeoLet’s build Draw Together… umm, together.By Small Technology Foundation

Let’s build Draw Together… umm, together.

Video: https://vimeo.com/927628184

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

Play with it: https://draw-together.small-web.org

#DrawTogether #Kitten #SmallWeb

Continued thread

**Aral Balkan** @aral@mastodon.ar.al · Mar 24, 2024

Mar 24, 2024

https://codeberg.org/aral/draw-together#draw-together

I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)

Codeberg.orgdraw-togetherA very simple Kitten toy in ~60 lines of code for drawing together on a 20×20 grid.

#DrawTogether #Kitten #SmallWeb

Continued thread

**Aral Balkan** @aral@mastodon.ar.al · Mar 21, 2024 *

Mar 21, 2024 *