Then I'd have to convert the strings to numbers at runtime, also not great

CSS Image light-dark(url(…)) A code demo by Anselm Hannemann created on CodePen

Check it out on Firefox 150: you can now use light-dark() for images in CSS. See the demo, example code on codepen.io/editor/ansel...

-0 === 0 // true Object.is(-0, 0) // false

-0 | 1 | 0 is most logical but also most inconvenient

-1 | 0 | 1 is less inconvenient, but also, like, the opposite of what every value means

I lean towards 0 | 1 | 2 which is convenient and only represents one of the two 0 with something that's not 0, so it's not too wrong, kinda.

So there's this type that represents alpha values. Can be either 0 or 1, but now there's two different ways the value can be 0. What's the least ridiculous approach?

Building stuff by hand, slowly and admittedly sometimes painfully, REALLY helps with noticing when something needs more time in the oven before it's not absolute indefensible garbage.

Rewrite 4 of feature X commences!

But I'm the crazy one because I roll my own slop-less front-end infrastructure. Sure.

#webdev

So some dunce at a slop factory gets his company owned by installing a Roblox cheat, which in turn gets Vercel's corporate Google account owned, in turn leading to the exposure of secrets that were stored in plain text.

webmatrices.com/post/how-a-r...

#webdev

A new Git version just dropped and it comes with a new experimental `history` command!

`reword` can be used to change commit messages and `split` can untangle a single commit into multiple ones.

No more interactive rebase. 🎉

github.blog/open-source/...

Fluffy ragdoll, sitting upright and alert on a grey sofa. The picture quality makes it look like my phone also just turned 16.

Look who turned 16 today!

A very rusty oil tanker named "Atlantis"

Today in "auspicious names for ships:"

Yes! It feels exactly like dicking around with Wine in 2008

Wait... install 27 GB (!) of additional GPU bullshit?!

Back to KDEnlive stat.

Resolve complaining about "Unsupported GPU processing mode" or whatever

“Let's install DaVinci Resolve, this piece of professional software surely is less janky than OSS KDEnlive.”

I have never, in 21 years of Linux, ever had to screw around SO MUCH with drivers and config files. And without any success so far!

Bonus points for

input[type=checkbox]:checked {
border-radius: 0
}

let key = Symbol(); let obj = { [key]: 42 }; let { [key]: value } = obj; console.log(value);

Did you know that you can use destructuring assignments with symbol properties? You just have to pick a new name for the property!

#javascript #webdev

<css-value-input> A code demo by Peter Kröner created on CodePen

The logical follow-up: <css-value-input syntax="<color># | whatever"> with constraint validation in ~60 lines!

codepen.io/editor/SirPe...

#webcomponents #webdev

// Checks if the CSS value 'value' conforms to `syntax` function valueMatchesSyntax(value, syntax) { let tmp = new CSSStyleSheet(); tmp.replaceSync( `@property --x { syntax:"${syntax}"; inherits: true; initial-value: ${value} }` ); return tmp.cssRules.length > 0; } valueMatchesSyntax("10px", "<length>"); // true valueMatchesSyntax("10deg", "<length>"); // false valueMatchesSyntax("10deg", "<length> | <angle>"); // true valueMatchesSyntax("10deg, 10deg, 10deg", "<angle>#"); // true valueMatchesSyntax("1337", "42 | 23"); // false

TIL that #CSS @property rules are invalid if the initial value does not match the provided syntax. And this means that it is trivial to check if a string matches whatever CSS value definition syntax you cook up! Without any side effects!

Demo: codepen.io/editor/SirPe...

#webdev #javascript

// Checks if the CSS value 'value' conforms to `syntax` function valueMatchesSyntax(value, syntax) { let tmp = new CSSStyleSheet(); tmp.replaceSync( `@property --x { syntax:"${syntax}"; inherits: true; initial-value: ${value} }` ); return tmp.cssRules.length > 0; } valueMatchesSyntax("10px", "<length>"); // true valueMatchesSyntax("10deg", "<length>"); // false valueMatchesSyntax("10deg", "<length> | <angle>"); // true valueMatchesSyntax("10deg, 10deg, 10deg", "<angle>#"); // true valueMatchesSyntax("1337", "42 | 23"); // false

TIL that #CSS @property rules are invalid if the initial value does not match the provided syntax. And this means that it is trivial to check if a string matches whatever CSS value definition syntax you cook up! Without any side effects!

Demo: codepen.io/editor/SirPe...

#webdev #javascript

let key = Symbol(); let obj = { [key]: 42 }; let { [key]: value } = obj; console.log(value);

Did you know that you can use destructuring assignments with symbol properties? You just have to pick a new name for the property!

#javascript #webdev

<table> <caption> Sync and async values in JavaScript </caption> <tr> <th></th> <th>One value</th> <th>Many values</th> </tr> <tr> <th>Sync</th> <td>Variable</td> <td>Array</td> </tr> <tr> <th>Async</th> <td>Promise</td> <td>Stream</td> </tr> </table> <style> caption { caption-side: bottom; } </style>

Randomly remembering the <caption> element, which is essentially a table-specific <figcaption>. There is even a #CSS property for aligning <caption> elements [1] with no other uses. And people say the web platform is lacking in features!

[1] developer.mozilla.org/en-US/docs/W...

#html #webdev

No one can force me to have a secure website!!! YouTube video by suckerpinch

This is epic.

youtu.be/M1si1y5lvkk?...

No one can force me to have a secure website!!! YouTube video by suckerpinch

This is epic.

youtu.be/M1si1y5lvkk?...

<script> customElements.define("my-test", class extends HTMLElement { connectedCallback() { this.attachShadow({ mode: "open" }).innerHTML = `<b part="test">Hi</b>` } }); </script> <template id="parent" shadowrootmode="open"> <my-test exportparts="test"></my-test> </template> <style> ::part(test) { color: red; } </style>

💡 Web component feature of the day: the exportparts attribute re-exposes parts of _nested_ shadow roots. Pretty neat for selective styling through multiple encapsulation layers!

MDN: developer.mozilla.org/en-US/docs/W...

Demo: codepen.io/editor/SirPe...

#webcomponents #webdev #javascript

Discovered a new API. Now my program runs in 3 seconds instead of 3 minutes 🥳

This should have been a script, contained in a blog post or a gist. Instead, it's a whole-ass npm package of slop with > 10 dependencies, obfuscated through multiple levels of class inheritance.

export class Anonymized { async doThing(something) { return await Promise.all(something.list().map(async (item) => { await item.evaluate() })).then(async () => { return await this.somethingElse.then( async (data) => { await this.other(data) }, async (reason) => { await this.onFailed(reason) } ) }); } }

Currently trying to extract the 20 lines of code that actually do something from a multi-class vibe-coded mess that looks like this:

#javascript #fml

<script> customElements.define("my-test", class extends HTMLElement { connectedCallback() { this.attachShadow({ mode: "open" }).innerHTML = `<b part="test">Hi</b>` } }); </script> <template id="parent" shadowrootmode="open"> <my-test exportparts="test"></my-test> </template> <style> ::part(test) { color: red; } </style>

💡 Web component feature of the day: the exportparts attribute re-exposes parts of _nested_ shadow roots. Pretty neat for selective styling through multiple encapsulation layers!

MDN: developer.mozilla.org/en-US/docs/W...

Demo: codepen.io/editor/SirPe...

#webcomponents #webdev #javascript

The WeakMap Subtype Memory Leak Trap YouTube video by Peter Kröner

interface NewVideo extends Like, Subscribe {}
// about WeakMap, structural subtyping and memory leaks

👉 youtu.be/b8JnUwwO_PI

#typescript #webdev

window.customElements.define("x-test", class extends HTMLElement { // Class method: works connectedCallback() { console.log("Connected"); } // Field function: does not work connectedCallback = () => { console.log("Connected"); } }); document.body.append(document.createElement("x-test"));

TI(R)L: Lifecycle callbacks for web components MUST be defined as class methods, field functions do not work. Lifecycle callbacks are part of the custom element definition, which is built upon calling customElements.define()

👉 html.spec.whatwg.org/multipage/cu...

#webcomponents #webdev #javascript