Skip to main content

Implementing Internationalization (I18n) with GitLocalize: A User-Friendly Approach

Published: 2023-02-19
Updated: 2023-02-19

I18n

Internationalization, also known as I18n, is the practice of supporting different languages and cultures in an application. As a consultant, I frequently encounter the tedious task of updating text for clients repeatedly. Often, clients have difficulty defining the specific text to be used in their application. This is a common issue for many applications, and defining text based on a paper prototype or a higher-fidelity prototype created in Figma can be challenging. In my view, it can be highly beneficial to store context-heavy text as key-value pairs in a .yaml file or other appropriate format.

GitLocalize

During my search for internationalization (i18n) tools, I discovered several promising projects, including GitLocalize, Locize, and i18next. After consideration, I found GitLocalize to be the most user-friendly and straightforward tool to implement, providing an exceptional experience for the translator, customer, user, or domain expert. Setting up GitLocalize was a breeze, and in the following section, I will provide detailed images demonstrating how it can be accomplished.

GitLocalize frontpage GitLocalize frontpage

I connected my GitHub user with GitLocalize, which worked without any issues. I was presented with an empty dashboard and my GitHub details.

Connection aquired Empty project page in GitLocalize

I added jacobqvist.com as project and was now met with 10 incomplete tasks.

Repo connection succesful Connected repo with incomplete tasks

It was time to proceed with the translation from English to Danish, which should have been an easy task. However, I have decided not to translate my blog as it seems like an unnecessary use of time. Given that I am the sole content creator, and most of the content contains technical jargon in English, writing it in Danish would be odd. Nevertheless, for companies that gather texts from users and customers, internationalization can provide significant value. It can also be applied to domain-specific cases, such as distinguishing between healthcare professionals and laypersons. Healthcare professionals often use Latin terms, while the general public does not, which makes internationalization crucial in such scenarios.

Connection aquired Translation view in GitLocalize

The results are shown in the following two figures:

Post in English Hello World post in English

Post in Danish Hello World post in Danish

Next post

In my next post, I plan to cover one of two topics: either transforming a standard monolithic NG RXJS Angular project into an NX RXJS Angular project with a micro-frontend architecture, or discussing various styling techniques. Currently, I am exploring the concept of micro-frontend architecture, which appears to be a promising area to delve into. As for styling, the topics I am currently researching include:

  1. My styling conventions
  2. Colors and accessibility
  3. Building a reusable design system
  4. Acing modular scale
  5. Different styling approaches with a huuuuge discussion.