Skip to main content

mastodon - Link to source

So I’m updating the Kitten documentation, tutorials, videos, etc., in preparation for the major (breaking change) release I’ve been working on for the past few months and, as part of that, I had to set up my streaming/recording setup again as the layout of my room changed and I recorded an updated Kitten Counter video yesterday in which I made every mistake I could in 12 minutes (so I’ll be recording it again). But here it is a a preview (and also to show that no, none of us gets it right the first time. Any polished video you see is the result of meticulous planning and multiple iterations) :)

(This video doesn’t show the new stateful components. I will be recording new videos about that.)

vimeo.com/1212264139

#Kitten #SmallWeb #SmallTech #web #dev #HTML #CSS #JavaScript


A demonstration of how to build a simple counter using the latest Kitten

In this example, we build a simple counter with an increment and decrement button and wire it up to Kitten’s built-in JavaScript Database (JSDB).
Vimeo
#dev #web #javascript #html #css #SmallTech #SmallWeb #kitten
This entry was edited (2 days ago)
in reply to Aral Balkan

Aral Balkan
mastodon - Link to source
Aral Balkan
• •

TL; DR: This is all the code you need in Kitten¹ to make a *persisted* counter that streams interface updates to the browser. (Put it into a file called index.page.js in a folder all by itself and run `kitten`.)

Add the following two lines inside the `<main>` tag, if you also want it to look good:

```html
<page css>
<style inline>@scope { div { font-size: 3em; } }</style>
```

¹ kitten.small-web.org

#Kitten #SmallWeb #SmallTech #web #dev #HTML #CSS #JavaScript

kitten.db.counter ??= { count: 1 } export default function () { return kitten.html\` <main> <h1>Kitten counter</h1> <div aria-live='assertive'>\${kitten.db.counter.count}</div> <button name='increment' aria-label='increment' connect>+</button> <button name='decrement' aria-label='decrement' connect>-</button> </main> \` } export function onIncrement () { kitten.db.counter.count++ this.update() } export function onDecrement () { kitten.db.counter.count-- this.update() }

Kitten: Home

kitten.small-web.org
#dev #web #javascript #html #css #SmallTech #SmallWeb #kitten
This entry was edited (2 days ago)
in reply to Aral Balkan

Aral Balkan
mastodon - Link to source
Aral Balkan
• •

Take two :)

Not perfect but I might roll with this one.

vimeo.com/1212755053

#Kitten #KittenCounter #SmallWeb


kitten-counter-july-24-2026

This is "kitten-counter-july-24-2026" by Small Technology Foundation on Vimeo, the home for high quality videos and the people who love them.
Vimeo
#SmallWeb #kitten #kittencounter
in reply to Aral Balkan

Kaifi 🍉
mastodon - Link to source
Kaifi 🍉
• •
i was thinking.. is it realistic to create a minimalistic blog with kitten?
in reply to Aral Balkan

Kaifi 🍉
mastodon - Link to source
Kaifi 🍉
• •
i'm currently trying to use hugo, but kitten looks like a tempting option. do you have any tutorials like the kitten counter? :)
in reply to Kaifi 🍉

Aral Balkan
mastodon - Link to source
Aral Balkan
• •

@kaifi If you can wait a few days, I have a major release on the way (breaking change – well, it’s prerelease, but I’m still marking it as such) and you can refer to how I did things for the Small Tech site and the updated simple blog examples :)

Note that you’ll have a proper community and resources etc. with Hugo and it’s made for static sites. If you want a dynamic one that you fully understand and is hopefully fun to dev on as a hobby, then the latest release should be good.

@Kaifi 🍉
in reply to Aral Balkan

Kaifi 🍉
mastodon - Link to source
Kaifi 🍉
• •
ah okay, i gotchu. i was looking for a static site, but i think it can be pulled off with kitten too. would love to look out for the changes! does kitten have an official profile here? :)
⇧