Notices tagged with javascript, page 4

Just released @small-tech/state v3.0.2

🎉 Persistence is not futile! 🎉

Persist custom State objects in JSDB¹.

https://codeberg.org/small-tech/state

Just got it working in Domain² (a Kitten³ app). It’s such a sweet workflow. Store state keyed to session keys and use Streaming HTML⁴ to stream hypermedia interface updates.

:kitten: 💕

¹ https://codeberg.org/small-tech/jsdb
² https://codeberg.org/domain/app
³ https://codeberg.org/kitten/app
⁴ https://ar.al/2024/03/08/streaming-html/

#state #Kitten SmallWeb #JSDB #StreamingHTML #web #dev #JavaScript

Just released v3.0 of @small-tech/state

(A tiny – 42 lines of code¹ – JavaScript state management class.)

https://codeberg.org/small-tech/state

The state class is no longer a proxy itself but instead uses a proxy to guard access/update of states. This means instances/subclasses of State can now be persisted in JavaScript Database (JSDB)² objects. e.g., for use in Kitten³ apps.

¹ Sans comments and empty lines.
² https://codeberg.org/small-tech/jsdb
³ https://codeberg.org/kitten/app

#state #JavaScript #jsdb #SmallWeb

(The use case for this is pretty neat: keep your interface state in custom state class instances persisted in session objects and, using the Streaming HTML workflow*, send back pieces of the interface that take those state objects as their only prop. Quite a neat separation of concerns and state is maintained only on the server in those objects.)

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

#Kitten #SmallWeb #state #sessions #StreamingHTML #web #dev #html #JavaScript #NodeJS #WebSockets #htmx #hypermedia

Quick update: the failing tests were apparently because I had my VPN on on macOS (that was creating an additional IPv4 interface that was getting picked up by the tests that check that your server is accessible via a valid TLS certificate from all available local IPs).

So no patch necessary :)

#AutoEncryptLocalhost #https #mkcert #certutil #JavaScript #js #nodeJS #macOS

Hey folks, I just released Auto Encrypt Localhost* v8.4.0 with better async support and updated dependencies.

https://www.npmjs.com/package/@small-tech/auto-encrypt-localhost

* My pure JavaScript module (no mkcert, certutil, etc., required) that automatically provisions and installs locally-trusted TLS certificates for Node.js https servers.

(There seems to be an issue with tests failing on macOS, will debug that tomorrow and likely post a patch release.)

#AutoEncryptLocalhost #https #mkcert #certutil #JavaScript #js #nodeJS

New blog post: Streaming HTML

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

Let me show you how easy it is to create a simple counter web app using the new Streaming HTML workflow in Kitten before peeling away the magic layer by layer so you learn how to make the same app using:

• HTMX & WebSockets
• Plain old JavaScript, and, finally,
• Without Kitten in pure Node.js.

Enjoy + let me know what you think.

:kitten: 💕

#SmallWeb #Kitten #StreamingHTML #HTML #CSS #JavaScript #HTMX #NodeJS #progressiveEnhancement

(Feels good to close two-year-old feature requests.) :)

https://codeberg.org/kitten/app/issues/25
https://codeberg.org/kitten/app/issues/26

:kitten: 💕

#Kitten #SmallWeb #web #dev #html #css #JavaScript #ESM #loaders #NodeJS

You can now create HTML and CSS fragments in Kitten.

This introduces two new file extensions (.fragment.html and .fragment.css) and you can import these fragments into your pages and into other components and fragments as if they were JavaScript modules*.

HTML fragments also support slots.

Example:

https://codeberg.org/kitten/app/src/branch/main/examples/html-and-css-fragments

*Thanks to Kitten’s behind-the-scenes use of a custom ES Module Loader.

#Kitten #SmallWeb #web #dev #html #css #JavaScript #components #fragments #slots

(And remember, Kitten is a server. So you don’t have to download and install a framework every time you start a project ­– no npx this or that or anything. Just start writing your code and run `kitten`.)

https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #server #framework #HTML #CSS #JavaScript #htmx #WebSockets #p2p

Oh, by the way, since the optimisations I made on the bundle size, it now takes ~3.61 seconds to download and install Kitten on my machine and ~1 second to update it (the initial install takes longer as Kitten downloads its own Node.js runtime and that takes the bulk of the time).

Every second you don’t spend waiting for something is a second you can spend doing something else 🤓

:kitten: 💕

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

#Kitten #SmallWeb #web #dev #server #framework #HTML #CSS #JavaScript #htmx

Heads up: if you were playing with Kitten¹ on macOS, you might have noticed that some of the commands were exiting with a truncated header.

This has now been fixed and all commands should look and work exactly the same on macOS as they do on Linux.

:kitten: 💕

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

#Kitten #SmallWeb #macOS #linux #web #dev #javaScript #nodeJS #htmx #WebSockets #p2p

If you were playing with Kitten¹ on macOS and noticed that live reloads were broken², they’ve now been fixed.

(Thanks to @laura running into the issue today.)

Run:

kitten update

To update to the latest version.

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

² Moral of the story: don’t define functions inside conditionals in JavaScript or you’ll run into cross-browser scope inconsistencies when the function is hoisted. Chrome and Firefox do it one way, Safari another.

#kitten #macOS #web #dev #js #javaScript

For creative #JavaScript #DevOps out there:

What would you name a variable that holds 1 byte?

"byte" is a reserved word since ES3. Variables cannot start with a digit, so "8bits" isn't valid.

"data", "unit", or "num" could work, although less descriptive.

Capitalizing the first character as "Byte"? IMO, looks funny and might break convention.

A homonym? "bite".

For whatever reason, my brain is refusing to cooperate with me today.

#programming #lazyweb

You’d think folks writing the HTML spec would know the difference between an HTML attribute and inline JavaScript but you’d be mistaken and that’s why we can’t open a modal dialog without client-side JavaScript in 2024.

🤷

https://github.com/whatwg/html/issues/3567#issuecomment-373894397

#html #whatwg #dialog #modal #JavaScript

I’m really enjoying this new Streaming HTML workflow in Kitten…

In this 15 second video, I cycle through the options in a selection box using the keyboard and the rest of the interface updates in response.

✨ There’s no custom client-side JavaScript making that happen. ✨

It’s all server side.

The changes stream to the client as HTML and are morphed into place via idiomorph.

So simple and maintainable.

💕

https://vimeo.com/908339606

#Kitten #SmallWeb #StreamingHTML #web #dev #html #JavaScript

Right, this is now merged in main.

Please consider the Streaming HTML workflow very experimental for the time being (as all of Kitten is, really, but this more so).

There’s also still scant documentation but that will improve in the coming days. (I’ve added this demo to the readme.)

https://codeberg.org/kitten/app#to-whet-your-appetite

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #WebSocket #html #css #JavaScript

So the canonical example for any new workflow appears to be a counter button.

Here’s one showing you the Streaming HTML workflow as simply as possible.

Note that the count is actually being persisted in the database (notice I turn the development server off and back on again mid demo).

What you see in the video is all the code there is in the project.

https://vimeo.com/907918005

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #WebSocket #html #css #JavaScript

Is htmx Just Another JavaScript Framework?

https://htmx.org/essays/is-htmx-another-javascript-framework/

PS. Guess what? Kitten has built-in, first-class support for htmx.

https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #JS #JavaScript #HTML #HTMX

FSX (a new modern file system module for Node.js) looks really nice. Intelligent defaults and support for mocking designed in.

Would love to see this in core.

https://humanwhocodes.com/blog/2024/01/fsx-modern-filesystem-api-javascript/

#fsx #NodeJS #fs #fileSystem #js #JavaScript

640 stars ought to be enough for anybody. 🤣

#DOjS #Javascript #MSDOS #RetroComputing #CreativeCoding