Lmst

👋🤓 Goodbye Site.js, Hello Kitten!

I started working on creating a Small Web¹ server (a peer-to-peer Web server) six years ago² with Site.js.

Building Site.js was my first attempt. And it resulted in:

• Auto Encrypt (automatic Let’s Encrypt certificates): https://codeberg.org/small-tech/auto-encrypt

• Auto Encrypt Localhost (automatic localhost TLS certificates): https://codeberg.org/small-tech/auto-encrypt-localhost

• @small-tech/https (drop-in Node.js https module replacement with automatic TLS certs everywhere): https://codeberg.org/small-tech/https

• JSDB: In-process, in-memory JavaScript database that persists to append-only JavaScript logs: https://codeberg.org/small-tech/jsdb

As Site.js reached an evolutionary dead-end, and as I learned from my experiements with replicated data types that replicated data types are *not* a prerequisite for a decentralised web (actual topological decentralisation and ease of use are), I started writing a new server/platform called Kitten from scratch while still making use of the tried and tested modules listed above.

Last week, I switched over our last site using Site.js to Kitten and, with that, today I’ve sunset³ Site.js:

https://sitejs.org

For its successor, please see Kitten:

https://kitten.small-web.org

If you want to support our work at the Small Technology Foundation, please consider becoming a patron:

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

:kitten:💕

¹ https://ar.al/2024/06/24/small-web-computer-science-colloquium-at-university-of-groningen/
² https://ar.al/2019/08/26/introducing-small-technology-foundation/
³ Using our instance of Look Over There!: https://look-over-there.small-web.org

#SiteJS #SmallWeb #SmallTech #peerToPeerWeb #SmallTechnologyFoundation #AutoEncrypt #AutoEncryptLocalhost #JSDB #JavaScriptDatabase #https #TLS

Detail of Site.js web site:
Illustation of woman lying down with laptop. On screen is a twig with two green leaves.

Site.js
Small Web construction set.
Site.js is deprecated and no longer being actively maintained. Much of it lives on in Kitten.

New Kitten Release 🥳

• New: Any attributes present in a <markdown> tag are now passed to the first rendered element. (This is useful if you want to add some quick inline styles to a <p> that’s rendered from markdown, etc., but for anything more complicated, you should likely just jump into HTML.)

To learn more about Markdown in Kitten, please see the Markdown reference¹.

Enjoy!

:kitten:💕

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

#Kitten #SmallWeb #PeerToPeerWeb #KittenRelease #markdown #web #dev

New Kitten Release 🎉

• Fix: morph attributes¹ now support interpolated values.

https://kitten.small-web.org

Enjoy!

:kitten:💕

¹ The morph attribute is Kitten’s shorthand for the hx-swap-oob attribute of htmx, which Kitten uses – and extends – under the hood. To learn more about it, see Kitten’s Streaming HTML tutorial: https://kitten.small-web.org/tutorials/streaming-html/

#Kitten #SmallWeb #PeerToPeerWeb #KittenRelease #htmx #hypermedia #web #dev

New Kitten Release 🎉

https://kitten.small-web.org

Added:

• Support for local redirects and domain redirects (former will eventually have interface in Settings, latter can be programmatically used or, more likely, will be used via a small app I’m about to release next).

Fixed:

• Event bubbling in class-based Kitten pages and components is now correctly limited to just the event target if the component’s id starts with Kitten’s automatically generated universally-unique ID for the component.

• Fixed regular expression matching Kitten components in Markdown pages so it correctly captures self-closing components when followed by components with slotted content.

• The Kitten-specific trigger() mixin on the client-side WebSocket now correctly adds the contents of the data attribute on the triggering node to the data property received by the server-side event handler. This gives manually-triggered event handlers the same interface as automatically-triggered ones. (Previously it would create a separate `data` object in the received argument.)

Stay tuned for the a small and useful app release later today for web archiving/combatting link rot :)

Enjoy!

#Kitten #SmallWeb #PeerToPeerWeb #KittenRelease #web #dev

@networkstring Just a heads up that peer-to-peer Small Web web sites running Place¹ will not be subject this or other similar laws as there is no “user generated content” on them and each web site merely holds the data created by its owner, who is responsible for the content and with complying with local laws, etc., themselves (and their ISPs and web hosts are responsible in turn, in their local jurisdictions, for the content they host).

What’s the Small Web, you ask?

👉 https://ar.al/2024/06/24/small-web-computer-science-colloquium-at-university-of-groningen/

💕

¹ https://codeberg.org/place/app

#SmallWeb #peerToPeerWeb #SmallTech

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

#Kitten #Domain #Place #SmallWeb #SmallTech #humanRights #democracy #technology #peerToPeer #peerToPeerWeb #web #dev #JavaScript #HTML #CSS #NodeJS #htmx #WebSocket #objectOriented #eventBased #hypermedia

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.

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://vimeo.com/1050714714

¹ 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

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!

:kitten:💕

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

#Kitten #SmallWeb #PeerToPeerWeb #web #server #framework #platform #design #usability #errorMessages #authoring #dev #JavaScript #HTML #CSS #htmx #hypermedia #WebSocket #StreamingHTML #SmallTech

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

I’m going to present a talk on Small Web at the Dub|Sec meetup this Wednesday (October 30th at 6:30PM). The event takes place at The Camden Court Hotel in Dublin.

Pop by and say hi if you’re around.

https://www.meetup.com/dub-sec/events/303879614

#SmalWeb #peerToPeerWeb #Ireland #meetup #dublin #dubsec #Kitten #Domain #Place #NodeJS #HTML #CSS #JavaScript #htmx #WebSockets #web #dev