Writing for two languages from the start

Adding a second language to a finished site is an audit you did not ask for. Every assumption about the length of a word, the shape of a date, and the characters an identifier may contain gets tested at once.

Length is the obvious one

German compounds and French phrasing are routinely longer than their English equivalents. A navigation bar sized to fit Home, Archive, About has no room for Accueil, Archives, À propos — so it wraps, the header grows, and every offset measured from it is wrong.

The fix is not to shorten the translation. It is to stop hard-coding the consequence:

root.style.setProperty("--masthead-h", head.getBoundingClientRect().height + "px");

Identifiers are the subtle one

The one that is easy to miss is slugs. A common way to build a heading id is to lowercase the text and replace anything that is not a letter or digit with a hyphen:

text.toLowerCase().replace(/[^a-z0-9]+/g, "-")

That is fine until a heading is Conformité, which becomes conformit. Or Comment c'est mesuré, which becomes comment-c-est-mesur. Every accented character is treated as a separator, so the tail of the word disappears and the link that pointed at it no longer resolves.

Normalising first fixes it:

text.normalize("NFKD").replace(/\p{M}/gu, "").toLowerCase()

An identifier scheme that only survives ASCII is a trap for whoever adds the next language.

Ship the second locale early

The value of shipping two languages from the first release is not the second audience. It is that every one of these assumptions is caught while the code is small enough to change.