Lessons From Linguistics: i18n Best Practices for Front-End Developers

In general a good short rule of thumb is to always always _always_ write out the full sentence you want to translate and use the tooling to interpolate everything you want to put in it. That way the translator always sees the full context and you make it harder (although not impossible) for yourself to shoot yourself in the foot. Another recommendation I would add is to use two meta locales in development in addition to whatever you need to support otherwise: id and pseudo. The id locale should be an identity function so you (and the translator and everyone else) can open up a page and see what keys are used on that page. The pseudo locale should be either random or pseudorandom text and is good for both ensuring you haven't accidentally left something hardcoded as well as checking how your layout plays with different length strings. These ideas alone will get you most of the way most of the time, and they have the added benefit that they're straightforward to teach to juniors.

With formatjs [0], you don't have to split the sentence for interpolation. The same example as in the article can be implemented as:

    const message = defineMessage({
      defaultMessage: 'Learn more about supported images.',
      description: 'Footer text containing a hyperlink',
    })

and the anchor element can be interpolated as:

    formatMessage(message, {
      a: (chunks: ReactNode) => {chunks},
    })

[0]: https://formatjs.io

Another aspect to be aware of is that English is often much shorter than the equivalent translated text, especially on buttons with text labels. I remember many years ago we used a rough rule of thumb of always doubling the space used for English to ensure there was enough space for the translated text.

The post is interesting as it exposes the problem statement.

Unfortunately, I expected from a Shopify Engineering blog that it would provide solutions to this problem like a JS library for i18n.

Disclaimer: As I'm not a frontend developer I'm not familiar with the ecosystem solutions.

This is a good article, though as someone who prefers references/tables to prose for technical topics, the real find for me was the link out to the Unicode CLDR project (which sadly contains a LOT of broken links right now due to a data migration effort but I'll bookmark it & hopefully it'll be navigable in future).

As someone with a Polish partner, who also fluently speaks my own weird minority local language (Irish), I'm more than well aware of pluralisation pitfalls; Irish may have one of the most complex rulesets, so much so that I'm almost certain it isn't represented in CDLR (possibly can't be). But I see the plural pitfall brought up in so many of these guide - I've always been curious about other unexpected/unintuitive pitfalls across languages out there. Would love if there was a simple reference of the most interesting (starting with plurals I guess).