DEV Community: Zoran Luledzija

Localization Statistics 2023

Zoran Luledzija — Mon, 25 Dec 2023 11:59:48 +0000

Localizely continued its annual tradition of researching the software localization industry, conducting another thorough study in 2023. This research was specifically designed to track the evolving trends and methodologies within software localization. The collected data from this research has been carefully analyzed and compiled into the Localization Statistics 2023 report.

The study gathered responses from 2,516 individuals engaged in a diverse range of professions, hailing from different corners of the globe.

Here is a brief overview of the survey results.

Number of target languages

10 most popular target languages

German (most popular)
Spanish
French
Italian
Arabic
Portuguese
Russian
Dutch
Chinese
Japanese

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2024 with regard to localization?

Simplicity of workflows
Quality (level, consistency, ...)
Level of scalability
Speed
Efficiency
Cost

For additional information, please refer to the original publication of the article.

Localization state survey 2022

Zoran Luledzija — Fri, 27 Jan 2023 16:21:05 +0000

Localizely conducted research about the state of localization for 2022. The aim was to detect the current trends in software localization and areas for improvement.

The survey was conducted on 2,024 respondents of various occupations from all over the world.

Below you can find the results of the survey.

Number of target languages in projects

10 most popular target languages

German (most popular)
Spanish
French
Russian
Italian
Arabic
Portuguese
Dutch
Chinese
Japanese

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2023 with regard to localization?

Quality (level, consistency, ...)
Simplicity of workflows
Level of scalability
Speed
Efficiency
Cost

More information can be found in the original published article.

Next.js internationalization (i18n) tutorial

Zoran Luledzija — Wed, 30 Mar 2022 14:34:17 +0000

Next.js is an open-source framework created by Vercel (formerly ZEIT). It is built on top of React and provides an out-of-the-box solution for server-side rendering (SSR) of React components. Furthermore, it supports static site generation (SSG), which can help us to build superfast and user-friendly websites in no time. Although a relatively young framework, it has a good foundation for internationalization which complements well with existing i18n libraries. In the following chapters, we will explain how to set up internationalization in your Next.js app.

Create a new Next.js project

First, let's create a new Next.js project with the create-next-app CLI tool.

npx create-next-app nextjs-i18n-example

Add React Intl dependency

As we mentioned earlier, the Next.js works well with existing i18n libraries (react-intl, lingui, next-intl, and similar). In this tutorial, we will use the react-intl.

cd nextjs-i18n-example
npm i react-intl

Add config for internationalized routing

Translations and routing are two main pillars of internationalization. The previously added react-intl library is going to handle translations and formatting. When it comes to routing, Next.js has built-in support for that. This built-in support offers two options, sub-path routing, and domain routing. In this tutorial, we will use sub-path routing as it is less complex and more common for average websites. For that, let's update the next.config.js file with the i18n config.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    // The locales you want to support in your app
    locales: ["en", "fr"],
    // The default locale you want to be used when visiting a non-locale prefixed path e.g. `/hello`
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

Note: The internationalized routing is available since Next.js 10.

Create localization files

The next important thing is to add localization files. For that purpose, let's create a lang directory. Within it, add two JSON files: en.json and fr.json. These files are going to hold translations for English and French, respectively. Below, you can see the project structure after adding the mentioned files.

nextjs-i18n-example
|-- lang
|   |-- en.json
|   |-- fr.json
|-- pages
|   |-- api
|   |-- _app.js
|   |-- index.js
|   |-- ...
|-- public
|-- ...
|-- package.json
|-- package-lock.json

Afterward, fill in localization files with messages that we will use later.

The en.json file:

{
  "page.home.head.title": "Next.js i18n example",
  "page.home.head.meta.description": "Next.js i18n example - English",
  "page.home.title": "Welcome to <b>Next.js i18n tutorial</b>",
  "page.home.description": "You are currently viewing the homepage in English 🚀"
}

The fr.json file:

{
  "page.home.head.title": "Next.js i18n exemple",
  "page.home.head.meta.description": "Next.js i18n exemple - Français",
  "page.home.title": "Bienvenue à <b>Next.js i18n didacticiel</b>",
  "page.home.description": "Vous consultez actuellement la page d'accueil en Français 🚀"
}

Configure react-intl in Next.js project

Internationalized routing and localization files are just the first part of the task. The second part is setting up the react-intl library. Below, you can see what changes have been made in the _app.js file.

import { useRouter } from "next/router";
import { IntlProvider } from "react-intl";

import en from "../lang/en.json";
import fr from "../lang/fr.json";

import "../styles/globals.css";

const messages = {
  en,
  fr,
};

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <Component {...pageProps} />
    </IntlProvider>
  );
}

export default MyApp;

Adapt pages for i18n

We did most of the work. The last step is to put all this together. Therefore, we are going to update the index.js file under the pages directory. Below, you can find two approaches for accessing the localization messages, imperative and declarative. We've already covered these two ways of usage, formatting options, and similar in another post.

The index.js file:

import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { FormattedMessage, useIntl } from "react-intl";

import styles from "../styles/Home.module.css";

export default function Home(props) {
  const { locales } = useRouter();

  const intl = useIntl();

  const title = intl.formatMessage({ id: "page.home.head.title" });
  const description = intl.formatMessage({ id: "page.home.head.meta.description" });

  return (
    <div className={styles.container}>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <link rel="icon" href="/favicon.ico" />

        {/* Add hreflang links */}
        <link rel="alternate" href="http://example.com" hrefLang="x-default" />
        <link rel="alternate" href="http://example.com" hrefLang="en" />
        <link rel="alternate" href="http://example.com/fr" hrefLang="fr" />
      </Head>

      <header>
        <div className={styles.languages}>
          {[...locales].sort().map((locale) => (
            <Link key={locale} href="/" locale={locale}>
              {locale}
            </Link>
          ))}
        </div>
      </header>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <FormattedMessage id="page.home.title" values={{ b: (chunks) => <b>{chunks}</b> }} />
        </h1>

        <p className={styles.description}>
          <FormattedMessage id="page.home.description" />
        </p>
      </main>
    </div>
  );
}

Congratulations! 🎉
You have successfully set up internationalization in your Next.js project.

More details and examples you can find in the original post.

All code samples used in this article are available on the GitHub repo.

Unicode

Zoran Luledzija — Wed, 22 Dec 2021 16:37:26 +0000

Unicode is an international character encoding standard. It provides a unique number (code point) for every character, no matter what the platform, program, or language is. Furthermore, it represents the most commonly used encoding today.

ASCII

ASCII (American Standard Code for Information Interchange) is one of the first widely used character encoding standards. People from the telecommunication and computing industries in America created it during the 1960s. As a 7-bit coding system, it supported 128 (i.e. 2⁷) characters, 96 printing characters, and 32 control characters. That was sufficient to encode numbers, some special characters, and the letters of the English alphabet.

However, the spread of computing and the Internet has created a need for other characters as well. As computers used 8-bit bytes, some manufacturers decided to use the remaining 8th bit in the ASCII code and thus expand the number of characters to 256. This 8-bit encoding is often referred to as “Extended ASCII” or “8-bit ASCII“. With the growth of different 8-bit encoders, data exchange became complicated and error-prone. That was a sign that it was necessary to find some universal solution that would work for all languages and cover all the special characters.

Unicode

Unicode provides a unique code for every character, in every language, in every program, on every platform. It enables a single document to contain text from different writing systems, which was nearly impossible with earlier native encodings. Moreover, Unicode supports emojis, which are an indispensable part of communication today.

Unicode Transformation Formats

Unicode defines several transformation formats, also known as UTFs (Unicode Transformation Formats). These transformation formats define how each code is represented in bits in memory. Below is a brief overview of the three UTFs that Unicode Standard provides.

UTF-8
- variable-length character encoding that uses from 1 to 4 bytes (from 8 to 32 bits)
- backward compatible with ASCII
- the most common encoding on the web (~98% of all web pages)
UTF-16
- variable-length character encoding that uses 2 or 4 bytes (16 or 32 bits)
- internally used by Microsoft Windows, Java, JavaScript, etc.
UTF-32
- fixed length character encoding that uses 4 bytes (32 bits)
- faster to operate but uses more memory and wastes a lot of bandwidth

Final thoughts

Thanks to Unicode, today's software runs on a variety of languages and platforms. That was hard to imagine a few decades ago. In other words, today's software localization would be impossible without such an encoding standard.

More details regarding Unicode you can find in the original post.

React internationalization with react-intl

Zoran Luledzija — Wed, 21 Apr 2021 14:34:40 +0000

Struggling with React internationalization? Not sure which library to pick? Need to support a variety of formatting options? Many questions arise when we need to choose the best solution for our project. In this post, you will find how to set up internationalization in your React app with one of the most popular libraries out there, the react-intl.

The react-intl is a part of Format.JS, a set of JavaScript libraries for internationalization and formatting. It is a well-documented and maintained library. It works well in all major browsers. For older browsers, there are polyfills. Plenty of formatting options and support for the ICU Message syntax makes it very handy.

Let's start.

Create new React project

First things first, let’s create a new React app with Create React App.

npx create-react-app react-intl-example

Add React Intl dependency

To use the react-intl library in the project, you need to add it as a dependency.

cd react-intl-example
npm i --save react-intl

Create localization files

The next step is to create the localization files for the required locales. It is good practice to keep all localization files in one place (e.g. src/lang). In this example, we will add three JSON files under the lang directory: ar.json, en.json, and es-MX.json. These files are going to hold translations for the Arabic, English, and Spanish (Mexico).

Below, you can see how the project structure should look after adding mentioned files.

react-intl-example
|-- lang
|   |-- ar.json
|   |-- en.json
|   |-- es-MX.json
|-- src
|   |-- App.js
|   |-- App.test.js
|   |-- index.js
|   |-- ...
|-- ...
|-- package.json
|-- package-lock.json

As we are going to use localization messages later, let’s populate added files with some content.

ar.json:

{
  "message.simple": "رسالة بسيطة."
}

en.json:

{
  "message.simple": "A simple message."
}

es-MX.json:

{
  "message.simple": "Un mensaje sencillo."
}

Wrap your app with the IntlProvider

Finally, wrap the top-level app component with the IntlProvider from the react-intl library and pass the appropriate messages (check the LocalizationWrapper component).

App.js:

import React, { useState, useEffect } from "react";
import { useIntl, IntlProvider, FormattedMessage } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function getDirection(locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
      return "ltr";
    case "es-MX":
      return "ltr";
    default:
      return "ltr";
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);
  useEffect(() => loadMessages(locale).then(setMessages), [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App locale={locale} direction={getDirection(locale)} onLocaleChange={(locale) => setLocale(locale)} />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  const intl = useIntl();

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction}>
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
      </div>
    </div>
  );
}

Congratulations, you have successfully set up internationalization in your React app!

More details and examples you can find in the original post.

All code samples are available on the GitHub repo.

We hope you found it helpful.