A great guide on the modulo operator :)

The summary/details pattern is the best way to hide and show content.

Why is there the first rule of ARIA? Because ->

It is interesting as it avoids a typescript to javascript compilation.
It works with plain JS too.

A set of resources to use fluid typography instead of media queries

A template engine for HTML. It allows to build custom expression.

It is used by #FoundryVTT

Add snippets to get statistics from Core Web Vitals

A color gamut is a dimension in which we define colors, and the color space defines how we define a color inside the gamut.

For example, sRGB is a color gamut that spans a range of colors, and Hex, RGB and HSL are the spaces available to explore the gamut.

and the sRGB gamut becomes inconvenient:

• The technology allows better colors (at least a wider gamut than allowed by sRGB)
• Dead grey zones between two points in space.
• inconsistent levels of lightness

So two units have landed. One is oklch:

• l controls the lightness, and measured in a range of 0% to 100%
• c is the chroma value, measured in decimals between 0 and 0.37
• h is the same old hue of HSL, in the same range of 0deg to 360deg
• / a is the alpha in the oklch.

The chroma limit value could be infinite, but P3 Iphone display and sRGB are limited to 0.37.

“Chroma refers to the purity of a color. A hue with high chroma has no black, white, or gray added to it. Conversely, adding white, black, or gray reduces its chroma. It’s similar to saturation but not quite the same. Chroma can be thought of as the brightness of a color in comparison to white.” — Cameron Chapman

Similar to microdata.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns. - https://microformats.org/wiki/about

What is the difference between microformats and microdata? It seems that microdata is an extension of microformats. Also microdata is meant for HTML5, whereas microformats is meant for everything.

How to make an accessible skeleton with ARIA ?

Note that the skeleton pattern hides a bad design where the UI is slower than expected. So avoid it as much as possible.

Microdata is used to nest metadata within existing content on web pages: for example, a list of persons.

To create an item, such as a person, the itemscope attribute is used.
To add a property to an item, the itemprop attribute is used on one of the item's descendants.

1. Check if the image really needs a description. Maybe it is decorative. The W3C alt decision tree(opens in a new tab) is an excellent resource to help you categorize your photos.
2. Avoid writing "Image of", "Icon of", or "Picture of". Screen readers announce the presence of an image. Adding these words inside your alt is unnecessary.
3. Keep it as short as possible. Be specific but not overly descriptive.
4. Try to put the most essential information at the beginning of your description.

allyphanta11yphant teaches web accessibility, one step at a time, broken down into manageable pieces. We call these challenges. You won't need to read large amounts of text to complete those. Instead, you will learn by applying the concepts in code. Get started with your first web accessibility challenge and improve your skills.

A first approach of ARIA with a toggle button

How an array was built before Ecmascript v1

Compilers are pipelines with a serie of step. Each step transform the input and provides data to the next.

Each step has then a contract with the input provided and its output 😃

The author goes in depth.

We can completely segment one component of the compiler from another by having the right form of data structure in between them. To build that data structure, you don’t need to know anything that happens to it afterwards, you just need to know what it means.

To solve XDG misconfiguration, if wanted.