The author provides an history about the base, reset ,normalize and classless stylesheets.

The page itself is a demo of base.css, a classless stylesheet, and document itself.

Each topic is covered by a description, the rules and the relying css implementation. Each rule is well meant for accessibility such as "You should read a caption without having to scrol". It starts with the CSS Properties.

Use CSS properties for customization. There is the root style rules:

1. Set customization options on the the root element for all elements
2. Use native properties for font family and font size options.a
3. For font size, CSS has font relative units to create variations from the root or parent value.
4. For font family, it's useless to use custom property. Its value, a string value, can't create variations. Variation of font family would be by, if possible, using font variant alternates. a
5. Use custom property for line height. This maintains unitless value while creating automatic variations for blocks. b
6. Use custom property for pseudo content. This enables fallback trick for its native counterpart. c
7. Use custom property for the others due to lack of native properties. d
8. Prevent adjustments of font size orientation changes in iOS
9. Remove padding and margin, use box model of border box, and inherit color and font on all elements.

The library defines carefully the font-family, font-size, line-height, line-length, color, styles, blocks, mixes and phrases.

A font family declaration is a set of typefaces to create safer designs. Using multiple typefaces requires a sound knowledge of type pairings: space, type (sans, serif, cursive), wight, width, style normal and italic, cases: smalls, caps and smapp caps, roles: caption, body and display.

Font-sizes are defined with the em unit and relative calculations based on a --font-scale value.

The line height is computed based on the element around it. For example the paragraph following a hgroup with a heading. It creates a cohesive design.
All line height are derived from a --line-height value.

To respect the support of dark and light mode, developers must use the light-dark() function. Prefer human-based color mdoels such as LCH or OKLCH. The primary color component is Hue. Lightness and Chroma creates variations. Variations for one hue is a monochromatic pallete; for 2 hues is diadic; for 3 hues is triadic; and so on. CSS can programmatically create a live pallete from one hue using calc(). A 90deg deviation creates a complementary scheme; a type of diadic.

The web is filled with unsemantic styles: the absence of styles, the misuse of styles, the lack of unique styles. This can be seen through the lens of base stylesheets, as of writing.
All components — blocks, mixes, and phrases of media and forms — should have unique styles.

Blocks define region in the HTML document. Subsections uses one _ for each nesting level.

Mixes use all-round borders to define the boundary of their content

Phrases is all about content and forms. They are inline content, so their block content is maintained within a line height. Each phrase is clearly identified

This project looks really good. It saves a webpage into a single .html file. It's portable, easy to use and perfect for backups.

See https://www.getsinglefile.com/

There is also a cli version of it: https://github.com/gildas-lormeau/single-file-cli

Monter une vidéo dans le navigateur. OK je prends :)

Ras le bol partagé

Things I already know, but are useful to share

It can be useful someday

Passer les PNG/JPEG qualité 90 à AVIF qualité 50 permet d'économiser au moins 75% de bande passante.

L'idée plus innovante est de compresser au préalable les ressources avant qu'elles soient utilisées.

[Précompresser avant de déployer] veut dire qu’on peut les compresser une seule fois, avec le niveau maximum, et demander à nginx de servir directement les fichiers pré-compressés. Zéro CPU à chaque requête, mais surtout un meilleur ratio au final, car on peut compresser plus fort.

En outre, Zopfli permet de compresser en .zip avec 3 à 8% d'efficacité en plus.

# Serve pre-compressed files generated at build time
gzip_static on;
brotli_static on;  # nécessite libnginx-mod-http-brotli-static

# Fallback pour les contenus non pré-compressés
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript
           application/javascript application/json
           application/xml image/svg+xml;

La compression Brotli permet de compresser à hauteur de 81% le HTML. La score des Web Core Vitals est passé de 70-85 à 99%.

Le web étaient constitués d'humains créant du contenu pour des humains. Maintenant, l'IA crée du contenu (en publiant sur le web) que d'autres AI (en piochant sur le web) vont résumer pour les humains.

Le web est donc invisibilisé, et la qualité du contenu médian ou moyen décroît.

Another ode to the web

The Web of homemade websites. It’s not the Web of perfect websites. But it's — the Beautiful Web.

The map uses webrings as subway line and each station is a website. Some websites cross many subway lines.

Un retour des posts publié entre 1996 et 1998. Le web a tellement évolué depuis!

A comparison of the common points and the differences.

What excites me most is finding people naturally gravitating toward these ideas without necessarily knowing the terminology. They’re tired of algorithmic feeds, data harvesting, and the performative nature of social media. They want something more authentic, more human.

The "Open Web" works only because the affordances are here.

As AI allows to easily create and consume content, these affordances for the open web have changed. For those who want to sell ads next to their content or entice people to subscribe, the rise of AI feels like betrayal.

Furthermore, on a technical level serving content to anyone who asks for it on a global scale might be a commodity service now -- and so very inexpensive to do, in some cases -- but it’s not free, and the costs add up at scale.

It's about control. As hyperbole, some what pixel-perfect control over the information is presented, used and its conditions, whereas some open access advocates want all information to be usable for anything without conditions. Both would be bad for the Open Web

1. It works with URLs
2. It turns URL into an HTTP request
3. It resolves the server address
4. It establish the TCP connection with the server
5. It exchanges HTTP requests and responses
6. It parses the HTML response to build the DOM tree
7. It layouts, paint and compose the display

The tool is actually great to manage a small indie website. It covers web, now and blog pages. It also has a status log, pics and Pastebin included.

A domain names marketplace (and more it seems)

They are browser specific (Payment API, Passkeys, Speech recognition). It matters because the portability between browsers is then an illusion, the respect of the privacy is unreliable and they are a way to keep small competitors out