Translations

[SachaG]

Update: see readme here

---

This thread will contain all info related to translating the State of CSS and State of JS surveys going forward.

Getting Started

The YAML files to translate live in this current repo, which contains our API:

• https://github.com/StateOfJS/state-of-js-graphql-results-api/tree/master/src/i18n

IMPORTANT: also check that there aren't any existing PRs for the language you want to translate first!

Getting Credit

Every translator will be credited on any site that makes use of the translations, starting with the survey-taking app. You can add your name here if it's not already there.

• https://github.com/StateOfJS/state-of-js-graphql-results-api/blob/master/src/i18n/locales.yml

Translation API

You can get extra data such as the completion percentage for a locale or the untranslated strings via our API, available at:

• https://graphiql.stateofjs.com/

Here is a sample query:

query GetLocaleData {
  locale(localeId: "ru-RU") {
    completion
    totalCount
    translatedCount
    translators
    untranslatedKeys
  }
}

Translation Files

Surveys App

These strings are related to the app that you use to fill out the actual survey.

• surveys.yml
• accounts.yml
• state_of_js_2020_survey.yml

Results App

These strings only appear in the static site that displays the survey results and stats.

• results.yml
• state_of_css_2020.yml
• state_of_js_2020.yml

Both

These strings appear in both.

• common.yml
• state_of_css.yml
• state_of_js.yml

Other

• homepage.yml

Joining Translation Teams

It's recommended you join the translation team for the language you want to translate.

Previous Translations

You may also want to take a look at previous year's translations if that helps:

• State of JS 2019
• State of CSS 2019

[SachaG]

Actually I've realized we need to give translations their own repo to facilitate the translation workflow and be able to give write permissions to translators, so I will move the translation files shortly. New thread is here:

Devographics/Translations#1

Sorry for all the confusion!

[SachaG]

More thinking on the topic, I've now come to the conclusion that

1. we need to give each locale its own repo
2. we need to automate this entire process

Until that's done, let's keep things here and forget about the StateOfJS/Translations repo. I apologize for the back and forth, but it's really not simple to figure out a good workflow!

[SachaG]

The new workflow we have in mind would be something like:

1. A change is made to the locale-en-US repo.
2. This triggers merge PRs to every locale-es-ES, locale-ru-RU, etc. repos.
3. The maintainer team for each repo can then translate the contents of the PR and resolve any merge conflicts.

After that, depending on whichever works best, we would either:

Workflow A

4a. Trigger a rebuild and redeploy of our API (this current repo)
5a. On build, the API app uses the GitHub API to fetch all the locale data from all the locale repos, cache it (in memory? on disk? or in db?), and serve it.

or:

Workflow B

4b. Trigger a second PR from the locale repo to this current repo to update the locale files in it.
5b. PR is automatically accepted which triggers a rebuild and redeploy.

Downside of this second solution: we would duplicate locale files, so we'd have to clearly mark the ones in this repo as auto-generated copies that must never be edited directly.

I'm not familiar with GitHub actions so I don't know how much of the A or B workflow can be handled by them without having to run extra bots, servers, etc. which would be a plus.

[SachaG]

Here's the second round of translations, the new strings for the State of CSS 2020 results:

• 41de34f
• 1a1038d

Sadly we don't have a great translation workflow yet so your best bet is to look at the changes in those two commits and manually replicate them in your locale's files.

We'll have a third round once we've finalized a couple additional charts, along with the introduction and conclusion.

[Omhet]

@SachaG Hi
So are we supposed to make PRs with translations to this repo or there is another one?
I've got a bit confused because of the latter comments in this topic

[Omhet]

@SachaG hey, here is my russian translations for the new strings #68

[Omhet]

@SachaG How can I run the project locally with my translations to check if everything is alright?

[SachaG]

@SachaG Hi
So are we supposed to make PRs with translations to this repo or there is another one?
I've got a bit confused because of the latter comments in this topic

Good question, for now please make PRs to this repo. Eventually we'll have a separate, dedicated repo for each language's translations but I haven't had time to set up the whole system yet.

How can I run the project locally with my translations to check if everything is alright?

It's a bit tricky but basically you need to 1) run this repo locally and 2) run the Gatsby site locally as well while pointing it to your locally-run API. I will write up some more detailed instructions.

[SachaG]

Oh actually sorry, I just realized you wouldn't be able to run this repo locally because you'd need access to our database, which contains a lot of private data… I guess this means we need to split off this part of the API into a different repo eventually, if we want translators to be able to test their translations. Let me think about it!

[SachaG]

More strings to translate:

• ee873ab
• d70028d
• 413c016

We are also adding "picks", which are recommendations from various people in the CSS community. I've made them translatable but I think they're not super high priority since they do represent a lot of work to translate and are not part of the core survey results:

• cd6ac4d

[SachaG]

I've added a cool new feature for translators, "translator mode"!

Go to https://2020.stateofcss.com/hi-in/technologies/css-in-js/ (password: foobar; please don't share that URL until the official launch!) or any other non-English locale and press the option/alt key on your keyboard: you should see all missing strings highlighted. You can click any of them to open a github search that will tell you (hopefully) where to find the string.

In the future we can probably improve this but it should be a good starting point :)

[jpcmf]

Hey guys I would like to contribute with pt-br translate but I didn't find any repo. Can you share with me? Thank you :)

[SachaG]

@jpcmf we discussed this issue before for Spanish (I think?) and the conclusion was that unless there are really meaningful differences between two dialects that make them mutually hard to understand we'd rather aim for a single "neutral" locale than have to maintain two different versions.

I know Brazilian Portuguese does have a lot of differences with Portugal Portuguese though, so maybe we do need both locales in this case? What do you think? Does Wikipedia have a Brazilian Portuguese version for example? If not then I think we can follow their lead and keep a single version.

[ipapoutsidis]

Hello everyone, congs for your effort!
Can I join your group for translation in greek and also the link for join translate team is not working!
I current translate open source The Modern Javascript tutorial, for the greek lang.

[SachaG]

@ipapoutsidis that would be great! Is this link not working? https://github.com/orgs/StateOfJS/teams/translators/teams

If you let me know what the code for the greek locale would be I can create the team and add you manually.

[PeterJSung]

@SachaG hello. i want to survay language of my country(ko-KR). can i add to new language??

[SachaG]

@PeterJSung that would be great! We should definitely add a Korean version :)

[PeterJSung]

@SachaG Great. i`ll add to korean translate file in src/i18n/ko-KR. Sadly, i was too late cause survey already end.

[SachaG]

Happy holidays and almost happy new year to all! I know you've already done a ton of work helping us translate content for both surveys, so I'm mentioning this just in case, and I think it's totally fine if it remains untranslated. But I've been working on an additional report to complement the State of CSS results:

https://deploy-preview-32--stateofcss2020.netlify.app/en-US/report/

It's a more narrative, "scrolly-telling" kind of report. It's the first time we're trying this so it's an experiment for us, but I think it might help us reach new people who missed the survey results the first time around :)

Because this is a single document and not reusable strings, we're storing it as a single .mdx file which should make it easier to translate:

https://github.com/StateOfJS/StateOfCSS-2020/blob/report/config/report/en-US/report.mdx

For now I'm planning on publishing it in English, but if some of you want to translate it to other languages I'll be glad to add them too! Our tentative release date is January 4-5 because we want to get it out and then focus back on State of JS results, but all languages don't have to be ready at the same time.

[mariasimo]

Hi @SachaG! I can translate the report to spanish, if you still need to :)

[SachaG]

@mariasimo that's very nice of you! We already have a spanish version but if you find any as-yet-untranslated strings you can definitely add them to the existing translation.

[darubiomunoz]

Hey, I'd love to help with the french translation of the survey!

[SachaG]

@darubiomunoz avec plaisir! the french version we have is very incomplete still.

[darubiomunoz]

@SachaG That's great! I'm pretty new to open source, I mean green green ahahahha, I was reading the info, but I wasn't able to figure out how to contribute. Could you give a hand? I'd appreciate it a lot!

[SachaG]

You can preview the State of JS 2020 results here! https://2020.stateofjs.com/en-US/ (password: foobar)

[eterv]

Hello. @SachaG
thank you for StateOfJS.
If you want, I want to translate to Korean. How can I help you do that?
just can I PR ?

[SachaG]

@darubiomunoz @eterv yes you can just submit PRs to modify the translation files. Just keep your PRs small so we can try and avoid double PRs for the same strings if other people are also working on the same languages. Since some of the strings are already translated it's a bit inconvenient to figure out what remains to be done… The best way is probably to go through the survey results site and find any untranslated string. You can then option-click the string to figure out its ID, and refer to the english file to know where to add it in your own language's file.

[eterv]

@SachaG Thank you for your help and merge. but How can I view my translation result? I tried to go 2020.stateofjs.com website. Is there any job that I should work? Or can I just wait your process?

[SachaG]

@eterv I'm deploying now, should be ready in five minutes!

[Arkalex]

Hi there! I'm want to see if there is a translation team for Spanish, but the translation teams page returns a 404

[SachaG]

@Arkalex which page returns a 404? in any case you can submit a PR for translating missing spanish strings

[Arkalex]

@SachaG the one you linked in this section:

Joining Translation Teams

It's recommended you join the translation team for the language you want to translate.

But sure! I'll start with the translations as soon as possible!

[eterv]

@SachaG Thank you. But I still can't view Korean data in State of CSS. So please help me 😀

[Plotisateur]

Hey @SachaG ! Could be able to help with French Translation if necessary !

[eterv]

@SachaG Hello.
I still found some untranslated parts. The problem is that yml files do not contain these parts.

For example,
'Changes Over Time', 'Technology Usage Cardinality' at https://2020.stateofjs.com/ko-KR/technologies/
'Enhance your App with Rich Editing Capabilities from Froala' at bottom of https://2020.stateofjs.com/ko-KR/other-tools/
and etc...

These cases have still not been translated in other languages, too.
So, could you help me check this?

And in stateofjs.com, stateofcss.com, could you please insert 'Korean' in 'Available Languages' at the top of the main page, and my 'name' in 'Translation Help' at the bottom of the main page?

[SachaG]

You can see what keys are untranslated by running this query on https://graphiql.stateofjs.com:

query reactQuery {
  locale(localeId: "ko-KR") {
    label
    untranslatedKeys
    completion
  }
}

It's not perfect because it doesn't tell you where the keys should go, for that you just have to refer to the english files… we'll try to improve the system for next year, sorry!

(Also some strings like "Enhance your App with Rich Editing Capabilities from Froala" are part of sponsored content and are not translatable)

[SachaG]

@Plotisateur thanks! do you need any help?

[AnandaRafaele]

@jpcmf we discussed this issue before for Spanish (I think?) and the conclusion was that unless there are really meaningful differences between two dialects that make them mutually hard to understand we'd rather aim for a single "neutral" locale than have to maintain two different versions.

I know Brazilian Portuguese does have a lot of differences with Portugal Portuguese though, so maybe we do need both locales in this case? What do you think? Does Wikipedia have a Brazilian Portuguese version for example? If not then I think we can follow their lead and keep a single version.

Portuguese from Portugal is different than Portuguese from Brazil because there are a lot of words with different meanings from them. It would be amazing if we could represent both versions of Portuguese on the website. Good that we have people interested in helping us.

[AnandaRafaele]

Hey guys I would like to contribute with pt-br translate but I didn't find any repo. Can you share with me? Thank you :)

If you need any help to translate from English to Portuguese (Brazil), you can count on me!

[sanjiblamichhane]

I will translate to Nepali.

[siva7170]

Hi, how can I add Tamil translation? Please help me.

[EdManDev]

I Would translate to Haitian Creole

[SachaG]

We're getting ready to translate the State of CSS 2021 survey! Each locale now has its own repo, which should make things much easier. See details here: https://github.com/StateOfJS/locale-en-US