October 2024 🍁
CSS colors, symbols, no-op template literals
-
If you need a tagged template literal in JavaScript that does nothing, you can use
string.raw
. Why would you do that, you wonder? Because if you write something like this in your code:html`<div></div>`
many editors will highlight it as HTML, and Prettier will format it as HTML. Great e.g. for stories in Storybook or inline-components in unit tests. -
CSS colors received some updates. The other day I played around with OKLCH and
color-mix
. OKLCH is an alternative to RGB/HSL with the interesting property that the perceived brightness stays the same with different hues. For example in HSL, blue will look darker than yellow when both have the same lightness. In OKLCH, they will be perceived to be the same lightness. Combine that with color-mix and you can easily generate entire color palettes just in CSS! Here is a playground for OKLCH and here is an article with more information. -
Need a random UUID? This used to be something people would install a package for. Nowadays there’s native support for this:
randomUUID
-
Symbols are actually pretty cool, I never really used them but turns out there are well-known symbols, which you can define on objects to tell the JavaScript runtime how to iterate over the object, what to return when checking with
instanceof
, and other things. Also did you know that if an object has atoJSON()
method, that method will be called when the object is passed toJSON.stringify
🤯 -
With WebKit now supporting view transitions, this new feature is available in all major browsers. Rather cutting edge still, but degrades gracefully so time to start looking into it in case you need/want some fancy transitions.
-
Hono apparently is “the newest scream” 😅 in JS-based web servers because it’s fast, lightweight, modular, built on web standards, has an intuitive API, and works in all runtimes. I tried it and it is indeed very nice, will keep that in my mind if I ever need a quick, simple server.
-
Very early stages but Node.js can now cache compiled JS byte code, which should lead to significant performance gains for CLI tools and short-lived processes. Fun fact: a lot of what makes JS execution on websites fast is that when the browser compiles the JS to bytecode, the result is cached and doesn’t need to be compiled again unless the bundle changed. Node only used to to that per process, and since many processes are short lived (e.g. run a CLI command) you never really get to benefit from that caching. This flag tries to change that.
-
Speaking of performance: With the latest Node versions, you can use
node --run <some-npm-task>
instead ofnpm run <some-npm-task>
. This too should be a lot faster because Node launches immediately, rather than Node launching NPM launching Node…