I don't understand everything yet

Useful for stat callouts, word definitions, product listing technical specs

Enhancing an HTML page with microdata. These microdata can be used as CSS selectors.

How it helps the users

• search engine could show the microdata Introduction to structured data markup in Google Search
• can help AI...
• microdata conveys information in HTML: “HTML is still the most accessible format for almost every type of content”, the National Center on Disability and Access to Education’s Principles of Accessible Design in 2007

Whenever you want to add interactive elements inside your information bubble, it's not called tooltip, but toggletip.

Firstly, before we get started, it is always better to display clear, permanently visible information. So, if space permits, do not use tooltips.

There is a 
<button type="button" aria-describedby="toggletip" popovertarget="toggletip">
  secret
</button>
to accessible HTML!

<div popover id="toggletip">
  <div>a div is not a button ✨</div>
</div>

This is a playground for learning and testing CSS selectors in a visual way. Start by selecting a playground or let's start with a random selector.

(via https://mas.to/@markwyner/113683573348550997)

There are many approaches.
One solution is to set the color-schema CSS property color-scheme: light dark; then use the light-dark function.

But did you know that you can also set the media attribute to conditionally load and apply CSS based on user preferences? Such as media="(prefers-color-scheme: light)"

This media attribute can also be set in JS too, in order to load the proper stylesheet.

Instead of an isOpen class, why not using aria-expanded="true" (except for <details)?

Why and caveats of aria-labelledby a tag in the node content.

There are good reasons to point aria-labelledby within an element. For example, to give an accessible name to a region based off of the heading within it.

A progressive enhancement with view-transition

Instead of

const Thing = struct {
   checksum: u128,
   number: u32,
   flag: u8,
};

use

const SoA = struct {
   checksum: []u128
   number: []u32,
   flag: []u8,
};

in certain circumstances:

• Reduced memory usage due to amortized padding. As flag is a byte, it requires some padding to align with larger fields like checksum.
• Better memory bandwidth utilization for batched code. If a loop needs to process all things, but the processing doesn't require all fields (at least for the majority of objects), then an array-based representation reduces the amount of data that needs to be loaded.

<meta http-equiv="refresh" content="1"> for simple web pages.

A french programming language

Pour ma part, je trouve que c'est plutôt une bonne idée, notamment pour faire le lien entre le métier et les dev.

Côté dev : il est plutôt facile de générer du code à partir de ce langage

Côté métier : il est plutôt facile à lire, et donc de voir s'il y a des erreurs.

La lecture ne nécessite pas un gros bagage technique, et ceux qui font déjà du Excel s'en sortirons très bien.

Qui plus est, je vois un avantage très rare par rapport aux autres langages plus "classiques" : le support des unités.

Le projet est hébergé sur Github, avec un le site officiel public.codes.

A deep-dive

• Select all non-summary children of a <dialog> with ::details-content
• appearance: base-select for <select> to customize it
• <dialog> can be closed with method="dialog" on a form.
• Popover is here too
• input type="checkbox" can now have a switch attribute. See the smashing magazine. It has very limited support currently.
• A <search> tag is available for 90% of the users

Are CSS reset needed? The author generates diff-images with and without.

Objects turn the structured data into a stream of integers; hashers turn the stream into a numeric hash.

One problem? The hash-functions use blocks instead of streaming these days. On the contrary, the Hasher API needs to stream unsigned integers. So in order to use this API a byte must work with the hasher. It collides with the current block where 128 bits can be hashed at the same time...

The bottom line is: hashing a product type can only be efficient if it’s linearized.

The advantage of #!/usr/bin/env bash is that it will use whatever bash executable appears first in the running user’s $PATH variable.

Using margin-inline und max()