[BalkanRuby 2019] Getting ready for I18n, Shopify case study

Hello! Здравейте! Bonjour! ¡hola! Balkan Ruby 2019-05-17

Edouard Chin https://github.com/Edouard-chin @DaroudeDudek

2,000,000+ LOC 120,000+ Tests Some Ruby Stats Lot of hardcoded
strings

Main location of hard-coded strings • HTML / ERB (Views)
• Ruby (Helpers, Controllers) • Javascript

ui-journey-bar::before { content: 'Next: '; }

Getting ready for internationalization, Shopify's case study Balkan Ruby 2019-05-17

1) Translate your product !"#$%

/“(.*)”/

Detect hard-coded strings visible by the user def my_endpoint if
params['something'] render(plain: 'Hello World!') end end

Stop the bleeding

Static code analysis

<html> <body> <%= link_to('Click here', 'https://example.com') %> Hello World! </body>
</html>

ui_flag ui_title ui_content_list ui_banner … …

link_to('Click here', 'https://example.com') content_tag(‘div’, ‘Ask me!’)

# @example # # bad # {a:3} # # #
good # {a: 3} class SpaceAfterColon < Cop MSG = 'Space missing after colon.' def on_pair(node) return unless node.colon? colon = node.loc.operator add_offense(…) end # ... end

link_to -> LinkToCop Button -> ButtonCop … …

link_to('My link', 'https://example.com') content_tag('div', 'Hello') Positional arguments

ui_flag(country: 'US', label: 'Make it great again') Keyword arguments

submit(_, data: { confirm: ‘Send!' }, confirm: ‘data’) Options Hash

form_for @book do |f| f.check_box(:paid, {}, 'Yes', 'No') a.check_box('data') end
Blocks

class UIRadioButtonHelper < Cop include BlockOutputHelperBehavior UI_HELPER_NAMES = { form_for:
:ui_radio_button } def forbidden_kwarg?(kwarg) %w(label help_text).include?(kwarg) end def argument_check_required?(index) index > 0 end end

form_for :book do |form| form.ui_radio_button( :genre, label: ‘horror', help_text: 'Scary
books’ ) end

def_node_matcher :ui_block_helper, <<-PATTERN (block { (send nil? #ui_helper_method_names ...) (send
(lvar _) #ui_helper_method_names) } (args (arg $_)) $(...)) PATTERN RuboCop NodePattern https://rubocop.readthedocs.io/en/latest/node_pattern/

<html> <body> Hello World! </body> </html>

<html> <style> p { background: white; } </style> </html>

ERB-Lint https://github.com/Shopify/erb-lint

<%= link_to('MyLink', _) %> ERB-Lint link_to('MyLink', _)

ERB-Lint https://github.com/Shopify/erb-lint

RuboCop autocorrection

link_to(‘My Link', _) link_to(I18n.t('path.to.file.my_l'), _) en: path: to: file: my_l:
'My Link'

en: path: to: file: my_l: 'My Link %{here}’ link_to("My Link
#{here}", _) link_to(I18n.t('path.to.file.my_l', here: here), _)

<%= I18n.t(:translation_key_html) %> <%= t(:translation_key_html) %>

bin/rubocop -only I18n .

Ruby I18n or gettext ?

I18n.t('some.namespace.key') en: some: namespace: key: 'Hello!' "Hello!" Ruby-i18n

"Hello!" _("Hello!") gettext .po/.mo ﬁles to store translations

https://github.com/grosser/fast_gettext/blob/ master/Readme.md#comparison

Pseudolocalization

Ŵḛḛḅḥṓṓṓṓḳ ṡααṽḛḛḍ ṡṵṵͼͼḛḛṡṡϝṵṵḽḽẏẏ Webhook saved successfully

egg topper Eierschalensollbruchstellenv erursacher

https://github.com/Shopify/ pseudolocalization

MySQL character set

“".bytesize => 4

Unicode Basic Multilingual Plane

Utf8mb4

Expose your app to UTF8 characters

Translation vs Localization

" % May 3, 2019 2019-05-03 03/05/2019 YYYY-MM-DD (ISO 8601)
DD/MM/YYYY

) 2019-03-05 2019-05-03 03-05-2019

1PM VS 13:00

Edouard Chin  902-210 Gloucester Street    Ottawa ON K2P 2K4

Edouard Chin    Ottawa ON K2P 2K4

Edouard Chin    Ottawa K2P 2K4 Canada

"Miss #{last_name} #{first_name}  #{apartment} #{street} #{postal_code} #{province}"

… name: 'United States' week_start_day: 'sunday' format: edit: "{firstName}{lastName}_{company}_{address1} _{address2}_{city}_{country}{province}{zip}_{phone}"
show: "{firstName} {lastName}_{company}_{address1} _{address2}_{city} {province} {zip}_{country}_{phone}"

const address = { company: 'Shopify', firstName: '恵⼦子', lastName: '⽥田中',
address1: '⼋八重洲1-5-3', address2: '', city: '⽬目黒区', province: 'JP-13', zip: '100-8994', country: 'JP', phone: '', }; const addressFormatter = new AddressFormatter('ja'); await addressFormatter.format(address); /* => ⽇日本〒100-8994東京都⽬目黒区⼋八重洲1-5-3 Shopify ⽥田中恵⼦子様 */

https://www.npmjs.com/package/@shopify/address

Edouard Chin https://github.com/Edouard-chin @DaroudeDudek

[BalkanRuby 2019] Getting ready for I18n, Shopify case study

[BalkanRuby 2019] Getting ready for I18n, Shopify case study

More Decks by Edouard Chin

Other Decks in Programming

Featured

Transcript