Head note: Sorry folks, project discontinued and cannot be maintained because of financial problems. Article here will stay for inspiration for other fellow developers.
Today I’d like to introduce you our new service called T9N Manager.
BLUF: It is free for personal and open-source projects. Also has paid version for commercial use with extended functions, in very soon future.
Building a large scale application is hard for teams, harder for single developers with low budget and much more harder for anyone if the application is multilingual.
We’ve experienced that first hand during our ongoing project, then T9N Manager was born. As it became a standalone module within our application, we wanted to separate and share into the world of developers.
We are working mostly on Vue.js at the front and PHP at the back-end. So the translation files we produce are should be usable with vue-i18n. It basically requires file formats like this:
// translations-all.jsexport const messages = {
en: {
message: {
hello: "hello world!"
}
},
tr: {
message: {
hello: "merhaba dünya!"
}
}
}
With a proper configuration, you can separate translations into distinct files:
// en-US.jsexport const messages = {
message: {
hello: "hello world!"
}
}// tr-TR.jsexport const messages = {
message: {
hello: "merhaba dünya!"
}
}
And get rid of named exports:
// en-US.jsexport default {
hello: "hello world!"
}// tr-TR.jsexport default {
hello: "merhaba dünya!"
}
As the amount of your keys (eg. hello in above examples) increases, it’ll become harder and harder to keep those files synchronized. Most of the time vue-i18n or some other plugin of your framework will tell you when a particular key missing on a file, but it’ll not ease the pain of walking two steps forward and one back each time you forget to add a key to your second or third (even fourth?) class translations file.
I don’t even want to mention what happens when you decide a key is not very definitive for the context it has and needs to be changed. You know what I mean right? I bet yes, you do developer. Now you go back all of your translations files and find that ugly key and replace with new one.
Then T9N Manager comes to help you.
When you register and login to T9N, the Projects screen welcomes you with emptiness:
T9N works with Translation Projects. You should create a project first:
We have 700+ locales listed in our database, thanks to jacobbubu. You can search and add how much you want to include into your project. There are also -only informative purpose for the moment- Status and Default language options. Default language option will allow users to produce files like this;
// tr-TR.jsexport default {
"hello world!": "merhaba dünya!"
}
So, if you define your keys with the translations of native language of your app, which is English (US) for the above example, you will not need to produce a en-US.js file each time.
After you create the first project, it’ll be shown on the list like this:
The pale-blue line (a progress bar actually) below the project name shows the progress of your keys/translations state in percentage. So you’ll know how far you gone.
When you enter the project by clicking the open book icon at the beginning of the list, you’ll see this screen:
You can start a project from nothing just by clicking Create a Key button or import your existing translation files by dragging and droping into the screen. File imports currently supports js and json files and we have a plan to include XML files very soon.
You can select and unselect the keys listed on sidebar. When you select a key you’ll see the screen above. Rename this key field shows prefix of root just for information. When you need to use this key in your files, for example Vue.js with vue-i18n plugin, it should be used like this: $(‘hello’)
Now we came to the fancy parts.
We wanted T9N to be faster than editing js files on your IDE. To accomplish this idea, we’ve developed a way to create new keys under parent keys with dot notation.
Normally, to create new keys under another key, you have to select the key and click Create a Key button again. It’s not so hard for a single child key, but it becomes an exhausting work when you need to create a key tree like this:
export default {
"modules": {
"layout": {
"sidebar": {
"alerts": {
"some-alert": "hey yo!",
"some-negative-alert": "nope dude!"
}
}
}
}
}To end up a nested object like this above, to create the some-alert key, one should click the Create a Key button for five times and press enter.
To overcome this issue, we’ve implemented dot notation to key renaming function. You just need to use dots between new keys when you updating a soon-to-be parent key:
When you hit the Update Key button, you’ll see your sidebar with a new look:
Creating keys are fast. But what about relocating them? We also developed a faster version of cuting from there and pasting over here. There’s a secret menu next to Keys List title. Lets click the Relocate Selected Key item.
When you click it, sidebar turns into Key Relocation Mode;
You can select a new parent key, press Esc to cancel or click cancel icon. Once you select a new parent, it needs you to update the key with new parents structure:
You can update the key here with new parent, or cancel the relocation by hitting Revert to Original button.
Without using the relocation link inside the menu, you can always use Edit Parent Keys button to relocate a key to another parent.
When you on this screen above, you can create new parent keys too. Just type your new key names in Relocate this node field and hit Enter.
When you update the key, you’ll see your new structure on sidebar:
Now you know how to create and relocate keys. It’s time to export our files. Go to the secret menu and find/click Export Project link.
In this screen, you should select the locale from left, rename your file name if you want to, add some headers if you need to exclude this file from your linters. You also have option for exporting a pure json file or js file with default or custom export expression. If you port the browser’s downloads target to your languages folder, you will not be doing copy/pasting downloaded files from your downloads folder to your project.
There are a lot to tell about T9N, but most of it is the content of its documentation.
Vue.js and Quasar Framework made it possible to create and I personally like to mention those people working hard for the open source universe.
Please share this post if you’d like to use T9N for your current or next project and show us your support.
