Localizing Webmaker

by David Humphrey

Last week I was in Toronto for the Mozilla Foundation All Hands, and one of the topics that came up was localization.  With Webmaker, Mozilla is trying to move into new communities on the web, and engage with makers on a global scale.  Global obviously means more than English, and for a long time we've heard from devs and users that they want to see it all localized.

I hear from a lot of people who want to translate strings, and the energy around this type of contribution is amazing.  We've even dipped our toe in the localization waters, with Atul experimenting on localizing parts of Thimble.  However, we haven't taken it on systematically, which is what proper localization needs.  I've have been hesitant to just dive in, because a) localization is hard; b) localizing with a mix of node.js, client-side JS, and HTML is hard; c) localizing more than 15 repos at the same time is hard to co-ordinate; d) etc.  And yet we need to do it, we want to do it, and we are doing it.

This summer at CDOT, I've got 4 full-time students working on Mozilla Webmaker, and another two students working on finishing our WebVTT implementation in Firefox.  When I was doing my hiring, I had my eye out for students who could work on the localization problem with me.  I was thrilled when Ali and Igor showed up.  Both of them have lived all over the world, and between them they can speak/read/write 10 different languages!

This week the three of us sat down to try and prototype a technical solution for localizing all our strings across the many Webmaker tools, sites, APIs, and repos.  At a high level, Webmaker is:

  • Many node.js Express apps using nunjucks for server-side templates
  • A lot of custom node modules
  • A ton of client-side JS, the majority of which is built using Require.js
  • Lots of static and templated HTML and CSS (written with LESS)
    And, surprise! surprise! we have strings in every part of it, strings in script! strings in elements! strings in configs! strings here, strings there, strings for everyone!  None of the code was written to be localized, so localizing means more than just string translation--it also means refactoring and restructuring both front-end and back-end code to make strings extractable.

Right now our code is changing very fast as we get ready to switch the entire platform over to this new node-based system in a few weeks, and trying to also refactor strings out from underneath that is problematic.  Added to this is the fact that there's no perfect localization solution for node and client-side JS that fits all our needs.  Lots of people have worked on it, but there isn't one standard way.

In order to figure out a design, we decided to do some experiments and build a few prototypes.  Ali, perhaps jokingly, tweeted that we should write a web app that says "I Love You" in 100 languages.  Great idea!  And so we created amore.webmaker.org.

With amore we were able to try a number of things:

  • Play with and modify the Mozilla Identity's i18n-abide node module, which they wrote about here
  • Experiment with using both accept-language headers and URL based locale rewriting in Express
  • Try mixing Require.js and its Text plugin with server-side string catalogs to create localized DOM fragments client-side
  • Try using Transifex for a complete translation workflow.
    In the end, I'm pretty happy with the results.  Over the coming weeks we'll continue to improve our prototype and work toward creating some reusable modules, middleware, and client-side libraries that can get used across Webmaker.  We're going to be coordinating the work in bug 877232 if you have interest or want to help in any way.

My goal for Ali and Igor is for them to get all of Webmaker's strings localized by the end of the summer and ready for our amazing community to translate in earnest.  We'll be restructuring our code and doing an en_US (or maybe en_CA!) localization in the coming weeks and months, and if you're interested in getting involved stop by the #webmaker channel on irc, or join the Mozilla webmaker-dev list.  You should also follow Igor's and Ali's blogs, where they'll be writing about their efforts.

UPDATE: Ali put an instance of the amore app on Heroku which you can try here.