Translatable HoC languages string based on supported language codes #43096

smusoke · 2021-10-20T22:06:07Z

What: Setting the tutorial's languages attribute displayed on our tutorialExplorer based on the supported language codes instead of a unique string for each tutorial. A user will see all of the languages in their current viewing locale.

Why: This allows each language to be individually translated by each locale and remove the overhead of having to individually translate each tutorial's language string.

Links

jira ticket: FND-1636

Testing story

Tested locally and confirmed English is working as expected. Made dummy translations for another locale and those were shown as expected, with the fallback of English showing when translations didn't exist.

Follow-up work

Next i18n sync will post these new translations to Crowdin

PR Checklist:

Tests provide adequate coverage
Privacy and Security impacts have been assessed
Code is well-commented
New features are translatable or updates will not break translations
Relevant documentation has been added or updated
User impact is well-understood and desirable
Pull Request is labeled appropriately
Follow-up work items (including potential tech debt) are tracked and linked

…nguage codes

pegasus/helpers/hourofcode_helpers.rb

… scrollbar when not needed

daynew

Looks good! Just one comment related to improving a11y support :)

daynew · 2021-10-29T22:41:57Z

apps/src/tutorialExplorer/tutorialDetail.jsx

+        {this.props.item.language
+          .sort((a, b) => (a > b ? 1 : -1))
+          .map(language => (
+            <div>{language}</div>


Minor nitpick, but since this is a list of items, it would be nice to use <li></li> since those are meant for displaying lists. Using HTML elements for their specific purpose helps improve our integration with a11y tools.

Ah yes thanks. Updated to use an unordered list instead.

Ah yes thanks. Updated to use an unordered list instead.

We decided to not go this route actually and stick to a string. The list was considered harder to parse. Related slack thread

breville · 2021-11-04T23:14:04Z

apps/src/tutorialExplorer/tutorialDetail.jsx

+  tutorialDetailLanguages: {
+    overflowY: 'auto',
+    maxHeight: '110px'
+  },


Is this used anywhere?

We should definitely remove this. It is a remnant style of our original solution. Here is a link to the PR for clean up regarding this work.

breville · 2021-11-04T23:41:39Z

pegasus/sites.v3/hourofcode.com/i18n/en.yml

+  zh-cn: "Chinese (Simplified, People's Republic of China)"
+  zh-hans: "Chinese (Simplified) (zh-Hans)"
+  zh-hant: "Chinese (Traditional) (zh-Hant)"
+  zh-tw: "Chinese (Traditional, Taiwan)"


I'm slightly surprised we didn't already translate this list; any chance we did?

Also, is it possible to "indent" these under a parent tag to group them? Or otherwise add a prefix explaining their context?

Also, do we actually need to do this? At least for our language dropdown across the site, we've been alright with showing each language in its own language...

I can't find a thread in regards to our decision making here, but I'll pull in @dju90 here to fill in any context if I miss any. We received feedback from Jake on International that it would be more beneficial to have the languages in these fields to all be in the currently viewing locale.

I'm aware of the cdo_languages table in our Pegasus DB, but that doesn't seem to help at all in our goal to create translations for all languages outside of English. I didn't see any other translation files that would help in our case here either (ex. user viewing in Hebrew reading the translated version of Persian).

In regards to grouping these, I think it makes sense to add a prefix like language_code_ or something. I need to check with Jorge if they've made significant progress on getting translations in other languages for these. If not I can add that change easily.

breville · 2021-11-04T23:42:53Z

pegasus/sites.v3/hourofcode.com/public/learn/index.haml

@@ -128,7 +128,7 @@ social:
  - tutorial[:name]                                 = hoc_s(prefix + "name")
  - tutorial[:shortdescription]                     = hoc_s(prefix + "shortdescription")
  - tutorial[:longdescription]                      = hoc_s(prefix + "longdescription")
-  - tutorial[:language]                             = hoc_s(prefix + "language")
+  - tutorial[:language]                             = hoc_language(tutorial[:languages_supported])


I think this change also needs to be made for https://code.org/learn, here.

In fact, production https://code.org/learn currently has blank language fields due to the strings being removed. Making the same change there should fix it.

Addressed this in this PR as well.

breville · 2021-11-04T23:44:04Z

pegasus/helpers/hourofcode_helpers.rb

@@ -119,6 +119,15 @@ def hoc_get_locale_code
  Languages.get_hoc_locale_by_unique_language(@language)
 end

+# hourofcode.com calls this to translate tutorial's languages attribute


This should also mention code.org when that's fixed, and we could specifically mention that it's used on /learn on each of those sites.

Good callout. Fix in this PR.

breville · 2021-11-04T23:50:12Z

pegasus/helpers/hourofcode_helpers.rb

+
+  # Convert language codes to array and get the translated string
+  language_codes = lang_codes_str.split(',')
+  language_codes.map {|code| hoc_s(code.downcase)}.select {|code| code}.join ", "


Purely out of curiosity, is a comma-separated list the appropriate output for all of our destination locales? (I guess we can confirm by looking at existing translations of the list.)

This was a concern we considered. I have a lack of experience of what obstacles a comma separated list has for certain languages, so I deferred to the team (as well as our input here). The conclusion I believe was to go with this format being it wasn't too detrimental.

breville · 2021-11-05T00:12:03Z

If this removes the need for the language_s column in the cdo-tutorials and cdo-tutorials-preview gsheets, we should coordinate with @ericfershtman to remove it.

feat: new method to create languages string based off of supported la…

870231e

…nguage codes

smusoke requested a review from a team as a code owner October 20, 2021 22:06

smusoke added 3 commits October 20, 2021 17:06

chore: remove unnecessary pry import

2f11f86

update a couple translations after feedback

9f9de0a

update copy for more than 26 alngs

99f713f

daynew requested changes Oct 28, 2021

View reviewed changes

pegasus/helpers/hourofcode_helpers.rb Outdated Show resolved Hide resolved

pegasus/helpers/hourofcode_helpers.rb Outdated Show resolved Hide resolved

smusoke added 2 commits October 29, 2021 14:51

feat: new format for languages using scrollable div

454a9ff

fix: minor code readability change and update div styling to not show…

69da70a

… scrollbar when not needed

daynew approved these changes Oct 29, 2021

View reviewed changes

smusoke added 2 commits November 1, 2021 10:39

feat: use unordered list instead of divs

3e22fad

feat: decided a string is best going back to that format

3ec415c

smusoke merged commit a8c7c03 into staging Nov 2, 2021

smusoke deleted the fnd-1636-individualize-hoc-languages branch November 2, 2021 15:26

breville self-requested a review November 4, 2021 23:07

breville reviewed Nov 4, 2021

View reviewed changes

smusoke mentioned this pull request Nov 8, 2021

HoC supported languages cleanup #43466

Merged

8 tasks

breville mentioned this pull request Nov 9, 2021

fix language string for microbitpet #43487

Closed

hacodeorg mentioned this pull request Apr 5, 2022

Fix missing translations when looking up language codes #45658

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translatable HoC languages string based on supported language codes #43096

Translatable HoC languages string based on supported language codes #43096

smusoke commented Oct 20, 2021 •

edited

daynew left a comment

daynew Oct 29, 2021

smusoke Nov 1, 2021

smusoke Nov 2, 2021

breville Nov 4, 2021

smusoke Nov 8, 2021

breville Nov 4, 2021

breville Nov 5, 2021

smusoke Nov 8, 2021

breville Nov 4, 2021

breville Nov 5, 2021

smusoke Nov 8, 2021

breville Nov 4, 2021

smusoke Nov 8, 2021

breville Nov 4, 2021

smusoke Nov 8, 2021

breville commented Nov 5, 2021

Translatable HoC languages string based on supported language codes #43096

Translatable HoC languages string based on supported language codes #43096

Conversation

smusoke commented Oct 20, 2021 • edited

Links

Testing story

Follow-up work

PR Checklist:

daynew left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

breville commented Nov 5, 2021

smusoke commented Oct 20, 2021 •

edited