What articles?!

Everything about i18n and translating Angular apps.

Itch? Scratch! (and share)

Three years back. It is a nice summer day with a soft breeze and it hasn’t rained in days. I am at the office, working. It already sounds like a nice story, but honostly I don’t know what kind of day it was three years back. What I do know is that I was at the office and that we started a new project (called HoorayHR).

Angular would be the front-end framework and ambitions bigger than just the Dutch language, therefor we needed internationalisation. Which Angular has i18n for, works out of the box and it works well. The only downside, the process for creating them was really annoying. This is where the itching starts.

New translations? Good luck finding them all, adding them to your existing translation file and don’t forget to translate anything.

Any source text changed? You probably won’t notice. That’s just waiting for a mistake to be made.

The process was hard and time consuming, it’s easy to make mistakes and I had no focus on the actual text (XML is noisy). You just want to know what you should translate, knowing all changes have been accounted for and that nothing is missing.

First thing I did: search the world wide web for a solution. Back then, I found a desert. In general there was a lot of stuff on the internet to find, sadly nothing related to this problem. Maybe somewhere, but not for me to find. Being a programmer and builder of digital products the first thing you think is “How hard can it be?” and you start hacking away.

That’s the most fun part about creating things. Have an idea, dive into it, research new topics, collect some useful things and put things together. You make visual progress quickly and learn new things. It feels a bit like crafts back in the day at primary school. Taking some paper, glue, spend a bit of time and be happy about making something awesome.

I was in the flow, the result was a really useful tool that our team have been using for years now, it saved a lot of time and mistakes. Time well spent. It also hurts your eyes because it is ugly as a naked cat, that is just a bonus. The itch has been scratched.

What?! prototype screenshot translation

Aside from some quirks you need to know, it actually works really well. You just drop in your stuff and you do your thing. Focus on the actual copy.

What?! prototype screenshot empty state

Now, a few years later, I was curious what the new options would be. To my surprise there are some new projects, but not a whole lot. Most of them lack the focus and simplicity. That’s when I decided to share my creation with the world. I figured that it could scratch some more itch, helping digital creators like you to focus on creating great products without unnecessary distractions.

A nice opportunity to fix some quirks and do some design work to make it actually look nice. Something I wanted to do for a long time. As much as I like ugly UI’s, I like good looking interfaces even more.

What?! tool screenshot translation

I am quite happy with the result, you can check it out at usewhat.app! There are some details I want to fix and along the way I got even more ideas for improving the translation process. If you use Angular’s i18n and/or XLIFF/XLF files, take it out for a spin 🙂

Please let me know if you have feedback. You can reach out to me on Twitter @timetcetera. I love to hear what you think.