New workflow after localized webmaker.org


As you know I have been working on localizing webmaker.org and today I would like to make a quick update plus blog about new workflow for anyone who is working on the project.

Igor and I have been working really hard to get this done and to date we have finished ~99% (if we haven’t missed anything).

Some table of content? :D

What and how it used to be

So, say you want to change some text from any of your HTML element and normally in a non-localize HTML page you would just have go to that page and change it accordingly.

Giving an example of this one:

    <div class="coolClassName">
      <h1>Hello Mr. Ali</h1>
      <div class="subtitle">Thank you Mr. <a href="/user/igor">Igor</a></div>

Or in a case of using any template variables

    <div class="coolClassName">
      <h1>Hello Mr. {{yourname}}</h1>
      <div class="subtitle">Thank you Mr. <a href="/{{username}}">{{someonesname}}</a></div>

So if we want to change something in any of these how do we do it now?

How do we do it now

This is easy, so we are using i18n-abide to localize our project, and nunjucks to render our page.
All we need to do now is using the built-in function call gettext to get the text from messages.json file which is where we store our strings now.

This is how messages.json looks like


  "heading": "Hello Mr. {{yourname}}",
  "subtitle": "Thank you Mr. <a href="/{{username}}">{{someonesname}}</a>"


Now let see how is our HTML will be now.

    <div class="coolClassName">
      <h1>{{ gettext("heading") | filtername }}</h1>
      <div class="subtitle">{{ gettext("subtitle") | filtername | safe }}</div>

Okay… lets stop here before you are going to get lost…. Let me explain what I’m doing here. So, first thing we are using gettext to retrieve some value from key name which located in a file called messages.json then when it finds it then it will replace that in. Second, I have filtername inside there because we are having some template variable inside messages.json where the function gettext gets call after the page has been rendered which causes some of the variable is not replace by the template. Now we are filtering that part with some filtername to re-rendered whatever we are getting, so that can be display correctly!

Another thing is the safe filter. We are using safe filter inside there because we have some HTML markup inside our function gettext which in our project we are doing autoescaping for all variables, so without that safe filter you will see something like this as a result.


Thank you Mr. <a href="/user/igor" {{someonesname}}</a>

That looks wrong! So, with that filter you will see it something like

Thank you Mr. Igor


Thank you Mr. <a href="/user/igor">Igor</a>

Our new workflow

So, if we want to change anything now… All we need to do is follow this step:

  1. Go to the page that you want to change.
  2. Find that paragraph or HTML element that you are looking for
  3. Check the keyname inside that gettext function
  4. Go to messages.json
  5. Change the value inside that keyname inside messages.json
  6. That’s it! You are done…

That way you will help keeping the page localized and maintainable.

It may be more than what you used to do, but this is the only way for now :)