Daily Shaarli
November 14, 2023
The author proposes a serie of question instead of sentences.
The 4 examples are from the WAI, Deque, U.S. Web Design System et Tommy Feldt.
- use
langfor the language of the page, then the other parts of the page with a different language - support different writing direction. Logical CSS properties help.
- handle text expansion with adaptive layouts. Avoid to truncate the text.
- apply a minimum width to avoid text shrinking in other languages. Also think about the height.
- readable typography is important
- make sure every user-facing string is translated such as alt-text, title or desc nodes in SVG.
- different languages have different word order, so avoid string templates
- ensure consistency of microcopy
Microcopy is all the little bits of text that appear throughout the site: the nav links, the sidebar headings, the form field labels, stuff like that. When microcopy is written and used consistently, the site layout becomes much more predictable, and users won't have to guess
It means the atoms and some molecules in atomic design.
If you have a personal website: how did it change your life?
This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content.
This setup1 is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere2 like a normal person.
Instead, it could be better to use:
- community pattern: everyone else is doing it. Everyone sees it they know exactly how and why it is there.
- readability pattern: created for the sake of making more readable code. The only true goal is writing code that anyone can reason quickly about.
- performance pattern: squeeze the code for maximum performance, and it can degrade readability.
- guardrail pattern: it exists to avoid known foot guns such as magic number
Often people see "best practices" as community, readability, or guardrail patterns. It is also time as professional that we use a richer vocabulary.