Search
Items tagged with: SmallWeb
So I’m teaching a friend who doesn’t have any development knowledge how to get started with Small Web development and I thought it would be a good opportunity to start creating and sharing the course on the Kitten web site, one lesson at a time.
Here’s the link:
It’s a work in progress that I’ll be adding to along with our lessons but the draft of the first one, on setting up your development environment (which I whipped up in the pub last night, so expect typos) is here:
kitten.small-web.org/course/se…
Please feel free to follow along and file issues if you have thoughts for improvements, etc.
The Setting Up lesson will actually likely end up being the second one with the first being a theoretical one on Small (peer-to-peer) Web development and how it is similar to and differs from Big (centralised) Web development.
Enjoy!
💕
#SmallWeb #Kitten #SmallTech #web #dev #course #education #HTML #CSS #JavaScript #NodeJS
I love how simple Kitten’s Streaming HTML workflow makes building features like this, especially when using class-based Kitten pages and components :)
💕
#Kitten #SmallWeb #StreamingHTML #EventBasedProgramming #ObjectOrientedProgramming #JavaScript #NodeJS #web #dev #GazaVerified
![Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:
<style>
table[inert] {
opacity: 0.9;
filter: grayscale(100%);
}
</style>
</table>
</section>
`
}
onToggle () {
this.editable = !this.editable
console.log(this.editable)
this.update()
}
}](https://friendica.hellquist.eu/photo/preview/640/5334061 "Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:
<style>
table[inert] {
opacity: 0.9;
filter: grayscale(100%);
}
</style>
</table>
</section>
`
}
onToggle () {
this.editable = !this.editable
console.log(this.editable)
this.update()
}
}")
Another quick release, this one adds Alpine.js support for shorthand event handlers.
Just add a `@` before your shorthand event handler names to have them expanded as inline Alpine.js event handlers.
e.g., `on:connect` → `@on:connect`
Enjoy!
💕
#Kitten #AlpineJS #HTMX #SmallWeb #peerToPeerWeb #web #dev #JavaScript #nodeJS #SmallTech #KittenRelease
🥳 New Kitten Release
You can now use the simple `on:` prefix instead of `hx-on:htmx:` to define inline event handlers for HTMX events¹.
Also, there are three new event shorthands for responding to your Kitten page’s connection lifecycle:
• on:connecting
• on:connect
• on:disconnect
(These expand during render to `hx-on:htmx:ws-connecting.window`, `hx-on:htmx:ws-open.window`, and `hx-on:htmx:ws-close.window`, respectively.)
These are useful when using Kitten’s Streaming HTML workflow.
Full change log:
codeberg.org/kitten/app/src/br…
Enjoy!
💕
¹ htmx.org/events/
² kitten.small-web.org/tutorials…
#Kitten #SmallWeb #peerToPeerWeb #web #dev #SmallTech #KittenRelease
htmx ~ Events
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.htmx.org
🥳 JavaScript Database (JSDB) version 6.1.4 released:
• Adds TypeScript type definitions
Been meaning to do this for a while and finally got round to it :)
codeberg.org/small-tech/jsdb#j…
#JavaScript #database #JavaScriptDatabase #JSDB #native #data #web #dev #NodeJS #SmallWeb
jsdb
A zero-dependency, transparent, in-memory, streaming write-on-update JavaScript database for the Small Web that persists to a JavaScript transaction log.Codeberg.org
Ah, the joys of having a built-in native JavaScript database¹ that can persist and load typed JavaScript objects² and an interactive JavaScript shell (REPL)³ in Kitten⁴ :)
💕
¹ kitten.small-web.org/reference…
² kitten.small-web.org/tutorials…
³ kitten.small-web.org/reference…
⁴ kitten.small-web.org
#Kitten #SmallWeb #development
![Screenshot of the Kitten shell open in terminal for the currently-running site:
> kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al')
Proxy [
Account {
id: 'ce4c1f2c-2044-47a0-b97e-1bc1a43bfc07',
url: 'https://mastodon.ar.al/@aral',
isVerified: true,
data: Proxy [ [Object], [Object] ],
isScheduled: false,
joinPageIp: undefined,
privatePageIps: Proxy [ [Array], [Object] ],
isTeam: false,
callDays: Proxy [ [Array], [Object] ]
}
get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler]
}
]
> kitten.db.calendar.scheduleInterview(kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al').id)](https://friendica.hellquist.eu/photo/preview/640/5325612 "Screenshot of the Kitten shell open in terminal for the currently-running site:
> kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al')
Proxy [
Account {
id: 'ce4c1f2c-2044-47a0-b97e-1bc1a43bfc07',
url: 'https://mastodon.ar.al/@aral',
isVerified: true,
data: Proxy [ [Object], [Object] ],
isScheduled: false,
joinPageIp: undefined,
privatePageIps: Proxy [ [Array], [Object] ],
isTeam: false,
callDays: Proxy [ [Array], [Object] ]
}
get: [Function: bound getHandler], set: [Function: bound setHandler], defineProperty: [Function: bound definePropertyHandler], deleteProperty: [Function: bound deletePropertyHandler]
}
]
> kitten.db.calendar.scheduleInterview(kitten.db.accounts.findAccountWithHandle('@aral@mastodon.ar.al').id)")
Yours truly speaking at Defuse Dublin (IxDA) last month, where I presented on Gaza Verified and Small Tech/Small Web.
All photos: photos.app.goo.gl/irq95gn1ncUJ… (apologies for Google/Alphabet, Inc. link)
All talks: youtube.com/playlist?list=PLsa… (apologies for YouTube/Alphabet, Inc. link)
#DefuseDublin #IxDA #design #SmallTech #SmallWeb
🥳 New Kitten Release!
🚨 Breaking change: You can now add arbitrary JavaScript in script blocks in Kitten Markdown Pages front-matter (and the imports property is gone).
You can also use JavaScript string interpolation and all special Kitten tags (e.g., conditional tags, etc.) in Kitten Markdown Pages.
Examples:
• Simple: codeberg.org/kitten/site/src/b…
• More complex: codeberg.org/kitten/site/src/b…
And the Markdown parser itself is now both more robust and faster than before.
(This change also bumps the Kitten runtime to Node.js version 24.6.0.)
Enjoy!
💕
• Full change log: codeberg.org/kitten/app/src/br…
• Kitten Markdown Pages reference: kitten.small-web.org/reference…
• Kitten Markdown tutorial: kitten.small-web.org/tutorials…
#Kitten #SmallWeb #KittenMarkdownPages #Markdown #improvedParser
Gaza Verified
I’ve personally had video conversations on Signal with the people from Gaza whose Mastodon accounts on the fediverse are listed here and I verify that their accounts are genuine. – Aral Balkangaza-verified.org
