1
Learnings from going local(e)
Sandya Sankarram
@sandyaaaas
DonutJS
Slide 2
Slide 2 text
2
Localization isn’t just translation
Slide 3
Slide 3 text
3
Going locale means tailoring
experiences to local
expectations.
Slide 4
Slide 4 text
4
Localization
Adapting an application to the needs of a locale.
Slide 5
Slide 5 text
5
Locale
A set of parameters that dictate the user’s
preferred time, date, currency, collation (sorting)
and language conventions.
fr-FR, en-US, pt-BR
Slide 6
Slide 6 text
6
Language paints a partial picture
of local expectations
Do not conflate locale and language.
Portuguese in Brazil (R$) and Portugal (€).
French in Canada (C$) and France(€).
Slide 7
Slide 7 text
7
Internationalization
Designing a product to be easily adapted to a
specific locale.
It is the enablement of localization.
Internationalization, or i18n
Localization, or l10n
Slide 8
Slide 8 text
8
Internationalization is
easiest when it’s a part of
the roadmap from the start
...but let’s be real
Slide 9
Slide 9 text
9
Planning
Have we done the prework?
What can we accomplish in the time we have?
What locales will we support?
Who will translate?
Slide 10
Slide 10 text
10
Fix inflexible layouts
String expansion is when copy expands
in the target language.
You want dynamic space distribution, not magic numbers.
English: up or down
French: vers le haut ou le bas
Slide 11
Slide 11 text
11
Slide 12
Slide 12 text
12
Do not hardcode heights and widths!
Slide 13
Slide 13 text
13
Flexible container height and width!
Slide 14
Slide 14 text
14
Before and After
Slide 15
Slide 15 text
15
Before and After
Slide 16
Slide 16 text
16
BEM
Block (.button)
Element (.button_label)
Modifier (.button--pink)
Slide 17
Slide 17 text
17
Slide 18
Slide 18 text
18
Other gotchas
US-specific media
Forced capitalization in CSS
Hardcoded formatting
Slide 19
Slide 19 text
19
Choose localization library
What are your must haves?
- Works with React
- Variables
- Pluralization
- Formatting
- JSON translation files
- Active developer community
Slide 20
Slide 20 text
20
React-Intl
Slide 21
Slide 21 text
21
React-Intl
Slide 22
Slide 22 text
22
Include only what’s needed
Don’t do this!
or this!
Slide 23
Slide 23 text
23
Include only what you need
Webpack.config.js
Slide 24
Slide 24 text
24
Slide 25
Slide 25 text
25
Slide 26
Slide 26 text
26
Slide 27
Slide 27 text
27
Slide 28
Slide 28 text
28
Slide 29
Slide 29 text
29
Tag copy
- Denote it needs translating
- Display correct translation
Slide 30
Slide 30 text
30
String concatenation
Slide 31
Slide 31 text
31
Extract copy and translate
en-US.json
fr-fr.json
de-de.json
zh-tw.json
...
Your app Translators
33
View translations in context
Test in every locale you offer.
Modify Headers for Google Chrome™
Slide 34
Slide 34 text
34
Repeat, every time!
Now that your app is localized, you will need
to do all this each time you deliver a feature
Slide 35
Slide 35 text
35
Slide 36
Slide 36 text
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
38
Why should we care?
Slide 39
Slide 39 text
39
Let’s remove barriers
Slide 40
Slide 40 text
40
eating donuts; didn’t listen
- Translation is one part of localization
- Gotta i18n-ize before you l10n-ize
- Avoid US-centric design choices and
formatting
- L10n is important