What's Crowdin?

Crowdin is a cloud-based solution designed to facilitate the translation and localization process for digital content, including websites and mobile apps. It stands out for its collaborative features, allowing multiple contributors to work on a project simultaneously, ensuring both consistency and efficiency in translating and localizing content for different regions and languages.

This course is designed to be a comprehensive guide for anyone looking to master Crowdin and enhance their localization strategies. Whether you're a developer, a content creator, or a project manager, this course will equip you with the knowledge and skills needed to utilize Crowdin effectively.

Here are some key highlights of the course:

• Introduction to Localization: Understand the fundamentals of localization and its importance in today's globalized digital world.
• Crowdin Explained: Dive deep into what Crowdin is, its ecosystem, and how it can streamline your localization process.
• Hands-on Tutorials: From creating a Crowdin account to uploading files and starting translations, the course provides step-by-step tutorials on every aspect of the platform.
• Advanced Features: Learn about Crowdin's advanced features, including translation memory, glossary, quality assurance checks, and much more.
• Practical Applications: The course covers real-world applications, like integrating Crowdin with Google Drive, GitHub, and even localizing a React app using Crowdin's powerful tools.

And here is the full list of sections:

• Introduction
• freeCodeCamp's Localization Effort
• What is Localization?
• Importance of Localization
• Translation vs. Localization
• Localized Resources
• Frequently Used File Formats
• Localization Terminology
• Introduction to Crowdin
• Important Terminology for Crowdin
• Create a Crowdin Account
• Log in and Log out
• Create a Crowdin Enterprise Account
• Activate the Free Plan
• Customize your Profile
• Create a Project
• Project Overview
• Project Settings
• Delete a Project
• Upload Files
• Start Translating
• Translation Editor
• Translation Editor Modes
• Go to Another File
• Show and Approve Strings
• Translate RTL Languages
• Translation Editor Settings
• Keyboard Shortcuts
• Download the Translated Files
• Translation Memory
• Glossary
• Quality Assurance (QA) Checks
• Upload Existing Translations
• Pre-Translation
• Offline Translation
• Invite Project Members
• Project Managers
• Tasks
• Project Reports
• Conversations
• Integrations (Google Drive as an example)
• More Integrations
• Crowdin Enterprise for Organizations
• Groups in Crowdin Enterprise
• Projects in Crowdin Enterprise
• Visual Studio Code Extension
• Translate a React App
• Introduction to react-i18next
• Crowdin GitHub Integration
• JS Proxy Translator Integration for Static Websites
• Crowdin In-Context Localization for Web
• Crowdin for Contributors
• i18next and Crowdin documentation
• Final Words

Localization is not just about translating text – it's about adapting your content to resonate with different cultures and languages. This course goes beyond the basics of translation, teaching how to leverage Crowdin to its full potential. Watch the full course on the freeCodeCamp.org YouTube channel (8-hour watch).

This book will teach you the fundamentals of localization and how to translate your website to reach a global community of users without any language barrier.

🔹 Where to Start

But where do you start?

That is an important question that managers often ask themselves when they decide to adapt their products and go multilingual.

In this book, you will learn all the fundamentals of localization from a conceptual and practical point of view.

You will learn how to localize files, websites, games, and any other type of resource on Crowdin, the cloud-based localization management platform that powers freeCodeCamp's localization effort.

We will cover the following:

• freeCodeCamp as a Real-World Example
• A Localization Effort by Humans, for Humans
• What are the Fundamentals of Localization?
• What is Localization?
• Translation vs Localization
• Importance of Localization
• Localization Terminologies
• Translating vs Proofreading
• What Types of Resources Can Be Localized?
• Common File Formats
• Localization Phases and Roles
• Crowdin Fundamentals for Localization Projects
• Important Terminologies for Crowdin
• Getting Started with Crowdin
• How to Create a Crowdin Account
• How to Customize your Crowdin Profile
• How to Create a Project on Crowdin
• Project Overview
• How to Customize your Project Settings in Crowdin
• How to Delete a Project in Crowdin
• How to Upload Files to your Crowdin Project
• How to Start Translating
• How to Use the Translation Editor
• Translation Editor Modes
• How to Switch to Another File
• How to View All Strings
• How to Translate RTL Languages
• How to Download the Translated File(s)
• How to Use Translation Memory (TM)
• Glossary
• Quality Assurance (QA) Checks in Crowdin
• How to Uploading Existing Translations
• How to Pre-Translate your Project
• Offline Translation
• Exploring Public Projects
• Crowdin for Teams and Organizations
• How to Invite Project Members and Contributors
• Project Roles
• How to Assign or Change Roles
• Project Managers
• Tasks
• Project Reports
• Conversations on Crowdin
• Crowdin Integrations and Productivity Tools
• How to Translate a Website on Crowdin
• freeCodeCamp's Translation Effort

Are you ready? Let's begin!

🔹 freeCodeCamp as a Real-World Example

freeCodeCamp.org is a real-world example of an organization and open-source project that has embraced the concept of localization for reaching a global community.

Our coding curriculum is available in many languages, including:

• English.
• Spanish.
• Chinese.
• Italian.
• Portuguese.
• Ukrainian.
• Japanese.

How to Choose a Language on freeCodeCamp.

Our community is actively working on translating freeCodeCamp into many world languages, including:

• Arabic.
• Azerbaijani.
• Bengali.
• Chinese Simplified.
• Dutch.
• French.
• German.
• Hebrew.
• Hindi.
• Indonesian.
• Italian.
• Japanese.
• Korean.
• Nepali.
• Persian.
• Portuguese.
• Romanian.
• Spanish.
• Swahili.
• Turkish.
• Ukrainian.
• Urdu, and more.

We have many world languages available for localization and we also run localized publications, YouTube channels, forums, and so on.

Coding Curriculum localization project and available languages.

🔹 A Localization Effort by Humans, for Humans

Our localization process is focused on what matters the most: our amazing community of learners who wake up every day excited about learning new skills.

We believe that language and culture should not be barriers to learning. Knowledge should be accessible worldwide.

This is why we started this process and why we'll continue our localization efforts until we reach our goal of guaranteeing access to knowledge around the world.

One of the key aspects of our localization process is that it is managed and run by humans, for humans. Translations are written and approved by members of our amazing community and staff.

Let's be honest, anyone can tell when a translation has been generated automatically. It's much more literal, it lacks the clarity, and it feels disconnected from the context and from the original tone of the text.

Human translators are much better at adapting languages, and translating sentences in a way that sounds more natural in different languages and cultures.

At freeCodeCamp, we have an amazing community of contributors who dedicate their time to translate our content and an amazing team of staff members who oversee the process with the ultimate goal of publishing high-quality translations for our learners.

Since we launched our localization effort, more than 2,000 translators and over 60 proofreaders have helped us accomplish our mission.

💡 Tip: If this sounds interesting to you and you would like to join freeCodeCamp's translation effort, please read our contributing guidelines. At the end of this article, you will find more information on our localization effort.

Managing such a large project with a worldwide community of contributors might seem complicated, right? How can we accomplish all of this as a non-profit organization?

You will get answers to those questions in this book.

We will cover all the fundamentals of localization, and the basic and advanced features of Crowdin.

Are you ready? Let's begin.

🔹 What are the Fundamentals of Localization?

We will start with an overview of the fundamentals of the localization process and the steps that you'll need to take to make sure that your product can be used without any language or cultural barriers.

What is Localization?

First of all, let's define localization.

According to the Cambridge Dictionary, localization is defined as:

The process of organizing a business or industry so that its main activities happen in local areas rather than nationally or internationally.

In the context of products and services, localization basically means adapting them to the language and culture of a specific population. This also applies to software products because they need to be adapted to different cultures as well.

Translation vs Localization

You may be surprised to know that the concept of localization is different from the concept of translation. It's actually broader.

The Cambridge Dictionary defines translation as:

The activity or process of changing the words of one language into the words in another language that have the same meaning.

Notice the key part of this definition: "changing the words to keep the same meaning."

Translation involves changing the words of a language into another language to keep their original meaning. It is very helpful but a bit limited because its goal is to say exactly the same thing in a different language.

However, localization can go beyond that to adapt the content better to another culture or country.

For example, localization is particularly helpful for marketing campaigns and ads that try to reach audiences and convince them to purchase their products. Certain cultures may accept certain colors better, or they may have local phrases or slangs that the local population is more familiar with.

In this case, localizing the campaign is better than writing a literal word-for-word translation.

Continuous localization takes this concept one step further. It involves localizing a product continuously as it is updated or expanded in an agile product development cycle. It is often used to localize software products.

Importance of Localization

Why should you localize your product or platform? Well, the world is very diverse, and different cultures have their distinctive customs and speak different languages.

Did you know that, according to the Linguistic Society of America, there are more than 6,000 languages in the world?

Among the top 20 most widely spoken languages in the world, we can find these:

• English.
• Mandarin Chinese.
• Hindi.
• Spanish.
• French.
• Arabic.
• Bengali.
• Portuguese.
• Urdu.
• German.
• Japanese.

💡 Tip: You can find more information on languages by total number of speakers in this article.

A large proportion of the world's population is not bilingual. Not everyone around the world has the opportunity to learn and master English as a second language but every single person around the world is a potential user of your product or platform.

That is why localization can be so important for you.

For example, if you are creating an educational platform, you will be able to reach people and accomplish your mission at a global scale by localizing your website and content.

If you are building a commercial product or platform, every single person around the world can be a potential user.

Don't let language become a barrier to reach your users. Localization can be your best ally.

Localization Terminologies

Now that you know why localization is so important, let's dive into some important terminologies that you'll come across very often in the context of translation and localization.

Internationalization

The action of becoming or making something become international.
— Cambridge Dictionary.

In the context of localization for a software product, it also involves adapting the user interface for working with other languages and making sure that it is ready to be translated.

Culturalized

Deriving from or imposed or conditioned by culture.
— Merriam-Webster Dictionary.

Every culture has different traditions and vocabulary. Culture can play a key role in how communities embrace products, campaigns, and platforms. Understanding how to adapt them is very important to succeed.

Pseudolocalization

The pseudo prefix is defined as:

Pretended and not real.
— Cambridge Dictionary.

That is exactly what pseudolocalization is all about. It is a process creating fake translations that act as placeholders for the real translations in a platform or product.

You may ask: "Why would we ever need to use fake translations?"

The answer is that we use them to check if our software is ready to handle multiple languages even before the translation process begins.

Checking if a language that tends to have longer or shorter words works well with our current user interface and checking if right-to-left languages are displayed correctly are common use cases.

This process is also helpful to find any strings that may still be hard-coded in the project source files. You may need to move them to the resources file where you keep all your project strings.

That is the main purpose of pseudolocalization: checking if everything is ready to start translating.

Machine Translation (MT)

The process of using artificial intelligence to automatically translate text from one language to another without human involvement.
— Amazon Web Services.

We will talk about this term in more detail because the localization management platform that we will use to translate our resources has this feature, and it can save us a lot time.

Translation Memory (TM)

A database that stores "segments", which can be sentences, paragraphs or sentence-like units (headings, titles or elements in a list) that have previously been translated, in order to aid human translators.
— Wikipedia.

With this feature, you can save previous translations and "reuse" them to save time.

💡 Tip: Note that the acronyms (MT and TM) are very similar and but they are different. Please take a moment to understand the differences between these two concepts because you'll see them in this book frequently.

Large Language Models (LLMs)

Deep learning algorithms that can recognize, summarize, translate, predict, and generate content using very large datasets.
— Nvidia.

These terms are fundamental if you are looking to dive into translation and localization.

You may also find words that use numbers to represent abbreviations. They are called numeronyms.

• L10n: this numeronym stands for Localization. The number 10 stands for the 10 letters between the l at the start and the n at the end.
• i18n: this numeronym stands for Internationalization (yes, it's a very long word!). The number 18 stands for the 18 letters between the i at the start and the n at the end.

💡 Tip: Sometimes, you may find L10n with the L capitalized or you may find it in lowercase, like this: l10n. Capitalizing the L is helpful to distinguish it from the i in the i18n numeronym (they can look very similar in certain types of fonts).

Translation vs Proofreading

Another important aspect that you should also know is the difference between translating and proofreading.

Translation involves changing the words from one language to another with the goal of keeping the same meaning.

But after translators have completed their work, the localization team will also need to review, edit, and approve the translations to make sure that everything is accurate and correct. This process of checking the translations is called proofreading.

Translating and proofreading are different stages of the localization process. We'll look these processes in more detail, and you will learn the steps involved and the role of team members in making sure that the content is localized correctly.

What Types of Resources Can Be Localized?

When we talk about translation and localization, the first thing that comes to mind is translating files with text, right?

But this is not the only type of resource that we can localize. We can localize documents, spreadsheets, websites, games, dialogues, scripts, audio, video, graphics, and so on.

Think about podcasts and videos. They can be localized with voiceovers. We just need to translate their transcripts, replace the original audio and synchronize the translated narration.

Captions and subtitles can also be localized. This is a form of text too but it comes from a video source. You can see how different types of files can be closely related in the localization process.

Finally, we can localize graphics such as image files, visual marketing campaigns, ads, and more.

The main point to highlight here is that localization and translation are not limited to written resources. There are wide variety of resources that we can localize to reach a wider audience.

Common File Formats

In the last section, we talked about different types of resources that can be translated. Now let's talk about the file formats that you'll usually find in the context of translation. You may also find them in the localization management platform that we will be working on.

💡 Tip: Even if you do not use these file formats right now, it's always helpful to understand what they do and what they represent. They may come in handy in the future, or in cases where you find them in the documentation of a localization tool you are using.

Comma-Separated Values (CSV) Files

• File extension: **.csv**
• This is a text file format in which the values are separated by commas.
• Stores tabular data such as numbers and text.
• Each line usually represents one record.
• Commonly used for data exchange and can be processed using programming languages.

HTML Files

• File extension: **.html**
• HTML stands for HyperText Markup Language.
• It is used to represent the structure and content of a website.
• If you open this file in a browser, you will see the content of the website.

JSON Files

• File extension: **.json**
• JSON stands for JavaScript Object Notation.
• Stores data in a simple plain text format based on key-value pairs.
• Used for data exchange, especially across the web because it is lightweight.

Markdown Files

• File extension: **.md**
• Used to create formatted text.
• It is a lightweight markup language with a specific syntax.
• Common applications include writing software documentation, blog posts, and articles.

PO (Portable Object) Files

• File extension: **.po**.
• Used by the **gettext** system, which is commonly used for writing multilingual programs. It is also widely used in the implementation of **GNU gettext**.
• **gettext** is a standard in many game development engines, like the Unreal Engine. It is used in many programming languages, including C, C++, PHP, and Python.

Text File

• File extension: **.txt**
• Used to store plain text.
• It does not contain images or non-text characters.

Extensible Markup Language (XML)

• File extension: **.xml**
• Used to store, share, and reconstruct arbitrary data.
• Commonly used to exchange data over the internet.
• Many localization frameworks use XML. For example, Android uses an XML-based file format to store translatable text.

XLIFF Files

• File extension: **.xliff**
• XLIFF stands for XML Localization Interchange File Format.
• Uses XML-based format.
• Used to standardize the way the localizable data can be passed between localization tools.

XLSX Files

• File extension: **.xlsx**
• Used to store data in spreadsheets.
• It is an abbreviation of "Microsoft Excel Spreadsheet".

RESX Files

• File extension: **.resx**
• Used by .NET applications for storing resources that can be localized.
• Uses an XML-based file format.

These are the most widely used file formats that you may find in localization projects but there are over hundreds of file formats that you can use.

Crowdin, the localization management platform that we will use on this book, supports more than 100+ file formats.

Overview of the supported formats in Crowdin.

Localization Phases and Roles

Awesome. Now that you know more about the types of files that you might find in a localization project, let's take a step further and see this process from a project management perspective.

What steps are required for localizing a project? Where should you start? Here are steps to help you answer those questions:

Step #1 - Define the project scope and goals

Before you start to localize any file, it's important to take a moment to analyze your project's scope and goals.

Ask yourself:

• What is your target audience?
• What are you trying to achieve by localizing your resources?
• How will you achieve those goals?
• What parts of your website, game, video, or resource do you need to localize?
• Do you need to translate it or localize it (adapt it)? Sometimes, translation can be good enough.
• If you need to adapt it to other cultures, how will you achieve this?
• Will you seek advice from people who understand these cultures? If yes, how will you contact them?
• If you speak other languages, can you translate the resources yourself or do you need to find help based on the complexities of your project?
• What is your available budget?
• Are your goals realistic given your current budget?

You should also determine who is going to translate your resources:

• Will you be translating the resources yourself?
• Will you involve your user-base or community in the translation effort?
• Will you hire a team or use the services of a translation vendor?
• Will you use automated processes like machine translation to translate or pre-translate resources with artificial intelligence?

💡 Tip: Crowdin has an option to hire their localization services and services from their partners in the Crowdin Marketplace.

Defining clear and realistic goals can be very helpful for avoiding any unexpected challenges during the process.

Write down your goals and make sure that you have an outline of the steps that you need to take to start, execute, and complete the localization process.

Step #2 - Create the source files to be localized

Now that you have clear goals and a clear project scope in mind, having the project source files is a must. These are the files that your localization team will localize.

You should make sure that you have all the necessary source files and resources before you start the localization process.

Of course, you can always add new resources and content later in the process, but having a clear initial idea of the complexities of a project will be helpful later on in terms of the time management and budget required.

Step #3 - Prepare your Software for Internationalization

Before the localization process begins, you need to prepare your product for internationalization, which is very technology-specific.

This is especially true for software products. The tools that you use to internationalize a React.js application may be very different from the tools that you use for an Android application, an iOS application, or a game.

However, the approaches and concepts that you will use are essentially the same.

You need to think about how you will adapt your user interface and services to other languages. For example, some languages may have longer or shorter words than the source language and this can change how elements are displayed.

Making sure that everything looks like you intend it to is very important, even before translators and proofreaders get involved in the process.

Another key step is making sure that you have all your translatable text separated from your code. When you translate software, all translatable text is extracted into a resource file that can be shared with translators or uploaded to a localization management platform.

The Crowdin team recommends storing larger files, such as HTML pages, and email templates, in a separate directory and keeping one directory per target locale. They suggest that "if you are translating your content into 5 target languages, you would have 5 copies of your resource files with "UI labels" and 5 directories with all other assets like HTML files."

If you are developing a web application, you will also need to implement multilingual routing. Your application should allow users to select their preferred language.

To do this, you have two options. You can:

• Add the language code as part of the domain name. For example: **fr.example.com**.
• Add the language code to the URL. For example: example.com/fr.

This is recommended for Search Engine Optimization (SEO) purposes.

Your software should also be able to handle and display adapted numbers, dates, and currencies since localization may also involve adapting them to different formats for different cultures.

Context will also be very important. Many internationalization tools create resource files with only one key-value pair for each piece of text. They associate each piece of text in the source language with its corresponding translation.

But it is very important to make sure that the resource files of your project also include some contextual information of the content or elements around them. This can be very helpful for translators because they can choose the best translations possible based on the context around the string.

Finally, your application should also be able to handle pluralization correctly because different languages may have different plural forms.

💡 Tip: Some of these features may be available with the software development kit (SDK) that you are using, but you may need to add some of them using third-party libraries. It's always important to consider and check this.

Step #4 - Assemble a Team

If you analyze the scope of the project and decide that you cannot complete it by yourself, then it's time to assemble a team.

You may hire a team or, if you are a non-profit organization like freeCodeCamp, use crowdsourcing to ask your community for help with the translations. You may be surprised by the number of generous and kind members of your community who will be willing to help you achieve your goals.

Once you have your team, you can assign them roles:

• Translators use the localization management platform you choose to translate the resources.
• Proofreaders review, edit, and approve the translations. It's always helpful to review the translations to fix any typos or inconsistencies.
• Developers work on integrating the tools you choose to automate the localization process.
• Project Managers coordinate the tasks of the project. They assign translators and proofreaders to specific tasks to make sure that the project moves forward as fast as possible.

Step #5 - Choose the Localization Tools

Choosing the right localization tool can be essential for reaching your goals. In the world of localization, there is a tool called Translation Management System (TMS).

This type of system is designed to help you automate repetitive tasks with the goal of optimizing your team's workflow. Humans will still have a role to play in the localization process, but with the help of a translation management system, they can achieve their goals much faster.

Usually, these systems can be integrated with content management systems (CMS) to import content automatically from other platforms, such as blogging platforms. Once it is imported, you can localize it and export it in order to publish the translated versions.

With the proper integrations, translation management systems can also check if there have been changes in the source files and import the new content automatically to start localizing it.

A real-world example of this process is right next to us — freeCodeCamp translates its source files in Crowdin. When a file from freeCodeCamp's curriculum changes, the new content is updated automatically in the system, so contributors can translate it and publish it very quickly.

Automating this process can be very helpful, especially for large organizations with different projects and files, so you do not have to keep track of these changes manually.

Step #6 - Translate the Resources

If you already chose a translation management system or another helpful tool, then it's time to start translating the resources.

Usually, these platforms will divide the source content into what they call "strings", which are parts of the original text that you can translate. Translators will translate the strings and save their translations.

The software will take care of storing and combining the strings to replace them in the correct place in your file.

Step #7 - Proofread the Translations

Proofreading is one of the most important parts of the process because it's like the last quality assurance step made by humans.

Proofreaders should check if the translations are accurate, and if there is a better way to adapt them to the culture or language. They can also check if there are typos or misspelled words, and if the correct format is used. They can edit and approve the translated strings.

Sometimes they may find an extra comma, a missing emoji, an extra space, or a missing letter and those small details really count for the user experience, so this step should be taken very seriously.

Step #8 - Export the Localized Resources

After proofreading and approving all the translations, the next thing to do is to export the final localized resources.

If your project is small, you may choose to do this manually. But if your project is more complex, you may choose to automate this process with different integrations on your localization management system.

For example, Crowdin has integrations with different platforms, including GitHub, Google Drive, Google Sheets, Dropbox, MailChimp, and so on.

If your translations are ready and approved and you set up a GitHub integration, the translated files will be updated automatically in your project's repository. You can even configure where the translated files will be stored.

Step #9 - Check for Changes

Projects and platforms can evolve over time. Files can change as you add new features and content. This is especially true for freeCodeCamp since we add new content and update our existing content on a regular basis.

So how can we handle these changes and still keep our platform properly localized?

Thanks to Crowdin, we can use integrations to be notified of the changes made to files and we can know if we have new strings to be translated.

When this happens, our amazing team of contributors and staff members will start translating and proofreading the new strings, repeating this cycle every time we need to bring the translation percentage back to 100%.

🔹 Crowdin Fundamentals for Localization Projects

Now that we covered the fundamental concepts of localization, we'll use them in the localization management platform that powers freeCodeCamp's localization effort.

What is a Localization Management Platform?

This is a platform that helps you and your team to localize your resources, products, and platforms efficiently through automation, cloud-based services, and integrations with other platforms.

We talked about translation management platforms before, right?

Localization management platforms are very similar but they help you to localize your products, which is even broader than just translating the text word by word.

What is Crowdin?

Crowdin is a localization management platform that can be described as:

A cloud-based solution that streamlines localization management for your team. (Source: Crowdin)

Crowdin's landing page.

The team mentions that, "It's the perfect place to effectively manage all of your multilingual content. It allows you to streamline the localization process and keep your workflow agile."

This platform is also great for teams and organizations who are planning to localize their content into multiple languages.

This is Crowdin's official website in case you would like to check it out:

You will be applying your knowledge of localization on this platform, and you'll even learn how to localize a website in just a few minutes with Crowdin's services and integrations.

Crowdin Workflow. Image taken from Crowdin's official website.

The Founder of Crowdin

Serhiy Dmytryshyn is the founder and CEO of Crowdin. He launched the company in 2009 and it now has over 2 million registered users in over 160 countries.

Serhiy Dmytryshyn, founder and CEO of Crowdin.

We had the opportunity to meet with him and ask him how he would describe Crowdin in five words. His answer was:

Continuous Localization for Modern Companies.
— Serhiy Dmytryshyn

His vision is for Crowdin to be the best platform for localizing products that are constantly evolving and for projects that may never have a final version because they will be continuously improved, expanded and updated, such as software products.

freeCodeCamp is an example of this. We are constantly adding and updating our content, which means that we also need an efficient and agile localization process to keep our platform accessible and updated for our global community.

The main goal of Crowdin is to:

Expand the potential of agile localization.

But what is agile localization? Let's see.

What is Agile Localization?

Agile localization is a process in which localization is incorporated into an agile product development cycle, with the goal of localizing the product as quickly as possible as it evolves.

💡 Tip: An agile product development cycle is a cycle in which a product is constantly being updated in an iterative approach.

An agile localization process differs from the traditional localization process in that the translations are not only written once and then added to the final product. They are continuously added and updated as the product changes.

This sound great, right?

But constant updates also require constant management, team work, file uploads and downloads, platform deployments, and so on.

This process could become complicated very quickly if your team does not have the right tools, but with a localization management platform like Crowdin, you and your team can save time and accomplish your goals more efficiently.

Advantages of Crowdin

Let's see some of the reasons why you should use Crowdin:

• You can connect your project with external services through integrations to automate part of the localization process.
• You can store your translations on their cloud-based services and grant access to team members and contributors from all around the world.
• You can generate machine translations automatically when a resource is created and ask translators to check and edit them to save time.
• Your team can check the quality and format of the translations with Crowdin's quality assurance, spellchecking, and proofreading features.
• You can generate reports, communicate with team members internally, assign roles and permissions, invite new members, and much more.

Basically, it's a platform that will make the localization process much easier for you and your team.

Crowdin's Free Plan

One great thing about Crowdin is that they offer a completely free plan with all the essential features for translators to start localizing their content.

Crowdin's free features.

Yes, it's free! You only need to create an account and you will be able to:

• Create unlimited public projects that everyone can see and contribute to.
• Add unlimited translators to your public projects.
• Create one private project.
• Host up to 60,000 words in your translations.
• Use helpful features for improving translators' efficiency.
• Add one integration to your project (we will talk about integrations in just a moment).

When you sign up and create your account, you can also start a 14-day free trial of their Team plan and they also have a 30-day trial period for their Business plan.

Frequently Asked Question (FAQ).

Crowdin also has other plans to fit your needs.

The plans that you can choose from.

Crowdin for Open-Source Projects and Educational Institutions

As a non-profit organization, freeCodeCamp has a special license that Crowdin grants to open-source projects and educational institutions to support their mission.

Frequently Asked Question (FAQ).

If you represent an open source project or an educational institution, you can contact Crowdin for an Open Source Request or an Academic License Request.

Crowdin for Open Source.

The Crowdin team will assist you and your organization.

Important Terminologies for Using Crowdin

Before we dive into practicing with the features of Crowdin, let's talk a little bit about important terminologies for working with localization management platforms.

You will find these terms very often in the sections that follow, so let's talk about them in detail.

Strings

When you upload a resource to Crowdin, the platform has to divide the text into smaller "segments" that can be translated and saved individually until all the translations are ready. These segments of the original text are what we call "strings". After they have been translated and approved, they cab be combined to generate the localized version of the resource.

💡 Tip: You can think of strings as the smallest units of the translation process. We do not translate the text word by word. We translate them string by string.

Source language

The source language is the original language of the resource. For example, freeCodeCamp's source language is English since the curriculum and documentation are created in English.

Target language

This is the language that our resources are translated into. For example, freeCodeCamp's projects has different target languages because we translate our resources into different languages.

Translation Memory (TM)

This is like a database where we store all the previously translated "segments" of our project. We may store sentences, paragraphs, or other units of the text with their matching source segments. The goal is to reuse the same translations later on in projects when we find them. It is a feature that can save you a lot of time because it only takes a few seconds to choose a saved translation. We can adapt them if we need to but we'll still have a foundation to work on.

Machine Translation (MT)

This process involves a computer software translating the resources of your project automatically without any human intervention. Usually, artificial intelligence and machine learning are part of this process. Translators and proofreaders can then take the computer-generated translations and adapt them or fix them as needed.

💡 Tip: Please note that translation memory (TM) and machine translation (MT) are very different even thought their acronyms are very similar. This may be a bit confusing at first, but always remember that "memory" refers to a translation's database and "machine" refers to an automated translation process.

QA Checks

QA means "Quality Assurance". This is the process of checking if the translations have the correct format and spelling. Crowdin has many QA features that can help your team find and fix any potential errors.

Glossary

This is a database of important terms in your project with their corresponding meanings. The goal of creating and maintaining a glossary is to give your translators more context about the terms and help them choose the most accurate translations.

Screenshot

A picture of what you can see on your computer screen at a particular moment. This is stored as an image file.

Crowdsourcing

This is a localization practice based on community cooperation. Basically, if you are an organization and your goal is to translate your resources into many languages, you can ask help from your community. freeCodeCamp's translation effort is an example of crowdsourcing.

Pre-translation

This is an automated technique that you can use in Crowdin to pre-translate your project automatically using either Machine Translation (MT) or Translation Memory (TM). Then, your translators can check the computer-generated translations and adapt them as needed.

Integrations

These are connections that you can make between Crowdin and other applications or services, such as GitHub, Google Drive, Google Sheets, and so on. This is how freeCodeCamp keeps its GitHub repository translated. When we add new strings, they are automatically uploaded to Crowdin and translators can start working on them.

Webhooks

These are automated "messages" that an application or platform will send to another application or platform when specific events happen. In Crowdin, you can send them when translations are completed, when files are proofread, and so on.

Command-line Interface (CLI)

This is a text-based user interface that we can use to interact with a computer program by entering commands. Crowdin has a command-line interface (CLI) called the Crowdin Console Client that allows you to synchronize localization resources with your project.

Application Programming Interface (API)

This is an intermediary that allows two applications to communicate with each other by sending information following specific protocols. Crowdin also has an API that can help you to integrate localization into your development process.

Custom Variables

In Crowdin, you can specify variables that should not be translated. They will be highlighted in the source strings that translators can see. To enable this feature, you will need to contact the support team at Crowdin.

Getting Started with Crowdin

After this detailed but super important introduction into the fundamentals of localization, now it's time to dive into practice and start working on Crowdin.

How to Create a Crowdin Account

If your goal is to create a project on Crowdin, you'll need to create an account if you don't have one already.

To do that, go to crowdin.com.

Crowdin Landing page.

Click on Sign up.

Sign up Button.

3. Create your account by filling and submitting the form. You will need to enter your email, username, and password. You will also have to agree to the terms by checking the checkbox.

Sign up form.

💡 Tip: After signing up, you will need to confirm your email address. You will receive an email from Crowdin with a link that you can click on to go to your profile. You should see a confirmation message saying that your email was confirmed.

After signing up (or logging in if you already have an account), you will see your new Crowdin profile where you can manage your projects, team members, workflows, activity, and so on.

New Crowdin Profile.

🎉 Congratulations! Now you have your Crowdin account and you are ready to start customizing your profile.

How to Customize your Crowdin Profile

To customize your profile:

Click on the small profile image at the top right, and choose "Settings" from the dropdown menu.

Customize your profile.

You will see your profile and the information that you can customize, such as your:

• Profile image.
• Full name, username, and email.
• Company and job title.
• Gender.
• A brief description of you.
• Language, timezone, and time format.
• Preferred languages.
• Appearance (light, dark, or based on your local time).
• Privacy. By default, your profile is public. Check this option if you would like to make your profile private.

Account Settings > Profile.

💡 Tip: From this page, you can also delete your account. You will see a red button at the bottom and a warning of the consequences of doing so. You should only click this button if you are absolutely sure that you need to delete all your projects and the data associated with them.

How to Create a Project on Crowdin

Now that you know how to customize your profile, let's create a project. You can create a project from your profile page.

If you are in a different part of the platform, you can go back to your profile by clicking on the your small profile image at the top right and click on "Profile", like you can see in the image below:

The Profile page.

To create a project, click on the "Create Project" button (the green one or the gray one, they are both equivalent).

Create Project (green button).

Create Project (gray button).

You will see a page where you can fill the basic information about your project, such as:

• Name.
• Project address. This is the URL for your project. If your project address has multiple words, separate them with dashes (-).
• Privacy settings (public or private).
• The source language.
• The target language(s).

Creating a Project.

💡 Tip: Your project address must be unique. It will be filled automatically when you write your project name. If it is already taken by another user, you will see a red warning and you will need to choose a different one.

You can choose as many target languages as you need. Just check their checkboxes and they will be added.

Target languages.

This what you should see when you start choosing your target languages:

Choosing some target languages.

You also have an option to pre-fill the selection with the top 30 languages without selecting them manually:

Select Top 30 languages.

💡 Tip: You can also create custom languages or copy the selection that you made for another project.

If you choose to add a custom language, you will see this:

Adding custom languages.

Since this is a completely custom language, you will have to specify:

• The language name.
• If it is a dialect of another language.
• The code for that language on Crowdin.
• Its three-letter code.
• Its locale-code.
• If the text will be written from left to right or from right to left.

• The plural form.

• After filling all these information, you are ready to create your project. Just click on the "Create Project" button at the bottom of the page.

💡 Tip: You can also click "Cancel" and go back to this page if you want to start over.

Now you should able to see your project. Of course, it will be empty at first but don't worry. We will take care of that in just a moment. 😉

New Project.

Project Overview

Let's have a quick tour of the project.

First, you can see the name of the project with its current privacy settings. My demo project is private. You can create unlimited public projects or one private project with your free Crowdin account.

Next to the project name, you will see two buttons: "Invite People" and "Buy Translations".

You can invite team members to join your project (we'll cover how to do that in this book) and you can also buy translations from Crowdin.

You can also find all the tabs you need to access the available tools for your project.

You will be in the "Sources" tab by default, where you can see the source files that you have uploaded and the strings of your project.

💡 Tip: You will also be able to create folders and add files.

Let's see the other tabs:

Dashboard Tab

This is where you will see a list of the project's target languages.

Dashboard tab.

Translations Tab

This is where you can upload existing translations, download your translations as a zip file, target file bundles, and set up over-the-air content delivery.

Translations tab.

Screenshots Tab

This is where you can upload screenshots of your project to help your translators with more context about the strings they are translating.

Screenshots tab.

Tasks Tab

This is where you can create and assign tasks to your team members.

Tasks tab.

Members Tab

This is where you can see all the members of your project with their respective roles, when they joined the project, and the actions that you can take for each member.

Members tab.

Integrations Tab

This is where you can add integrations to your project and see all the integrations that your project currently has.

Integrations tab.

Reports Tab

This is where you can see and generate reports on the activity of your project, including translation and proofreading.

Reports tab.

Activity Tab

This is where you can see the project activity.

Activity tab.

Discussions Tab

This is where you can open discussion topics to discuss aspects of the project with your team.

Discussions tab.

Tools Tab

This is where you can find more information on the Command Line Tool, API, Webhooks, and Crowdin in-context (a tool to translate web applications with a real-time preview).

Tools tab.

Settings Tab

This is where you can customize the project settings.

Settings tab.

Talking about project settings, let's dive into the settings that you can customize for your project.

How to Customize your Project Settings in Crowdin

You will find different categories of project settings.

Settings tab.

General Settings

The general settings include:

• Name.
• Public description.

General Settings.

• Branding, including a custom domain and a project logo.

Branding Settings.

• Badges to show the progress of the localization process.
• An option to delete the project.

Badges and Deleting a Project.

Privacy and Collaboration

In this category, you will find settings to manage the privacy and notifications of your project.

Privacy and Collaboration.

You can manage your project's visibility in the project visibility settings. You can set your project to be public or private.

Next, we have the privacy settings. You can read a short description of each one of these settings below each corresponding item. To enable a setting, check its checkbox.

Default privacy settings. You can customize these to fit your needs.

Finally, the notifications settings for translators, project managers, and developers can also be customized. Just check the notifications that you would like to enable.

Notifications settings.

Languages

In the languages category, you can change the source and target languages of your project.

Languages settings.

Quality Assurance (QA) Checks

I promised you that this would be important, right? Here we are. In the quality assurance (QA) category, you can enable QA Checks and choose which specific QA checks you would like to have in your project.

QA Checks category.

Crowdin mentions that:

The main aim of quality assurance (QA) checks is to help you efficiently handle different language-specific aspects in translations and ensure they are formatted the same way as the source strings and will fit the UI just as well. Some typical QA check issues include missed commas, extra spaces, or typos.

It’s recommended to review and resolve all QA check issues before building your project and downloading translations.

These quality assurance checks include:

• Empty translations.
• Length issues.
• Tags mismatch.
• Spaces mismatch.
• Variables mismatch.
• Punctuation mismatch.
• Character case mismatch.
• Special characters mismatch.
• "Incorrect translation" issues marked by project members.
• Spelling mistakes.
• ICU (International Components for Unicode) Syntax Errors.
• Consistent terminology that follows the project glossary.
• Duplicate translation.
• FTL syntax.
• Android syntax.

After you select the QA Checks that you would like to enable, just click on the "Save" button and your changes will be saved.

Save Button.

Translation Memories

You will also find a category for Translation Memories settings.

Translation Memories category.

We will talk about Translation Memories in detail later on, but know that this is where you can customize all the settings of this helpful feature.

Glossaries

You can also manage your glossaries from the Glossaries category.

Glossaries category.

You can check your assigned glossaries and click on links to view the records of each glossary. At the top, you will also find a link to the Translate Glossary App.

Import

In Crowdin, you can import source strings and you can customize settings such as how to handle duplicate strings and how to count the words.

Import settings.

Export

The export category has helpful settings for exporting your translated files.

You can choose to:

• Save context information in the files.
• Skip untranslated strings.
• Skip untranslated files.
• Export only approved translations.
• Automatically fill in regional dialects.

Export settings.

Labels

Labels can be helpful for adding context to strings and organizing them by topics. They can be useful when you want to search for specific strings.

You can add labels from this category in the settings:

Labels settings.

Creating a New Label.

Parser Configuration

With the Parser Configuration, you can configure how Crowdin imports and exports selected file types to fit your needs.

Parser Configuration category.

File Processors

The last group in the settings is File Processors, which allows you to customize how to process supported file formats.

File Processors category.

How to Delete a Project in Crowdin

If you ever need to delete a project, remember that you can do so by going to the "Setting" tab and click on the "General" tab.

Settings > General.

At the bottom, you will find a red "Delete Project" button.

Delete project.

How to Upload Files to your Crowdin Project

Now that you know how to customize your project settings, let's actually add a file to the project. You can either upload your project files manually or automate this process through integrations.

How to Upload Files Manually

Let's upload a sample PDF file with text and images.

Our Demo PDF File. We will translate this in Crowdin.

To upload files:

1. Go to your project.
2. Go to the "Sources" tab.
3. Click on the green "Add File" button or on the gray "Upload Files" button (please see the screenshot below).
4. Choose the file that you need to upload from your file system.

Upload files or use sample files.

💡 Tip: To explore how Crowdin works, you can also add Crowdin sample files by clicking on the "Use Samples" button.

After uploading your file, you will see it listed:

Uploading a file.

You may need to wait a few seconds before the file is processed. Then, you will see the total string count for your file.

Upload finished.

💡 Tip: You can also drag and drop your file into the files area in the "Sources" tab and your file will be uploaded automatically.

If you click on the three small dots on the right, you will see more options for that file, including:

Additional Options.

• Settings.
• Progress.
• View strings.
• Open in Editor.
• Download source.
• Rename.
• Delete.

How to Upload Files Automatically

One of the key aspects of Crowdin is how easy it is to connect it to other services through integrations, to automatically upload your files and synchronize your translations.

For example, freeCodeCamp has a GitHub integration set up, so we can automatically synchronize the files of our project when we add new strings that have to be translated on Crowdin.

GitHub integration.

You can also find hundreds of integrations on the Crowdin store to connect your project to external services.

Crowdin also has an Application Programming Interface (API) for developers.

The Crowdin API Documentation.

The Crowdin team describes it as:

A full-featured RESTful API that helps you to integrate localization into your development process. The endpoints that we use allow you to easily make calls to retrieve information and to execute actions needed.

With this API, you can:

• Create projects for translation.
• Add and update files.
• Download translations, and more.

It is a great way to automate your localization process. You can learn more about the Crowdin API on the official documentation.

And the third option to upload files automatically is to use the Command-Line Interface (CLI).

The Crowdin Command-line Interface (CLI).

With this interface, you can:

• Automate the process of uploading files.
• Download translations automatically and save them in the correct locations.
• Upload existing translations.
• Integrate Crowdin with other tools like Git.

To learn more about the Crowdin CLI, check out this tutorial created by the Crowdin team.

Now that you know how to upload your files to Crowdin manually and automatically, let's see how you and your team can start translating.

How to Start Translating

Once your file is uploaded, it's time to start translating. You may start translating it yourself or you ask your team to start working on the translations.

💡 Tip: You can assign specific files to your translators and proofreaders with the tasks feature.

Let's assume that you are translating the files yourself.

To start, you need to go to the project's Dashboard tab and select the language that you will be translating your file into from the list of target languages that you chose when you created the project.

I will choose Spanish for this demo.

Dashboard.

You will see all your project files for that specific target language.

On the language page, you can check the translation and proofreading progress of each file, translate and proofread, and upload or download your translations and source files.

List of files to be translated into Spanish.

You can click on the name of the file that you would like to translate. This will take you to the Translation Editor and you will see your file in the preview.

The Translation Editor.

When upload a file, Crowdin divides it into strings. This process may require certain format conversions based on the type of file that you are uploading.

According to the Crowdin documentation:

On import, some file formats are automatically converted into other formats to be further parsed and processed.

You can see the list of the initial file formats and the file formats they’re being converted into in the table below.

File formats conversion. Image taken from the Crowdin documentation.

We can see that PDF files are converted into DOCX files, the type of file that we usually create in a text editor.

Then, to export the file, Crowdin also mentions that:

By default, we export the translations in the same format as the source files. For example, if you upload an XML file to Crowdin, you’ll have the XML file exported.

How to Use The Translation Editor

This is the layout of the translation editor that you will see by default when you click on a file. It is called the Comfortable Mode.

The Translation Editor.

It has four main sections:

• The left sidebar (in purple below).
• Middle-top area (in yellow below).
• Middle-bottom area (in orange below).
• Right sidebar (in blue below).

The Translation Editor in Comfortable Mode.

Let's talk about each section.

Left Sidebar

• Highlighted in a purple box in the previous diagram.
• Shows you all the strings in your document and a preview of your source file.
• You will find helpful tools at the top such as (from left to right): searching strings in the file, changing the view to a list of all the strings, highlighting translated and untranslated strings, showing the translation preview, scale toggle, and adding a string.

Left Sidebar - Toolbar at the top.

If you click on the first button (from left to right) after the search file field, you can change the view to see a list of all the strings instead of the file preview.

Now you will see a list of all the strings on the left:

Basic list view.

You can always click on this button again to go back to the previous mode, where you can see the strings in the original context and layout of the source file, like this:

WYSIWYG ("What You See Is What You Get") Translation Mode.

Here, you will see that strings are highlighted in different colors.

• Red means that the string has not been translated.
• Yellow means that the string is partially translated.
• Blue means that the string has been translated.
• Gray means that the string is hidden and only visible to project managers and proofreaders.

When you start proofreading the strings, you will also see:

• A yellow checkmark if the string is partially approved (if some plural forms are not approved).
• A green checkmark if the string has been approved.

You may also see a comment icon if a contributor has left a comment on a string or if it has marked the comment as an issue.

Middle-Top Area

• Highlighted in a yellow box in the diagram below.
• This is where you can translate a string. You just need to select it from the left sidebar and it will appear in this area.

The Translation Editor in Comfortable Mode.

Let's click on a string and see what happens:

Selecting a string.

Awesome! The string is now selected as the "Source String" and we can start translating it:

Translate a string.

The three tools that you can see at the bottom are (from left to right):

• Copy Source: to keep the initial string structure.
• Clear: to erase the translation quickly.
• Text Selection Mode: to copy a part of the translation from Translation Memory (TM) or Machine Translations (MT).

If you click on the three dots at the top, you will see additional options for the string, including:

String translation options.

• Hide String.
• Copy String URL.
• Copy Source Skeleton.
• Translation History.
• View String in Context.

When you write your translation, you will see your translations in the preview. The string will be highlighted in yellow if it is the selected string.

Translation in the preview (sidebar). The translated string is in Spanish in the preview.

To save your translation, click on the green "Save" button.

After this, you can go to the next string and you will see the previously translated string highlighted in a different color (blue).

Saved translation.

To go back to the previous string, just click on it or click on the left arrow next to "Source String".

If you go back to the string, you will see something new in the middle-bottom area.

Let's talk about the middle-bottom area.

Middle-Bottom Area

• Highlighted in an orange box in the diagram below.
• This section has translations made by other contributors (if applicable), translation memory (TM) suggestions, machine translation (MT) suggestions, and translations to other languages.

The Translation Editor in Comfortable Mode.

💡 Tip: If you click on a suggestion, it will automatically appear in the translation input field.

This is the current state of our project. We have this translated string and you can see the Spanish Translation in the middle-bottom section (orange box below).

Middle-Bottom Section.

For each translation, you will see:

Translation.

• The translation in the target language.
• The Crowdin user who saved the translation.
• When it was saved.
• Its current rating (other project members can upvote or downvote a translation).
• A checkmark button to approve the translation (like a proofreader).
• A trash button to delete the translation.

If you are the project owner or you have proofreading permissions, you can approve the string translation yourself. However, it is always recommended to have another team member check your string to avoid any common issues.

To approve the translation, just click on the checkmark button next to the translation.

Now you will see the approved string highlighted in green in the preview:

Approved string highlighted in green.

The translated string will now show who approved it and when it was approved:

Right Sidebar

And last (but not least!) we have the right sidebar.

• Highlighted in blue in the diagram below.
• This is where you can write comments, search the TM, search for terms on your glossary, add new apps, and find the apps you added through the Crowdin Store.

The Translation Editor in Comfortable Mode.

To write a comment, just go to the comments on the sidebar and write your comment on the text input field at the bottom. You can mark the comment as an issue if you need to.

Writing a comment.

💡 Tip: You should write your comment using the source language of the project, so other team members and project managers can understand it.

If you click on the second option on this sidebar, you will be able to search your translation memory for previous translations.

Search Translation Memory (TM).

In the third option, you can search for terms related to the currently selected string in your glossary.

Search Terms.

What is really great about this search term feature is that, according to Crowdin:

If the specific term is not available in the project’s glossary, the system will show you Wikipedia explanations.

This can be very helpful to understand more about the context of a term when you are translating a resource.

And the last option is a plus icon that will take you to the Crowdin Store, where you can find apps and integrations for your project and you will be able to access them on the sidebar.

Go to the Crowdin Store.

Translation Editor Modes

The translation editor has three modes to customize the layout in a way that fits your needs — Comfortable Mode, Side-by-Side Mode, and Multilingual Mode.

Comfortable Mode

• Primarily used for translations.
• It has the four main sections that we saw in the previous section.

Layout in the Comfortable Mode.

How to Switch Modes

To switch to another mode, you need to click on the menu icon at the top left of the translation editor:

Click on this menu icon.

Then, click on "View" and choose the mode that you would like to see:

Change Editor View.

Side-by-Side Mode

• Primarily used by managers and proofreaders to approve the best translations and by translators to vote translations in a row.

The first time you switch to this view, you will see some helpful tips:

Review or make translations.

Approve multiple translations at once.

Switch to Comfortable view to make new translations.

That's all friends!

This is what you will see when you enter side-by-side mode. Please take a moment to see it in detail and explore the changes:

Side-by-Side Mode

To see all the possible string status in the side-by-side mode, let's go back to the Comfortable Mode to translate and save another string (but we will not approve the string this time).

Translating another string.

In the side-by-side view, we now have a translated string, an approved string, and strings that we still need to translate.

Side-by-Side Mode.

Let's start with a quick tour. You have four areas that you can resize to fit your needs:

• At the top left, we find the list of strings. You can select multiple string for bulk operations such as approving multiple strings with just one click.
• At the bottom left, we find the preview of the source file.
• At the top right, we find the string details.
• At the bottom right, we find the current translations and suggestions. This is very similar to what you see in the Comfortable mode.

Toolbar

Toolbar.

At the top of the list of string, you will see multiple tools, including (from left to right):

• Search for a string.
• Change sorting criteria.
• String length in the source file and in the translated version.
• Save button.
• Cancel button.
• Copy source.
• Approve string.
• Add string.
• Edit string.
• More options.

If you open the "More options" menu by clicking on the three dots, you will see more helpful options for the selected string(s).

More options.

How to Sort the Strings

You will notice that, by default, the strings will be sorted by their status.

💡 Tip: Untranslated strings will be displayed first, so you will not see the strings in the order in which they appear in the source file.

You can change the sorting criteria by clicking on the filter icon next to the search field.

Filtering the Strings.

In this mode, you will also see different visual references of the status of each string.

Here, we can see:

String status.

• An untranslated string in red.
• A translated string in blue.
• An approved string with a green checkmark.
• A hidden string in gray.

Multilingual Mode

Awesome. Now let's go to the multilingual mode. This mode is primarily used by translators and proofreaders to work with multiple languages at the same time.

💡 Tip: You can work on up to ten languages simultaneously.

To switch to this mode, click on the main menu icon at the top. Then select "View" and choose "Multilingual".

Go to the Multilingual Mode.

When you choose "Multilingual", you will need to choose the languages that you are planning to work with.

Languages for the Multilingual Mode.

Let's choose Spanish and Japanese just to see how this mode works. Click on them and then click on the "Apply" button.

You should see this:

Multilingual Mode.

Each string will have a text field where you can write the translation for each of the target languages selected.

When you are working on the multilingual mode, you can switch between two possible views:

• List View.
• Grid View.

This is an example of the list view:

List view in Multilingual Mode.

To switch to Grid View, you need to click on the button in the toolbar at the top:

Switch between list and grid view.

The other parts of the editor and the tools in this mode are very similar to the Side-by-Side view that you are already familiar with.

How to Switch to Another File

You may want to go to another file after translating all the strings in a different file. This is very easy to do.

To do that:

Click on the main menu at the top left.

Main Menu.

Go to File and then choose "Open...".

Open a File.

Choose the file that you would like to open and click on "Open" (or double-click on the file name).

List of files.

💡 Tip: You can also get to the list of files much faster by clicking on the file name directly.

Click on the file name.

You will be taken to the file you've chosen.

How to View All Strings

If you ever need to see a list of all the strings in a project, you just need to:

Go to the main menu at the top left.

Main Menu.

Go to "File", and then select "All Strings".

See All Strings.

You will see a list of all the strings in the project, their status, and translations.

All Strings.

How to Translate RTL Languages

While some languages like Spanish and Italian are written from left to right (LTR), other languages like Arabic and Urdu are written from right to left (RTL).

Crowdin mentions that:

When translating between LTR and RTL languages, some elements in the translation field in the Editor might not be displayed the same way as they will be once exported.

To make sure that the translations will be displayed correctly in the exported file, Crowdin recommends:

1. Clicking the "Copy Source" button when writing the translations. This is the first button on the toolbar.

The "Copy Source" Button.

2. Translating the text into your target language.

3. Leaving any variables or tags exactly the same, even if they do not look the same. They will be in the right position when you export a file.

💡 Tip: Crowdin suggests using the Unicode Table app to copy and paste right-to-left and left-to-right marks, changing the direction of the text where needed.

Example of translating a RTL language from the Crowdin documentation.

Translation Editor Settings

You can also customize the settings of the translation editor.

To access these settings, click on the gear icon at the top right of the translation editor.

Translation Editor Settings.

You will see a list of the settings that you can customize.

Editor Settings (Part 1)

The first part of these settings includes:

• The minimum match percentage for showing Translation Memory suggestions.
• If translations should be checked for quality assurance (QA) issues.
• If the editor should auto-complete what you are writing and show you a list of predictions.
• If you would like to approve the translations automatically. This can be helpful if you are translating and proofreading the project yourself.
• If you would like to move to the next string automatically.
• The color theme for the translation editor (light, dark, or automatic).

Editor Settings (Part 2).

If you scroll down, you will find more settings, such as:

• If the editor should show only the beginning of the source string in a compact view.
• If you would like to show the translation preview for translated strings.
• How HTML tags should be displayed. You can show them or hide them.
• If non-printable characters should be displayed or not.
• If the translation field should be highlighted.
• If you would like to enable real-time spellchecking.
• The language of the user interface of your translation editor.

You can customize these settings to fit your needs.

Keyboard Shortcuts

Another key productivity feature for translators and proofreaders on Crowdin is that they can use keyboard shortcuts.

To see all the keyboard shortcuts available for your operating system, just click on the keyboard icon at the top right.

Open Keyboard Shortcuts.

These are the keyboard shortcuts for Windows:

Keyboard Shortcuts (Windows). Screenshot from the Crowdin Documentation.

And these are the keyboard shortcuts for macOS:

Keyboard Shortcuts (macOS).

If you scroll down, you will find more keyboard shortcuts for macOS.

How to Download the Translated File(s)

Once your project is translated and approved, you will need to download it.

In Crowdin, you have three different options for downloading files. You can download the entire project, download all the project files in a specific language, or download a specific file in a specific language.

Let's see these options in more detail.

How to Download the Entire Project

If you need to download the entire project:

1. Go to your project.
2. Go to the "Translations" tab.
3. On "Download as ZIP" section, click on the "Build & Download" button.

Download as ZIP.

You will see a progress bar while Crowdin builds the project and then your download will start.

Build & Download.

The ZIP file will have folders for each language. The names of the folders will be their corresponding language codes.

How to Download All Files in a Target Language

This option is helpful if you need to download all the translated files in a specific target language.

1. Go to your project.
2. Go to the "Translations" tab.
3. On "Download as ZIP" section, select the language.
4. Click on the "Build & Download" button.

Download as ZIP.

How to Download a File in a Target Language

The third option is to download just one file in a specific target language.

To do this:

1. Go to your project.
2. Go to the Dashboard tab.
3. Choose the target language.
4. Click on the file.
5. Click on the three dots to the right to see the additional options (see the screenshot below).
6. Click on "Download".

Download a File in a Target Language.

The download should start and you should have your translated file ready in just a few seconds or minutes.

You can also automate the process of exporting or downloading your translated files with Crowdin integrations.

How to Use Translation Memory (TM)

Great work so far. Now that you know the basic features of the translation editor, let's talk about more advanced features such as the Translation Memory.

We will see how you can:

• Create translation memory.
• Manage translation memory.
• Download and upload translation memory.
• Assign translation memory to a project.

💡 Tip: Remember that TM is like a database of strings that we have translated previously in our project and their corresponding translations. Reusing previous translations can save us a lot of time.

Are you ready? Let's begin.

How to Create a Translation Memory (TM)

To create a TM for your project, you need to:

1. Go to your profile. You can do this by clicking on "Profile" in the dropdown menu that is displayed when you click on your profile image at the top right.
2. Go to the "Resources" tab.

Resource tab in Profile.

3. If you already have a project created, you will see a TM for that project. You can also create a new TM, independently from a project (you can assign it to a project later on).

Crowdin mentions that:

Besides the project TMs that are automatically created along the respective projects, you can also create separate TMs, fill them with the appropriate content by uploading your existing TMs in TMX, XLSX, or CSV format, and then assign these TMs to the needed projects.

4. To create a new TM, click on the green "Create TM" button.

Create TM.

5. Complete the information for your new TM, such as its name, language, and if you would like to assign it to an existing project.

Create Translation Memory.

I'm going to create a new TM called "Demo TM" in English. For now, I will not assign it to any project.

Let's see what happens:

New TM.

🎉 Awesome. Now we see the new TM in the list.

How to Manage Translation Memory (TM)

If you click on the three dots to the right of the TM to show additional options, you will see the following options:

• Upload.
• Download.
• Edit.
• View Records.
• Delete.

Additional Options for a Translation Memory.

If you select a TM by checking its checkbox, you can delete it, edit it, or view its records.

Since our new TM is new (and therefore, empty), let's see the records of the TM for our freeCodeCamp Course Project.

If you click on it, you'll see a list of all the records stored in the TM:

Translation Memory (TM).

From here, you can:

• Edit the records.
• Delete the records.
• Search for specific records matching case, whole phrase, and finding an exact match.
• Hide or show specific columns.

How to Upload and Download Translation Memory (TM)

In the "Resources" tab of your project, you can also upload and download TM.

Resources toolbar.

The file must be in one of the following formats:

• TMX
• XLSX
• CSV

To upload a TM:

• Click on the "Upload" button.
• Choose your file in your file system.
• Match each column to the corresponding language.

The "Upload" button.

Matching columns to their corresponding languages. Image taken from the Crowdin Documentation.

To download translation memory:

• Click on the "Download" button.
• Select the file format (either TMX, XLSX, or CSV).
• Choose if you would like to download all languages or only a specific language pair.

The "Download" button.

Download TM.

The download should start after you click on the green "Download" button.

This is the CSV file that we get when we export the Translation Memory of our freeCodeCamp Course Project:

Exported CSV File.

How to Assign Translation Memory to a Project

To assign an existing TM to a project:

1. Go to your project.
2. Go to the "Settings" tab.
3. Go to "Translation Memories".

Settings tab.

4. Scroll down to find "Assigned Translation Memories".

5. Select the Translation Memories that you would like to assign to your project.

Crowdin mentions that:

When you assign a few TMs to the project, you can set the needed priority for each of them. As a result, TM suggestions from the TM with the higher priority will be displayed in the first place.

💡 Tip: A higher number represents a higher priority. If a TM has a priority of 5, that would be higher than a priority of 1.

You can also change the default TM by clicking on the corresponding star icon.

Important: Please note that Crowdin recently eliminated the need to use custom workflows to automatically apply Translation Memory matches. Now you can enable Translation Memory on the project settings, like you can see below:

How to Enable Translation Memory Pre-Translation for New Content in the Project Settings. Screenshot provided by the Crowdin team.

Glossary

Awesome! Now you know the most important aspects of TM on Crowdin, so let's check out the glossaries.

💡 Tip: Remember that a glossary allows you to store and manage your project's terminology to help your translators with more context and definitions.

How to Create a Glossary

When you create a project, a glossary is automatically created but you can also create new ones that are independent from any project.

To create a glossary:

• Go to your profile.
• Go to "Resources".
• Click on "Glossaries".

Glossaries

You will see a glossary for each project that you have created on Crowdin.

• Click on the green "Create Glossary" button.
• Choose a name and a language for your glossary.
• If you need to, assign it to a project.

Assign to a Glossary.

After this, you will see your new glossary in the list of glossaries. I created a new glossary called "Demo Glossary".

List of Glossaries.

How to Manage Glossary Terms

You can add, edit, and delete concepts and terms from your glossaries. Let's see how you can do this step by step.

New Empty Glossary.

💡 Tip: On Crowdin, concepts is not the same as a term. A concept is broader than a term. This is what the documentation says about their difference:

A concept incorporates glossary terms and their variations with multiple translations and other relevant information.

To add a concept, click on the green "Add concept" button:

Add concept.

You will need to write information about the new concept:

Add concept dialog.

The Crowdin documentation describes the following concept details:

Definition: concept definition.
Subject: a branch of knowledge the concept is related to.
Note: short notes about a concept that might be helpful to translators.
URL: URL to the web page with relevant information about a concept.
Figure: URL to the relevant image.

It also mentions the following term details:

Part of speech: e.g., noun, verb, adjective, etc.
Type: e.g., full form, acronym, abbreviation, etc.
Status: preferred, admitted, not recommended, obsolete.
Gender: term gender.
Description: term description.
Note: short notes about a term that might be helpful to translators.
URL: URL to the web page with relevant information about a term.

After you create the term, you will see it in the list of terms for the glossary:

To edit or delete a glossary term, click on the three dots to the right to see additional options and choose an option.

Glossary Term.

You can download or upload a glossary in the following formats:

• TBX (v2)
• TBX (v3)
• CSV
• XLSX

Just click on the corresponding button and you will be able to choose a file to upload or the format of the file to download.

Upload and Download a Glossary.

Crowdin suggests that:

If you upload a glossary in CSV or XLS/XLSX file formats, select the language for each column and the column value (term, description, or part of speech) in the configuration dialog.

Selecting the columns. Image taken from the Crowdin documentation.

How to Assign a Glossary to a Project

It is very easy to assign a glossary to a project on Crowdin.

You just need to:

• Go to your project.
• Go to the "Settings" tab.
• Go to "Glossaries".
• Select the glossary (or glossaries) that you would like to assign to your project.

Project Glossaries.

💡 Tip: To change the default glossary of a project, just click on the star icon of the corresponding glossary. The dark gray star marks the current default glossary.

You can also share glossaries across all your projects by checking the option "Share Glossaries" in your profile:

Share Glossaries.

How to Translate the Glossary

Translating your glossary can be very helpful to use terms consistently in your target languages.

To translate your glossary, Crowdin recommends using the free Translate Glossary app.

Translate Glossary app.

If you install the app, you will be able to translate your glossary directly on Crowdin and choose which projects should have access to this app.

Install the app.

Quality Assurance (QA) Checks in Crowdin

Quality assurance is essential for every type of project and this is especially true for localization projects. One small typo or spelling mistake can make all the difference to your users.

This is why Crowdin implemented efficient quality assurance features to help you deliver the high-quality translations that your users deserve.

According to Crowdin:

QA checks help to detect some common mistakes easily and quickly. It’s recommended to review and resolve all QA check issues before building your project and downloading translations.

The issues detected by the QA Checks include:

• Typos.
• Missing commas.
• Extra spaces.
• Other common mistakes.

How to Configure Quality Assurance (QA) Checks

To configure QA checks and choose what you would like to check for in the translated strings, you just need to:

• Go to your project.
• Go to the "Settings" tab.
• Make sure that "Enable QA Checks" is selected.
• Select what you would like to check for.

The QA Checks category.

You can check:

• If a translation is empty.
• If the translation is longer than the predefined length limit (if it exists).
• Tags mismatch.
• Spaces mismatch.
• Variables mismatch.
• Punctuation mismatch.
• Character case mismatch.
• Special characters mismatch.
• "Incorrect translation" issues.
• Spelling issues.
• ICU Syntax errors.
• Consistency with the glossary terms.
• Duplicate translation.
• FTL syntax errors.
• Android syntax errors.

💡 Tip: For each of these QA checks, you can choose if you would like to show a warning to the user when the string is being saved or if you would like to go one step further and show an error.

To save your changes, click on the green "Save" button.

Save QA Checks.

How to Check Quality Assurance Status

Proofreaders and project managers can see the issues found by the quality assurance checks.

To see the current status, you just need to:

• Go to your project.
• Go to the "Dashboard" tab.
• Find the "QA Checks" status.

QA Checks with no issues.

You will see one of the following status:

• Off: When the QA checks are not enabled.
• In Progress: When the QA checks are working.
• No Issues: When the QA checks did not find any issues.
• Issues Found: When the QA checks has found issues.

If you try to save a string with QA check issue, you will see a warning or an error. You can save it anyway, but you should always try to fix these issues first.

A warning from adding extra spaces.

💡 Tip: Clicking the "Autofix" button on the warning will try to fix the issue automatically. You can also save it anyway or cancel.

This is a sample image from the Crowdin documentation showing what you should see if quality assurance issues are found in your project:

QA checks issues found. Image taken from the Crowdin documentation.

Quality assurance is a very important step that you should definitely take very seriously during your localization process.

How to Upload Existing Translations

Great. If you have existing translations, you can also upload them to your project.

You have three options:

• Upload them via the Translations Tab.
• Upload them via the Language Page.
• Upload them via the Translation Editor.

How to Upload Via the Translations Tab

To upload them via the Translations Tab:

• Go to your project.
• Go to "Upload existing translations".
• Drag and drop your existing translations or select the files from your file system.

Upload translations via the Translations Tab.

According to Crowdin, the supported formats for uploading translations include those that have a key-value structure, such as:

Android XML, macOS/iOS Strings, Stringsdict, JSON, Chrome JSON, GO JSON, i18next JSON, FBT JSON, XLIFF, XLIFF 2.0, Java Properties, Play Properties, Java Properties XML, RESX, RESW, RES JSON, YAML, INI, Joomla INI, JS, FJS, PO, TS, QT TS, Blackberry, Symbian, Flex, BADA, TOML, Coffee, DKLANG, XAML, SRT, VTT, VTT2, SBV, SVG, DTD, CSV, RC, WXL, Maxthon, Haml, XLSX, PLIST, PHP, ARB, VDF.

Crowdin also mentions that:

For files that do not have a defined structure, translation upload is handled by an experimental machine learning technology.

This includes the following file formats: HTML, Front Matter HTML, Markdown, Front Matter Markdown, TXT, Generic XML, Web XML, DOCX, HAML, IDML, DITA, Wiki, FLSNP, MIF, and ADOC.

How to Upload Via the Language Page

To upload them via the language page:

• Go to your project.
• Go to "Dashboard".
• Choose a target language.
• Choose a file but instead of clicking on it, click on the three dots to its right to show more options.
• Click on "Upload Translations".

Upload translations from the language page.

When you click on this option, you will see some settings for the upload and for assigning the translations. Check the options that you need for your project.

How to Upload Via the Translation Editor

Finally, you can also upload translations directly from the translation editor.

To do this:

• Click on the main menu.
• In File, select "Upload Translations..."

Upload Translations from the Translation Editor.

Supported File Formats on Crowdin

So far, we have mentioned different file formats that you can work with on Crowdin. But Crowdin supports more than 100+ file formats.

Supports more than 100+ file formats.

Supported file formats in the Crowdin Store.

You can check the supported file formats in the following resources:

• Supported Formats.
• File Formats in the Crowdin Store.

How to Pre-Translate your Project

If your goal is to save time and improve your productivity, pre-translation through Machine Translation (MT) can be exactly what you need.

This is an automated process that applies computer-generated translations to your project when you upload a file. On Crowdin, you can configure machine translation engines to use this feature.

You have two alternatives to implement this process:

• Manual.
• Automated.

Manual Pre-Translation

To pre-translate your content manually via Machine Translation (MT):

• Go to your project.
• Go to the "Dashboard" tab.
• Click "Pre-translation".
• Select via TM (Translation Memory) or via MT (Machine Translation).

Pre-translation.

If you choose "via MT" (Machine Translation), you will have to choose your translation engine, target languages, and the files that you would like to pre-translate. You can also add labels.

Pre-translate your project via MT.

Automated Pre-Translation

If you choose to automate the process, the system will pre-translate your new content automatically.

Recently, Crowdin added the possibility to enable Machine Translation Pre-Translation for new content in the project settings. If you enable this and you upload new content to your project, the system will translate automatically.

Enable Machine Translation Pre-translate for new content. Screenshot provided by the Crowdin team.

Offline Translation

Sometimes, you may need to work offline. Crowdin also has a great feature for this in situations where you or your team members would like to work on the translations offline.

To enable or disable this feature:

• Go to your project.
• Go to the "Settings" tab.
• Go to "Privacy and Collaboration".
• Check (or uncheck) the "Allow offline translation" option.

💡Tip: This feature can be enabled or disabled by project managers.

Allow offline translation.

Each file can be downloaded via the Editor or via the Language page.

How to Download a File via the Editor

To download a file via the Translation Editor:

• Click on the main menu at the top left.
• Go to File
• Click on "Download" or "Export in XLIFF".

Download file via the editor.

How to Download a File Via the Language Page

To download a file via the language page:

• Go to your project.
• Go to "Dashboard".
• Select a language.
• In the list of files, click on the three dots next to the file that you would like to download to show more options.
• Select "Download" or "Export in XLIFF".

Download file via the language page.

How to Download All Files for a Target Language

If you need to download all the files for a target language:

• Go to your project.
• Go to "Dashboard".
• Select a language.
• Click on the up and down arrow icon (see the screenshot below).
• Select "Download translations" or "Export in XLIFF".

Download all translations.

Exploring Public Projects

Now that you know some of the most important features of Crowdin, you may also be asking yourself how you can explore other projects that are currently being translated on Crowdin.

If you click on "Projects" at the top and then you select "Explore Public Projects", you will see a page where you can explore public projects per topic and find popular projects on Crowdin.

You can also filter projects by searching on the search bar.

Explore Crowdin.

🎉 Congratulations. We just reached the end of the second part of the book, which was focused on Crowdin fundamentals.

Now we will dive into how teams and organizations can use Crowdin to manage their projects effectively.

🔹 Crowdin for Teams and Organizations

Awesome! Now let's see how Crowdin can help you if you are working with a team on a localization project or if you are the founder or manager of an organization that is interested in localizing a product or platform.

We will talk about how you can invite members, assign roles and tasks, and generate reports.

How to Invite Project Members and Contributors

To invite members to your project:

• Go to your project.
• Go to the "Members" tab.
• Click on the green "Invite" button.

💡 Tip: You can also click on the gray "Invite People" button at the top left to reach the same options.

The Members tab.

You will need to enter information for these options before sending the invitation(s):

• Role.
• Email or Crowdin username.
• Message.

Sending an invitation.

If you click on "Select role", you should see this:

Selecting a role.

By default, the "Translator" role will be selected.

You will also see three fields where you can choose which languages you would like to assign that role. For example, a contributor could be a translator for Japanese and a translator and proofreader for Spanish.

💡 Tip: If you leave it blank, the role will apply to all languages but you can also choose specific languages.

Choosing specific languages.

We will talk more about member roles in just a moment.

💡 Tip: You can also change the role(s) of a member in the Profile section.

Once you are ready, click "Save" and you will go back to the main options. Click "Done" when you are ready to send the invitations.

Sending an invitation.

How to Send Invitation Links

If you would like to invite your team members through a link instead of sending them a direct invitation, you can do so too.

Just click on the "Get Link" button at the bottom to copy the link and send it to the person that you would like to invite to your project.

Get an invitation link.

You will see a confirmation message at the top.

Confirmation Message.

Then, you can paste the link wherever you need to, like an email.

How to Manage Invitation Links

To manage your invitation links, click on the "Manage Links" option:

Manage Links.

You will see a list of all the invitation links you have generated, when you generated them, and the role(s) you granted to the invitee.

Invitation Links that have been generated.

💡 Tip: You can copy them again by clicking on the link icon to their right or revoke them by clicking on "Revoke link".

If you click on "Done", you will go back to the previous screen and you can click the "X" button at the top to close it.

Project Roles

Now let's talk about the different roles that you can assign to your team members. Let's read the role descriptions provided by Crowdin in the documentation:

Owner

A person who created a project and has complete control over it. The owner can invite and manage project members, create projects, upload source and translation files to the project, set up integrations, etc.

Manager

Has similar rights as a project owner except the ability to manage some of the owner’s Resources (e.g., configuring MT engines, custom workflows, etc.) and delete projects.

Language Coordinator

Can manage certain features of a project only within languages they have access to.

Language coordinators can translate and approve strings, manage project members and join requests, generate project reports, create tasks, and pre-translate the project content.

Unlike managers, they do not have access to other project settings (e.g., project files, integrations, etc.).

Developer

Can upload files, edit translatable text, connect integrations, and use the API. Cannot manage project tasks, members and reports.

Proofreader

Can translate and approve strings. Doesn’t have access to project settings.

Translator

Can translate strings and vote for translations added by other members.

Blocked

Doesn’t have access to the project.

How to Assign or Change Roles

You have two options to assign or change the role of a project member.

You can either:

• Set the role in the invitation.
• Set the role on the member's profile page.

How to Set the Role in the Invitation

You can choose the role when you send an invitation to a new member.

Setting the role in the invitation.

How to Setting the Role in the Profile Page

You can also go to the "Permissions" tab on the member's profile page to choose the roles that you would like to assign to that member and to choose the languages you would like to assign to them.

This is an example from the Crowdin documentation:

Setting roles in the "Permissions" tab. Image taken from the Crowdin documentation.

Click on the "Save" button to save your changes.

Project Managers

Project managers play a key role for your team and for your project. They can have unlimited control over the entire project and they can help you coordinate and assign tasks to team members.

How to Add a Project Manager

Let's see how you can add a project manager to your project. You can assign the Manager role to a member when you send them an invitation:

• Go to your project.
• Go to the "Members" tab.
• Click on "Invite".

Members tab.

Click on "Translator". You will see all the possible roles.

Select a role.

Choose "Manager". This will grant the member unlimited control over the entire project.

Manager role.

Alternatively, you can invite a Manager from your profile page:

• Go to your profile.
• Go to the "Managers" tab.
• Click on "Add Manager".

Add Manager.

Now you will need to enter the name or username of the manager, the message, the permissions that you would like to grant, and the projects that will be managed by this manager.

Invite Manager.

Editing Manager Permissions

You can also edit manager permissions on Crowdin.

To do this:

1. Go to your profile.
2. Go to the "Managers" tab. You will see a list of the managers that you've added to your projects.
3. Double-click on the manager you would like to edit.

This is an example from the Crowdin documentation:

Managers tab example. Image taken from the Crowdin documentation.

4. Update the permissions for that manager.

5. Click on the "Save" button.

Imagen taken from the Crowdin documentation.

How to Remove a Manager

To remove a manager:

• Go to your profile.
• Go to the "Managers" tab.
• Select the manager that you would like to remove.
• Click "Remove".

Manager vs Proofreader

On Crowdin, Managers and proofreaders have certain differences in their roles and permissions.

To explain this in more detail, the Crowdin team highlights this important question in the documentation:

Q: I’m a project owner. Do I need to invite a manager or a proofreader?

A: The main difference between a manager and a proofreader is the following: in addition to approving translations added by translators, managers can also invite and remove project members, upload source and translation files to the project, set up integrations, etc

If you want to have a project member who should have access to the features mentioned above, you need to invite a project manager. Alternatively, if you plan to manage the project yourself, it will be enough to invite a proofreader.

Tasks

Organization is the key to the success of any project and Crowdin definitely knows this. This is why they incorporated very helpful tools called tasks on their platform to help you organize your project and coordinate tasks among your team members.

With tasks, you can assign specific files to your translators and proofreaders, set due dates, receive notifications, discuss tasks with other team members, and even split the words from the same file between different team members.

You can also track the status of each task in a visual board where you can drag and drop your tasks from one status to the next.

This sounds great, right? Let's see tasks in more detail.

How to Create a New Task

To create a new task:

• Go to your project.
• Click on the "Create Task" button.

Tasks on Crowdin.

💡 Tip: A task can only be assigned to one project.

After clicking on the button, you will see a form where you can enter all the details of your new task.

Creating a new task.

The details that you can enter for a task include:

Task information (Part 1).

• Name.
• Description.
• Type (translate or proofread by own translators or by vendors).
• Due date (optional).
• Strings assigned to the task (all the strings of the selected file(s) or only strings modified during a specific time period).

Task information (Part 2)

• Filter by labels (the labels that the strings of the task should have).
• Exclude labels (the labels that the strings of the task should not have).
• You can choose if you would like to skip strings that are already included in other tasks to avoid duplicate work by your team members.
• Files that should be translated or proofread.
• The target language(s). If the task has more than one target language, the system will create a task for each target language.
• To assign team members to the task for each target language, click on the "Assign" option next to each language.

Assign button.

When you click on "Assign", you will see the following options:

Assign team members.

• Select the user(s) that you would like to assign to the task. You can search for users using the filter tool.
• If you need to remove a user, just click on it on the list to the right. You can empty the list by clicking on the trash icon.

💡 Tip: You can also choose if you would like to split the files to assign multiple users to the same file.

• Once you have all the users selected, click on the "Apply" button.

Users selected for the task.

You will see the profile image of the assigned team members in their corresponding language(s).

Assigned team member.

Click on "Create Task" to add the new task. Now you will see the task dashboard with a new task in each target language you selected.

In this case, I selected Spanish and assigned myself to the task:

Tasks dashboard.

The Tasks Board

Now it's time to use the tasks board. This board is very helpful to see all the tasks of your project and track their status.

You will immediately notice that there are three possible statuses for a task:

• To Do
• In Progress
• Done

💡 Tip: Project managers can move a task from one status to another by dragging and dropping it.

Tasks dashboard.

To see all the tasks in a specific target language, just click on that language and you will see them as "cards" with their corresponding information.

Tasks board.

💡 Tip: If a task is assigned to you, you will see a gray star next to the name of the task. You can also search for tasks and filter them.

How to Filter Tasks by Members

You can see all the tasks assigned to a specific team member by using filters.

• Click on "Filters".
• Click on "All users" (next to "Filter by").
• Search for the username of the team member.
• Click on the username.

Filter tasks by members.

💡 Tip: To clear the filter, click on the "Clear filter" option to the right.

Task Details

The task details is the basic information and structure of a task. With the details, you can see:

A Task.

• If the task is assigned to you (a gray star).
• Task number.
• Task name.
• When the task was created.
• If it will be translated and proofread by your own team or by vendors.
• The profile pictures of the team members assigned to the task.
• Word count.
• Number of comments on the task.

If you click on the task, you will see a more detailed overview:

Task details.

How to Add Comments to a Task

If you scroll down, you will also have the option to add comments to the task.

Add comments to a task.

How to Change the Status of a Task

From this detailed view, you will also be able to change the status of the task by just clicking on a button:

Task options.

If you change the status of a task using these buttons, you will also see the change reflected on the main task board, which would be equivalent to dragging and dropping it into a new status.

How to Manage Tasks

If you click on a task to check its details, and then you click on the three dots at the top right to display more options, you will be able to edit, close, and delete the task.

More options for managing tasks.

How to Edit a Task

This is what you will see if you try to edit a task:

Edit task view.

It's very similar to what we saw when we created the task. You can change the strings assigned, the files, dates, and you can even reset the task scope and the progress for the assigned files.

How to Close a Task

To close a task, you can click on "Close":

More options for managing tasks.

How to See All Closed Tasks

To see all your closed tasks, you will need to:

• Go to your project.
• Go to the "Tasks" tab.
• Select "Closed" (next to "All").

💡 Tip: "Done" and "Closed" are a bit different. A task can have the "Done" status but not closed. When a task is has the "Done" status, you will see a button on the card to close it, just like in the image below:

Close button on a task marked as "Done".

How to Reopen a Task

If you close a task and then realize that you need to reopen it, you just need to:

• Open the details of the closed task.
• Click on the three dots to the right to see additional options.
• Choose "Reopen".

Reopen a task.

Now you will see the reopened task on the "To do" column of the tasks board.

Reopened task.

How to Delete a Task

To delete a task:

• Open the task details.
• Click on the three dots.
• Select "Delete".

Delete a task.

How to See All Tasks Assigned to You

If you are contributing to a project, you can see all the tasks assigned to you by following these steps:

• Go to your profile.
• Go to the "To do" tab.
• You will see all the tasks assigned to you and your archived tasks.

The "To Do" tab on Profile.

💡 Tip: At the top, you will also find a search field to filter your tasks and an option to filter tasks by project.

This is the basic information that you will see for each task in this view:

Task in the "To Do" tab on the profile.

• Task number.
• Task status.
• Project.
• Target language.
• Word count.

You will also see these two options to:

• Open the translation editor and start working on the task.
• Archive the task.

Important Question about Tasks

Crowdin mentions this important question in the documentation:

Q: How the source file updates affect the existing translation and proofreading tasks?

A: After the source file update, the list of source strings included in the task will be updated the following way:

• The strings removed from the source file during the update will be removed from the task.
• The modified strings marked with the Keep Translations option will appear in the task with the new modified text.
• The newly added strings won’t affect the existing task in any way.

If the source file is restored to the revision, containing the removed strings, they will reappear in the task.

Project Reports

As a project owner or project manager, reports can very helpful to understand your team's current progress and activity.

Crowdin has a reports feature where you can check your project status. This is a report of the demo project that we have been working with so far:

Reports tab.

To access your project report:

• Go to your project.
• Go to the "Reports" tab.

Report Part 1.

You will see the project status by default and you can switch to cost reports if you need to.

Here you can see some screenshots with the type of data that you can analyze and visualize with these reports:

• Total project size and the number of translatable strings.
• Source language and target language.
• Number of members.
• Number of managers.
• Number of translatable words.
• Number of hidden words.
• Number of duplicate words.
• Number of translated words.
• Number of approved words.
• Number of new members.
• Number of active members.

You can see these reports with their corresponding increase or decrease percentage compared to the time period you selected.

You will also find charts of the translation activity with their corresponding legends.

Report (Part 2).

You will find charts of the "Proofreading Activity".

And charts of the "Source Strings Activity", and so on.

You can also change the report unit by clicking on this option:

You can choose:

• Strings.
• Words.
• Characters without spaces.
• Characters with spaces.

On the Crowdin documentation, you can find examples of the Translation Activity chart, the Proofreading Activity chart, and the Source Strings Activity chart:

Translation Activity. Image taken from the Crowdin documentation.

Proofreading Activity. Image taken from the Crowdin documentation.

Source Strings Activity. Image taken from the Crowdin documentation.

Top Members Report

Your team members are fundamental for your localization process. Having a detailed report of your most dedicated and productive team members is always helpful.

To generate a report of your top members:

• Go to your project.
• Go to the "Reports" tab.
• Click on "Top Members".
• Select a date range from the calendar.
• Click on "Generate".

You will see a list of your top members with:

• Their target languages
• How many strings they translated
• Target words
• How many strings they approved
• How many votes they submitted.

You can also export your report in XLSX, CSV or JSON format and display or hide specific columns.

Export options.

Display or hide columns.

Conversations on Crowdin

Communication is essential for any successful project. You and your team members can communicate directly on Crowdin with the conversations feature.

With this feature, you can communicate with one or more team member in a private chat. Each conversation has a subject, so you can easily find them.

How to Access Conversations

To access your conversations:

Click on the conversations icon at the top right, next to your profile picture.

Conversations button.

Go to "Create Conversation".

Create a Conversation.

You can search for users by their name or username and you can also filter users by project.

Filter users.

This is an example from the Crowdin Documentation:

Conversation. Image taken from the Crowdin documentation.

How to Manage Conversations and Messages

For conversations, you can:

• Change the subject for all the users in the conversation.
• Mute the conversation to stop receiving notifications.
• Add users.

Example conversation. Image taken from the Crowdin documentation.

For individual messages within a conversation, you can:

• Share the message in the same conversation or in another conversation.
• Mark the message as unread.
• Edit your messages.
• Delete your messages.
• Report spam.

Example of managing messages. Image taken from the Crowdin documentation.

🎉 Awesome. Now you know the most important features of Crowdin for teams and organizations.

Let's dive into how you can integrate Crowdin with other services and how you can install apps to improve your productivity.

🔹 Crowdin Integrations and Productivity Tools

One of the key characteristics of Crowdin is its connectivity. You can connect your project to different external services to import and export your files and translations as needed.

What is an Integration?

On Crowdin, an integration is a "connection" that you can make between your project and an external service to synchronize your files between these platforms automatically.

On the Crowdin store, you can find over 600 apps and integrations that you can add to your project.

The Crowdin Store.

You can filter them by:

• Collections.
• Categories.
• Partners.
• QA Checks.

To give you an idea of the types of apps and integrations that you can find, these are some of the featured apps and integrations:

Featured apps and integrations.

Let's talk about a few of them in more detail.

GitHub Integration

If your project is hosted on a GitHub repository, the GitHub integration could be exactly what you need.

Crowdin’s integration with GitHub synchronizes source and translation files between your GitHub repository and translation project in Crowdin. All translated and approved files will be automatically pushed as a pull request to the l10n branch in GitHub repository.

GitHub Integration.

To learn more about this integration, you can check out this tutorial created by Crowdin.

GitHub Crowdin Action

If you need to upload and download files from your GitHub repository to your Crowdin project automatically, this action can be very helpful for you.

The GitHub Crowdin Action can:

• Upload source files to Crowdin.
• Upload translations to Crowdin.
• Downloads translations from Crowdin.
• Create a PR with the translations.

GitHub Crowdin Action.

To learn more about the GitHub Crowdin Action, check out this tutorial created by the Crowdin team.

Google Drive Integration

Google Drive is very helpful to create, host, and share documents. With the Google Drive integration, you can translate your files very easily on Crowdin.

Google Drive Integration.

To learn more about this integration, you can check out this tutorial created by the Crowdin team.

AI Assistant

With the rise in popularity of Large Language Models (LLMs), artificial intelligence has become a very important tool for translation and localization.

Crowdin has a very helpful AI Assistant that you can install to help you and your team. It is described as:

An AI chatbot for translators built on OpenAI’s ChatGPT API. The first version of this app works as a co-pilot for translators. (Source: Crowdin)

AI Assistant.

Crowdin mentions that the AI Assistant has these interesting features:

Our AI Assistant has a prompt engineering feature, empowering translators to customize prompts before commencing a translation project. As a result, they can conveniently modify the context, enhancing precision and meaningful translations.

To learn more about this integration, check out this tutorial created by the Crowdin team.

Visual Studio Code Integration

If you are a developer who works with Visual Studio Code, then Crowdin also has you covered because the team developed an extension to help you to translate your project.

Integrate your Visual Studio Code projects with Crowdin to optimize the localization process. IDE Plugin allows uploading new source strings instantly to your Crowdin project and downloading translations. (Source: Crowdin)

Visual Studio Code Integration.

The Extensions Marketplace.

You can learn more about this extension on its official documentation in the Visual Studio Code Extensions Marketplace.

Video Captions Translator

If you or your organization need to translate video captions, Crowdin has an integration for that too. It is called Video Captions Translator.

Professional translations for video subtitles. Setup integration once, define your localization workflow and spend less time managing translations.

Video Captions Translator.

To learn more about YouTube Captions Translation with Crowdin, you can check out this tutorial created by the Crowdin team.

Google Sheets Integration

If you use Google Sheets to manage your localization keys, you can add this integration to your project to map your columns to their corresponding fields on Crowdin, including:

• Key.
• Source Text.
• Target Languages (all project languages).
• Labels.
• Context.
• Translation Maximum Length.

Please note that the Crowdin team mentions that:

It's worth noting that this integration will only sync the first sheet from your Google Sheet document.

Google Sheets Integration.

To learn more about the Google Sheets Integration, check out this tutorial created by the Crowdin team.

Suggestions Diff Checker

If you have ever asked for a tool that could help your translators and proofreaders compare translations very easily with visual cues, this app is for you.

Crowdin describes Suggestions Diff Checker as:

A great helper for proofreaders and translators that compares two translations and shows the difference between them.

Suggestions Diff Checker.

Proofreading Diff

Proofreading is a very important task for the localization process. Proofreaders can edit the translations and make sure that they are as accurate as possible.

With the Proofreading Diff report app, you can:

Track and analyze changes made during the proofreading process. This tool can help you provide a thorough feedback to translators about their work.

Proofreading Diff.

Video Preview

Translating the subtitles of a video without actually watching the video simultaneously can be quite challenging because having the full context of a string is very helpful to translate it accurately.

This is why Crowdin created a translator productivity app called Video Preview. They describe it as:

A handy tool that can be useful when you have video subtitles to translate. It allows you to specify the video URL for each file with subtitles, and enables translators to preview the video while working on the translation.

Video Preview.

Video Preview in action. Image taken from the Crowdin Documentation.

Glossary Editor

This is another helpful Crowdin application for managing your project glossaries.

Crowdin mentions that the Glossary Editor:

Allows you to add and change the terms from your glossaries directly in Crowdin Editor.

Glossary Editor.

Project Duplicator

Have you ever wished that you could use a project as a template for another project and save yourself all the initial set up time?

If you have, then Project Duplicator is exactly what you need:

Project Duplicator.

With Project Duplicator, you can copy the following settings from a project:

• Source language.
• Quality assurance checks.
• Source strings.
• Translations.
• Translation Memory.
• Notifications.
• Language Mapping.

Unity Integration

If you are a game developer and you work with Unity, this integration is exactly what you need.

With the Unity Integration, you can:

Translate the content within your tables (strings and assets) and download translations into Unity.

Unity Integration.

This is an official screenshot of the Crowdin Plugin for Unity:

Imagen taken from the Crowdin Documentation.

Is Crowdin slow for everyone or just me?

Yes, this is the official name of a translator productivity tool in Crowdin! 🙂 It is a performance widget for measuring your internet connection.

Crowdin mentions that it can be helpful to:

Know immediately if the slowness you experience is caused by your internet connection or it's a Crowdin performance issue.

Is Crowdin slow for everyone or just me?

This is an official screenshot of the widget:

Image taken from the Crowdin Documentation.

Units Converter

You learned that localization is broader than translation. Units are a great example of this.

When you localize a product that includes units of length, area, mass, volume, temperature, speed, and more, you need to have a tool at hand to convert them quickly while you localize your content.

Crowdin mentions that:

The app is especially convenient when localizing for cultures that use different measurement systems.

This is where the Units Converter app can save you a lot of time because you can have it on your Translation Editor and quickly convert units without pausing your localization process to go to another tool.

Units Converter.

This is an official screenshot of the app:

_Units Converter app. Image taken from the Crowdin Documentation._

Screenshots Uploader

Visual context is essential for writing high-quality translations.

The Screenshots Uploader app:

Makes it easier for your team to receive visual context.

You can:

• Allow translators to upload screenshots.
• Paste screenshots from your clipboard history without saving them on your device.
• Edit screenshots before uploading them with helpful tools like cropping, zooming in, and so on.

Screenshots Uploader.

Directory Notifications

The Directory Notifications app is helpful for project owners and managers because Crowdin will:

Send an email notification whenever a directory of files in your Crowdin project gets translated or proofread.

Directory Notifications.

This is an official screenshot of the app:

Image taken from the Crowdin Documentation.

Emoji Input for Editor

Emojis are awesome, right? I think we can all agree on that. 😁

Luckily for us, Crowdin has an Emoji Input for the Translation Editor. They describe it as:

A Crowdin Editor emoji list app for easy access with an extensive search functionality.

Emoji Input for Editor.

This is an official screenshot of the app:

Image taken from the Crowdin Documentation.

Emoji Mismatch

And now let's dive into helpful automated Quality Assurance (QA) checks for our project that are available for Enterprise Crowdin accounts.

The first one is Emoji Mismatch, which can help us to find:

Missed, extra or mismatched emoji in the translation.

Emoji Mismatch.

Please note that this works with Crowdin Enterprise.

Space After Punctuation

This is a very helpful quality assurance tool that you can add to your project.

Crowdin mentions that Space After Punctuation:

Checks whether the translation contains the spaces after the punctuation symbols.

Space After Punctuation.

Please note that this works with Crowdin Enterprise.

URL Localization

This is a quality assurance tool that you can also install for your project. With URL localization, you can check:

Mistakes in URLs in the translation according to QA check configuration.

URL Localization.

Please note that this works with Crowdin Enterprise.

Duplicated Words

This is a great tool for the proofreading phase of the localization project. Crowdin mentions that Duplicated Words:

Removes every second repeated word in translation.

Duplicated words.

Please note that this works with Crowdin Enterprise.

Time Format Consistency

Writing time in a consistent format is also very important when you are localizing a product.

Crowdin mentions that:

This QA check verifies that time formats in the source and translated text match. It checks for time formats in the 24-hour format (HH:MM).

The QA check will give a positive result if the number and format of time instances are consistent between the source and translated text, and a negative result if there is a mismatch.

Time Format Consistency.

Please note that this works with Crowdin Enterprise.

camelCase Consistency Check

This quality assurance check helps you ensure that product names, brand names, or other names that should be written in camelCase follow the same format in the translation.

Crowdin mentions that it:

Validates that all camelCase words present in the source text are accurately retained in the translated text.

If a camelCase word in the source text is not found in the translated text, the check will fail and notify the translator with a detailed message.

camelCase Consistency Check.

More Apps and Integrations

We have seen many helpful apps and integrations for your localization process. They can optimize your team's productivity and help you to provide high-quality translations.

But this is just the start. Crowdin has more than 600 apps and integrations for your project. You can find a full list on the Crowdin Store.

The Crowdin Store.

If you click on them, you will find more details about what they do, how they do it, and you may even find the source code that implements the functionality.

You can also sort them by relevance, name, or date.

The tools that you need to be more productive and deliver high-quality translations to your users are just one click away.

🔹 How to Translate a Website on Crowdin

Great work! We've reached a very important part of the book, how to translate a website on Crowdin.

How to Translate a Website on Crowdin

There are three main approaches for translating a website on Crowdin:

• Integrations.
• JS Proxy Translator.
• Crowdin In-context.

Since there are many technologies, frameworks, and libraries for web development and the internationalization process is very technology-specific, it is recommended to analyze all the options available and find the one that works best for your particular use case.

Integrations

The web development world is incredibly diverse. We can create and host websites on a variety of services and develop them using different tools.

To support this variety of tools and services, Crowdin has developed many integrations with external platforms to import your text and send your translations to the Content Management System (CMS) of your choice.

Translate a Website on Crowdin.

For example, you can translate a website from WordPress, Webflow, Joomla, and other similar tools.

According to Crowdin:

With Crowdin, you are not confined to any specific website building and hosting services.

We do not only have 15 apps, including Wix, Ghost, Squarespace and Webflow, that provide you with the best way to translate a website, but a separate JS Proxy technology that will help you with the localization of any other website.

Essentially, these technologies:

• Scan your web pages.
• Detect the content that can be translated (strings).
• Extract them in a format that can be localized.
• Synchronize the translations with your original project.

You just need to add a JavaScript snippet to your code and you will be ready to start translating.

These are some of the apps that you can install to start translating your website on various external services:

A list of Crowdin apps that you can install to translate your website.

If host your repository on GitHub or you use GitHub pages, you can also use Crowdin's GitHub Integration and the GitHub Crowdin Action to synchronize your website files and translations automatically.

GitHub Integrations.

JS Proxy Translator

Integrations are very helpful, but Crowdin also has an option that can help you with the localization of any website, irrespective of the service where it is hosted.

This approach to website localization on Crowdin is called JS Proxy Translator.

Crowdin mentions that with this proxy, you can:

• Synchronize your sources and translated content.
• Localize your website with minimum effort.
• Extract source text without any coding.
• Translate meta titles and description to be SEO-friendly.
• Schedule when to synchronize your translations.

JS Proxy Translator.

Here we have two official screenshots provided by the Crowdin team that shows the steps required to configure the JS Proxy Translator.

The first step is to import your website content. You just need to enter your site URL and specify if you would like to sync the source files manually or daily by importing them automatically once a day.

JS Proxy Translator (Part 1). Image taken from the Crowdin documentation.

Then, after your source text is translated, you can publish the translations to your website.

JS Proxy Translator (Part 2). Image taken from the Crowdin documentation.

The Crowdin team does mention that:

You need to publish all content on your website before synchronizing it to your project for translation.

To learn more about how to translate a website with a JS Proxy on Crowdin, check out this tutorial created by the Crowdin team.

In-Context for Web

The third approach to website localization on Crowdin is to translate the text directly within the website or web application using Crowdin In-Context.

The Crowdin team mentions that:

Crowdin In-Context tool allows to translate texts directly within the actual web application. In such a way, the best translation quality is maintained.

In-Context localization is tied up with the actual project created in Crowdin, under which translatable files are stored.

This tool makes all the texts in the web app editable. Moreover, the translation process is real-time visible. Even the dynamic part of the application and strings that contain placeholders can be translated this way.

Crowdin In-Context.

You can see it in action here, in the official Crowdin demo:

Crowdin In-Context Demo.

If you log in to your Crowdin account, you will see this:

Crowdin In-Context Demo.

You will be able to click on each string on the website to translate it and when you save the translations, they will be synchronized with your Crowdin project.

💡 Tip: To learn more about Crowdin In-Context, check out this tutorial created by the Crowdin team.

These are three different approaches for translating a website on Crowdin. Choosing the right one can make all the difference for your localization team.

Now that you know more about the most important Crowdin features, let's dive into freeCodeCamp's translation effort as a real-world example of a worldwide localization project powered by contributions from an amazing community of volunteers.

🔹 freeCodeCamp's Translation Effort

🎉 Awesome. Congratulations on reaching this part of the book. This proves that you are very interested in learning these skills.

Now that you know how to translate your project on Crowdin, let's see how freeCodeCamp's amazing community is translating our content into many world languages.

We'll see this from a potential contributor's point of view, emphasizing how to translate our content on Crowdin.

freeCodeCamp's Contributing Guidelines

If you are a contributor who is interested in joining the translation effort, where should you start?

You should start by reading our Contributing Guidelines. These are a set of articles that you can always refer to if you have any questions on how to join or how to start translating and proofreading.

There, you will find:

• A written overview of Crowdin.
• How to get started.
• How to select a project and a file.
• How to translate the projects that we have on Crowdin.
• How to proofread translations.
• Translation best practices, and more!

In this article, you will find information on how to prepare yourself for contributions.

We recommend:

• Reading this announcement written by Quincy Larson, the founder of freeCodeCamp.
• Joining the community forum.
• Joining our Discord chat server.

Our documentation also mentions that working with a small team can be super helpful to stay motivated:

Crowdin and other tools make it easy to contribute translations, but it's still a lot of work.

We want you to enjoy contributing and not burn out or lose interest.

A small group of 4-5 individuals is a good size to start your niche for your world language. You can then recruit even more friends to join the team.

Currently, we have over 30 of the most widely spoken languages enabled on our Crowdin project.

Some of them are deployed on the live version of freeCodeCamp. You just need to select them from the dropdown menu to see a new language automatically.

If you do not see your languages listed, the documentation also mentions that:

If you would like us to include a new world language, we recommend getting your friends excited about this.

Once you have a small group of people (at least 4-5) interested and committed, we can hop on a call. We will explain all the details and walk you through some of the tools and processes.

Once you have finished reading this part of the contributing guidelines, you can start to contribute.

First, let's take a look at the different roles that you can have as a freeCodeCamp contributor.

Roles for the freeCodeCamp Localization Process

You can contribute to freeCodeCamp's translation effort as a translator or proofreader.

Translators help us to translate curriculum files, documentation, and elements of freeCodeCamp's user interface like buttons and labels.

Proofreaders make sure that the translations are consistent, uniform in tone, and free from common issues such as typos.

Language Leads

Our language leads will be very happy to welcome you to our translation effort:

• Farhan Hasin Chowdhury (@frhnhsin) is leading the Bengali community.
• Miya Liu (@miyaliu666) is leading the Chinese community.
• Dario Di Cillo (@_DarioDC) is leading the Italian community.
• Yoko Matsuda (@_sidemt) is leading the Japanese community.
• Alison Yoon (@aliyooncreative) is leading the Korean community.
• Daniel Rosa (@Daniel__Rosa) is leading the Portuguese community.
• Nielda Karla Gonçalves de Melo (@NieldaKarla) is leading the Portuguese community.
• Rafael Hernandez (@RafaelDavisH) is leading the Spanish community and the localization process.
• Estefania Cassingena Navone (@EstefaniaCassN) is leading the Spanish YouTube channel.
• Hillary Nyakundi (@larymak1) is leading the Swahili community.
• Anastasiia Buievych (@anisiangel) is leading the Ukrainian community.
• Zaira Hira (@hira_zaira) is leading the Urdu community.

freeCodeCamp on Crowdin

Just like I mentioned before, Crowdin is the translation platform we use. It is a localization management platform where individuals, teams, and organizations can localize their resources efficiently.

To access freeCodeCamp's projects on Crowdin:

Go to translate.freecodecamp.org and you will see the dashboard with the projects that we are currently focused on:

freeCodeCamp.org on Crowdin.

We have three main projects:

• Coding Curriculum
• Learn User Interface
• Contributing Documentation

We also have other projects on Crowdin such as News UI, Other Courses, and Subtitles (Chinese).

How to Choose a Project and a Language

Once you're on our translation platform, you will need to choose a project. Let's say that you choose to translate the coding curriculum.

You just need to click on the project:

Click on the project you would like to contribute work.

Once you click on the project, you will be taken to a list of available languages for translation.

List of available languages for the Coding Curriculum project.

For each language, you will see:

• Its name.
• Its language code.
• A bar with two possible colors. Blue represents the translation progress and green represents the proofreading progress.
• You can also see their corresponding percentages to the right.
• The last number to the right represents the number of words to translate.

You will also find an information panel on the right with:

• A brief description of the project.
• The source language (English).
• The number of contributors for that project.
• How many source words exist in the project.
• When the project was created and when it was last active.

Check out the information on the right (the gray panel).

Now it's time to choose a language.

If you click on the language, you will be taken to the project structure with all the files and folder available for translation.

The Coding Curriculum project structure for Spanish (Modern).

How to Select a File

To enter the Translation Editor and start translating, just click on the name of a file that needs translation.

Select a file that needs translation. A file needs translation if the bar is not completely blue (translated) or green (proofread).

Please note that we usually prioritize translating the first three certifications.

💡 Tip: if you are not signed in to your Crowdin account or if you have not created your Crowdin account yet, you will be prompted to do so when you click on a file.

This is the screen where you can log in to freeCodeCamp's translation platform. You can also sign up to create your Crowdin account.

If you're signing up for a new account, you will need to enter your email, choose your username, and your password. You will also receive an email from Crowdin asking you to click on a link to verify your email address.

The Translation Editor

Congratulations. Now you have your Crowdin account and you are ready to start translating the file you selected.

Let's say that you clicked on the **build-a-drum-machine.md** file and you want to translate it into Spanish (Modern).

You will see a screen similar to this one:

The Translation Editor. This is what you will see when you click on a file and sign in to your Crowdin account.

If you would like to learn more about how the editor works, click on "Next" to see more tips on the UI but if you would like to close this short tutorial, just click on the X at the top.

These are the seven steps of the short tutorial provided by Crowdin in case you would like to keep them as a reference:

Collaborate on translations in real-time.

Use context to make relevant translations.

Preview files.

Make translations from any device.

Switch to Side-by-side view to review translations faster.

That's all friends! This is the seventh and last step of the tutorial.

After you reach the final step, click "Close" and you will be in the Translation Editor.

This is where the magic happens. You can start translating, save your translations, use suggested translations and adapt them, and even upvote or downvote proposed translations.

To translate a string, just click on it or save your current translation to go to the next string.

The Translations Editor.

This is where you can write and save your translation.

💡 Tip: You can also write comments and mark them as issues to notify freeCodeCamp's staff and other contributors.

You can write comments for individual strings and mark them as issues.

How to Translate the Learn Interface

We also have specific guidelines for translating the Learn interface.

Our documentation mentions that:

Our /learn interface relies on JSON files loaded into an i18n plugin to generate translated text. This translation effort is split across both Crowdin and GitHub.

We translate the intro.json and translations.json files on Crowdin. If you are planning to translate strings from these files, please know that the Context information provided in Crowdin can be very helpful.

Example of the context information provided by Crowdin (source).

There are certain files that we cannot upload to Crowdin, such as links.json, meta-tags.json, motivation.json, and trending.json. These files are usually maintained by language leads but if you would like to help with these, please refer to this article.

How to Translate the Documentation

Documentation is another essential resource for freeCodeCamp's mission because we can share important information, steps, and guidelines with potential contributors.

We do have certain guidelines for translating our documentation. You can find them in this article. It covers how to translate internal links in the translated documentation.

Best Practices

For any project, our goal should always be to follow the best practices, right? These are some of the best practices that you should follow to translate freeCodeCamp's resources:

• Do not translate the content within <code> tags. These tags indicate text that is found in code and should be left in English.
• Do not add additional content. If you feel a challenge requires changes in the text content or additional information, you should propose the changes through a GitHub issue or a pull request that modifies the English file.
• Do not change the order of content.

How to Become a Proofreader

If you join freeCodeCamp's localization effort, you can also become a proofreader.

We will typically grant you proofreading access if you have been contributing to freeCodeCamp for a while.

If you would like to apply to become a proofreader, please reach out to us in our contributors chat room.

💡 Tip: Proofreaders can approve their own translations. However, we advise you to allow another proofreader to review your proposed translations to make sure that there are no errors or typos.

How to Proofread the Translations

When you become a proofreader, you will have special permissions in the Translations Editor. You will be able to see the current translations, edit them, and approve them.

You should consider the community scores determined by the upvotes and the downvotes when deciding which translations to approve.

When you approve a string, the automated process that we configured with the GitHub integration on Crowdin will add it to our live platform:

Approving a string in the proofreading view will mark it as complete and it will be downloaded in our next pull from Crowdin to GitHub.

Discord Chat Server for Translators

If you have any questions or you would like to join our translation effort, you are welcome to join our Discord chat server for translators.

Our Discord chat server.

Once you create your account and join the server, you will see a welcome message with the **#start-here** localization channel.

Excellent work. Now you are ready to start translating and join freeCodeCamp's localization effort.

Summary

Congratulations! We covered many topics related to localization and now you know more about how to localize your resources and platforms to reach users worldwide.

These are some key takeaways:

• In a globalized world where information is available with just a few clicks, localizing products, services, and platforms is essential if your goal is to reach users worldwide. Adapting them to different cultures will open doors for your team, your organization, and users around the world.
• Crowdin is a powerful localization management platform focused on giving you and your team the tools you need to localize products and platforms that are constantly evolving.
• freeCodeCamp's localization effort is a real-world example of a global community brought together by a common goal: providing free access to education around the world without language barriers. You can join too.

I hope you liked this book on localization fundamentals. You are ready to start localizing your platform. Now is the right time to start. Localization can be exactly what you need to reach a global community of users.

Well, it’s September again – and here we are for the second installment of this month-long event. freeCodeCamp is holding our World Translation Month for the second year in a row, taking place September 6th and running through the rest of the month.

What is World Translation Month?

World Translation Month is an initiative held by freeCodeCamp to help translate freeCodeCamp's curriculum into as many world languages as possible.

The event welcomes new localization contributors and thanks those who are already helping in the translation process.

During the inaugural event last year, freeCodeCamp held a Twitter Spaces session. During that session, we got to chat with contributors. We helped a lot of new people get started translating freeCodeCamp into their native language.

Rafael, the leader of the translation effort worldwide, published this article announcing the event. It provides some data on the efforts of translation up to that point.

You can also watch this short video that contains messages from contributors all around the world about what World Translation Month means to them and how they're helping out.

Translation Progress to Date

So much has happened in the twelve months since then. We've gotten contributors from many different languages. For example, Italian, Japanese, Portuguese, and Ukrainian now have the whole curriculum translated.

Others have started the process of translating the first three core certifications – Responsive Web Design (in its latest version), JavaScript, and Front-End Libraries – like Arabic, Bengali, French, German, Indonesian, Korean, Persian, Romanian, Russian, Turkish, and Urdu.

freeCodeCamp's certifications translated to Italian and Japanese (above), Portuguese and Ukranian (below).

The community has also changed our focus a bit. This year, we made the decision to shift our attention to the freeCodeCamp publication. We've started translating our most popular tutorials into other world languages

We've now published these tutorials in many languages. Already, we have 475 articles in Spanish and over 1,000 articles in Chinese.

Portuguese has around 350 articles, and Italian has more than 200 articles translated.

The Japanese, Bengali, Arabic, and Urdu news sections have also been producing more and more translations for their publications.

This does not mean we are leaving the curriculum behind. In fact, both tasks are happening concurrently. Some contributors are focused on the curriculum, while others assist with the translation of the articles.

A Change in Our Communication Channels

We've also changed how we communicate with our localization contributors. In June, we moved our chat rooms that we use to communicate with our contributors to our community Discord server.

This made it easier to interact with contributors. It has also helped them interact more easily with each other as well as with other members of the community who are learning to code.

The chat rooms for translations are under Localization, as seen in the image below:

Localization chat rooms on the fCC Discord server

If campers need help with the curriculum in general, they can still ask questions on the freeCodeCamp Forum.

We have also set up sections in the different languages on the Forum to help people who have doubts during their journey across the curriculum but find it hard to ask their questions in English.

Several localized sections of the fCC forum are now available

The Goal of World Translation Month

The goal of the World Translation Month is twofold:

• to thank our contributors for all they've been doing to bring freeCodeCamp to as many world languages as possible, and
• to invite more contributors to be part of our translation effort.

Quincy published an article in June where you can read about how to reach out to us to offer your translation assistance.

We would also like to show our appreciation to our contributors who have taken their time to produce more and more texts in their languages. These translated curricula and articles make it possible for people around the world to learn to code in their native language.

World Translation Month Badges

This year, we will once again give out badges to the contributors who have helped us translate articles for the publication throughout the month. Even though articles may vary in size, we understand that each one requires a ton of effort.

Translating articles is quite different from translating the curriculum. Contributors can translate a few strings in the curriculum and stop contributing. But each contributor is responsible for an entire article once they decide to translate it. So contributors begin and end the translation of articles they choose, something they excel at.

During the World Translation Month event, we will give all participants who have contributed throughout the month a World Translation Month Badge.

Also, at the end of the event, we will present special badges to the Top Translators who have made the most contributions in the month of September.

You will be able to display these badges on your freeCodeCamp forum profile if you want to do so.

Thank You to All the Translators, Contributors, and Proofreaders!

If you would like to help translate freeCodeCamp's curriculum into any world language, visit our contributors’ channel on Discord, and read Quincy’s article on how to contribute and learn more.

If you are part of this initiative and have contributed by volunteering to bring freeCodeCamp's vast resources to your native language, thank you! We offer our heartfelt gratitude and wishes that the process has helped you learn and has been fun for you. Keep up the great work!

End of World Translation Month 2022 Update

World Translation Month has come to an end. And we would like to thank all the contributors who helped us translate the freeCodeCamp publication and the curriculum into many different world languages.

In the table below, you will find a list of our most prolific translators during the month of September grouped by language. Those who contributed the most will also get the Top Translator badge as an acknowledgement of the many hours they dedicated to this effort.

Arabic

Publication

Curriculum

Chinese

Publication

Curriculum

French

Publication

German

Publication

Haitian Creole

Publication

Hindi

Publication

Indonesian

Publication

Italian

Publication

Japanese

Publication

Curriculum

Portuguese, Brazilian

Publication

Curriculum

Spanish

Publication

Swahili

Publication

Turkish

Publication

Ukrainian

Publication

Urdu

Publication

Curriculum

Vietnamese

Publication

To achieve this, freeCodeCamp has started translating our curriculum into dozens of world languages, with the help of thousands of volunteers around the world.

To honor our translators and proofreaders, we will be hosting a World Translation Summit. We will share updates on our translation effort and answer your questions. If you would like to join our translation effort, we will also onboard new volunteers.

📌 It would be great if you could join us. We will have two sessions: Friday, April 8 at 9pm EST and Saturday, April 9 at 9 am EST.

In this article, you will find an overview of the progress of our translation effort:

• Welcome to freeCodeCamp
• Our Translation Effort
• Community Leaders
• Student Testimonials
• World Translation Summit 2022

🔹 Welcome to freeCodeCamp

freeCodeCamp is a donor-supported 501(c)(3) nonprofit organization whose mission is to help people learn to code for free. We create and share thousands of interactive coding lessons, articles, and videos for anyone who wants to learn.

With our curriculum, you can learn to code for free, earn certifications, and build projects to start or expand your portfolio.

Since freeCodeCamp started in 2014, the community has grown steadily, and there are campers all over the world learning from freeCodeCamp's resources.

In 2019, we asked ourselves this question: could we expand our mission and help people learn to code in their native language?

The answer was "yes!", so we decided to take our mission one step further by translating and creating learning resources in other world languages.

From that moment, this has been one of our main goals because we believe that everyone should have access to free coding education around the world without any language barriers.

🔸 Our Translation Effort

Our amazing team of volunteers and the members of our staff have achieved some impressive milestones so far and continue to progress on our translation effort. Let's see this in more detail.

Curriculum

How to select a language from the dropdown menu.

The community has translated our curriculum into Spanish, Chinese, Italian, Portuguese, Ukrainian, and Japanese. These languages are already live and you can select them in the home page.

There has also been significant progress in many major world languages, including:

• Afrikaans
• Arabic
• Bengali
• Catalan
• Czech
• Danish
• Dutch
• Finnish
• French
• German
• Greek
• Hatian Creole (Kreyòl)
• Hebrew
• Hindi
• Hungarian
• Korean
• Norwegian
• Persian (Farsi)
• Polish
• Romanian
• Russian
• Serbian
• Swahili
• Swedish
• Thai
• Turkish
• Urdu
• and Vietnamese

💡 Tip: you can learn more about our translation effort in this article written by Quincy Larson Learn to Code in Spanish, Chinese, and 30 Other Languages – freeCodeCamp's Translation Effort

Publications

We have localized publications in the following languages, and are actively working on others:

Portuguese
Our Portuguese publication has more than 190 translated articles and we publish new ones every week.

Portuguese Publication

Italian
Our Italian publication has more than 85 translated articles and it is growing consistently every week.

Italian Publication

Japanese
Our Japanese publication has more than 30 translated articles and we are constantly translating new articles into Japanese.

Japanese Publication

Chinese
Our Chinese publication has more than 720 translated articles and we publish new ones every week.

Chinese Publication

Spanish
Our Spanish publication has more than 370 translated articles and we publish new ones every week.

Spanish Publication

Arabic
Our Arabic publication has more than 75 translated articles and we are translating new ones every week.

Arabic Publication

Bengali
Our Bengali publication has more than 30 articles published and we translate new ones every week.

Bengali Publication

Ukrainian
We also have a Ukrainian publication where we translate articles for the community.

Urdu
We are also working actively to start an Urdu publication. We already have 29 articles translated into Urdu and this publication will be live very soon.

Translation Projects and New Certifications

We are also translating new projects and certifications into many world languages.

Learn to Code RPG
Last year, freeCodeCamp launched a visual game novel created by Lynn Zheng in which you can "teach yourself to code, make friends in the tech industry, and pursue your dream to become a developer."

The game has more than 600 Computer Science quiz questions to help you practice coding.

You can help us translate the game into your native language in Crowdin:

Learn to Code RPG in Crowdin.

Rust Course
We also have a Rust course created by Shaun Hamilton that you can follow step by step on YouTube or interactively on Replit. This course is being translated into many world languages.

You can help us translate this course in Crowdin.

Rust course in Crowdin.

Responsive Web Design Certification (Beta)
We recently released a Beta version of the new Responsive Web Design curriculum that's focused on learning by building projects interactively. This new certification is available for translation in Crowdin.

Screenshot of the "Learn CSS Transforms by Building a Penguin" lesson.

Relational Database Certification (Beta)
This year we also launched this certification created by Tom Mondloch in which you can learn how to work with relational databases step by step. We are also planning to translate this certification into other world languages.

Relational Database Certification (Beta)

As you can see, we have new and exciting projects that you can help us translate. By translating, you can learn while being part of an initiative that is transforming lives around the world.

Discussion Forums

When you are learning how to code, being able to ask questions is priceless. This is why we currently have discussion forums in: Spanish, Italian, Portuguese, Ukrainian, Japanese, and Chinese. On these forums, you can post coding questions and get help and advice from members of the community.

💡 Tip: you can also share your projects and ask for feedback. There will always be members of the community who will be glad to share with you their thoughts and advice.

freeCodeCamp's forums in Spanish, Italian, Portuguese, Ukrainian, Japanese, and Chinese.

Localized Twitter Accounts

We have active Twitter accounts in the following languages:

• Spanish: @freecodecampES
• Italian: @freeCodeCampIT
• Chinese: @freeCodeCampZH
• Bengali: @freeCodeCampBN
• Portuguese: @freecodecampPT
• Japanese: @freecodecampJA
• Arabic: @freeCodeCampAR
• Ukraine: @freeCodeCampUK

Localized Twitter Accounts

YouTube Channels

We believe that everyone should have the opportunity to choose learning resources for their learning style. This is why we also create and publish full video courses on YouTube.

Currently, we have four localized YouTube channels in:

• Spanish
• Chinese
• Hindi
• Bengali

We started our Spanish YouTube channel in early 2021. Now it has more than 76,000 subscribers, more than 1.6 million views, and more than 214,000 hours of watch time. So far, we have published five courses on HTML, CSS, JavaScript, Python, and React and we are creating new courses for the community.

freeCodeCamp's Spanish YouTube Channel

Our Chinese YouTube channel has more than 2,960 subscribers and two courses on JavaScript and Git.

freeCodeCamp's Chinese YouTube Channel

Our Hindi YouTube channel has more than 22,900 subscribers and 22 videos and courses on Python, Flutter, HTML and CSS, Android Development, C#, and TensorFlow.

freeCodeCamp's Hindi YouTube Channel

Our Bengali YouTube channel has more than 460 subscribers and one course on Responsive Web Design. We are working actively to create new courses in Bengali.

freeCodeCamp's Bengali YouTube Channel

We are working actively to start a Portuguese YouTube channel.

We also have a freeCodeCamp bilibili account for the Chinese community where contributors can share video tutorials and organize live events.

Discord

We also have Discord where you can can join the freeCodeCamp community, ask questions, learn how to contribute, and interact with other members of the community.

Some of our Discord chatrooms for the localization effort.

🔸 Community Leaders

Now let me introduce you to the community leaders. They are native speakers of their respective languages and their tasks include onboarding volunteers, creating resources, translating articles, preparing events and making sure that everything works smoothly for volunteers.

• Islam Mahfouz (@codezilla_) is leading the Arabic community.
• Farhan Hasin Chowdhury (@frhnhsin) is leading the Bengali community.
• Joy Shaheb (@JoyShaheb) is leading the Bengali YouTube channel.
• Miya Liu (@miyaliu666) is leading the Chinese community.
• Ilenia Magoni (@ieahleen) is leading the Italian community.
• Dario Di Cillo (@_DarioDC) is leading the Italian community.
• Yoko Matsuda (@_sidemt) is leading the Japanese community.
• Daniel Rosa (@Daniel__Rosa) is leading the Portuguese community.
• Nielda Karla Gonçalves de Melo (@NieldaKarla) is leading the Portuguese YouTube channel.
• Rafael Hernandez (@RafaelDavisH) is leading the Spanish community.
• Estefania Cassingena Navone (@EstefaniaCassN) is leading the Spanish YouTube channel.
• Anastasiia Buievych (@anisiangel) is leading the Ukrainian community.
• Zaira Hira (@hira_zaira) is leading the Urdu community.
• Hillary Nyakundi (@larymak1) is leading the Swahili community.

🔹 Student Testimonials

Our learners inspire us and motivate us every day. The best way to show the impact of our translation effort around the world is to read students' testimonials on how freeCodeCamp has changed their lives and impacted their careers.

Spanish Testimonials:

Spanish Testimonial

English Translation:
"I brought a web development course. I decided to share what I learned. The excitement in their faces and their motivation to learn is amazing. They registered for the Responsive Web Design course at @freeCodeCampES."

• Translation by Estefania Cassingena Navone.

Spanish Testimonial

English Translation:
"I don't think there is anything better for someone who wants to start programming than @freeCodeCampES courses."

• Translation by Estefania Cassingena Navone.

Chinese Testimonials:

Testimonial by 陈志成 ZhichengChen:

freeCodeCamp 最吸引我的地方不仅在于超棒的在线课程，更在于背后优秀的国际化开源团队。在这里我可以通过协作翻译、发表文章、分享视频、贡献项目等方式参与到开源世界里来，可以有机会和世界各地的贡献者交流，甚至会收到 Quincy 的连线问候。参与开源是技术快速提升的途径之一，开源也是一种精神，更是一种生活态度。freeCodeCamp 里面有很多手册类文章，和其它手册不同的是，freeCodeCamp 里面的手册更侧重于实践，是一种很棒的学习方式。我一般会把每一个操作步骤实践一遍，然后再通过翻译加深理解，等到工作中用到相应的知识再回过头来过一下手册，从熟悉到掌握再到慢慢精通，既参与了开源贡献，又提升了技术水平。

English Translation:
"What I like the most about freeCodeCamp is not only the great online courses, but also the great international open source team behind it. Here you can participate in the open source world by collaborating on translations, posting articles, sharing videos, contributing to projects, and more. You can have the opportunity to communicate with contributors from all over the world, and even receive a “hello” from Quincy. freeCodeCamp has a lot of manuals, but unlike other manuals, the freeCodeCamp manuals are more hands-on, which is a great way to learn. I usually practice each operation step once, and then deepen my understanding through translation. When I use the corresponding knowledge in my work and then go back to the manual, from familiarity to mastery to slowly become proficient, to participate in open source contributions, and to improve the technical level."

• Translation by Miya Liu.

Testimonial by 罗基印 luojiyin:

我是一名运维开发工程师，通过 freeCodeCamp 学习了有关前端的知识。翻译英文资源，可以接触最新的知识和想法， 提高自己的英文阅读能力和中文的写作能力。也能加快知识的传播，方便别人入门

English Translation:
"I'm a DevOps Engineer who has learned about front-end through freeCodeCamp. By translating English resources, I can get access to the latest knowledge and ideas, and improve my English reading and Chinese writing skills. It also speeds up the spreading of knowledge and makes it easier for others to get started."

• Translation by Miya Liu.

Arabic Testimonial:

Arabic Testimonial

English Translation:
"I've completed 3 certifications on freeCodeCamp's website, and honestly I found it much better than a lot of different curriculums that are being taught in public universities and even expensive private ones, at least where I live. freeCodeCamp was also better than expensive specialized schools."

• Translation by Islam Mahfouz.

🔹 World Translation Summit 2022

Now that you know more about our translation effort and the impact that we are having in communities around the world, we have something special for you.

🌐 We would like to invite you to join us for the World Translation Summit. We will have two sessions for different time zones:

• Friday, April 8 at 9pm EST.
• Saturday, April 9 at 9 am EST.

📌 It would be awesome if you could be part of our summit. If you are interested in participating, please register to receive an invite.

During the summit, you will meet our international staff and you will learn more about our new projects and the progress of our translation effort. We will answer your questions and we will welcome and onboard new volunteers interested in joining our initiative.

By joining our translation effort and our international community, you will be helping people around the world. You will also be making the world a more accessible place where language is no longer a barrier for anyone who wants to learn and thrive through dedication, education, and enthusiasm.

How to Contribute

To join our translation effort:

Step 1: Fill out this Google form.

Step 2: Join the freeCodeCamp Official Discord and visit the "start-here" room. You can then join a language-specific room and speak your native language.

Some of our Discord chatrooms for the global localization effort

Note that Discord has a couple of verification steps you will need to complete.

If you see this message at the bottom of Discord, click the “complete” button to finish the onboarding process (where you will agree to our community rules).

Alternatively, if you just created your Discord account, you might need to wait up to 5 minutes to send messages. (This is an anti-spam counter-measure).

You will receive an email from a Language Lead within a few days to learn a bit more about you and your goals. They may give you access to the freeCodeCamp publication, where you can start translating articles.

Thank you

Finally, we would like to thank our awesome team of volunteers who dedicate their time, knowledge, and energy to our translation effort because everything that we have achieved so far would not have been possible without you.

Quincy Larson, the founder of freeCodeCamp, would like to share this message with all of you:

"Let's make the world's math, programming, and computer science knowledge available to everyone. With some love and care, we can help people around the world learn in their own native language. This is a team effort by the freeCodeCamp community."

You are the reason why we are here. We will continue working for you and with you to make sure that education is free and accessible for everyone around the world.

freeCodeCamp has many exciting new projects and ideas, and we welcome you to join our mission. This is just the beginning and we can do this together.

🔸 Questions Asked During the Summit

Thank you very much for joining the summit. It was great to see you there. We would like to share with you the answers to the questions that you asked during the event.

What tool can we use to translate freeCodeCamp? Do you have a glossary with technical terms that contributors can refer to?

The tool that we are using to translate freeCodeCamp is Crowdin, a localization management platform. You can learn more about Crowdin and how to contribute to the translation effort in our Contribution Guidelines.

Do you have any intention/plan to do a WEB 3 and Blockchain Curriculum in the future?

An alumnus is giving us a donation to develop this course. It will not be listed in the main curriculum, but we are creating it because there are many related job positions, and we can teach you the skills you need to apply for these jobs.

How long until freeCodeCamp will start the Bachelor's degree program?

It can take years or even a decade for freeCodeCamp itself to achieve this. But we may be able to work and partner with existing organizations to speed up the process.

Will freeCodeCamp be translated into native languages?

We definitely will if we can find volunteers who want to translate the resources into these languages. As a small nonprofit, we need volunteer contributions to do this. If the curriculum is translated into these languages, we will invest the resources necessary to have the curriculum live.

Why doesn't freeCodeCamp use GitHub and Markdown for the translation effort?

That is a great suggestion. We tried using GitHub in the past and things really started taking off when we started using Crowdin because it can be used by everyone even if they don't have a technical background. Crowdin provides a basic machine translation that can be improved by the translators. We can create a glossary of important terms that appear repeatedly in different files. Our conclusion based on our experience is that Crowdin is a more specialized tool to translate the core curriculum.

We have used GitHub to translate articles for the publications. Every language is experimenting with the tool that works best for the community.

How does freeCodeCamp create the glossary on Crowdin?

We have a repository where we write the list of terms for the glossary, and we upload it to Crowdin. The proofreader team is responsible for making sure that the most accurate translation for the word is being used.

How can I start translating another file without going to the main page on Crowdin?

You can open another file from the file that is being translated. Ilenia Magoni explained this during the event step by step.

If you reach the end of the file there will be a prompt that asks you if you want to go to next file or choose which file to open:

You can also open a different file from the breadcrumb path:

In the modal to open a new file, you can see which folders and files still have words to translate. This can help you to choose which file to go to next.

In Japan, I have seen many comments, tweets, and blog posts saying "freeCodeCamp looks awesome, but unfortunately, I can't use it because I can't read English."

Currently, most information and learning resources related to programming are in English. But we want freeCodeCamp to be a place where everyone can learn to code in their native language.

I hope the Japanese freeCodeCamp curriculum will be a new option for Japanese speakers who wish to learn to code.

Japanese translation contributors/supporters

The translation effort at freeCodeCamp is supported by many contributors.

Also, the Japanese translation of the entire curriculum, in particular, was made possible thanks to the support of Mr. Kimio Momose and Mr. Thomas Telandro of the nonprofit organization Unbiased Learning and the translation company TMJ Japan Ltd.

I appreciate all the help from everyone who contributed to this translation effort.

Below is a list of contributors who have participated in the Japanese translation so far.

Japanese translation contributors

yukari-n-erb
mmatsumoto1026
miya-start
tetz-akaneya
furidosu
Besshy
Lulkafe
Emi
Riokeh
King Tony
YAMADA Nobuko
徳輝方
ariadaioh

TMJ Japan Ltd.
tomig7
Hiroko.Nagayama
and others

Supported by: Unbiased Learning

Also, thanks to everyone who gave us kind encouragement in the contributor chat, forum, Twitter, and so on.

Frequently Asked Questions

Below are answers to frequently asked questions about the Japanese curriculum.

I'm halfway through the English curriculum. What should I do?

Your progress and certificates are available in all languages. You don't have to go over it in Japanese again. You can just switch to the Japanese curriculum (making sure you're signed in) and continue with it.

You can switch languages at any time from the menu button at the top right corner of the learning platform.

Also, certificates you already earned in the past can be displayed in Japanese if you would like.

I need help with the curriculum. Where should I ask questions?

The freeCodeCamp forum is the best place to ask questions about the freeCodeCamp curriculum and projects.

In addition, there is now Japanese sub-forum too so you can post questions there. Asking questions in Japanese will help other Japanese campers who face the same problem in the future.

Of course, you can also help the Japanese community grow even more by answering questions from other campers.

I found a translation error or I want to propose improvements to a translation.

We appreciate it if you could let us know in our contributor chat or in the comments on Crowdin, our translation platform.

See this forum post for more details.

It's OK even if you are not 100% sure about your suggestion. Please reach out to us, and we can discuss how we can improve it together.

I want to participate in the translation effort.

We welcome new contributors! Feel free to join the contributor chat and say "Hi".

freeCodeCamp is an open source project, and we are constantly improving and updating our curriculum. New courses will be added from time to time.

Because of this, there will always be more translation work to do each time we add or change something, so we would appreciate your continued contributions.

See below for the information regarding Japanese translation contribution:

• Forum post: freeCodeCamp contribution information in Japanese
• Contribution guidelines (Japanese)

You can also contribute to the source code on GitHub.

I can't participate in translation, but I want to help freeCodeCamp and the Japanese community.

There will be more and more things we need help with as the Japanese community grows.

Please reach out to me in the contributors chat. Let's talk about how we can help the Japanese freeCodeCamp community together.

If you want to learn more about freeCodeCamp, you can read other frequently asked questions here.

Over the past few years, hundreds of volunteer contributors have worked to translate freeCodeCamp into major world languages. In February, Quincy announced that freeCodeCamp had successfully launched both Spanish and Chinese editions. And Portuguese and Italian soon followed.

During World Translation Month, we will celebrate what we have achieved collectively – and what we will accomplish for everybody around the world. Watch this one-minute announcement video:

If you are interested in participating in translating freeCodeCamp into any world language, you can visit our contributors channel and learn more.

Latest Translation Accomplishments

Today, we have successfully launched the Italian and Brazilian Portuguese curriculum. We are eager to see what is to come for these active communities.

And the Ukrainian community has really taken off in their translation efforts. They have eight certifications fully translated and two close to 100%, almost all completed within a month. It is remarkable to witness the dedication and perseverance every language community has shown.

We have multiple other communities and individuals who are translating the curriculum to their native languages. You can take a look at the current statuses of all the active translations and their progress here.

Current Translation Progress

Currently, volunteers around the world are in the process of translating freeCodeCamp's curriculum into 28 world languages.

And many of these world languages are showing significant progress, especially the French, Romanian, Japanese, and German-speaking communities. Keep up the great work!

What is the Goal of the World Translation Month Event?

freeCodeCamp's goal is to give every individual the tools to translate the curriculum into their native language. Also, we will dedicate all our efforts and time to this event to reach significant progress for every world language.

We have witnessed what a handful of contributors can do together with a singular purpose. And we hope that World Translation Month will become a yearly event when all world languages can celebrate having access to free programming education translated by their community for their community.

Our Reward System 🥇

freeCodeCamp wants to make this a memorable event for every contributor who participates.

During the WTM event, we will give all participants a World Translation Month Badge. Also, at the end of the event, we will present special badges to the Top Translators and Top Proofreaders who have made the most contributions.

You can display these badges on your freeCodeCamp curriculum and forum profiles if you want to do so.

2021 World Translation Month badges

The freeCodeCamp Localization Roadmap

The freeCodeCamp curriculum is already available in Chinese and Spanish. And beyond this, these communities have many other resources at their disposal, thanks to the efforts of hundreds of contributors.

For example, the Chinese-speaking community has translated nearly all the certifications into Chinese. They also have close to 600 articles translated, there are 10 of freeCodeCamp's video tutorials with subtitles on Bilibili, and they've organized hundreds of meetups, hackathons, conferences, live coding events, and coding workshops in universities and high schools.

freeCodeCamp bilibili 频道

The Spanish-speaking community has the first two certifications available in Spanish, and they've translated around 250 articles. Community members have also written about 20 original articles, created 3 original full-length video tutorials, and Estefania has created 24 short videos for the Spanish YouTube channel.

The response from the Spanish-speaking community has been remarkable on YouTube and Twitter. Thanks to the fantastic job Estefania has been doing by engaging with the community with posts and short videos on YouTube, the channel now has over 12,000 followers. And freeCodeCamp's Twitter account en Español has reached 7,300 followers while continuing to grow.

YouTube Channel freeCodeCamp en Español

Twitter freeCodeCamp en Español

The Translation Blueprint

As Quincy mentioned in the World Language Translation Effort article, freeCodeCamp's "...long-term goal is for each of these language communities to come into its own."

And we'll take the same steps as we took with the thriving Spanish-speaking and Chinese-speaking communities with other language communities around the world.

The plan is to launch a localized publication, YouTube Channel, sub-forum, and Twitter account for these language communities, each with their own contributors and staff.

Thank You to All the Translators, Contributors, and Proofreaders!

I want to finish up by thanking the proofreaders and translators who have dedicated hours upon hours to translating and proofreading.

Active Translators

Active Proofreaders

Also, thank you to all the proofreaders and participants in the World Translation Month video:

• Andrea Ros - Italian Proofreader
• Daniel Rosa - Portuguese-BR Proofreader
• Stephan Düsterhöft and Michael Franz - German Proofreaders
• Sidemt (Yoko) - Japanese Proofreader
• Adina Solomon - Romanian Proofreader
• Khalid - Arabic Proofreader
• Juan Carrillo - Spanish Proofreader
• S1ng S1ng，Alan Luo，Zhicheng Chen，Nicholas Zhan，Miya Liu - Translators/Proofreaders

If you are interested in participating in translating freeCodeCamp's curriculum into any world language, you can visit our contributors channel and learn more.

Introduction

In this article, we will create a multilanguage translator using Blazor and the Translate Text Azure Cognitive Service.

This translator will be able to translate between all the languages supported by the Translate Text API. Currently, the Translate Text API supports more than 60 languages for translation.

The application will accept the text to translate and the target language as the input and returns the translated text and the detected language for the input text as the output.

Take a look at the output shown below.

Prerequisites

• Install the latest .NET Core 3.1 SDK from https://dotnet.microsoft.com/download/dotnet-core/3.1
• Install the latest version of Visual Studio 2019 from https://visualstudio.microsoft.com/downloads/
• An Azure subscription account. You can create a free Azure account at https://azure.microsoft.com/en-in/free/

Source Code

You can get the source code from GitHub.

Create the Azure Translator Text Cognitive Services resource

Log in to the Azure portal and search for the cognitive services in the search bar and click on the result. Refer to the image shown below.

On the next screen, click on the Add button. It will open the cognitive services marketplace page. Search for the Translator Text in the search bar and click on the search result. It will open the Translator Text API page. Click on the Create button to create a new Translator Text resource. Refer to the image shown below.

On the Create page, fill in the details as indicated below.

• Name: Give a unique name for your resource.
• Subscription: Select the subscription type from the dropdown.
• Pricing tier: Select the pricing tier as per your choice.
• Resource group: Select an existing resource group or create a new one.

Click on the Create button. Refer to the image shown below.

After your resource is successfully deployed, click on the “Go to resource” button. You can see the Key and the endpoint for the newly created Translator Text resource. Refer to the image shown below.

Make a note of the key, as we will be using this in the latter part of this article to request the translations from the Translator Text API. The values are masked here for privacy.

Create a Server-Side Blazor Application

Open Visual Studio 2019 and click on “Create a new project”. Select “Blazor App” and click on the “Next” button. Refer to the image shown below.

On the next window, put the project name as BlazorTranslator and click on the “Create” button. The next window will ask you to select the type of Blazor app. Select Blazor Server App and click on the Create button to create a new server-side Blazor application. Refer to the image shown below.

Creating the Models

Right-click on BlazorTranslator project and select Add >> New Folder. Name the folder as Models. Again, right-click on the Models folder and select Add >> Class to add a new class file. Put the name of your class as LanguageDetails.cs and click Add.

Open [LanguageDetails.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/LanguageDetails.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class LanguageDetails
    {
        public string Name { get; set; }
        public string NativeName { get; set; }
        public string Dir { get; set; }
    }
}

Similarly, add a new class file [TextResult.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/TextResult.cs) and put the following code inside it.

using System;
namespace BlazorTranslator.Models
{
    public class TextResult
    {
        public string Text { get; set; }
        public string Script { get; set; }
    }
}

Add a new class file [Translation.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/Translation.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class Translation
    {
        public string Text { get; set; }
        public TextResult Transliteration { get; set; }
        public string To { get; set; }
    }
}

Create a class file [DetectedLanguage.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/DetectedLanguage.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class DetectedLanguage
    {
        public string Language { get; set; }
        public float Score { get; set; }
    }
}

Create a class file [TranslationResult.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/TranslationResult.cs) and put the following code inside it.

namespace BlazorTranslator.Models
{
    public class TranslationResult
    {
        public DetectedLanguage DetectedLanguage { get; set; }
        public TextResult SourceText { get; set; }
        public Translation[] Translations { get; set; }
    }
}

Finally, create the class file [AvailableLanguage.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Models/AvailableLanguage.cs) and put the following code inside it.

using System.Collections.Generic;

namespace BlazorTranslator.Models
{
    public class AvailableLanguage
    {
      public Dictionary<string, LanguageDetails> Translation { get; set; }
    }
}

Create the Translation service

Right-click on the BlazorTranslator/Data folder and select Add >> Class to add a new class file. Put the name of the file as TranslationService.cs and click on Add. Open [TranslationService.cs](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Data/TranslationService.cs) file and put the following code inside it.

using BlazorTranslator.Models;
using Newtonsoft.Json;
using System;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;

namespace BlazorTranslator.Data
{
    public class TranslationService
    {
        public async Task<TranslationResult[]> GetTranslatation(string textToTranslate, string targetLanguage)
        {
            string subscriptionKey = "af19d996a3cb4a70a808567aad5bc41a";
            string apiEndpoint = "https://api.cognitive.microsofttranslator.com/";
            string route = $"/translate?api-version=3.0&to={targetLanguage}";
            string requestUri = apiEndpoint + route;
            TranslationResult[] translationResult = await TranslateText(subscriptionKey, requestUri, textToTranslate);
            return translationResult;
        }

        async Task<TranslationResult[]> TranslateText(string subscriptionKey, string requestUri, string inputText)
        {
            object[] body = new object[] { new { Text = inputText } };
            var requestBody = JsonConvert.SerializeObject(body);

            using (var client = new HttpClient())
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Post;
                request.RequestUri = new Uri(requestUri);
                request.Content = new StringContent(requestBody, Encoding.UTF8, "application/json");
                request.Headers.Add("Ocp-Apim-Subscription-Key", subscriptionKey);

                HttpResponseMessage response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();
                TranslationResult[] deserializedOutput = JsonConvert.DeserializeObject<TranslationResult[]>(result);

                return deserializedOutput;
            }
        }

        public async Task<AvailableLanguage> GetAvailableLanguages()
        {
            string endpoint = "https://api.cognitive.microsofttranslator.com/languages?api-version=3.0&scope=translation";
            var client = new HttpClient();
            using (var request = new HttpRequestMessage())
            {
                request.Method = HttpMethod.Get;
                request.RequestUri = new Uri(endpoint);
                var response = await client.SendAsync(request).ConfigureAwait(false);
                string result = await response.Content.ReadAsStringAsync();

                AvailableLanguage deserializedOutput = JsonConvert.DeserializeObject<AvailableLanguage>(result);

                return deserializedOutput;
            }
        }
    }
}

We have defined a GetTranslatation method which will accept two parameters – the text to translate and the target language. We will set the subscription key for the Azure Translator Text cognitive service and define a variable for the global endpoint for Translator Text. The request URL contains the API endpoint along with the target language.

Inside the TranslateText method, we will create a new HttpRequestMessage. This HTTP request is a Post request. We will pass the subscription key in the header of the request. The Translator Text API returns a JSON object, which will be deserialized to an array of type TranslationResult. The output contains the translated text as well as the language detected for the input text.

The GetAvailableLanguages method will return the list of all the language supported by the Translate Text API. We will set the request URI and create a HttpRequestMessage which will be a Get request. This request URL will return a JSON object which will be deserialized to an object of type AvailableLanguage.

Configuring the Service

To make the service available to the components we need to configure it on the server-side app. Open the Startup.cs file. Add the following line inside the [ConfigureServices](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Startup.cs#L28) method of Startup class.

services.AddSingleton<TranslationService>();

Creating the Blazor UI Component

We will add the Razor page in BlazorTranslator/Pages folder. By default, we have “Counter” and “Fetch Data” pages provided in our application. These default pages will not affect our application but for the sake of this tutorial, we will delete fetchdata and counter pages from BlazorTranslator/Pages folder.

Right-click on BlazorTranslator/Pages folder and then select Add >> New Item. An “Add New Item” dialog box will open, select “Visual C#” from the left panel, then select “Razor Component” from the templates panel, put the name as Translator.razor. Click Add. Refer to the image shown below.

Open the [Translator.razor](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Pages/Translator.razor) file and add the following code at the top.

@page "/translator"
@using BlazorTranslator.Models
@using BlazorTranslator.Data
@inject TranslationService translationService

We have defined the route for this component. We are also injecting the TranslationService in this component.

Now we will add the following HTML code in this file.

<h3>Multilanguage translator using Microsoft Translator API Cognitive Service</h3>
<hr />

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <select class="form-control" @bind="inputLanguage">
                <option value="">-- Select input language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea placeholder="Enter text to translate" class="form-control translation-box" rows="5" @bind="@inputText"></textarea>
        </div>
        <div class="col-md-6">
            <select class="form-control" @onchange="SelectLanguage">
                <option value="">-- Select target language --</option>
                @foreach (KeyValuePair<string, LanguageDetails> lang in LanguageList)
                {
                    <option value="@lang.Key">@lang.Value.Name</option>
                }
            </select>
            <textarea disabled class="form-control translation-box" rows="5">@outputText</textarea>
        </div>
    </div>
    <div class="text-center">
        <button class="btn btn-primary btn-lg" @onclick="Translate">Translate</button>
    </div>
</div>

We have defined two dropdown lists, one each for input language and the target language. The Azure Translate Text API will detect the input language and we will use that value to populate the dropdown for input language. We have also defined two text areas for the input and the translated text.

Finally, add the following code in the @code section of the page.

@code {
    private TranslationResult[] translations;
    private AvailableLanguage availableLanguages;

    private string outputLanguage { get; set; }
    private string inputLanguage { get; set; }

    string inputText { get; set; }
    string outputText { get; set; }

    private Dictionary<string, LanguageDetails> LanguageList = new Dictionary<string, LanguageDetails>();

    protected override async Task OnInitializedAsync()
    {
        availableLanguages = await translationService.GetAvailableLanguages();
        LanguageList = availableLanguages.Translation;
    }

    private void SelectLanguage(ChangeEventArgs langEvent)
    {
        this.outputLanguage = langEvent.Value.ToString();
    }

    private async Task Translate()
    {
        if (!string.IsNullOrEmpty(outputLanguage))
        {
            translations = await translationService.GetTranslatation(this.inputText, this.outputLanguage);
            outputText = translations[0].Translations[0].Text;
            inputLanguage = translations[0].DetectedLanguage.Language;
        }
    }
}

We are invoking the GetAvailableLanguages method from our service inside the OnInitializedAsync. This OnInitializedAsync is a lifecycle method that will be invoked upon component initialization. This will make sure that the language dropdown will be populated as the page loads.

The SelectLanguage method will set the outputLanguage for the translation. The Translate method will invoke the GetTranslatation method from the service. We will set the outputText and the language detected for the inputLanguage as returned from the service.

Add styling for the Translator component

Navigate to [BlazorTranslator\wwwroot\css\site.css](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/wwwroot/css/site.css#L185-L187) file and put the following style definition inside it.

.translation-box {
    margin: 15px 0px;
}

Adding Link to Navigation menu

The last step is to add the link of our Translator component in the navigation menu. Open [BlazorTranslator/Shared/NavMenu.razor](https://github.com/AnkitSharma-007/Blazor-Translator-Azure-Cognitive-Services/blob/master/BlazorTranslator/Shared/NavMenu.razor#L15-L19) file and add the following code into it.

<li class="nav-item px-3">
    <NavLink class="nav-link" href="translator">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Translator
    </NavLink>
</li>

Remove the navigation links for Counter and Fetch-data components as they are not required for this application.

Execution Demo

Press F5 to launch the application. Click on the Translator button on the nav menu in the left. You can perform the multilanguage translation as shown in the image below.

Summary

We have created a Translator Text Cognitive Services resource on Azure. We have used the Translator Text API to create a multilanguage translator using Blazor. This translator supports more than 60 languages for translation. We fetched the list of supported languages for translation from the global API endpoint for Translator Text.

Get the Source code from GitHub and play around to get a better understanding.

See Also

• Optical Character Reader Using Blazor And Computer Vision
• Facebook Authentication And Authorization In Server-Side Blazor App
• Google Authentication And Authorization In Server-Side Blazor App
• Blazor CRUD Using Google Cloud Firestore
• Hosting A Blazor Application on Firebase
• Localization In Angular Using i18n Tools

In the previous articles, we have seen how to perform localization on the back-end. Specifically, we’ve covered Rails and Phoenix frameworks. Today, however, we are going to talk about libraries for translating JavaScript apps and briefly see them in action.

It appears that there are quite a lot of available solutions, so you may ask: “Which one should I use?”. The most obvious (and perhaps the sanest) answer would be: “It depends”. Ideally, you should check each library and then decide which one you prefer.

Therefore, in this article I will give you a general introduction to the following solutions:

• Globalize
• I18next
• jQuery.I18n
• Polyglot.js

Note that we will be talking about localizing vanilla JS apps, not about some specific client-side framework. Also, we won’t dive deep into each library because the article would become much, much longer. I’ll only give you a gentle introduction to each tool. Then we’ll try to compare them and come to some general conclusion.

Shall we start?

Globalize

Globalize is a complex translation and localization JS library initially introduced by jQuery team. This library utilizes Unicode common locale data repository (CLDR) and has lots of features including:

• Message formatting
• Date/time parsing and the ability to work with relative time
• Pluralization support
• Numbers parsing and currency formatting
• Ability to work with units (days, minutes, seconds, miles per hour etc)

Globalize works consistently in browser and NodeJS, has a modular code and allows to require as little modules as needed. While relying on CLDR data, it does not host or hardcode it directly. Developers may choose which data to load. This also means that you can update CLDR data yourself, without waiting for a new version of Globalize to be released. You may read a bit more about Globalize’s features here.

Now let’s see this library in action. There is a Getting started guide that explains how to install all the required modules on your machine using a package manager. However, we’ll choose a more complex way of loading everything manually.

Getting CLDR Data

CLDR is really huge and so there is no reason to download all its content. Luckily, Globalize documentation summarizes what you have to load when using specific modules. Also, there is an online tool where you just pick the modules that will be used and then see what JSON files you need to load. In this demo, I’ll only use “core”, “message”, and “plural” modules, therefore, we require the following files:

To learn more about how CLDR is organized, refer to this doc. It may seem complex at first but in reality, things are quite simple: you just cherry-pick the required files, download them and use in your project.

I’ve placed the files mentioned above to the cldr/supplemental folder of my project but you may organize them differently of course.

The next question is: how do we actually load this data? Well, there are two alternatives: by embedding it inside the Globalize.load function or by using an asynchronous $.get() method. The second option is much more robust, so let’s create a new JS file with the following content:

// i18n.js $.when( $.get("cldr/supplemental/likelySubtags.json"), $.get("cldr/supplemental/ordinals.json"), $.get("cldr/supplemental/plurals.json"), ).then(function() { // Normalize $.get results, we only need the JSON, not the request statuses. return [].slice.apply(arguments, [0]).map(function(result) { return result[0]; }); }).then(Globalize.load).then(function() { // your Globalize code here });

In this example, we’re loading JSON data and feed it to Globalize. We’re using promises, so the custom code should be placed into the second then and will be executed as soon as everything is loaded successfully. Feel free to refactor this code without using jQuery.

Loading Other Files

After loading CLDR JSON files, you require a bunch of other scripts:

• jQuery (note by the way that Globalize itself is not jQuery-based)
• CLDR JS
• Globalize JS core module
• Any other modules that you wish to use in your app

jQuery and Cldr.js are external dependencies and you may load them from a CDN (for example, from cdnjs.com).

Then download Globalize from the Releases section. Open the dist folder. Pick all the files that you require and place them under the globalize directory.

After that load all the scripts in the proper order:

<!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/supplemental.min.js"></script> <script src="globalize/globalize.js"></script> <script src="globalize/plural.js"></script> <script src="globalize/message.js"></script> <script src="i18n.js"></script> </body> </html>

All in all, this is it. Now you may refer to the API section of the Globalize docs and see what functions you may utilize.

Using It

You can provide translation messages with the help of [loadMessages](https://github.com/globalizejs/globalize/blob/master/doc/api/message/load-messages.md) function:

$.when( // ... }).then(Globalize.load).then(function() { Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!' } }); });

Then instantiate Globalize with the desired locale and perform the actual translations:

// loadMessages... var globalize = new Globalize("en"); console.log(globalize.messageFormatter('welcome')({name: 'Username'}));

[messageFormatter](https://github.com/globalizejs/globalize/blob/master/doc/api/message/message-formatter.md) returns a formatted translation. As you can see from this example, it supports interpolation, but there is more. Want to introduce pluralization? Simple!

Add a new message:

Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!', 'messages': [ "You have {count, plural,", " one {one message}", " other {{count} messages}", "}" ] } });

Note that the message may span multiple lines but in this case, it should be defined as an array. Here we are utilizing pluralization and providing two forms: singular and plural. count is an interpolation.

Now display this message:

taskFormatter = globalize.messageFormatter("messages"); console.log(taskFormatter({ count: 10 }));

You may utilize other modules in pretty much the same way.

To summarize, Globalize is a great powerful solution with good documentation and nice support. It may require some time to set it up but working with it is convenient and intuitive.

I18next

I18next is a JavaScript localization framework providing all the necessary tools to translate your applications. It has loads of various features including:

• Support for front-end frameworks including React, Angular, Vue etc
• Supports for various formats (including Polyglot which we’ll discuss later)
• Message formatting
• Pluralization
• Fallbacks
• Ability to load translation data from various resources
• …and many, many other utilities and plugins

Loading Required Files

To get started with I18next you may simply require it from CDN, for example:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/14.0.1/i18next.min.js"></script> </body> </html>

Of course, it can be also installed with NPM or Yarn as explained here.

Configuration

As I already mentioned above, I18next allows you to load translations from the backend. You may also provide them in the following way:

i18next.init({ lng: 'en', resources: { en: { translation: { "hi": "Welcome" } } } }).then(function(t) { // ready to go! });

Note that I am also setting English as a default locale.

There are many other configuration options that are listed on the corresponding page.

Using It

You may perform translations in the following way:

// ... init .then(function(t) { // initialized and ready to go! console.log(i18next.t('hi')); });

[t](https://www.i18next.com/overview/api#t) is a function to look up translation based on the provided key. It can also work with interpolation, for instance:

i18next.t('hi', {name: 'Username'});

Pluralization is supported too. To start using it, define singular and plural forms in the following way:

{ "msg": "one message", "msg_plural": "{{count}} messages" }

Note the _plural part that has to be provided for plural forms. Some languages require multiple forms. In this case use _0, _1, and other post-fixes, for example:

{ "key_0": "zero", "key_1": "singular", "key_2": "two", "key_3": "few", "key_4": "many", "key_5": "other" }

Then just use the t function again:

i18next.t('msg', {count: 10});

I18next allows you to provide context for the translation. This is particularly important when working with gender information:

{ "friend": "A friend", "friend_male": "A boyfriend", "friend_female": "A girlfriend" }

_male and _female here are contexts that you can set in the following way:

i18next.t('friend'); // ==> No context here, so return "A friend" i18next.t('friend', { context: 'male' }); // -> A context is present, so return "A boyfriend"

Don’t hesitate to browse other examples in the I18next’s docs on how to enable nesting in translations, work with objects, or setup fallbacks.

To summarize, I18next is a great framework with an array of various plugins and utilities. This framework is quite large and heavy, but you receive all the necessary localization tools that can be extended as necessary. Moreover, setting this framework up is simple and requires very little time. So, I would say this is a great candidate for complex applications!

jQuery.I18n

jQuery.I18n is yet another popular solution presented to you by Wikimedia Engineering team allowing to translate your JavaScript applications. Wikimedia, in turn, is a company behind Wikipedia project, one of the most popular websites in the world. jQuery.I18n is used in Wikipedia internally, so you can be sure this library won’t be abandoned out of the blue. It utilizes a JSON-based localization format and supports the following features:

• Ability to meta information and document your messages
• Supports pluralization with the help of CLDR
• Gender information
• Support for grammar forms
• Fallback chains
• Ability to customize message parser
• Has modular code

Let’s see jQuery.I18n in action now.

Loading Required Files

First of all, download the library itself and initialize its dependencies:

$ git clone https://github.com/wikimedia/jquery.i18n.git $ cd jquery.i18n $ git submodule update --init

jquery.i18n/src folder contains the library’s files. Pick the modules that you need (at the very least, you’ll require the core jquery.i18n.js) and place them to your application. The idea here is similar to the one in Globalize. The languages folder contains some helpers for various locales. If you are supporting one of these, don’t forget to copy the corresponding file as well.

If your application works with plural forms, then the CLDRPluralRuleParser.js file is necessary too (it can be found under the jquery.i18n\libs\CLDRPluralRuleParser\src path).

After you are ready, load the files in the proper order, for example:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="lib/CLDRPluralRuleParser.js"></script> <script src="lib/jquery.i18n.js"></script> <script src="lib/jquery.i18n.messagestore.js"></script> <script src="lib/jquery.i18n.fallbacks.js"></script> <script src="lib/jquery.i18n.language.js"></script> <script src="lib/jquery.i18n.parser.js"></script> <script src="lib/jquery.i18n.emitter.js"></script> <script src="lib/jquery.i18n.emitter.bidi.js"></script> </body> </html>

Providing Translations

As mentioned above, translations for the jQuery.I18n library are stored inside JSON files. You may separate translation data for different languages, or store everything in a single file. Create a i18n/i18n.json file with the following contents:

{ "@metadata": { "authors": [ "Ilya" ], "last-updated": "2019-01-29", "message-documentation": "qqq" }, "welcome": "Hi!" }

To load this file, use the following code (note that I am also providing a default locale):

// main.js jQuery(document).ready(function() { $.i18n({locale: 'en'}).load({ en: 'i18n/i18n.json' }).done(function() { // success }) });

Include this script on your main page and you are good to go!

Using It

For instance, you may output a welcoming message in the following way:

console.log($.i18n('welcome', 'Username'));

Pluralization is performed in the following way:

{ "msg": "You have $1 {{PLURAL:$1|message|messages}}" }

So, you have one key that lists all the available forms, both plural, and singular. $1 is a placeholder for the interpolation. You may have as many placeholders as needed, and they should be named in a sequential manner: $2, $3 etc.

Then just utilize this new key:

$.i18n('msg', 10); // $1 placeholder will have a value of 10

The context of the translation is defined in pretty much the same way. For example, you can work with gender information:

"friend": "Some text... {{GENDER:$1|A boyfriend|A girlfriend}}"

Provide the context:

$.i18n('friend', 'female');

One interesting feature is the support for the [data-*](https://github.com/wikimedia/jquery.i18n#data-api) HTML5 attributes. You just need to add a data-i18n attribute to your tags, provide the key as the value, and then apply .i18n() function directly to those elements or their parent. For example:

<body> <p data-i18n="translation-key">Fallback text goes here</p> <p data-i18n="another-key">Fallback text goes here</p> </body>

Now inside your code simply say:

$('body').i18n();

The script is going to traverse all elements inside body and replace their contents with the messages under the provided translation keys. If the key cannot be found, the initial content will be displayed as a fallback.

jQuery.I18n is a powerful and quite easy-to-use library. Basically, you may call it a direct competitor to Globalize as these two solutions have similar functionality. To some people, Globalize may seem more favorable as it doesn’t rely on jQuery. On the other hand, many websites do requite jQuery, so that’s perhaps not a deal-breaker. If you’d like to mostly stay away from CLDR then jQuery.I18n is, of course, a better option. This library also allows to store metadata inside your translation files, supports [data-*](https://github.com/wikimedia/jquery.i18n#data-api) attributes API, supports so-called “magic words”, and more. So, as you see, there is really a lot of features!

Polyglot

The last solution we’ll talk about is Polyglot.js created by Airbnb. As long as Airbnb service is worldwide, it’s essential for them to have proper localization. Polyglot, in contrast to the previously discussed libraries, is a very small solution really. It has only the following features:

• Basic translation features
• Interpolation
• Pluralization

It may become an excellent candidate for smaller and less intricate apps that do not require all the complexities of, say, Globalize. Now let’s see how to get started with Polyglot!

Loading Files

Polyglot has no external dependencies at all, so all you need to do is hook up the main file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.2.2/polyglot.min.js"></script> </body> </html>

Providing Translations and Using It

Now we can provide translations (aka “phrases”) and set the default locale:

var polyglot = new Polyglot({ locale: 'en', phrases: { "message_count": "%{smart_count} message |||| %{smart_count} messages" } });

In this example the default locale is English. Also, there is a message_count key that provides singular and plural forms separated with 4 pipelines (for other languages there may be more forms). Oddly enough, pluralization relies on the smart_count interpolated value, so you must provide it in the following way:

console.log(polyglot.t('message_count', {smart_count: 2}));

This is it! There is not much else to say about the translation process, as it relies only on the t function. You may find some more examples of using Polyglot in the official doc.

Summing Everything Up

Potentially, there is a lot of different features to compare (some may be more or less relevant for your setup), but here is a brief summary of the discussed solutions:

A couple of things to note:

• I18next does support various formatting but it requires external dependencies like moment.js
• jQuery.I18n requires CLDR Parser only for pluralization
• I18next provides lots of plugins to connect with the client-side framework, but other solutions can play nicely with frameworks as well (you may just need to spend more time to integrate everything)
• You may work with gender information (and, more broadly speaking, with contexts) in any library — it just may be less convenient and present more complexities

From my experience, I18next is a very powerful and feature-rich tool that you can easily get started with. At the same time, Globalize’s modular approach and relation on CLDR might be convenient, especially for larger and more complex applications. I have not used jQuery.I18n that much but as long as the Wikimedia team utilizes it, one can conclude that this is also a feasible tool with vast functionality. And, Polyglot is a nice tiny helper for simpler apps that also plays very nicely with server-side frameworks like Rails.

Make Your Life Easier With Lokalise

Supporting multiple languages on a big website may become a serious pain. You must make sure that all the keys are translated for each and every locale. Luckily, there is a solution to this problem: the Lokalise platform that makes working with the localization files much simpler. Let me guide you through the initial setup which is nothing complex really.

• To get started, grab your free trial
• Create a new project, give it some name, and set English as a base language
• Click “Upload Language Files”
• Upload translation files for all your languages
• Proceed to the project, and edit your translations as needed
• You may also contact a professional translator to do the job for you
• Next simply download your files back
• Profit!

Lokalise has many more features including support for dozens of platforms and formats, and even the possibility to upload screenshots to read texts from them. So, stick with Lokalise and make your life easier!

Conclusion

In this article, we were talking about the available tools used to translate JavaScript applications. We’ve covered Globalize, I18next and jQuery.I18n (larger and more complex solutions), as well as Polyglot which appeared to be a much simpler and smaller library. We’ve compared these libraries and came up with some conclusions about them. Hopefully, now you will be able to pick an I18n solution that entirely suits you. Don’t be afraid to research, experiment, and ultimately choose the tool that works for you! After all, it will be more complicated to switch to another localization library when your application is half-finished.

I thank you for staying with me, and until the next time!

Originally published at blog.lokalise.co on January 31, 2019.

In one of my previous articles, I talked about the process of internationalizing Rails applications. That article explained all I18n basics, but it was revolving around placing all translations inside YAML files. There is nothing wrong with this approach, but unfortunately it does not always work.

Suppose your website has lots of user-generated content which should be adapted for different languages. I propose that you store your translations inside the database. Why will YAML files not work in this case?

• The content itself may be quite large and it would be inconvenient to store it inside a file
• The content is dynamic and users should be able to create translated versions themselves, without the help of the site’s developer

It appears that the I18n module allows you to define a custom backend that, for instance, may be powered by ActiveRecord. Luckily, there is no need to craft your own solution as there is already an existing one: Globalize. Globalize is a battle-tested library characterized as “Rails I18n de-facto standard library for ActiveRecord model/data translation.” With its help you can easily translate model attributes, scope them, introduce fallbacks, and so on.

So, in this article we are going to talk about Globalize and see it in action by creating a sample Rails application. Shall we start?

Preparing the Application

Let’s get started by generating a new Rails app:

rails new GlobalizeSample

I’ll assume you are using Rails 5.2.1 for this demo but still the described concepts apply to earlier versions as well.

Let’s suppose we are building an international online shop showcasing various products. These products will be added by the administrator, and so we can’t know what the content will be ahead of the game. This means that the traditional method of using YAML files to store translations won’t work. Our content manager will have access to the CMS only, and we would rather not give them access to the source code of the app (I shudder to think about it!).

But, fear not, in the next section we will overcome this problem easily. For now, however, let’s take care of the basics.

Administering Products

Utilize code generator and create a new scaffold for the Product:

rails g scaffold Product title:string description:text

This should create a model, controller, routes, and views for the products. Don’t forget to run the migration:

rails db:migrate

Now start the server:

rails s

Visit the http://localhost:3000/products path and make sure that you are able to add, modify, and delete the products.

Switching the Language

In order to see the Globalize library in action, we will need a way to switch the app’s locale. I won’t cover this process in detail (as we have a separate article on the topic) so let’s do it quickly.

First, add the list of supported locales to the config/application.rb:

# ... config.i18n.available_locales = [:en, :ru]

I will be supporting English and Russian, but you may choose any other languages.

Next, tweak the config/routes.rb and wrap the product resource with a scope. Also, while we are here, add a root route:

scope "(:locale)", locale: /#{I18n.available_locales.join("|")}/ do # <== add this resources :products root 'products#index' # <== add this end # <== add this

After that, modify the application_controller.rb file:

# ... before_action :set_locale private def set_locale I18n.locale = extract_locale || I18n.default_locale end def extract_locale parsed_locale = params[:locale] I18n.available_locales.map(&:to_s).include?(parsed_locale) ? parsed_locale : nil end def default_url_options { locale: I18n.locale } end

This code will set the locale on every request while making sure the chosen language is actually supported. Also, it will add a locale GET param to each link generated with the link_to helper.

Lastly, add two links to the application layout:

<!-- views/layouts/application.html.erb --> <ul> <li><%= link_to 'English', root_path(locale: :en) %></li> <li><%= link_to 'Русский', root_path(locale: :ru) %></li> </ul>

To ensure that this new feature works, add translation for the Products page title:

# config/locales/en.yml en: products: index: title: Our Products

# config/locales/ru.yml ru: products: index: title: Наши продукты

Now simply utilize these translations inside the views/products/index.html.erb:

<!-- ... --> <h1><%= t '.title' %></h1> <!-- ... -->

Note that we can take advantage of the “lazy lookup” because the translation keys were named in the proper way.

Translate other static content as necessary, then reload the server, and make sure that the locale can be properly switched. Great!

Globalize, Globalize it Hard!

Defining Attributes For Translation

Okay, the ground work is done and we may proceed to the next part. Before Globalize can get into the game, it should be added to the Gemfile:

# ... gem 'globalize', git: 'https://github.com/globalize/globalize'

At the time of writing this article, the stable version was not yet compatible with Rails 5.2, so we have to install directly from the master branch. Also note that the latest stable does not support ActiveRecord 4.1 and below, therefore refer to the documentation to learn which Globalize version to use for older AR.

Next, you have to decide which model attributes will be translated with Globalize. We are going to translate both :title and :description so list them in the model in the following way:

# models/products.rb # ... translates :title, :description

This will allow you to store store translations inside the database per locale. To make it work, however, you also need to create a special translation table.

Translation Table

So, if you are creating a new model and a migration, things are as simple as using a create_translation_table! method as explained here. Our case is a bit more complex, because we already have a products table with some data. Therefore it is required to move these data to the translation table. Start by generating a new migration:

rails g migration translate_products

Now flesh it out with the following code:

# db/migrate/xyz_translate_products.rb class TranslateProducts < ActiveRecord::Migration[5.2] def change reversible do |dir| # <=== 1 dir.up do Product.create_translation_table!({ # <=== 2 title: :string, # <=== 3 description: :text }, { migrate_data: true, # <=== 4 remove_source_columns: true # <=== 5 }) end dir.down do Product.drop_translation_table! migrate_data: true # <=== 6 end end end end

I’ve pinpointed the main things to note about this code:

1. This is going to be a reversible migration.
2. We are creating a translation table for the Product.
3. Carefully list all the fields that should be translated as well as their types. As you recall, these fields were passed to the translates method inside the model.
4. Don’t forget to provide the migrate_data option that should preserve your original database records.
5. remove_source_columns will ensure that the original columns (:title and :description) will be removed from the products table. You may also perform this step later in a separate migration.
6. That’s the action to perform when the migration is rolled back. Data should be preserved as well.

Run the migration:

rails db:migrate

After this command finishes its job, you will see a new product_translations table:

As you see, there is a product_id column that establishes relation to the product, and also a locale field to denote which language this translation is for. When you migrate your original data, it will be associated with the app’s default locale (which is English in our case). Override this behavior by using a with_locale method, for example:

I18n.with_locale(:ru) do Post.create_translation_table!(...) end

If you need to add more translated fields to the table later, utilize an add_translation_fields! method as shown in this example. Also, don’t forget to define these new fields in the model.

Try It!

At this point Globalize is integrated into our application and ready to get rolling! Perform the following steps to see it in action:

• Reload your server and try to create a new product: its title and description will be provided for the currently set locale only (English in my case).
• Switch to Russian locale and make sure that both title and description are missing for the new product.
• Edit this product and enter values for the Russian version of the product.

As a result you should see two translations being stored inside the product_translations table:

Great job!

Some More Globalize Features

Fallbacks

What happens if Globalize cannot find translated attributes for the given locale? As we’ve seen in the previous section, by default it will return blank values (which are actually nils). However, it is possible to enable I18n fallbacks and display attribute values from another locale. To achieve that, just turn fallbacks on inside the config/application.rb file:

# ... config.i18n.fallbacks = true

Now when the translated attribute is nil, Globalize will try to load values from another locale. To make sure this feature is working, reload the server, create a new product, and then switch to another language. The title and description should fallback to another locale.

If you would like to employ fallbacks when the translation values are also blank (not nil), set the fallbacks_for_empty_translations option to true:

# models/product.rb # ... translates :title, :description, fallbacks_for_empty_translations: true

Also note that it is possible to define a custom fallback chain globally in the following way:

# somewhere in an initializer Globalize.fallbacks = {:en => [:de, :ru]}

Scope and Context

Globalize provides a special model scope called with_translations that can be used to load translation for a given language. In this example we are loading all translations for the English locale only:

Product.with_translations('en')

On top of that, it is possible to display translation for a desired locale in your views. To achieve that, use a with_locale method:

<% Globalize.with_locale(:en) do %> <!-- render your stuff here... --> <% end %>

Interpolation

What’s interesting is that Globalize even supports interpolation in the translated attributes. It works in the same way as interpolation in YAML translation files:

product.title = "Product for %{someone}" product.title someone: "John" # => "Product for John"

So, the placeholder here is %{someone}. To provide its value, simply pass a hash to the proper model attribute. Really convenient!

Conclusion

In this section we have seen how to store translations inside database with the help of Globalize solution. We have discussed its basics, seen how to install and configure it, how to migrate data properly, how to define translations, provide fallbacks and utilize scopes. All in all, we have covered nearly everything Globalize has to offer, and so you may now apply these concepts into practice! Also don’t forget that Globalize can safely play with YAML files, so you can mix and match these approaches as you see fit.

Which solution do you utilize to internationalize user-generated content? Would you give Globalize a go? Share your thoughts in the comments section!

Make Your Life Easier With Lokalise

Supporting multiple languages on a big website may become a serious pain. You must make sure that all the keys are translated for each and every locale. Luckily, there is a solution to this problem: the Lokalise platform that makes working with the localization files much simpler. Let me guide you through the initial setup which is nothing complex really.

• To get started, grab your free trial
• Create a new project, give it some name, and set English as a base language
• Click “Upload Language Files”
• Upload translation files for all your languages
• Proceed to the project, and edit your translations as needed
• You may also contact professional translator to do the job for you
• Next simply download your files back
• Profit!

Lokalise has many more features including support for dozens of platforms and formats, and even the possibility to upload screenshots in order to read texts from them. So, stick with Lokalise and make your life easier!

Originally published at blog.lokalise.co on November 16, 2018.

In my previous tutorial, we discussed how to introduce support for I18n into Rails apps. Today we will continue covering back-end frameworks and talk about localization of Phoenix applications with the help of Gettext.

You might not have heard about Phoenix before, so let me say a couple of words about it. This is a server-side MVC framework written in Elixir, which is a functional programming language working on Erlang virtual machine. The framework itself is quite young but still it is very promising thanks to Erlang’s and Elixir’s features. It is very fast, scalable, and concurrency-oriented which is really important for heavily loaded applications.

Gettext, in turn, is an I18n tool maintained by GNU which may be used for web, desktop applications, and even in operating systems.

Throughout this article we will be localizing a Phoenix demo project and will see Gettext in action. Also, we will discuss how to introduce support for locale switching and persisting user preferences throughout the requests. Before proceeding to the main part of the tutorial, you also might want to learn common recommendations which are listed in our recent article.

Hello, Gettext!

Alright, let’s dive straight into the code and observe the localization of Phoenix applications in practice. Create a new project without a default DBMS and change directory into the project:

mix phx.new lokalise_demo --no-ecto cd lokalise_demo

It appears that Phoenix has support for Gettext out of the box: you don’t need to install any third-party libraries. Moreover, if you navigate to the demo/lib/demo_web/templates/page/index.html.eex file, you’ll notice the following line of code:

<h2><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h2>

What is going on here? Well, gettext is a function that tries to load translation for the string "Welcome to %{name}!". %{name} here is a placeholder that will be replaced with a "Phoenix" string as dictated by the second argument name: "Phoenix" (this argument contains so-called bindings).

By default, Phoenix applications have English as the default locale set, and no other locales are supported. However, you may easily change that by adding a new line to the config/config.exs file:

config :lokalise_demo, LokaliseDemoWeb.Gettext, locales: ~w(en ru)

Now we are supporting both English and Russian locales.

The next step is to provide translations for the string passed to the gettext function inside the index.html.eex file. The simplest way to do that is by extracting all translation strings into separate files automatically:

mix gettext.extract mix gettext.merge priv/gettext mix gettext.merge priv/gettext --locale ru

These commands are going to create three new files inside the priv/gettext folder. Therefore, let’s stop for a second and talk a bit more about these files.

Gettext File Types

The first command above, mix gettext.extract, searches for all Gettext messages that require translation and places them into the priv/gettext/default.pot file. POT means “portable object template”, and such files serve as templates for language-specific translations. Our default.pot has the following contents:

## This file is a PO Template file. ## ## msgid here are often extracted from source code. ## Add new translations manually only if they're dynamic ## translations that can't be statically extracted. ## ## Run mix gettext.extract to bring this file up to ## date. Leave msgstr empty as changing them here as no ## effect: edit them in PO (.po) files instead. msgid "" msgstr "" #, elixir-format #: lib/lokalise_demo_web/templates/page/index.html.eex:2 msgid "Welcome to %{name}!" msgstr ""

The template conveniently shows the lines where the extracted messages are located. msgid is the string to translate (some developers may refer to it as a “key”). msgstr is, of course, the actual translation.

The name of the POT file — default — is also a domain name which serves as a namespace. Initially, there is only one namespace, but for larger sites with hundreds of translations it may be a good idea to create multiple domains and, consequently, separate translations into different files.

The mix gettext.merge priv/gettext --locale LOCALE_CODE_HERE command creates translation files for the given language based on the template. These translation files have .po extension (“portable object”) and live inside the priv/gettext/LOCALE_CODE_HERE/LC_MESSAGES folder. Remember that in order to provide translations for the messages, you should edit these PO files, not the templates directly!

Gettext Domains

As already mentioned above, Gettext supports multiple domains or namespaces. When you are utilizing the gettext/4 function, you always assume a default domain. If you would like to employ a different namespace, use the [dgettext/6](https://hexdocs.pm/gettext/Gettext.html#dngettext/6) function instead which accepts the domain, the message, optional bindings, and some other arguments:

<%= dgettext "custom_domain", "message is ${placeholder}", placeholder: "my binding" %>

Now the mix gettext.extract command is going to create a new custom_domain.pot file. Similarly, running mix gettext.merge creates a custom_domain.po file based on the template.

Note once again that for smaller sites, using multiple domains is usually an overkill. Still, their usage for large resources is very much recommended because this way you don’t end up with hundreds of translations in a single file. Another reason is the ability to have the same translation keys under different namespaces.

Providing Translations

So, having discussed some Gettext internals, we can now translate the Welcome to %{name}! string into Russian (this message is already in English, so of course no translation is needed for this language). Modify the priv/gettext/ru/LC_MESSAGES/default.po file like this:

# ... some other stuff goes here ... #, elixir-format #: lib/lokalise_demo_web/templates/page/index.html.eex:2 msgid "Welcome to %{name}!" msgstr "Вас приветствует %{name}"

This is it! Currently we do not have any mechanism to switch the language, so set Russian as a default locale:

# config/config.exs config :lokalise_demo, LokaliseDemoWeb.Gettext, locales: ~w(en ru), default_locale: "ru" # <== modify this line

Now start the server by running:

mix phx.server

Open http://localhost:4000 page in your browser and make sure that the translated message is shown!

Gettext Pluralization

Another important feature that I would like to cover is the pluralization. Different languages have different pluralization rules, and Gettext supports many of them out of the box. Still, it is our job to provide proper translations for all potential cases.

As a very simple example, let’s say how many apples the user has. Suppose we don’t know the exact amount, which means that the sentence may read as “1 apple” or “X apples”. To support pluralization, we have to stick with the [ngettext/5](https://hexdocs.pm/gettext/Gettext.html#ngettext/5) function:

ngettext "You have 1 apple", "You have %{count} apples", 2

This function accepts both singular and plural forms of the sentence, as well as the count. Under the hood, Gettext takes this count and chooses the proper translation based on the pluralization rules.

Next you may update the POT and PO files with the following commands:

mix gettext.extract --merge priv/gettext mix gettext.extract --merge priv/gettext --locale=ru

You’ll find a couple of new lines inside the Gettext files:

msgid "You have 1 apple" msgid_plural "You have %{count} apples" msgstr[0] "" msgstr[1] ""

msgstr[0] and msgstr[1] contain translations for singular and plural forms respectively. For English we don’t need to do anything else, but the Russian language requires some extra steps:

msgid "You have one message" msgid_plural "You have %{count} messages" msgstr[0] "У вас одно яблоко" msgstr[1] "У вас %{count} яблока" msgstr[2] "У вас %{count} яблок"

The pluralization rules in this case are a bit more complex, therefore we must provide not two, but three possible options. You may find more information on the topic in the official docs.

Choosing The App’s Locale

As I already mentioned earlier, currently there is no way to actually switch between locales when browsing the app. This is an important feature, so let’s add it now!

All in all, we have two potential solutions:

• Utilize a third-party solution, for example the set_locale plug (the easy way)
• Write everything from scratch (the warrior’s way)

If you choose to stick with the third-party plug, things will be very simple indeed. You need to perform only three quick steps:

1. Install the package
2. Add a new plug to the router.ex file
3. Add a new :locale routing scope

After that the locale will be inferred from the URL, cookies, or the accept-language request header. Simple.

However, in this tutorial I propose choosing a more complex way and writing this feature from scratch.

Reading Locale From the URL

The most common way of specifying the desired locale is via the URL. The language’s code may be a part of the domain name, or a part of the path:

• [http://en.example.com/some/path](http://en.example.com/some/path)
• [http://example.com/en/some/path](http://example.com/en/some/path)
• [http://example.com/some/path?locale=en](http://example.com/some/path?locale=en)

Let’s stick with the latter option and provide the locale as a GET parameter. To read the locale’s value and do something about it, we need a custom plug. Create a new lib/lokalise_demo_web/plugs/set_locale_plug.ex file with the following contents:

defmodule LokaliseDemoWeb.Plugs.SetLocale do import Plug.Conn # 1 @supported_locales Gettext.known_locales(LokaliseDemoWeb.Gettext) # 2 def init(_options), do: nil # 3 def call(%Plug.Conn{params: %{"locale" => locale}} = conn, _options) when locale in @supported_locales do # 4 end def call(conn, _options), do: conn # 5 end

Let’s discuss this code snippet:

1. On this line we are importing a behavior. It requires us to fulfill a certain contract (see below).
2. This is the module attribute with a list of supported locales
3. This is the actual fulfillment of the contract: a callback that gets invoked automatically. It may return options passed to the call/2 function, or just nil
4. The call/2 is initialized with all the GET parameters of the request. We are only interested in the locale part and fetch it using the pattern matching mechanism. Also on this line we have a guard clause that ensures the chosen language is actually supported
5. This is the fallback clause that gets invoked when the passed locale is unsupported. In this case we just return the connection without any modifications.

The last thing we need to do is flesh out the first clause of the call/2 function. It simply has to set the chosen locale as the current one:

def call(%Plug.Conn{params: %{"locale" => locale}} = conn, _options) when locale in @supported_locales do LokaliseDemoWeb.Gettext |> Gettext.put_locale(locale) conn end

Note that the conn must be returned by the call/2 function!

The plug is ready, and you may place it inside the :browser pipeline:

# lib/router.ex # ... pipeline :browser do plug :accepts, ["html"] plug :fetch_session plug :fetch_flash plug :protect_from_forgery plug :put_secure_browser_headers plug LokaliseDemoWeb.Plugs.SetLocale end

Now reload the server and navigate to http://localhost:4000/?locale=en. The welcoming message should be in English which means that the custom plug is working as expected!

Storing Locale Into a Cookie

Our next task is persisting the chosen locale among requests so that the user does not need to provide it every time. The perfect candidate for such persistence would be cookies: small text files stored on the user’s PC. Phoenix indeed has support for cookies out of the box, so just utilize a [put_resp_cookies/4](https://hexdocs.pm/plug/Plug.Conn.html#put_resp_cookie/4) function inside your plug:

def call(%Plug.Conn{params: %{"locale" => locale}} = conn, _options) when locale in @supported_locales do LokaliseDemoWeb.Gettext |> Gettext.put_locale(locale) conn |> put_resp_cookie "locale", locale, max_age: 365*24*60*60 end

We modify the connection by storing a cookie named "locale". It has a lifetime of 1 year which effectively means eternity in terms of the web.

The last step here is reading the chosen locale from the cookie. Unfortunately, we cannot use a guard clause for this task anymore, so let’s replace two clauses of the call/2 function with only one:

def call(conn, _options) do case fetch_locale_from(conn) do nil -> conn locale -> LokaliseDemoWeb.Gettext |> Gettext.put_locale(locale) conn |> put_resp_cookie "locale", locale, max_age: 365*24*60*60 end end

All in all, the logic remains the same: we fetch the locale, check it, and then either do nothing or store it as the current one.

Add two private functions to finalize this feature:

defp fetch_locale_from(conn) do (conn.params["locale"] || conn.cookies["locale"]) |> check_locale end defp check_locale(locale) when locale in @supported_locales, do: locale defp check_locale(_), do: nil

Here we are reading the locale from the either the GET param or cookie, and then checking if the desired language is supported. Then either return this language’s code, or just nil. Great job!

Another pretty common way of setting the locale is by using the Accept-Language HTTP header. If you would like to implement this mechanism, try utilizing the code from the set_locale plug that already provides all the necessary RegExs and other fancy stuff.

Locale Switcher Control

So, the SetLocale plug is ready, but we still have not provided any controls to choose the website’s language. Therefore, let’s render two links at the top of the page. Define a new helper inside the lib/views/layout_view.ex file:

defmodule LokaliseDemoWeb.LayoutView do use LokaliseDemoWeb, :view def new_locale(conn, locale, language_title) do "<a href=\"#{page_path(conn, :index, locale: locale)}\">#{language_title}</a>" |> raw end end

Call this helper from the templates/layout/app.html.eex template:

<body> <div class="container"> <header class="header"> <%= new_locale @conn, :en, "English" %> <%= new_locale @conn, :ru, "Russian" %> </header> <!-- other stuff --> </div> </body>

Reload the page and try switching between locales. Everything should be working just fine, which means that the task is completed!

Simplify Your Life With Lokalise

By now you are probably thinking that supporting multiple languages on a big website is probably a pain. And, honestly, you are right. Of course, the translations can be namespaced with the help of domains. But still you must make sure that all the keys are translated for each and every locale. Luckily, there is a solution to this problem: the Lokalise platform that makes working with the localization files much simpler. Let me guide you through the initial setup which is nothing complex really.

• To get started, grab your free trial
• Create a new project, give it some name, and set English as a base language
• Click “Upload Language Files”
• Upload PO files for all your languages
• Proceed to the project, and edit your translations as needed
• You may also contact professional translator to do the job for you
• Next simply download your PO files back and replace them inside the priv/gettext folder
• Profit!

Lokalise has many more features including support for dozens of platforms and formats, and even the possibility to upload screenshots in order to read texts from them. So, stick with Lokalise and make your life easier!

Conclusion

In today’s tutorial we have seen how to perform localization of Phoenix applications with the help of Gettext. We have discussed what Gettext is and what goodies it has to offer. We have seen how to extract translations, generate templates, and create PO files based on these templates. You have also learned what domains are, and how to introduce support for pluralization. On top of that, we have successfully created our custom plug to fetch and persist the chosen locale based on the user’s preferences. Not bad for one article!

To learn more about Phoenix I18n, I encourage you to check out the official guide that provides both general explanations, as well as documentation for individual functions. To learn about the Gettext and its features in more detail, refer to the GNU’s documentation. And, of course, if you have any questions feel free to post them in the comments!

Originally published at blog.lokalise.co on September 27, 2018.