Breaking Language Barriers: Optimized and Quick Translations

As businesses continue to expand their reach globally, it’s becoming increasingly important to cater to the diverse language preferences of potential customers. One effective way of doing this is by incorporating translations on your website or app. This not only helps to increase your market and reach a wider audience but also enhances the user experience by providing seamless navigation and communication.

At Everwell, we understand the significance of translations and have been continuously accelerating the process of creating, launching, and optimizing websites and apps in multiple languages. We have seen how translations have evolved and have adapted our approach accordingly to ensure that the end product is of the highest quality.

In our final design section, we will showcase our translation procedure, but it’s important to note that the learning process is equally important. By understanding the process of translations, you can make informed decisions and collaborate more effectively with the translation team to ensure that the end product meets your expectations.

THE FINAL DESIGN (The fourth and the LAST Iteration)

Part 1: Translation Process: How it Works

Our translation process for any new text added usually involves four key steps:

1. Configuring Storage in Localise:
We use Localise to store all our translations in one central location. This helps to ensure that there is one source of truth and no need for code changes. The documentation provided by the Localise team for exporting and using it made it super easy to configure it for our projects.

2. Adding and modifying CD scripts to update new translations:
This step ensures that we always have the most up-to-date translations and that there are no inconsistencies across different versions of the website or app. The goal was to not do any code changes for updating the translation texts post the one-time setup. All we have to do is configure the deployment pipeliner to run the Python Script for fetching the translations at the time of building images.

Structure for storing for locales:

Python Script for retrieving translation from Localise

import os
import json
import requests

key_map = {}
key_map['en-IN'] = 'en'
key_map['sw-UG'] = 'sw'
key_map['uk-UA'] = 'uk'
key_map['fr-FR'] = 'fr'
key_map['ta-IN'] = 'ta'

print("Requesting translation files from Localise.biz")
headers = {"Authorization": "Loco [API_KEY]"}
r = requests.get("https://localise.biz/api/export/all.json?fallback=en", headers=headers)
jfile = json.loads(r.text)
print("Loaded translation files")

for key in jfile:
    if key in key_map:
        print("Cleaning translations: " + key_map[key])

        lang_strings = jfile[key]
        final_strings = {}

        for item in lang_strings.keys():
            if not (lang_strings[item] == "" or lang_strings[item] == "#N/A"):
                final_strings[item] = lang_strings[item]

        with open(os.path.join('strings',  key_map[key] + '.json'), 'w', encoding='utf-8') as fp:
            print("Writing translations: " + key_map[key])
            json.dump(final_strings, fp, ensure_ascii=False,
                      indent=4, separators=(',', ': '))
    else:
        print("Unsupported key "+key+" in load_localise_files.py")

Local Usage:

Step1: Run python -m pip install requests

Step2: Run from the command line using python load_localise_files.py in the src/utils/languages directory

Finding the API_KEY

1. Login at Localise.biz

2. Choose project

3. On the right-hand side of Developer Tools click on API Keys

4. Copy the existing key or click regenerate and copy the new key.

3. Storing the language selected in a Cookie from your Application:
We use cookies to store the user’s preferred language, which is used to display the correct translations. English is set as a fallback language.

How to set and get a Cookie:

export function setCookie (name, value, days) {
  var expires = ''
  if (days) {
    var date = new Date()
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
    expires = '; expires=' + date.toUTCString()
  }
  document.cookie = name + '=' + (value || '') + expires + '; path=/'
}

export function getCookie (name) {
  var nameEQ = name + '='
  var ca = document.cookie.split(';')
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i]
    while (c.charAt(0) === ' ') c = c.substring(1, c.length)
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
  }
  return null
}

Ensure that the language is selected/loaded at the time of startup. Set English as the default language.

async mounted() {
    await this.getLanguages();
    if (getCookie("languageCode") == null) {
      setCookie("languageCode", "en", 60);
      this.$i18n.locale = "en";
    }
  },

Create a method to change the language on language change

methods: {
    changeLanguage(language) {
      setCookie("languageCode", language.Key, 60);
      this.$i18n.locale = language.Key;
    }
}

4. Translating the text in code using i18n in all JavaScript APPs:
We use the i18n library to translate text in all our JavaScript apps.

1. Create translation file i18n.js inside plugins:

import VueI18n from 'vue-i18n'
import messages from '@/utils/languages'
import { getCookie } from '@/utils/cookieUtils'
import Vue from 'vue'

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: getCookie('languageCode'),
  fallbackLocale: 'en',
  messages: messages
})

export default i18n

2. Use this file in main.js during the main Vue instance creation:

import i18n from './plugins/i18n'

new Vue({
  i18n,
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

3. Request translations within component templates using the translation function and asset key of the text:

<p>{{ $t(asset_key) }} </p>

Part 2: Team Collaboration for Updating and Adding Translations

Collaboration is key when it comes to updating and adding translations. Typically, the Quality Evaluation team is responsible for identifying any missing translations and creating issue references within the tracker. From there, a developer reviews the ticket to determine if the missing translation needs to be added to the code or directly onto Localise for a specific language. If the translation needs to be added to the code, the developer takes care of it. Otherwise, the product team is notified and tasked with adding the missing translation to Localise. Once these updates have been made, the changes are deployed and tested by the QE team to ensure everything is working as expected. By working together, we can ensure accurate translations and a seamless user experience.

In conclusion, translations are a crucial aspect of making technical content accessible to a global audience. By considering the nuances of language and cultural differences, we can ensure that our technical documentation and products are understood and utilized effectively. From utilizing machine translation tools to incubating translations to working with professional translators, there are many options available to help streamline the translation process. Ultimately, prioritizing high-quality translations can not only benefit your audience but also your organization’s bottom line. So, take the time to invest in effective translations, and you will be rewarded with a more engaged and diverse audience.

Credits: Charu