One of the first steps in localizing your codebase is to integrate with a Translation Management System (TMS) and build a translation pipeline.
"But we're just starting," you tell me. "We haven't hired any translators yet!" That's why I tell our clients: build with Pseudo Translation.
What's Pseudo Translation?
Very briefly, it's a technique of emulating translated content without having to actually translate it.
So what's happening here?
ASCII characters become Unicode characters. Each incoming value is assigned a UTF-8 equal of a similar character. This means A becomes à and so on.
The original text gets expanded. If your interface looks good with Pseudo Translated content, it will likely handle more verbose translations well (looking at you, German 👀).
How do we use it?
Let's assume your codebase is 100% hard-coded with English. Here is a high-level summary of you to use Pseudo Translation to build out your translation pipeline.
Find a TMS vendor that supports pseudo.
Some vendors call it Pseudo Localization, others call it Pseudo Translation. The important point is that you should be able to upload a translation string file (manually for via CLI) and it returns the Pseudo Translated version.
Choose a small section of your app.
It could be one screen, or one component; it doesn't really matter at this stage. We're just learning the process, and this is for local + staging environments only.
Start moving hard-coded text into translation files.
Following the guides of your framework + library, create your first translation file. This will probably be something like en-US.json, and begin moving content there. You can start with literally button label.
{"button.label": "Logout"}
Push this content into your TMS and download the Pseudo Translated version.
Either manually or using their CLI tool, upload this file into your TMS. Create a new language of en-XA and have that be your Pseudo language.
Once it applies Pseudo, download the file into your codebase. It will probably be something like en-XA.json.
{"button.label": "世界ĻỗĝỗűẗŚűŤ你好"}
You've just given your codebase its first translation! 😱
Set your codebase's default language to en-XA
Check your frameworks documentation on how to set the default language, it will probably be in your .env file. Update this setting to match your new Pseudo locale.
Boot your app
Running your app locally, pull up any view that uses your button. You should now see it translated!
Next Steps
Obviously this is the very first prototype of translating your codebase. There's a lot to improve from here, but the fundamental pattern will stay the same. That said, here are some next steps you'll probably want to take:
Automate the "push" step
You don't want to manually upload your en-US.json file on each change. Your TMS probably has a CLI that will help you automatically push changes into your TMS project. You can do this step either locally on your machine, or as part of a pipeline.
Automate the "pull" step
Most TMS vendors have a feature that will automatically make a new PR when translations complete. You'll have to go through the process of integrating them into your GitHub account, but it's typically a straightforward process.
A First Step
There's more to do, of course. But what you've just built will not fundamentally change as you add more languages to your codebase. All without hiring a translator.