How in the hell do you style dynamic content inside a <script> tag?

#CSS #Javascript

Note that when you’re working with Kitten, your apps do not have a build process.

You write HTML, CSS, JavaScript and, optionally, extend using first-class support for htmx and alpine.js as well as Kitten’s own Streaming HTML workflow¹. There’s also no scaffolding or generating a project with hundreds of files or anything. You just write the code for your app.

¹ https://ar.al/2024/03/08/streaming-html/

#SmallWeb #Kitten #StreamingHTML #web #dev #NodeJS #JavaScript #HTML #CSS

Streaming HTML

Sorry, your browser doesn't support embedded videos. But that doesn’t mean you can’t watch it! You can download the video and watch it with your favourite video player. Building the Streaming HTML counter example.

^{Aral Balkan}

I still prefer the Kitten version ;)

(That’s _all_ the code for a _persisted_ counter.) :)

https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/

#Kitten #SmallWeb #web #dev #html #css #javascript #NodeJS

2⃣ 841 ❤️ neon hex https://codepen.io/thebabydino/pen/zGmdep

Most people know my CSS stuff, but this was my most hearted Pen for some three quarters of a decade... and it's a #canvas one! The JS feels dated nowadays, but oh, well... still my favourite out of this top 3.

#js #javascript #code #coding #frontend #web #dev #webDev #webDevelopment

Kitten bugfix release:

Please upgrade to the latest release that fixes a regression introduced into sessions object with the latest JSDB¹/JSDF² upgrade:

https://codeberg.org/kitten/app/issues/177

Persisting arbitrary objects to sessions is a supported workflow and this regression broke that.

e.g., See the Kitten Count Sessions example: https://codeberg.org/kitten/app/src/branch/main/examples/kitten-count-sessions/index.page.js

💕

¹ https://codeberg.org/small-tech/jsdb#javascript-database-jsdb
² https://codeberg.org/small-tech/jsdb#javascript-data-format-jsdf

#Kitten #SmallWeb #web #dev #sessions #JSDB #JavaScript #database #regression

Sessions class should populate ...rest arguments on itself

Given that storing data on session objects is valid behaviour and since the requirement of constructors in the latest JSDB, the Session class needs to be updated to store rest arguments on itself.

^Codeberg.org

New Video – Kitten features introduced this week:

• Interactive Shell (REPL)
• Multi-page Settings
• Backup and restore (data portability)

With examples that cover components and Kitten’s built-in JavaScript database (JSDB).

https://ar.al/2024/05/23/new-kitten-features-interactive-shell-repl-multi-page-settings-and-backup-and-restore-data-portability/

💕

#Kitten #SmallWeb #SmallTech #web #dev #JavaScript #HTML #database #JSDB #components #settings #dataPortability #REPL

So! Many! Kittens!

(Going to record a demo of the new interactive shell – REPL to some – and multi-page Settings this afternoon, just planning it out now.)

Oh and is that me creating and calling web routes interactively in the REPL on a live server? Why yes, yes it is.

💕

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

Kitten’s interactive shell (REPL) now saves session history scoped to your app so it will still be there when you next serve the same app.

https://codeberg.org/kitten/app#kitten-s-interactive-shell

I think I’m done with the REPL feature now.

Going to take a little break, step away from the computer, and make a plan for the next week of work on Kitten and Domain¹.

¹ https://codeberg.org/domain/app

#Kitten #SmallWeb #REPL #shell #JavaScript #NodeJS #web #dev #SmallTech

app

Domain is a free and open Small Web hosting platform.

^Codeberg.org

🎉

Kitten now has a lovely new multi-page Settings screen and… *drumroll*… a new 🐢 interactive shell (REPL) for you to play with the running state of your Small Web site/app/place and debug your app, inspect/manipulate its database, etc.

I plan on recording demos of each of them tomorrow but you can play with them now.

And here’s a little tutorial to get you started with the shell:

https://codeberg.org/kitten/app#kitten-s-interactive-shell

💕

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

I've been really enjoying working with Wikidata lately, setting up automated accounts like @libraries, @parks, and @lighthouses.

To see what else you can do with Wikidata, and to learn how to use it, check out a tutorial I put together: https://stefanbohacek.com/blog/making-a-map-of-unesco-world-heritage-sites/

#tutorial #wikidata #LearnToCode #javascript

Making a fediverse post audio wall

Learn the basics of working with Wikidata and Mapbox.

^{Stefan Bohacek (stefanbohacek.com)}

I'm so glad people find my MermaidJS plugin useful 🤩

https://github.com/KevinGimbel/eleventy-plugin-mermaid

It's a little something I once did for my own website when it was still build with 11ty, and I'm glad others find it useful as well!

#11ty #oss #foss #javascript

GitHub - KevinGimbel/eleventy-plugin-mermaid: Integrate Mermaid with eleventy (11ty)

Integrate Mermaid with eleventy (11ty). Contribute to KevinGimbel/eleventy-plugin-mermaid development by creating an account on GitHub.

^GitHub

Here’s a niche gotcha with the clipboard API’s `navigator.clipboard.writeText()` method that’s unique to Safari:

If you access a function from a module within your gesture handler (e.g., click handler), you will get a permission error.

The (sadly hacky and not as robust) workaround is to set a global variable from your module instead.

Full gist:

https://codeberg.org/aral/gists/src/branch/main/clipboard-writetext-permission-error-when-using-modules-in-safari.md

#Safari #clipboardAPI #JavaScript #ESModules #web #dev #gist

gists/clipboard-writetext-permission-error-when-using-modules-in-safari.md at main

gists - A place for me to post and share small, self-contained code snippets.

^Codeberg.org

Mozilla is hiring Director of Engineering, Firefox

🔧 #cplusplus #javascript #python #rust
🌎 Remote; United States
⏰ Full-time
🏢 Mozilla

Job details https://jobsfordevelopers.com/jobs/director-of-engineering-firefox-at-mozilla-org-may-8-2024-775f94?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting
#jobalert #jobsearch #hiring

The Evergreen Web section in Kitten’s¹ settings now has its own page too (and uses Kitten’s new Streaming HTML² workflow).

If you have the previous version of your site up somewhere, you can use the 404-to-307 technique³ to forward missing pages to your old site so as not to break the Web.

I’ll add local static archive support later.

¹ https://codeberg.org/kitten/app
² https://ar.al/2024/03/08/streaming-html/
³ https://4042307.org

#Kitten #SmallWeb #EvergreenWeb #StreamingHTML #web #dev #NodeJS #JavaScript

Just published a minor update (version 5.1.1) to JavaScript Database (JSDB) that optimises the custom data type¹ serialisation code by removing a redundant return statement:

https://www.npmjs.com/package/@small-tech/jsdb

This change is backwards compatible and shouldn’t require and updates to your projects, including the ones you have in Kitten (which uses JSDB internally).

¹ https://codeberg.org/small-tech/jsdb#custom-data-types
² https://codeberg.org/kitten/app

#JavaScriptDatabase #JavaScript #database #JSDB #Kitten #SmallWeb #NodeJS #web #dev

app

A web development kit that’s small, purrs, and loves you.

^Codeberg.org

Just deployed a new Kitten¹ version 🎉

• Adds database backup and restore in your app’s Kitten settings page (/💕/settings)

• Upgrades version of JSDB from 4 to 5²

• You can emit and listen for events on the session object you get from `request.session` in your routes now.

¹ https://codeberg.org/kitten/app
² For migration notes, please see: https://codeberg.org/small-tech/jsdb#migrating-from-earlier-versions-of-jsdf

#Kitten #backupAndRestore #JavaScript #NodeJS #database #JSDB #sessions #SmallWeb #web #dev

Assign properties in a constructor’s parameter object (with defaults) to object being instantiated in JavaScript

https://codeberg.org/aral/gists/src/branch/main/assign-properties-in-a-constructors-parameter-object-with-defaults-to-object-being-instantiated-in-JavaScript.md

This is a little something I ended up playing around with this morning before figuring out how to do it (after spending far too much time down a rabbit hole with object destructuring when what I really needed was creative use of the spread operator).

(Useful for custom objects in JSDB 5 – https://codeberg.org/small-tech/jsdb#custom-data-types)

#JavaScript #parameterObject #defaults #JSDB

gists/assign-properties-in-a-constructors-parameter-object-with-defaults-to-object-being-instantiated-in-JavaScript.md at main

gists - A place for me to post and share small, self-contained code snippets.

^Codeberg.org