Use proper contrast to make fonts readable

project: https://github.com/spiritov/ds.css

That's a way

It's a chrome-only thing for now using shape()

A way to create demo from UI components: create video in the browser directly, so the recordings can be changed, replayed or its speed can be updated.

The reason I will never go back: it is code, so it is repeatable. A stat is wrong? Change a number and rerun. A beat feels rushed? Nudge one timestamp. Want the same demo for four different products? Loop over four pages and render them all while you make coffee. There is no take to redo and no quality lost to another export.

It seems what the UI does can be a browser extension.

Animations should be OK for each frame

A design system documentation tool

• choose fonts wisely
• optimize the font display:

  body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }

• golden ratio for line-height
• keep the amount of characters per line to 90
• prefer SVG and WEBP formats

j'aime beaucoup le système de grille du planning. Il permet de situer plusieurs évènements dans la journée.

L'implémentation est décrite sur https://fourbi.eu/billet/2026-05-13-paris-web-2026-la-grille-de-programmes

The library parses rich schemas (nested sections, $ref, arrays, key/value maps, pattern properties…) into a navigable form tree, renders it as a keyboard-first editor, and validates the result after every edit so users always see the full list of issues before saving.

It can be useful someday

Paste the raw source of an email into the form on the front page. The email will then be parsed, decoded, separated into its various MIME parts, and displayed in an easy to view fashion. Image attachments will be displayed as images. HTML parts will be rendered in Chromium (with javascript and plugins, disabled) and then also displayed as an image. IP addresses in headers and message bodies will be identified, classified, and highlighted along with a flag representing their origin country. Hostnames and email addresses will also be identified and highlighted.

Le mode sombre est optimal lorsque l'environnement est faiblement éclairé, l'écran de type OLED économise de l'énergie et pourrait aider à maintenir la productivité sous stress.

Le Dark Mode est perçu comme moderne, sophistiqué, high-tech et mystérieux.

Le light mode inspire confiance et professionnalisme.

Comment créer un bon dark mode:

• les teintes noires et blanches magiques pour le dark mode:

  background-color: #181818;
  color: #fafafa;

• augmenter la taille du texte (1.2rem / 20% plus grand pour le texte courant)
• utiliser des polices grasses, jamais de light, mais des graisses regular ou medium
• laisser le choix du dark ou light mode

The website design changes every time it loads.

See https://codeberg.org/vasilis/the-web-you-want

The breakpoint is used for mobile, but appears inconvenient for tablet or half-screen windows.

Solutions:

• having more breakpoints in between
• design with container queries in mind
• make the design dynamic at its core, meaning that it can change based on the number of items
• leverage well supported features like Grid and Flex

The same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word.

Accessibility is a must. Here are some examples

1. When color disappears completely

• Buttons that look clickable even without color
• Links that are underlined or styled consistently
• Hierarchy created through spacing, borders, size, and structure

2. When nice colors choices stop working

• Contrast that survives more than one type of vision
• Less reliance on subtle color differences
• Clear affordances that don’t depend on perfect perception

3. The most color blindness is ignored

• Meaning that survives without red or green
• Icons, labels, or position reinforcing importance
• Safer decisions and faster understanding

4. When text becomes slightly blurry

• Text that stays readable when slightly blurred
• Comfortable line height and spacing
• Zoom that doesn’t punish the layout

5. When you can only see a small part of the screen

• Clear headings that anchor the page#
• Logical reading order
• Visible focus states that guide navigation

7. When letters won't stay still (dyslexia)

• predictable layouts
• plain, calm language
• no uneccessary visual tricks

8. When language stops making sense

• plain language
• clear labels
• information that unfolds gradually, not all at once