Untitled attachment

Notices where this attachment appears

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 27-Mar-2026 00:28:50 JST Aral Balkan

   You know how you’re in the middle of a process and you refresh a web page and it loses state? So that sucks.

   With Kitten¹ – when using the new state-maintaining/class-based and event model-based component model – it’s easy to have flowing interfaces that animate between states, etc., that don’t lose state if you refresh the page (or open another tab).

   What you can’t do on the Web, however, is restore the state of any cross-origin iframes. (As you have no visibility into their contents to take a snapshot, etc.)

   This is something I ran into with the embedded Stripe component I’m using in Catalyst². Specifically, it has a success state that I want to restore so the interface, which uses selective disclosure and has animated to that step in the sign up process, doesn’t jump if you refresh it or look different if you open it in another tab.

   So what do you do if you’re obsessed with making things work as well as possible?

   Apparently, this:

   1. You go and manually save the HTML and relevant CSS
   2. You notice that it is ~371KB in size and you sigh
   3. You use a combination of automated and manual methods to whittle that down to a 4.2KB HTML/CSS snapshot of the state.
   4. You make that into a Kitten component³ so you can set the bits that are dynamic⁴
   5. You make sure that it matches the original exactly using PixelSnap 2 guides⁵ (see screenshot; and yes, I told you I’m obsessed) :)
   6. Et voila!

   🤷♂️

   ¹ https://kitten.small-web.org
   ² https://catalyst.small-web.org
   ³ https://kitten.small-web.org/tutorials/components-and-fragments/
   ⁴ https://codeberg.org/project-catalyst/app/src/commit/a3cf136f3670a9e2954a35d5b3aa227969f22eaf/sign-up/SuccessfulStripeSubscription.fragment.js
   ⁵ https://pixelsnap.com

   #Catalyst #SmallWeb #design #Stripe #iframes #stateRestoration #web #dev

2. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 11-Feb-2026 19:54:20 JST Aral Balkan

   in reply to

   @MichelPatrice Hi Michel,

   Sorry, I’ve been searching for it a little while now and can’t seem to find a link for it on the site (https://catalyst.small-web.org) or in the source (https://codeberg.org/project-catalyst/site).

   Could you give me a link to where you saw it?

   Thanks :)

3. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 11-Feb-2026 05:27:51 JST Aral Balkan

   🥳 JavaScript Database (JSDB)¹ version 7.0.0 released

   - *Breaking change* JSTable.PERSIST event now uses a parameter object with properties for `type`, `keypath`, `value`, `change`, and `table`. This should make listening for events on your databases much nicer to author. e.g., a snippet from Catalyst² I’m working on:

   ```js
   const settingsTable = db.settings['__table__']
   const JSTable = settingsTable.constructor

   settingsTable.addListener(JSTable.PERSIST, ({ keypath, value }) => {
   switch (keypath) {
   case 'servers.serverPoolSize':
   console.info('New server pool size requested', value)
   this.updateServerPool()
   break
   // etc.
   }
   })
   ```

   This new version of JSDB is not in the latest Kitten³ yet as it is a breaking change and I want to make sure I update my sites/apps first if needed. I should have it integrated tomorrow.

   To see the simple use case for JSDB in Kitten (the default untyped database that’s easy to get started with and perfect for quick experiments, little sites, etc.), see: https://kitten.small-web.org/tutorials/persistence/

   For a more advanced tutorial for creating your own typed databases in Kitten, see the Database App Modules tutorial: https://kitten.small-web.org/tutorials/database-app-modules/

   For another example, see: https://codeberg.org/small-tech/jsdb/#table-events

   Full change log: https://codeberg.org/small-tech/jsdb/src/branch/main/CHANGELOG.md#7-0-0-2026-02-10

   Enjoy!

   💕

   ¹ https://codeberg.org/small-tech/jsdb#readme
   ² https://catalyst.small-web.org
   ³ https://kitten.small-web.org

   #JavaScriptDatabase #JavaScript #appendOnlyLog #JS #JSDB #JSDBUpdates #SmallTech #SmallWeb #Kitten #Catalyst

4. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Wednesday, 04-Feb-2026 00:44:58 JST Aral Balkan

   🥳 New module release: Hetzner Cloud OpenAPI Client

   https://codeberg.org/small-tech/hetzner-cloud-openapi-client

   This is an OpenAPI client for Node.js generated from the official Hetzner Cloud OpenAPI specification using Massimo.

   Recently, while reviewing the code for Catalyst¹, I realised that the Hetzner library I was using was deprecated. The only other client library listed on Awesome Hetzner Cloud for JavaScript was updated seven years ago². So I did a bit of research and discovered that Hetzner has an official OpenAPI specification (useful little things that you can generate documentation as well as working client code from). I also discovered Massimo³, a lightweight and easy to use OpenAPI client generator.

   So, anyway, a few minutes later, I had a working Node.js client generated but I thought I’d take a little more time to make it into a module in case anyone else wanted to use it.

   In the process, I also created a simple web app example with Kitten⁴ where you can enter your Hetzner API key in a web interface, have it persisted to the default Kitten database⁴ and then carry out a simple call to list your servers. The example uses the new/advanced class and event-based way of working with Kitten so you might find it interesting for that reason too (I haven’t had the chance to document this workflow properly yet).

   You can see the source code for the Kitten example here:
   https://codeberg.org/small-tech/hetzner-cloud-openapi-client/src/branch/main/example/index.page.js

   The cool thing is that because the client is generated from the official Hetzner OpenAPI specification, it is one command to update it should the specification change and you can be sure it matches exactly what’s in the API documentation.

   Enjoy!

   💕

   CC @hetzner @lenzgr

   ¹ https://catalyst.small-web.org
   ² https://github.com/hetznercloud/awesome-hcloud#javascript
   ³ https://massimohttp.dev/
   ⁴ https://kitten.small-web.org/tutorials/persistence/

   #Hetzner #HetznerCloud #API #OpenAPI #Massimo #NodeJS #JavaScript #servers #hosting #VPS #Kitten #SmallWeb #SmallTech

5. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Sunday, 18-Jan-2026 03:17:30 JST Aral Balkan

   in reply to

   So, going forward, Auto Encrypt¹, Kitten², and Catalyst³ will be seamlessly (automatically; with zero config) supporting Web Numbers⁴ (IPv4, IPv6), and, of course, should you want to point one at your server for old time’s sake, legacy domain names too.

   I still have some dev to do on this on the Kitten side of things but I’m hugely excited about being able to remove another centralised component – DNS – from the Small Web⁵ (peer-to-peer, personal web) as we inch nearer to making it available this year to everyday people who use technology as an everyday thing.

   ¹ https://codeberg.org/small-tech/auto-encrypt
   ² https://kitten.small-web.org
   ³ https://catalyst.small-web.org
   ⁴ https://ar.al/2025/06/25/web-numbers/
   ⁵ https://ar.al/2024/06/24/small-web-computer-science-colloquium-at-university-of-groningen/

   #SmallWeb #SmallTech #SmallTechnologyFoundation #peerToPeerWeb #personalWeb #WebNumbers #decentralisation #web #dev #humanRights #democracy

6. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Sunday, 18-Jan-2026 00:48:15 JST Aral Balkan

   Yay, first shot of Auto Encrypt¹ running a https server at a Web Number (IP address).

   https://ar.al/2025/06/25/web-numbers/

   Next step: find out why some of the tests are failing on the Linux box, fix, and implement Web Numbers support in Kitten² and Catalyst³.

   ¹ https://kitten.small-web.org
   ² https://catalyst.small-web.org
   ³ https://catalyst.small-web.org/

   #WebNumbers #SmallWeb #AutoEncrypt #Kitten #Catalyst #peerToPeer #web #dev