Aral Balkan
@aral@mastodon.ar.al replied  ·  activity timestamp 4 days ago

🥳 All tests passing!

(And real-world projects seem to be rendering perfectly – and faster than before to boot.) :)

If further testing doesn’t bring out any issues, expect a new Kitten release this week with the new (and far improved) Markdown parser.

kitten💕

#Kitten #SmallWeb #web #dev#Markdown
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…

This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.

The screen has all the code (sans the end of the last line of CSS and the closing tags for the

Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Aral Balkan
@aral@mastodon.ar.al (and 1 other) recently replied  ·  activity timestamp 2 weeks ago

Not coming this afternoon :)

Just realised that I’m not handling nested interpolated values properly as I’m using a regular expression to simulate what JavaScript’s native tagged template feature does.

Instead, I have to write a simple parser.

If I had a penny for every time I started with regular expressions on this and then had to implement a proper parser afterwards… I’d have two pennies (the other time was for extracted nested tags. See a pattern? (I’m here all week.)

So, barring the discovery of other edge (or not-so edge) cases following further testing, I’m going to aim for middle of the week for the release of the new Markdown Pages feature.

kitten💕

#Kitten#KittenUpdate #SmallWeb
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…

This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.

The screen has all the code (sans the end of the last line of CSS and the closing tags for the

Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Rewriting the Windows section of Kitten’s installation instructions.

Update: it’s live now.

kitten.small-web.org/

Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.
Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.
Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

The new integrated Markdown parser I’ve been implementing in Kitten has been kicking my ass for the past few weeks but I think I finally have it fully working and seamlessly so. Expect a new release this/next week that brings the parsing of Markdown pages (.page.md files) in your apps up to the standard of the recently-improved runtime Markdown parsing in Kitten HTML tagged-template strings (within &lt;markdown&gt;…&lt;/markdown&gt; blocks).

The coolest thing is I was able to implement this without introducing any new syntax. In fact, I was able to simplify things so that you can now add arbitrary JavaScript to your Markdown pages within a multi-line script block in the YAML front matter (script: |) and use JavaScript string interpolation syntax in your Markdown (and, of course, Kitten components and conditionals, which, themselves, rely on string interpolation).

The only place where you have to deviate from standard Markdown in your Markdown pages is if you have JavaScript string interpolations or Kitten components/conditionals in code fences within your Markdown. In that case, you’ll have to escape them (e.g., &lt;\${Component} /&gt;, \&lt;if \${something}&gt;something\&lt;/if&gt;, etc.). And, to be fair, the person most impacted by this is likely me as the Kitten documentation at https://kitten.small-web.org is written in Kitten so I had a lot of escaping to do. But for any other use case, it means that things should just work and work exactly as they do in JavaScript pages (page.js files).

Anyway, so this is going to be a breaking change so I thought I’d give you (the three of you playing with Kitten right now?) a heads up. Of course, I’ll be updating the documentation to reflect all this.

(Remember, Kitten is in pre-release and it’s the framework I’m building/using to create Catalyst – the Small Web hosting solution – and Yarn – a small web – peer to peer – personal site app. So Kitten isn’t the means, not the end. And, at least until the Version 1 API freeze, things can and will break. That said, there’s nothing stopping you from playing with it now and, to be fair, at this point, such breaking changes should become rarer and rarer).

kitten💕

#Kitten #SmallWeb#SmallTech #web #dev#Markdown#JavaScript#HTML#CSS#JavaScript#NodeJS
Aral Balkan
@aral@mastodon.ar.al replied  ·  activity timestamp 2 weeks ago

Bloody hell, finally, I think I’m done with the Markdown support rewrite in Kitten.

The Markdown rule for interpreting four spaces as code fences has been the biggest pain in my neck during this whole ordeal but, bitching aside, it means the parser is now more accurate and thus stronger for it.

If all goes well, expect a Monday release :)

https://kitten.small-web.org

kitten💕

#Kitten #SmallWeb#SmallTech #web #dev#Markdown#HTML#CSS#JavaScript#NodeJS
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

The new integrated Markdown parser I’ve been implementing in Kitten has been kicking my ass for the past few weeks but I think I finally have it fully working and seamlessly so. Expect a new release this/next week that brings the parsing of Markdown pages (.page.md files) in your apps up to the standard of the recently-improved runtime Markdown parsing in Kitten HTML tagged-template strings (within &lt;markdown&gt;…&lt;/markdown&gt; blocks).

The coolest thing is I was able to implement this without introducing any new syntax. In fact, I was able to simplify things so that you can now add arbitrary JavaScript to your Markdown pages within a multi-line script block in the YAML front matter (script: |) and use JavaScript string interpolation syntax in your Markdown (and, of course, Kitten components and conditionals, which, themselves, rely on string interpolation).

The only place where you have to deviate from standard Markdown in your Markdown pages is if you have JavaScript string interpolations or Kitten components/conditionals in code fences within your Markdown. In that case, you’ll have to escape them (e.g., &lt;\${Component} /&gt;, \&lt;if \${something}&gt;something\&lt;/if&gt;, etc.). And, to be fair, the person most impacted by this is likely me as the Kitten documentation at https://kitten.small-web.org is written in Kitten so I had a lot of escaping to do. But for any other use case, it means that things should just work and work exactly as they do in JavaScript pages (page.js files).

Anyway, so this is going to be a breaking change so I thought I’d give you (the three of you playing with Kitten right now?) a heads up. Of course, I’ll be updating the documentation to reflect all this.

(Remember, Kitten is in pre-release and it’s the framework I’m building/using to create Catalyst – the Small Web hosting solution – and Yarn – a small web – peer to peer – personal site app. So Kitten isn’t the means, not the end. And, at least until the Version 1 API freeze, things can and will break. That said, there’s nothing stopping you from playing with it now and, to be fair, at this point, such breaking changes should become rarer and rarer).

kitten💕

#Kitten #SmallWeb#SmallTech #web #dev#Markdown#JavaScript#HTML#CSS#JavaScript#NodeJS
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

The new integrated Markdown parser I’ve been implementing in Kitten has been kicking my ass for the past few weeks but I think I finally have it fully working and seamlessly so. Expect a new release this/next week that brings the parsing of Markdown pages (.page.md files) in your apps up to the standard of the recently-improved runtime Markdown parsing in Kitten HTML tagged-template strings (within &lt;markdown&gt;…&lt;/markdown&gt; blocks).

The coolest thing is I was able to implement this without introducing any new syntax. In fact, I was able to simplify things so that you can now add arbitrary JavaScript to your Markdown pages within a multi-line script block in the YAML front matter (script: |) and use JavaScript string interpolation syntax in your Markdown (and, of course, Kitten components and conditionals, which, themselves, rely on string interpolation).

The only place where you have to deviate from standard Markdown in your Markdown pages is if you have JavaScript string interpolations or Kitten components/conditionals in code fences within your Markdown. In that case, you’ll have to escape them (e.g., &lt;\${Component} /&gt;, \&lt;if \${something}&gt;something\&lt;/if&gt;, etc.). And, to be fair, the person most impacted by this is likely me as the Kitten documentation at https://kitten.small-web.org is written in Kitten so I had a lot of escaping to do. But for any other use case, it means that things should just work and work exactly as they do in JavaScript pages (page.js files).

Anyway, so this is going to be a breaking change so I thought I’d give you (the three of you playing with Kitten right now?) a heads up. Of course, I’ll be updating the documentation to reflect all this.

(Remember, Kitten is in pre-release and it’s the framework I’m building/using to create Catalyst – the Small Web hosting solution – and Yarn – a small web – peer to peer – personal site app. So Kitten isn’t the means, not the end. And, at least until the Version 1 API freeze, things can and will break. That said, there’s nothing stopping you from playing with it now and, to be fair, at this point, such breaking changes should become rarer and rarer).

kitten💕

#Kitten #SmallWeb#SmallTech #web #dev#Markdown#JavaScript#HTML#CSS#JavaScript#NodeJS
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 weeks ago

🥳 New Kitten Release

Housekeeping:

• Updated runtime version to Node version 22.18.0 (latest LTS).

• Removed --experimental-global-customevent in node launch command (as CustomEvent is no longer behing the CLI flag since Node v19.0.0)

• Renamed --experimental-loader flag to --loader as the experimental prefix is no longer required.

https://kitten.small-web.org

Enjoy!

kitten💕

#Kitten#KittenRelease #SmallWeb#SmallTech #web #dev#HTML#JavaScript#CSS#NodeJS
Aral Balkan
@aral@mastodon.ar.al replied  ·  activity timestamp 3 weeks ago

Ah, and also, forgot to mention this change:

Improved:

• Debugging your Kitten app is now easier when you run it using `INSPECT=true kitten …` as the Node runtime is launched using the `--inspect-brk` tag instead of the `--inspect` tag. This means that execution will wait for your debugger (e.g., Chromium’s DevTools at `chrome://inspect`, etc.) to connect before starting the server. This makes it possible to hit breakpoints that might previously have been impossible to reach as they occured before you had a chance to run the debugger.

Full change log:
codeberg.org/kitten/app/src/br
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 3 weeks ago

🥳 New Kitten Release

Housekeeping:

• Updated runtime version to Node version 22.18.0 (latest LTS).

• Removed --experimental-global-customevent in node launch command (as CustomEvent is no longer behing the CLI flag since Node v19.0.0)

• Renamed --experimental-loader flag to --loader as the experimental prefix is no longer required.

https://kitten.small-web.org

Enjoy!

kitten💕

#Kitten#KittenRelease #SmallWeb#SmallTech #web #dev#HTML#JavaScript#CSS#NodeJS
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 weeks ago
@eduardoochs @screwlisp Heya!

The REPL is really just there to provide a simple interface to the running web server for debugging your apps. That said, it _is_ a full-on Node.js REPL so you can pretty much run any JavaScript you want in it.

(I’m not going to even pretend I understand what you’re using it for but it’s fun to see folks playing with it in ways I never imagined.) :)
screwlisp
@screwlisp@gamerplus.org replied  ·  activity timestamp 4 weeks ago
@aral
Thanks again for kitten!

the main thing for me (still quite a while til I need to use it) is that the kitten eepitch is a very convenient interface into the #kitten's kittendb (from inside #emacs).

So the kitten eepitch can be used to read and set values that determine what pages are generated, in real time.

@eduardoochs we must convince Aral to adopt your category diagrams for Kitten's database typing ;p
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 4 weeks ago

🥳 New Kitten release!

Markdown and general renderer fixes.

Fixed:

• Nested Markdown sections rendering bug.

• Detection of components in Markdown where the opening tag spans multiple lines.

• Support for returning a component as a top-level object in a page.

• Slots in Markdown now work as they should (make sure you add them as block-level items, so with a leading and trailing empty line)

Enjoy!

kitten 💕

https://kitten.small-web.org

#Kitten#KittenRelease #SmallWeb#SmallTech#Markdown #rendering#HTML #web #dev
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month

🥳 New Kitten Release

To GNU tar or not to GNU tar?

• Installing Kitten on Linux should no longer display a screenful of gibberish from the tar command.

You see, macOS, being special, includes BSD tar, not GNU tar, and adds a bunch of Mac-specific metadata and extended header keywords to archives that GNU tar on Linux machines then chokes on and regurgitates onto your screen as warnings.

With this release, Kitten’s packaging script expects GNU tar to be available on macOS and uses that instead of BSD tar.

The latest release of Kitten now installs without any warnings on Linux (at least on my Fedora Silverblue box).

Enjoy!

https://kitten.small-web.org

#Kitten#KittenRelease #SmallWeb#SmallTech#GNU#BSD#Darwin#macOS #tar
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month

🎉 New Kitten¹ Release: A little housekeeping 🧹

Today’s release only concerns production servers:

• Kitten no longer counts all *hits* in its stats. You can still see which of your *pages* are most popular, etc., and see stats for missing URLs, etc., as before from either the web interface or the interactive shell, but not every hit is logged. Instead, you can see the latest 25 served routes in Kitten’s Settings (at /🐱/settings/state/requests/ via the web on your server).

- Kitten production servers now carry out an automatic daily maintenance restart at some time between 3AM and 5AM local server time. (“Have you tried turning it off and on again?” as a Service™) This is to allow JSDB² tables a chance to compact themselves (especially important for high traffic/high mutation tables like sessions, so they don’t balloon up to take up all available memory on small VPS instances).

I don’t think anyone but us (Small Technology Foundation³) is running Kitten in production at the moment but, still. If you are playing with Kitten and experimenting with it in production, your servers will update to this latest version in a few hours.

Full details: codeberg.org/kitten/app/src/br

:kitten: 💕

¹ kitten.small-web.org
² codeberg.org/small-tech/jsdb
³ small-tech.org

alcinnz
alcinnz boosted
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month

🥳 New Kitten Release

• Improved Markdown parser

Kitten’s JavaScript tagged template strings (`kitten.html`) no longer fail to render as expected when interpolated values are used inside of Markdown where the Markdown render changes source order.

So, for example, the following will now work correctly, whereas, previously, the link source and link text would have been erroneously flipped:

kitten.html`
<markdown>
[${linkText}](${linkSource})
</markdown>
`

To implement the fix, I’ve moved Markdown rendering outside of the main render loop and into a pre-render stage and implemented a simple Markdown render tree that non-recursively handles all Markdown region renders.

More details: codeberg.org/kitten/app/src/br

Run `kitten update` to update your dev machines. Your deployment servers will automatically update in the next few hours.

You can learn more about and install Kitten from the Kitten web site:
kitten.small-web.org/

Enjoy!

:kitten:💕
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp last month

🥳 New Kitten Release

• Improved Markdown parser

Kitten’s JavaScript tagged template strings (`kitten.html`) no longer fail to render as expected when interpolated values are used inside of Markdown where the Markdown render changes source order.

So, for example, the following will now work correctly, whereas, previously, the link source and link text would have been erroneously flipped:

kitten.html`
<markdown>
[${linkText}](${linkSource})
</markdown>
`

To implement the fix, I’ve moved Markdown rendering outside of the main render loop and into a pre-render stage and implemented a simple Markdown render tree that non-recursively handles all Markdown region renders.

More details: codeberg.org/kitten/app/src/br

Run `kitten update` to update your dev machines. Your deployment servers will automatically update in the next few hours.

You can learn more about and install Kitten from the Kitten web site:
kitten.small-web.org/

Enjoy!

:kitten:💕
just small circles 🕊
@smallcircles@social.coop  ·  activity timestamp last month
@judell hey, this is very interesting. The old VB UI in a new web jacket. I just tooted about the Rube Goldberg machine that is modern web dev, and in some ways I was more empowered at the start of my career in 1997 with Visual Basic.

https://social.coop/@smallcircles/114878688112419149

You might have a look if maybe there isn't a cool combination to make with #Datastar at https://data-star.dev which recently went v1.0

They continue where #HTMX stopped, in #hypermedia land, where they use #WebComponents for complex UI.
just small circles 🕊
@smallcircles@social.coop replied  ·  activity timestamp last month

Oh, I just remembered I also wanted to ping you, @aral about this v1.0 release, regarding #SmallWeb and #Kitten. So here goes. The current website is running #Datastar 1.0.

https://data-star.dev/essays/v1_and_beyond

@judell