Untitled attachment

Notices where this attachment appears

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Saturday, 15-Feb-2025 02:27:13 JST Aral Balkan

   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 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 is `request.session.authenticated`⁶ is true from the your layout template and customise the layout accordingly.

   https://kitten.small-web.org

   Enjoy!

   :kitten:💕

   ¹ 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!

   ⁴ https://htmx.org
   ⁵ https://kitten.small-web.org/reference/#markdown-pages-page-md-files
   ⁶ See Session tutorial: https://kitten.small-web.org/tutorials/sessions/

   #Kitten #SmallWeb #SmallTech #StreamingHTML #WebSocket #HTMX #Markdown #sessions #data #web #dev #JavaScript #HTML

2. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 21-Jan-2025 02:41:49 JST Aral Balkan

   @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:

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

   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.

   #Kitten #SmallWeb #SmallTech #web #dev #examples #tutorials #web #dev #HTML #CSS #JavaScript #nodeJS #WebSocket #htmx #hypermedia

3. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 29-Nov-2024 21:36:22 JST Aral Balkan

   @ZeroEcks Cool. I mean, if that form hits a back-end you might enjoy Kitten’s Streaming HTML workflow ;)

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

4. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 20:21:12 JST Aral Balkan

   Kitten update

   When using Streaming HTML¹, pages connected to your server will now automatically reload themselves after your server restarts to seamlessly continue with fresh page storage.

   (Page storage² is a new feature I added the other day.)

   You can see page storage and Streaming HTML in action on Kitten Kawaii, the Kitten port of React Kawaii I just finished (post coming soon):

   kitten-kawaii.small-web.org/

   :kitten:💕

   ¹ https://kitten.small-web.org/tutorials/streaming-html/
   ² https://kitten.small-web.org/reference/#data-scopes

   #Kitten #SmallWeb