The latest articles on DEV Community by Lokalise Dev (@lokalisedev). https://dev.to/lokalisedev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F129932%2Fa686cf01-aedb-4a16-9337-8aaae9118266.png https://dev.to/lokalisedev en Lokalise Dev Thu, 18 Nov 2021 11:49:12 +0000 https://dev.to/lokalise/register-your-interest-today-for-lokalise-apps-482c https://dev.to/lokalise/register-your-interest-today-for-lokalise-apps-482c <p>📢 We’re excited to announce that Lokalise Apps is officially live!</p> <p>Our vision is to enable developers to build their own integrations with Lokalise and share them with our thousands of users, enhancing the visibility of creators and attracting opportunities to expand their businesses. 💫</p> <p>A key part of that is ensuring adoption among Lokalise users as we will promote apps built by our partners. 🤝</p> <p>Interested in building your first app with Lokalise and boosting your workflows? Sign up here: <a href="https://bit.ly/3HvRkvb">https://bit.ly/3HvRkvb</a></p> Lokalise Dev Fri, 10 May 2019 12:25:42 +0000 https://dev.to/lokalise/localizing-javascript-apps-with-jquery-i18n-51ne https://dev.to/lokalise/localizing-javascript-apps-with-jquery-i18n-51ne <p>Recently we have done an <a href="https://dev.to/lokalise/libraries-for-translating-javascript-apps-4mm-temp-slug-6576899">overview of the most popular internationalization libraries for JavaScript</a> covering solutions like I18next, Globalize and others. In this article, however, we are going to focus on a single solution and talk about localizing JavaScript apps with <a href="https://github.com/wikimedia/jquery.i18n">jQuery.I18n</a>. This is a feature-rich library developed and supported by Wikimedia team. It is easy to get started and which is suitable for both simple and complex websites.</p> <p>We are going to cover the following topics:</p> <ul> <li>Overview of the library</li> <li>Downloading and loading all the necessary modules</li> <li>Providing translations in JSON files</li> <li>Documenting your translations</li> <li>Performing translations and using placeholders</li> <li>Utilizing gender information and employing pluralization</li> <li>Using “magic words”</li> <li>Switching locale</li> </ul> <p>Note that if you wish to follow this tutorial, you’ll require a web server like <a href="https://www.mamp.info/en/">MAMP</a>, <a href="http://wamp.io/">WAMP</a>, or <a href="https://www.iis.net/">IIS</a>.</p> <h2> Overview </h2> <p>So, jQuery.I18n is an internationalization library developed by <a href="https://www.mediawiki.org/wiki/Wikimedia_Language_engineering">Wikimedia language engineering team</a>. Wikimedia, in turn, is a company behind <a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>, a popular free online encyclopedia. What’s important, Wikimedia team utilizes jQuery.I18n internally for their resources which are accessed by people from all over the world. These projects, of course, require proper localization. It means that the library is being quite actively maintained and well-documented which is very important for us, developers.</p> <p>Here are the <a href="https://github.com/wikimedia/jquery.i18n#features">main features of jQuery.I18n</a>:</p> <ul> <li> <a href="https://github.com/wikimedia/jquery.i18n#plurals">Support for pluralization</a> with the help of <a href="http://cldr.unicode.org/">Unicode CLDR</a> </li> <li>Support for <a href="https://github.com/wikimedia/jquery.i18n#grammar">grammar forms</a> </li> <li>Ability to specify <a href="https://github.com/wikimedia/jquery.i18n#gender">gender information</a> </li> <li>Ability to provide meta information inside translation files and <a href="https://github.com/wikimedia/jquery.i18n#message-documentation">document your messages</a> </li> <li><a href="https://github.com/wikimedia/jquery.i18n#fallback">Fallback chains</a></li> <li>Customizable message parser that support so-called <a href="https://github.com/wikimedia/jquery.i18n#magic-word-support">“magic words”</a> </li> <li>Support for<a href="https://github.com/wikimedia/jquery.i18n#data-api">HTML5 <code>data-*</code> attributes</a> that allow to provide translations right inside your markup</li> <li>Modular code</li> </ul> <p>On the other hand, jQuery.i18n, does have some downsides:</p> <ul> <li>As the name implies, it relies on the <a href="https://jquery.com/">jQuery library</a>. 8-10 years ago jQuery used to be a de-facto standard for web, and nearly everyone was using it. Now, however, things have changed and many devs tend to get rid of jQuery preferring pure JavaScript. Still, many sites rely on jQuery, therefore reliance of this library is probably not a big downside</li> <li>Translations are not updated dynamically once the current locale changes. This may or may not be a big problem for you, but sill, this is quite an annoying thing. Some other popular solutions (like <a href="https://www.i18next.com/">I18next</a>) can update your texts nearly instantly as soon as the user has switched the current language</li> <li>jQuery.I18n team is not actively participating in <a href="https://github.com/wikimedia/jquery.i18n/issues">discussions on GitHub</a>. There are a handful of open issues, and some of them are quite old. Still, jQuery.I18n does not have any serious bugs, and it is production-ready</li> </ul> <h2> Creating a Demo App </h2> <p>For the purposes of this demo, I’ll create a single <code>index.html</code> file inside the root folder of my local web server. Next, we have to download the latest version of jQuery.i18n, therefore <a href="https://github.com/wikimedia/jquery.i18n#quick-start">run the following commands</a> (you will need <a href="https://git-scm.com/">Git</a> installed on your PC):</p> <p>.gist table { margin-bottom: 0; }</p> <p>These commands will clone the library’s code into the <code>jquery.i18n</code> folder and also initialize a sub-module with CLDR rule parser. Copy the contents of the <code>jquery.i18n/src</code> to the <code>js</code> folder of your demo project. <code>src</code> folder contains the library’s modules and you can choose which ones to load in your app. There’s also a nested <code>languages</code> folder with basic support for some common locales.</p> <p>Also, navigate to <em>jquery.i18n\libs\CLDRPluralRuleParser\src</em> and copy <code>CLDRPluralRuleParser.js</code> into the <code>js</code> folder. This file will enable support for pluralization.</p> <p>At this point we may define a skeleton for our HTML page inside the <code>index.html</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p>First of all I’m loading jQuery 3 which our I18n library relies on, then CLDR rule parser, all the modules, and <code>ru.js</code> file that enables support for the Russian language. Of course, you may further tweak this code and pick only the necessary modules.</p> <h2> Translation Files </h2> <p>Translations for jQuery.i18n are <a href="https://github.com/wikimedia/jquery.i18n#message-file-format">stored inside simple JSON files</a> or <a href="https://github.com/wikimedia/jquery.i18n#dynamic-loading-using-load-method">can be loaded directly inside your code</a>. I would recommend sticking to the first option (especially for larger sites), therefore create an <code>i18n</code> folder inside your project.</p> <p>It possible to store translations for all languages in a single file or separate them into different files. If you prefer to utilize a single file, next your translation keys under the locale codes:</p> <p>.gist table { margin-bottom: 0; }</p> <p>In this example we have translations for English and Russian locale stored under the <code>welcome</code> key.</p> <p>Interestingly, it is possible to provide path to the language file instead of listing translations:</p> <p>.gist table { margin-bottom: 0; }</p> <p>As your website grows you will have more and more translation keys resulting in a very long JSON file. Therefore, let’s divide translations into separate files. I’ll create the following directory structure:</p> <ul> <li> <code>i18n</code> <ul> <li><code>ru.json</code></li> <li><code>en.json</code></li> </ul> </li> </ul> <p>Here is the contents for the <code>en.json</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Note that I am also providing metadata under the <code>@metadata</code> key. Here you may list the authors of this translation, specify locale, and provide message documentation (which we’ll discuss in a moment).</p> <p>Here is the contents for the <code>ru.json</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now we can load our translation files!</p> <h3> Message Documentation </h3> <p>In the previous section we have specified a <code>message-documentation</code> meta key with a bizarre-looking <code>qqq</code> value. Basically, <code>qqq</code> is a special locale which contains description for every translation key of your application. These descriptions may include information on where exactly this key is being used, what is the translation context (this info is especially important for translators), what tone the translator should use (formal, informal, friendly) etc. For example, <a href="https://github.com/wikimedia/mediawiki/blob/master/languages/i18n/qqq.json">here is a <code>qqq.json</code> file</a> used in a real Wikimedia project.</p> <p>So, now let’s create our very own message documentation inside <code>i18n/qqq.json</code>:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now our future translators will have all the necessary info on the <code>welcome</code> key.</p> <h2> Loading Translations </h2> <p>As long as our translation files are ready, we may <a href="https://github.com/wikimedia/jquery.i18n#message-loading">load them</a> inside the demo app. Create a new file <code>js/global.js</code> with the following contents:</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>$.i18n().load()</code> is a function that accepts either paths to your translation files or JSON with translation data. It means, that you may also load translations in the following way:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now include <code>global.js</code> file on the main page of the site:</p> <p>.gist table { margin-bottom: 0; }</p> <h2> Performing Translations </h2> <p>In order to fetch translation by its key, you may utilize <code>$.i18n()</code> function. Remember, however, that we are loading our translation files asynchronously, and therefore have to wait until they are ready. Luckily, the <code>load()</code> function returns a promise, so we may chain <code>done()</code> function like this:</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>welcome</code> here is a translation key.</p> <p>Now add a <code>#welcome</code> element to the <code>index.html</code>:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now you may navigate to the main page of the site and make sure that the “Welcome!” phrase is being displayed in a <code>h1</code> tag. It means that you have configured jQuery.i18n properly!</p> <h3> Data Interpolation </h3> <p>In some cases you may want to dynamically provide data for your translations. For example, our welcoming message may greet a currently logged in user by his or her name. Of course, we won’t code authentication system in this article, and rather store user’s information in a plain object:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now pass the current user’s name to the <code>$.i18n()</code> function as the second argument:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now all you need to do is fetch this data inside your translations. Tweak <code>i18n/en.json</code> file (I’m skipping metadata for brevity):</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>$1</code> is a placeholder that will be dynamically replaced with the second argument passed to the <code>$.i18n()</code> function (which is “Alex” in our case).</p> <p>Now, <code>ru.json</code>:</p> <p>.gist table { margin-bottom: 0; }</p> <p>You may define as many placeholders as needed in your translations, for example <code>$1 says "$2" to $3</code> which will result in something like “Alex says “Hi” to Ann”. Note, however, that if a placeholder doesn’t have any value, it will be displayed as-is: <code>Welcome, $1!</code>.</p> <h3> Gender Information </h3> <p>One very common task when performing internationalization is displaying slightly different messages based on the given gender. Suppose we would like to show some consulting information on the page, and the consultant may be either male or female. Based on the consultant’s gender we would like to display a message like “Your today’s consultant is SOME NAME. He (She) says: …”. How do we achieve that?</p> <p>First of all, add a new <code>consulting_info</code> translation key to the <code>en.json</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p><a href="https://github.com/wikimedia/jquery.i18n#gender"><code>GENDER</code> is a special switch</a> that displays one of the given options (“He” or “She”) based on the given argument represented as a placeholder.</p> <p>Now let’s add a Russian translation:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now simply define a new <code>consultant</code> object and pass interpolation data to the <code>$.i18n()</code> function as we already did in the previous section:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Lastly add a new tag to the <code>index.html</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Reload the page and observe the result!</p> <h3> Pluralization </h3> <p>Another common task is displaying pluralized messages based on the given count. For instance, we may want to say how many unread messages the current user has. To achieve that, <a href="https://github.com/wikimedia/jquery.i18n#plurals">we will use a <code>PLURAL</code> switch</a>. Tweak <code>en.json</code> file:</p> <p>.gist table { margin-bottom: 0; }</p> <p>As you see, it is very similar to what we did with the <code>GENDER</code> switch a minute ago. For Russian language, however, more options has to be provided:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Various languages have different pluralization rules but luckily you don’t need to bother about it thanks to <a href="http://cldr.unicode.org/">Unicode CLDR</a> pluralization info that jQuery.I18n relies on. All you need to do is <a href="https://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html">open the following page</a> and use the given table to determine how many options should be provided for the language you wish to support.</p> <p>Now tweak your JS file again:</p> <p>.gist table { margin-bottom: 0; }</p> <p>And add yet another tag to the HTML page:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Reload the page once again and make sure the text has proper pluralization!</p> <h3> It’s Pure Magic! </h3> <p>We have discussed two switches: <code>GENDER</code> and <code>PLURAL</code> but it appears they are actually <a href="https://github.com/wikimedia/jquery.i18n#magic-word-support">so-called “magic words”</a> that jQuery.I18n supports. A “magic word” is just a special construct that the parser processes and replaces with some content. You may further extend the parser and provide your own constructs as needed. For instance, let’s construct a magic word to display <a href="https://www.w3schools.com/TAGS/tag_abbr.asp">abbreviations</a>:</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>abbr</code> is the name of our “magic word”. The anonymous function may optionally accept an array of <code>nodes</code> which are simply arguments passed to the magic word. This function then returns the content that you wish to display.</p> <p>Use this magic word in the following way:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Note that magic words may be nested as <a href="https://github.com/wikimedia/jquery.i18n#extending-the-parser">shown in this example</a>.</p> <h3> Translating With HTML5 Data Attributes </h3> <p>Another interesting feature that jQuery.I18n provides is the <a href="https://github.com/wikimedia/jquery.i18n#data-api">support for HTML5 <code>data-*</code> attributes</a> that may be used to provide translations right inside your markup. To see it in action, add yet another tag into your markup with <code>data-i18n</code> attribute:</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>glad_to_see</code> is just a translation key. <code>We're glad to see you!</code> basically acts as a fallback text that will be shown if translation for the specified key cannot be found.</p> <p>Next add English translation for this key:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Also add Russian translation:</p> <p>.gist table { margin-bottom: 0; }</p> <p>And lastly tweak your JS code:</p> <p>.gist table { margin-bottom: 0; }</p> <p>This will search for a translation under the key provided in the <code>data-i18n</code> attribute. If the translation is found, it will be placed inside the <code>h2</code> tag.</p> <p>What’s more, the <code>i18n()</code> function may be applied to the whole HTML page:</p> <p>.gist table { margin-bottom: 0; }</p> <p>Now every tag containing the <code>data-i18n</code> attribute will be properly translated!</p> <h2> Switching Language </h2> <p>Our next task is providing functionality to switch the currently set language. Let’s provide a language switcher component on our HTML page:</p> <p>.gist table { margin-bottom: 0; }</p> <p>When a user clicks on one of these links, we should change the language accordingly. Bind a click event and provide an event handler inside the <code>global.js</code>:</p> <p>.gist table { margin-bottom: 0; }</p> <p>I’ve added this event handler inside the <code>done()</code> function because, once again, we should wait until the translation files are loaded.</p> <p>There is one problem however: translation messages won’t update automatically once the user has changed locale. To fix that, I’ll extract all translation-related logic to a separate <code>do_translate()</code> function, and call it once the <code>click</code> event fires. Here is the complete version of the code:</p> <p>.gist table { margin-bottom: 0; }</p> <p><code>do_translate()</code> fires once translation files are loaded, as well as after the click event happens.</p> <h3> Default Locale </h3> <p>In order to provide a default locale, you may use two possible options:</p> <ul> <li>Provide it using the <code>lang</code> attribute of the <code>html</code> tag</li> <li>Set it using the <code>$.i18n()</code> function</li> </ul> <p>Let me demonstrate you these two approaches. <code>lang</code> attribute is defined in the following way:</p> <p>.gist table { margin-bottom: 0; }</p> <p>This way we are saying that the language of this page is English. jQuery.I18n will read it and assign the default locale properly.</p> <p>To set a default locale programmatically, use the following code:</p> <p>.gist table { margin-bottom: 0; }</p> <p>These two options are equal, and you are free to choose any of them.</p> <h2> Make Your Life Easier With Lokalise </h2> <p>Supporting multiple languages on a big website may become a serious pain. You must make sure that all the keys have translations for each and every locale. Luckily, there is a solution to this problem: the Lokalise platform that <a href="https://lokalise.co/features">makes working with the localization files much simpler</a>. Let me guide you through the initial setup which is nothing complex really.</p> <ul> <li>To get started, <a href="https://lokalise.co/signup">grab your free trial</a> </li> <li>Create a new project, give it some name, and set English as a base language</li> <li>Click “Upload Language Files”</li> <li>Upload translation files for all your languages</li> <li>Proceed to the project, and edit your translations as needed</li> <li>You may also contact a professional translator to do the job for you</li> <li>Next simply download your files back</li> <li>Profit!</li> </ul> <p>If you wish to upload QQQ files with message documentation, that’s possible as well. Perform the following steps:</p> <ol> <li>Open your project and press the “Add Language” button on the top</li> <li>Choose any language from the dropdown</li> <li>Press on the new language’s flag and select “Language Settings”</li> <li>Set “Custom Language Code” to “On” and enter <code>qqq</code> </li> <li>Set “Custom Language Name” to “On” and enter something like “Message documentation”</li> <li>Save the changes and proceed to the “Upload” page</li> <li>Choose your <code>.qqq</code> file. Your custom locale should be detected automatically</li> </ol> <p>Here is the result:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--teax6ypy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.lokalise.co/wp-content/uploads/2019/05/2019-05-09-13_55_55-JS-Demo-_-Lokalise.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--teax6ypy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.lokalise.co/wp-content/uploads/2019/05/2019-05-09-13_55_55-JS-Demo-_-Lokalise.png" alt=""></a></p> <p>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!</p> <h2> Conclusion </h2> <p>In this article we have discussed jQuery.I18n: an internationalization library for JavaScript applications created by Wikimedia. We have seen how to set it up, define and load language files, perform translations, use magic words, extend parser, and switch locale. Basically, we have covered all the main information, and you may start using this solution in real-world projects.</p> <p>Don’t forget to check <a href="https://dev.to/lokalise/libraries-for-translating-javascript-apps-4mm-temp-slug-6576899">our article on other I18n libraries for JavaScript</a> to learn about potential alternatives. Also, don’t hesitate to contact us if you have further questions, and stay with Lokalise!</p> <p>The post <a href="https://blog.lokalise.co/localizing-apps-jquery/">Localizing JavaScript apps with jQuery.i18n</a> appeared first on <a href="https://blog.lokalise.co">Lokalise Blog</a>.</p> localization i18n javascript Lokalise Dev Mon, 08 Apr 2019 14:23:52 +0000 https://dev.to/lokalise/why-localization-matters-for-your-app-4k3m https://dev.to/lokalise/why-localization-matters-for-your-app-4k3m <p>So, you think your business is ready for international growth. The product looks great, the website is up and running. Beautiful visuals and witty copy in English that will grab everyone’s attention no matter which corner of the world they reside in.</p> <p>And what else would you need, since English is the <em>lingua franca</em> of the business world, spoken by 1.5 billion, or <a href="https://www.babbel.com/en/magazine/how-many-people-speak-english-and-where-is-it-spoken/">20% of the Earth’s population</a>, right?</p> <p>Think again.</p> <p>According to a 2014 report, <a href="http://blog.languageline.com/what-is-localization">75% of consumers</a> have said they’re likely to purchase goods and services if the product information is <strong>in their native language.</strong> What’s more, <a href="http://www.europeanbusinessreview.com/why-localisation-is-key-to-global-marketing/">87% of consumers</a> who don’t speak and can’t read English won’t even consider buying from an English website.</p> <p>Look at it this way. If you’re traveling to a foreign country, you’re more likely to blend in and build a lasting relationship with the locals if you:</p> <ol> <li>speak their language</li> <li>know their culture and customs</li> </ol> <p>That’s basically what localization does for your product. But before we look into how localization could benefit your business, let’s start with the basics:</p> <h2> What is localization </h2> <p>The term “<a href="https://lokalise.co/">localization</a>” stands for adapting a product or content to fit a specific market or country and adjusting its functional properties to accommodate the linguistic, cultural, political and legal differences.</p> <p>Localization is often confused with translation, the process of converting text from one language to another. While these terms might be somewhat similar, translation is actually just one aspect of localization with the latter being the more extensive of the two processes.</p> <p>So, in addition to translation, localization involves other elements that will be modified as a part of the process. For example:</p> <ul> <li>Adapting visuals and graphics to the target market</li> <li>Modifying content to fit the tastes and consumption habits of the target market</li> <li>Changing the design and layout to properly display translated text</li> <li>Converting to local currencies and measure units</li> <li>Using proper local formats (dates, punctuation, symbols, phone numbers, addresses)</li> <li>Addressing local regulations and legal requirements</li> </ul> <p>By the end of the localization process, your product should look and feel as if it was created in the market or country you’re targeting.</p> <p>Besides, it’s not just the product or website that you can localize. If you’re really planning on expanding your audience, you should also localize <strong>marketing materials</strong> (TV, radio, printed ads), product manuals, user interfaces, and product warranty materials.</p> <p>Still not sure if you should invest in localization? Here’s why it matters for your business:</p> <h2> <strong>Go global more rapidly</strong> </h2> <p>It’s tempting to think that entering a new market will be as easy as launching a Facebook ad targeted to a specific location or country.</p> <p>However, it takes more than that. There are several <strong>barriers</strong> that you will need to overcome, especially if you want to enter a market that’s geographically and culturally distant from your home country. Some of these barriers include:</p> <ul> <li>The political environment</li> <li>The socio-cultural/demographic environment</li> <li>The technological environment</li> </ul> <p>Through the process of localization, you’ll <strong>overcome these barriers</strong> more rapidly, tailor your product or service to fit a specific culture, and allow your future customers to adapt to your product with less effort.</p> <p>In other words, localization will enable you to succeed in new markets and help your product or service <strong>adapt to your target location</strong>. As a result, the customers will be more likely to spread the word about your brand and you will create a positive brand image. This in return will ensure better customer engagement with your products as opposed to your competitors who are not taking the localization path.</p> <h2> <strong>Boost sales</strong> </h2> <p>Imagine you’re road tripping in a foreign country and you’re suddenly not feeling well, forcing you to search for a doctor. Which professional would you rather see – the one with lower prices but whom you’re having trouble communicating with? Or the one who’s a bit more pricey but, as it turns out, speaks your native language?</p> <p>It’s probably the second option as it’d be easier to explain your health issues. And in the end, you’d be healthy as a horse, and the doctor would earn a few more bucks than the first one.</p> <p>Research shows that it works the same way with localization. <a href="http://vnlocalize.com/4-reasons-localization-important/">57% of consumers</a> have said that the ability to obtain information in their own language is more important than price.</p> <p>When you communicate with your customers in their native language, you’re bonding with them and building trust. In the end, you’d have a mutual understanding which would make the customers <strong>more comfortable when placing purchases</strong>.</p> <p>Here’s some more cold evidence – <a href="https://www.gala-global.org/industry/intro-language-industry/why-localize">74% of multinational enterprises</a> believe that localization is either important or most important if you want to <strong>increase revenue from global operations</strong>. So, if you want to boost those export sales and set a pace for your competitors, localization is the way to go.</p> <h2> <strong>Increase brand relevance</strong> </h2> <p>In today’s world where trends change at unimaginable speeds, keeping your brand and product constantly relevant is a process that requires your ongoing attention.</p> <p>A relevant brand represents more than just a product or service – it creates and brings to the market products that <strong>meet important needs in people’s lives</strong>. By doing so, these brands become an indispensable part of the consumer’s habits. </p> <p>Just take a look at companies that perform well, like Apple. There have been many competitors that have tried to offer faster, different versions of iPads and iPhones. Nevertheless, the customers still prefer the forbidden fruit. It simply manages to stay one of <a href="https://www.macobserver.com/tmo/article/why-apple-is-relevant-even-if-you-dont-like-the-company">most relevant products on the market</a>.</p> <p>Through the process of localization, your brand will <strong>become more relevant to more people in more markets</strong>. To <a href="https://www.prophet.com/2018/06/localization-is-the-key-to-unlocking-relevance-and-driving-growth/">quote Li Run</a>, Senior brand director at TCL, the Chinese TV brand that constantly manages to stay at the very top of <a href="https://www.amazon.com/Best-Sellers-Electronics-Televisions/zgbs/electronics/172659">Amazon’s best-selling charts</a>, “only by understanding consumer needs and providing products and services that meet their local needs and values, can a brand achieve the deepest level of connection – getting beyond acceptance and towards being loved by local consumers.”</p> <h2> <strong>Reduce risk</strong> </h2> <p>Along with the many rewards that can be gained by entering a new market, there comes a fair share of potential risks, too. Aside from aspects out of your control – like shifts in currency value and <em>force majeure</em>, you can undervalue the political climate, misunderstand consumer needs and cultural sensitivities.</p> <p>Localization acts as <strong>a safety measure</strong> that mitigates these risks and ensures your business runs smoothly oversees. Remember that in some countries, certain expressions and even colors can bear a negative connotation. Through the process of localization, you can avoid falling into these traps that even some of the big giants have not managed to avert.</p> <p>For example, Nokia launched its Lumia phone in Spanish-speaking countries but failed miserably. They had missed the fact that the product name is slang for “prostitute” in Spanish, causing them to receive <a href="https://www.cnet.com/news/nokias-lumia-means-um-prostitute-in-spanish/">negative publicity</a>. </p> <h2> <strong>The power of localization</strong> </h2> <p>No matter how good your product or service is, your brand will be able to expand globally only when you resonate with the customers in the target market – and the audience understands your message and offered solutions.</p> <p>That’s why it’s important to invest in localization right at the start of your internationalization journey, as it will help you reach more prospects, offer a better customer experience, and increase revenue.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y3OM-Rvp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyb3bjwgveq1wxn7vwr7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y3OM-Rvp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyb3bjwgveq1wxn7vwr7.png" alt=""></a></p> <p>The post <a href="https://blog.lokalise.co/localization-importance/">Why localization matters for your business</a> appeared first on <a href="https://blog.lokalise.co">Lokalise Blog</a>.</p> i18n localization ios android Lokalise Dev Tue, 26 Mar 2019 08:52:45 +0000 https://dev.to/lokalise/agile-localization-the-complete-guide-3h7i https://dev.to/lokalise/agile-localization-the-complete-guide-3h7i <p>In the world of software development, localization used to be an afterthought. Product teams would focus on the design and development of the product. Only when the product is complete the need for localization arises.</p> <p>In today’s world, software development doesn’t work that way anymore. Companies went from annual and biannual releases to weekly and even daily releases. This has raised the need for agile localization to keep up with the fast-paced world of software development.</p> <p><strong>In this guide, we will discuss:</strong></p> <ul> <li>What agile localization is.</li> <li>The benefits of agile localization.</li> <li>The challenges that come with agile localization.</li> <li>Some tips to help you through your localization journey.</li> </ul> <p>Let’s start by taking a look at what agile development is.</p> <h2> What is agile software development? </h2> <p>Agile software development is a set of <a href="https://plan.io/blog/ultimate-guide-to-implementing-agile-project-management-and-scrum/" rel="noopener noreferrer">software development methodologies</a> which are based on iterative and cross-functional team collaboration approaches. It allows developers to produce high-quality code as well as ship products faster and more often.</p> <p>Before agile, development teams used to follow the waterfall methodology. This means that all the software requirements are defined beforehand. Making any changes during the process used to be almost impossible and very costly. Agile breaks this linear sequential approach. It splits the product development process into smaller parts or iterations. That way, the requirements change and evolve into a more flexible manner based on need.</p> <p>Agile Software Development spans many different frameworks and methodologies of software development, including Lean software development, Kanban, and Scrum.</p> <p>The term “<em>Agile</em>” was popularized by the <a href="https://agilemanifesto.org/" rel="noopener noreferrer">Manifesto for Agile Software Development</a> which lists down four core values:</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Manifesto-values-1.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Manifesto-values-1.png" alt="agile software development values"></a></p> <p>But how does localization adapt to agile software development? Well, that’s where agile localization comes in.</p> <h2> What is agile localization? </h2> <p><strong>Agile localization is a set of practices to incorporate localization and translation into an agile product development cycle.</strong></p> <p>Translations aren’t just done once and delivered at the end of the development cycle. Instead, they are translated as the product is being developed. This means that once new iterations are released, translators or localization teams can simultaneously work on the localization of the changes happening in the product.</p> <p>There are still the waterfall advocates who prefer it to agile. They believe that it offers a more firm and fixed structure that gives you an idea of how the project is going to unfold. That’s why there are companies that use the waterfall localization workflow to this day.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Agile-Development.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Agile-Development.png" alt="Agile Localization Agile Development"></a></p> <h3> So what is the waterfall localization workflow? </h3> <p>Initially, there were only two main approaches that developers and localization teams followed. While they may not be ideal, some still adopt them:</p> <h4> 1. Post-release </h4> <p>Post-release is a common software localization approach where, as the name suggests, the localization takes place after the release of the product. In this approach, the localization teams can start working on the translations only when the product has been delivered.</p> <p>This approach causes a considerable delay. There is a distinctive gap between the completion of the development of the product and the completion of the translation. Latter option causes a waste of resources and makes companies incapable of releasing their software.</p> <h4> 2. String freeze </h4> <p>The string freeze approach combats the inefficiencies of the first approach. There is a “string freeze” period during the software development process. During that time, strings that need to be localized are locked and can’t be changed, modified or removed. The string freeze duration can be anything from a few days to several weeks. It gives the localization teams time to work on translating the strings and then send them back to the developers in time for the software release. During the time of the freeze, developers can work on fixing bugs and defects, again without changing any of the strings.</p> <p>This approach can definitely be a lot more time-saving than the first one. However, developers would still need to manually identify the modified strings in the code which causes it to remain cumbersome.</p> <p>That’s why more and more companies eventually started adapting the agile localization workflow.</p> <h2> How is the agile localization workflow different? </h2> <p>Agile localization syncs the localization process with the development process so that they are both operating simultaneously. This is accomplished by incorporating a continuous localization platform into your workflow which automatically facilitates and handles the process. The agile localization workflow then takes place as follows:</p> <ol> <li>The developer pushes new code to the project codebase.</li> <li>The localization platform automatically recognizes new or modified strings.</li> <li>It pushes them to the localization team or translators to work on.</li> <li>Once they’re done and the translations are approved, the platform automatically sends the translations back to the developers. It also syncs them back into the project so that they’re ready for release.</li> </ol> <h2> What are the benefits of agile localization? </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Benefits.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Benefits.png" alt="Agile Localization Benefits"></a></p> <h3> Efficiency </h3> <p>When agile localization is implemented correctly, the entire process becomes more efficient and effective with no resistance or bottlenecks. Any new updates to the code are recognized, and new or updated strings are automatically sent to the translators. The translators can now work on the strings, then push it back into the code, without needing any prior knowledge of the development process of the product. That way developers can be more focused on the development of the product without having to worry about other aspects of it.</p> <p>Agile localization also helps save a lot of resources, whether it’s time or money, as it closes the gap between the software development and localization processes.</p> <h3> Ease of use </h3> <p>One of the most significant advantages of continuous localization is how it makes the developers’ and especially the translators’ lives a whole lot easier. Before agile localization, developers would send translators a batch of strings in different formats (e.g., .xml files for Android apps, .strings files for iOS apps, .csv files, etc.). This forced translators to learn multiple different technologies to be able to work with them. The use of a continuous localization platform has eliminated that hassle. It allows you to import all your favorite file formats to the platform or even have it done automatically through the use of integration (e.g., GitHub). Moreover, the translators can work on the strings straight through the platform’s online intuitive dashboard.</p> <h3> Adaptability </h3> <p>Agile localization platforms, like <a href="https://lokalise.co/" rel="noopener noreferrer">Lokalise</a>, easily adapt to your workflow and open up a whole new world of translation possibilities for you. It doesn’t matter whether you’re a big company that has its own localization team or an indie developer who hires independent translators. Localization platforms also offer the possibility of crowdsourcing translations. Some even give you access to certified translators. In this case, you can leverage professionals to start working on your project immediately.</p> <h2> So what challenges come with agile localization? </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Challenges.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Challenges.png" alt="Agile Localization Challenges"></a></p> <h3> Short-term vision </h3> <p>As opposed to the traditional waterfall model which had teams create a full plan from the beginning to an end with a set timeline, the agile approach is more flexible with shorter sprints. And while this has its benefits, you need to make sure that you plan your sprints effectively.</p> <p>That’s why you need to make sure that you have a localization team or enough translators to be able to handle those short sprints. If you don’t, you can leverage a translation management system which allows you to order professional translations. You can have your product translated to all popular languages, in Lokalise, for as low as $0.07 per word.</p> <h3> Speed vs. quality </h3> <p>Working in a fast-paced agile workflow, their focus is more on speed than quality. For example, using machine translation tools like DeepL, Google Translate can impact the quality of the translations.</p> <p>However, the trade-off is usually acceptable, especially since they can be easily fixed with continuous localization as opposed to waterfall localization, where things have to be perfect by the time of the release.</p> <p>Now, let’s take a look at some tips to help you overcome these agile localization challenges.</p> <h2> Agile localization tips </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Tips.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Tips.png" alt="Agile Localization Tips"></a></p> <h3> Establish an internationalization (i18n) mindset </h3> <p>Agile localization can have a drawback where developers only focus on the code. They would pay no attention to internationalization, which is a crucial process needed for localization. That is why it’s essential for developers to always work with an internationalization-centric mindset. They need to understand how important it is to always make sure to adapt the code and prepare it for localization.</p> <h3> Create clear translation guidelines </h3> <p>To combat the translation inconsistencies continuous localization platforms offer a glossary feature. It helps maintain consistent translations across the project by providing definitions.</p> <p>The glossary can contain things like the names of products and services, brand-specific slogans, terminology, abbreviations, acronyms, etc. This ensures maintaining brand unity as well as speed up the translation process by providing clear guidelines to your translators.</p> <h3> Conduct localization and linguistic testing </h3> <p>It is critical to perform localization as well as linguistic testing once the translation is done. Linguistic testing ensures that all translations are complete and accurate without any grammatical or spelling mistakes. Localization testing ensures that the localized content abides by local customs and UI standards. This helps you locate and fix any translation errors, code issues and have them fixed ahead of release.</p> <p>It is also advised that the testing is performed on an audience from your target demographic. They can provide you with valuable insights that you wouldn’t know or have access to otherwise.</p> <h3> Pick the right Translation Management System </h3> <p>There are multiple localization tools and platforms that you can choose from but there are a few things to keep in mind:</p> <ul> <li> <strong>Automation:</strong> The platform needs to be able to blend flawlessly into your development workflow.</li> <li> <strong>Supported Platforms:</strong> The ability to support the platforms you’re working with. Also, when using multiple platforms, having the ability to store all platform keys in the same project.</li> <li> <strong>Collaboration Tools:</strong> Allows you to invite team members and translators to work on the same project. They should also have the ability to assign different translation tasks.</li> </ul> <h2> How can Lokalise help? </h2> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Lokalise.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fblog.lokalise.co%2Fwp-content%2Fuploads%2F2019%2F03%2FAgile-Localization-Lokalise.png" alt="Agile Localization Lokalise"></a></p> <p><a href="https://lokalise.co/" rel="noopener noreferrer">Lokalise</a> is the leading localization and translation tool for web and apps. It integrates flawlessly with your existing development workflow through a plethora of one-click integrations, libraries, and plugins.</p> <p>It offers all the essential localization features like an online editor, translation memory, translation history, the use of a glossary, and more. In addition, Lokalise has more advanced features like inline machine translations, automatic screenshot linking, iOS and Android SDKs which allow you to preview the translations and app changes instantly.</p> <p>The post <a href="https://blog.lokalise.co/agile-localization/" rel="noopener noreferrer">Agile localization: The complete guide</a> appeared first on <a href="https://blog.lokalise.co" rel="noopener noreferrer">Lokalise Blog</a>.</p> agile localization i18n Lokalise Dev Thu, 31 Jan 2019 08:25:22 +0000 https://dev.to/lokalise/libraries-for-translating-javascript-apps-4l5c https://dev.to/lokalise/libraries-for-translating-javascript-apps-4l5c <p>Today, 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 most sane) answer would be: “It depends”. Ideally, you should check each library and then decide which one you prefer.</p> <p>Therefore, in this article I will give you a general introduction to the following solutions:</p> <ul> <li>Globalize</li> <li>I18next</li> <li>jQuery.I18n</li> <li>Polyglot.js</li> </ul> <p>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 and then we’ll try to compare them and come to some general conclusion.</p> <p>Shall we start?</p> <h2> Globalize </h2> <p><a href="https://github.com/globalizejs/globalize">Globalize</a> is a complex translation and localization JS library initially introduced by jQuery team. This library utilizes <a href="http://cldr.unicode.org/">Unicode common locale data repository</a> (CLDR) and has lots of features including:</p> <ul> <li>Message formatting</li> <li>Date/time parsing and ability to work with relative time</li> <li>Pluralization support</li> <li>Numbers parsing and currency formatting</li> <li>Ability to work with units (days, minutes, seconds, miles per hour etc)</li> </ul> <p>Globalize works consistently in browser and NodeJS, has <a href="https://github.com/globalizejs/globalize#pick-the-modules-you-need">modular code</a> and allows to require as little modules as needed. While relying on CLDR data, it does not host or hardcode it directly, therefore 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 <a href="https://github.com/globalizejs/globalize#why-globalize">here</a>.</p> <p>Now let’s see this library in action. There is a <a href="https://github.com/globalizejs/globalize#getting-started">Getting started guide</a> that explains how to install all the required modules on your machine using package manager. However, we’ll choose a more complex way of loading everything manually.</p> <h3> Getting CLDR Data </h3> <p>CLDR is really huge and so there is no reason to download all its content. Luckily, Globalize documentation <a href="https://github.com/globalizejs/globalize#2-cldr-content">summarizes what you have to load</a> when using specific modules. Also there is an <a href="https://johnnyreilly.github.io/globalize-so-what-cha-want/#/?currency=true&amp;date=true&amp;message=true&amp;number=true&amp;plural=true&amp;relativeTime=true&amp;unit=true">online tool</a> 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:</p> <ul> <li><a href="https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/likelySubtags.json">cldr/supplemental/likelySubtags.json</a></li> <li><a href="https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/plurals.json">cldr/supplemental/plurals.json</a></li> <li><a href="https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/ordinals.json">cldr/supplemental/ordinals.json</a></li> </ul> <p>To learn more how CLDR is organized, <a href="https://github.com/unicode-cldr/cldr-json#package-organization">refer to this doc</a>. 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.</p> <p>I’ve placed the files mentioned above to the <code>cldr/supplemental</code> folder of my project but you may organize them differently of course.</p> <p>The next question is: how do we actually load this data? Well, <a href="https://github.com/globalizejs/globalize/blob/master/doc/cldr.md#how-do-i-load-cldr-data-into-globalize">there are two alternatives</a>: by embedding it inside the <code>Globalize.load</code> function or by using an <a href="https://api.jquery.com/jQuery.get/">asynchronous <code>$.get()</code> method</a>. The second option is much more robust, so let’s create a new JS file with the following content:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>// 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 }); </code></pre> </div> <p>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 <code>then</code> and will be executed as soon as everything is loaded successfully. Feel free to refactor this code without using jQuery.</p> <h3> Loading Other Files </h3> <p>After loading CLDR JSON files, you require a <a href="https://github.com/globalizejs/globalize#1-dependencies">bunch of other scripts</a>:</p> <ul> <li>jQuery (note by the way that Globalize itself is not jQuery-based)</li> <li><a href="https://github.com/rxaviers/cldrjs">CLDR JS</a></li> <li>Globalize JS core module</li> <li>Any other modules that you wish to use in your app</li> </ul> <p>jQuery and Cldr.js are external dependencies and you may load them from a CDN (for example, from <a href="https://cdnjs.com/">cdnjs.com</a>).</p> <p>Then download Globalize from the <a href="https://github.com/globalizejs/globalize/releases">Releases section</a>, open the <code>dist</code> folder, pick all the files that you require and place them under the <code>globalize</code> directory.</p> <p>After that load all the scripts in the proper order:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>\&lt;!-- index.html --\&gt; \&lt;!DOCTYPE html\&gt; \&lt;html\&gt; \&lt;head\&gt; \&lt;meta charset="utf-8"\&gt; \&lt;/head\&gt; \&lt;body\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"\&gt;\&lt;/script\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr.min.js"\&gt;\&lt;/script\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/event.min.js"\&gt;\&lt;/script\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.5.1/cldr/supplemental.min.js"\&gt;\&lt;/script\&gt; \&lt;script src="globalize/globalize.js"\&gt;\&lt;/script\&gt; \&lt;script src="globalize/plural.js"\&gt;\&lt;/script\&gt; \&lt;script src="globalize/message.js"\&gt;\&lt;/script\&gt; \&lt;script src="i18n.js"\&gt;\&lt;/script\&gt; \&lt;/body\&gt; \&lt;/html\&gt; </code></pre> </div> <p>All in all, this is it. Now you may refer to the <a href="https://github.com/globalizejs/globalize#api">API section</a> of the Globalize docs and see what functions you may utilize.</p> <h3> Using It </h3> <p>You can provide translation messages with the help of <a href="https://github.com/globalizejs/globalize/blob/master/doc/api/message/load-messages.md"><code>loadMessages</code> function</a>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$.when( // ... }).then(Globalize.load).then(function() { Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!' } }); }); </code></pre> </div> <p>Then instantiate Globalize with the desired locale and perform the actual translations:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>// loadMessages... var globalize = new Globalize("en"); console.log(globalize.messageFormatter('welcome')({name: 'Username'})); </code></pre> </div> <p><a href="https://github.com/globalizejs/globalize/blob/master/doc/api/message/message-formatter.md"><code>messageFormatter</code></a> returns a formatted translation. As you can see from this example, it supports interpolation, but there is more. Want to introduce pluralization? Simple!</p> <p>Add a new message:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Globalize.loadMessages({ "en": { 'welcome': 'Welcome, {name}!', 'messages': ["You have {count, plural,", " one {one message}", " other {{count} messages}", "}"] } }); </code></pre> </div> <p>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. <code>count</code> is an interpolation.</p> <p>Now display this message:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>taskFormatter = globalize.messageFormatter("messages"); console.log(taskFormatter({ count: 10 })); </code></pre> </div> <p>You may utilize other modules in pretty much the same way.</p> <p>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.</p> <h2> I18next </h2> <p>I18next is a JavaScript localization framework providing all the necessary tools to translate your applications. It has loads of various features including:</p> <ul> <li> <a href="https://www.i18next.com/overview/supported-frameworks">Support for front-end frameworks</a> including React, Angular, Vue etc</li> <li>Supports for various formats (including Polyglot which we’ll discuss later)</li> <li>Message formatting</li> <li>Pluralization</li> <li>Fallbacks</li> <li>Ability to load translation data from various resources</li> <li>…and many, many other <a href="https://www.i18next.com/overview/plugins-and-utils">utilities and plugins</a> </li> </ul> <h3> Loading Required Files </h3> <p>To get started with I18next you may simply require it from CDN, for example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>\&lt;!DOCTYPE html\&gt; \&lt;html\&gt; \&lt;head\&gt; \&lt;meta charset="utf-8"\&gt; \&lt;/head\&gt; \&lt;body\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/14.0.1/i18next.min.js"\&gt;\&lt;/script\&gt; \&lt;/body\&gt; \&lt;/html\&gt; </code></pre> </div> <p>Of course, it can be also installed with NPM or Yarn as explained <a href="https://www.i18next.com/overview/getting-started">here</a>.</p> <h3> Configuration </h3> <p>As I already mentioned above, I18next allows you to load translations from the <a href="https://www.i18next.com/overview/plugins-and-utils#backends">backend</a>, but you may also provide them directly in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>i18next.init({ lng: 'en', resources: { en: { translation: { "hi": "Welcome" } } } }).then(function(t) { // ready to go! }); </code></pre> </div> <p>Note that I am also setting English as a default locale.</p> <p>There are many other configuration options that are listed on the <a href="https://www.i18next.com/overview/configuration-options">corresponding page</a>.</p> <h3> Using It </h3> <p>You may perform translations in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>// ... init .then(function(t) { // initialized and ready to go! console.log(i18next.t('hi')); }); </code></pre> </div> <p><a href="https://www.i18next.com/overview/api#t"><code>t</code> is a function</a> to look up translation based on the provided key. It can also work with interpolation, for instance:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>i18next.t('hi', {name: 'Username'}); </code></pre> </div> <p><a href="https://www.i18next.com/translation-function/plurals">Pluralization</a> is supported too. To start using it, define singular and plural forms in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "msg": "one message", "msg\_plural": "{{count}} messages" } </code></pre> </div> <p>Note the <code>_plural</code> part that has to be provided for plural forms. Some languages require <a href="https://www.i18next.com/translation-function/plurals#languages-with-multiple-plurals">multiple forms</a>. In this case use <code>_0</code>, <code>_1</code>, and other post-fixes, for example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "key\_0": "zero", "key\_1": "singular", "key\_2": "two", "key\_3": "few", "key\_4": "many", "key\_5": "other" } </code></pre> </div> <p>Then just use the <code>t</code> function again:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>i18next.t('msg', {count: 10}); </code></pre> </div> <p>I18next allows you to provide <a href="https://www.i18next.com/translation-function/context">context for the translation</a>. This is particularly important when working with gender information:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "friend": "A friend", "friend\_male": "A boyfriend", "friend\_female": "A girlfriend" } </code></pre> </div> <p><code>_male</code> and <code>_female</code> here are contexts that you can set in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>i18next.t('friend'); // ==\&gt; No context here, so return "A friend" i18next.t('friend', { context: 'male' }); // -\&gt; A context is present, so return "A boyfriend" </code></pre> </div> <p>Don’t hesitate to browse other examples in the I18next’s docs on how to <a href="https://www.i18next.com/translation-function/nesting">enable nesting in translations</a>, <a href="https://www.i18next.com/translation-function/objects-and-arrays">work with objects</a>, or <a href="https://www.i18next.com/principles/fallback">setup fallbacks</a>.</p> <p>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!</p> <h2> jQuery.I18n </h2> <p><a href="https://github.com/wikimedia/jquery.i18n">jQuery.I18n</a> is yet another popular solution presented to you by <a href="https://www.mediawiki.org/wiki/Wikimedia_Language_engineering">Wikimedia Engineering team</a> allowing to translate your JavaScript applications. Wikimedia, in turn, is a company behind <a href="http://en.wikipedia.org/">Wikipedia project</a>, 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 JSON-based localization format and support the following <a href="https://github.com/wikimedia/jquery.i18n#features">features</a>:</p> <ul> <li>Ability to meta information and document your messages</li> <li>Supports pluralization with the help of CLDR</li> <li>Gender information</li> <li>Support for grammar forms</li> <li>Fallback chains</li> <li>Ability to customize message parser</li> <li>Has modular code</li> </ul> <p>Let’s see jQuery.I18n in action now.</p> <h3> Loading Required Files </h3> <p>First of all, download the library itself and initialize its dependencies:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$ git clone https://github.com/wikimedia/jquery.i18n.git $ cd jquery.i18n $ git submodule update --init </code></pre> </div> <p><code>jquery.i18n/src</code> folder contains the library’s files. Pick the modules that you need (at the very least, you’ll require the core <code>jquery.i18n.js</code>) and place them to your application. The idea here is similar to the one in Globalize. The <code>languages</code> folder contains some helpers for various locales, so if you are supporting one of these, don’t forget to copy the corresponding file as well.</p> <p>If your application works with plural forms, then the <code>CLDRPluralRuleParser.js</code> file is necessary too (it can be found under the <code>jquery.i18n\libs\CLDRPluralRuleParser\src</code> path).</p> <p>After you are ready, load the files in the proper order, for example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>\&lt;!DOCTYPE html\&gt; \&lt;html\&gt; \&lt;head\&gt; \&lt;meta charset="utf-8"\&gt; \&lt;/head\&gt; \&lt;body\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/CLDRPluralRuleParser.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.messagestore.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.fallbacks.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.language.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.parser.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.emitter.js"\&gt;\&lt;/script\&gt; \&lt;script src="lib/jquery.i18n.emitter.bidi.js"\&gt;\&lt;/script\&gt; \&lt;/body\&gt; \&lt;/html\&gt; </code></pre> </div> <h3> Providing Translations </h3> <p>As mentioned above, <a href="https://github.com/wikimedia/jquery.i18n#message-file-format">translations for the jQuery.I18n library</a> are stored inside JSON files. You may separate translation data for different languages, or store everything in a single file. Create a <code>i18n/i18n.json</code> file with the following contents:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "@metadata": { "authors": ["Ilya"], "last-updated": "2019-01-29", "message-documentation": "qqq" }, "welcome": "Hi!" } </code></pre> </div> <p><a href="https://github.com/wikimedia/jquery.i18n#message-loading">To load this file</a>, use the following code (note that I am also providing a default locale):<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>// main.js jQuery(document).ready(function() { $.i18n({locale: 'en'}).load({ en: 'i18n/i18n.json' }).done(function() { // success }) }); </code></pre> </div> <p>Include this script on your main page and you are good to go!</p> <h3> Using It </h3> <p>For instance, you may output a welcoming message in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>console.log($.i18n('welcome', 'Username')); </code></pre> </div> <p><a href="https://github.com/wikimedia/jquery.i18n#plurals">Pluralization</a> is performed in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>{ "msg": "You have $1 {{PLURAL:$1|message|messages}}" } </code></pre> </div> <p>So, you have one key that lists all the available forms, both plural and singular. <code>$1</code> is a <a href="https://github.com/wikimedia/jquery.i18n#placeholders">placeholder</a> for the interpolation. You may have as many placeholders as needed, and they should be named in a sequential manner: <code>$2</code>, <code>$3</code> etc.</p> <p>Then just utilize this new key:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$.i18n('msg', 10); // $1 placeholder will have a value of 10 </code></pre> </div> <p>The context of the translation is defined in pretty much the same way. For example, you can work with <a href="https://github.com/wikimedia/jquery.i18n#gender">gender information</a>:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>"friend": "Some text... {{GENDER:$1|A boyfriend|A girlfriend}}" </code></pre> </div> <p>Provide the context:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$.i18n('friend', 'female'); </code></pre> </div> <p>One interesting feature is the support for the <a href="https://github.com/wikimedia/jquery.i18n#data-api"><code>data-*</code> HTML5 attributes</a>. You just need to add a <code>data-i18n</code> attribute to your tags, provide the key as the value, and then apply <code>.i18n()</code> function directly to those elements or their parent. For example:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>\&lt;body\&gt; \&lt;p data-i18n="translation-key"\&gt;Fallback text goes here\&lt;/p\&gt; \&lt;p data-i18n="another-key"\&gt;Fallback text goes here\&lt;/p\&gt; \&lt;/body\&gt; </code></pre> </div> <p>Now inside your code simply say:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>$('body').i18n(); </code></pre> </div> <p>The script is going to traverse all elements inside <code>body</code> 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.</p> <p>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 <a href="https://github.com/wikimedia/jquery.i18n#data-api"><code>data-*</code> attributes API</a>, supports so-called <a href="https://github.com/wikimedia/jquery.i18n#magic-word-support">“magic words”</a>, and more. So, as you see, there is really a lot of features!</p> <h2> Polyglot </h2> <p>The last solution we’ll talk about is <a href="https://github.com/airbnb/polyglot.js">Polyglot.js</a> 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:</p> <ul> <li>Basic translation features</li> <li>Interpolation</li> <li>Pluralization</li> </ul> <p>It may become and 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!</p> <h3> Loading Files </h3> <p>Polyglot has no external dependencies at all, so all you need to do is hook up the main file:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>\&lt;!DOCTYPE html\&gt; \&lt;html\&gt; \&lt;head\&gt; \&lt;meta charset="utf-8"\&gt; \&lt;/head\&gt; \&lt;body\&gt; \&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/polyglot.js/2.2.2/polyglot.min.js"\&gt;\&lt;/script\&gt; \&lt;/body\&gt; \&lt;/html\&gt; </code></pre> </div> <h3> Providing Translations and Using It </h3> <p>Now we can provide translations (aka “phrases”) and set the default locale:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>var polyglot = new Polyglot({ locale: 'en', phrases: { "message\_count": "%{smart\_count} message |||| %{smart\_count} messages" } }); </code></pre> </div> <p>In this example the default locale is English. Also there is a <code>message_count</code> key that provides singular and plural forms separated with 4 pipelines (for other languages there may be more forms). Oddly enough, <a href="https://github.com/airbnb/polyglot.js#pluralization">pluralization relies on the <code>smart_count</code> interpolated value</a>, so you must provide it in the following way:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>console.log(polyglot.t('message\_count', {smart\_count: 2})); </code></pre> </div> <p>This is it! There is not much else to say about the translation process, as it relies only on the <code>t</code> function. You may find some more examples of using Polyglot in the <a href="https://github.com/airbnb/polyglot.js#translation">official doc</a>.</p> <h2> Summing Everything Up </h2> <p>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:</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aORn_JVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.lokalise.co/wp-content/uploads/2019/01/Untitled-1.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aORn_JVF--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://blog.lokalise.co/wp-content/uploads/2019/01/Untitled-1.jpg" alt=""></a></p> <p>A couple of things to note:</p> <ul> <li>I18next <a href="https://github.com/i18next/i18next-gitbook/blob/master/translation-function/formatting.md">does support various formatting</a> but it requires external dependencies like <a href="https://momentjs.com/">moment.js</a> </li> <li>jQuery.I18n requires CLDR Parser only for pluralization</li> <li>I18next provides lots of plugins to connect with client-side framework, but other solutions can play nicely with frameworks as well (you may just need to spend more time to integrate everything)</li> <li>You may work with gender information (and, more broadly speaking, with contexts) in any library — it just may be less convenient and present more complexeties</li> </ul> <p>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.</p> <h2> Make Your Life Easier With Lokalise </h2> <p>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 <a href="https://lokalise.co/features">makes working with the localization files much simpler</a>. Let me guide you through the initial setup which is nothing complex really.</p> <ul> <li>To get started, <a href="https://lokalise.co/signup">grab your free trial</a> </li> <li>Create a new project, give it some name, and set English as a base language</li> <li>Click “Upload Language Files”</li> <li>Upload translation files for all your languages</li> <li>Proceed to the project, and edit your translations as needed</li> <li>You may also contact professional translator to do the job for you</li> <li>Next simply download your files back</li> <li>Profit!</li> </ul> <p>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!</p> <h2> Conclusion </h2> <p>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 fully suits you. Don’t be afraid to research, experiment, and ultimately pick the tool that works for you! After all, it will be more complex to switch to another localization library when your application is half-finished.</p> <p>I thank you for staying with me, and until the next time!</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Y3OM-Rvp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyb3bjwgveq1wxn7vwr7.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Y3OM-Rvp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/wyb3bjwgveq1wxn7vwr7.png" alt=""></a></p> <p>The post <a href="https://blog.lokalise.co/comparing-libraries-translating-js-apps/">Libraries for translating JavaScript apps</a> appeared first on <a href="https://blog.lokalise.co">Lokalise Blog</a>.</p> javascript libraries localization i18n