Learns from going local(e)

Learns from going local(e)

58b8bdbc3314947c22bee35addf51a76?s=128

Sandya Sankarram

April 26, 2018
Tweet

Transcript

  1. 1 Learnings from going local(e) Sandya Sankarram @sandyaaaas DonutJS

  2. 2 Localization isn’t just translation

  3. 3 Going locale means tailoring experiences to local expectations.

  4. 4 Localization Adapting an application to the needs of a

    locale.
  5. 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
  6. 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(€).
  7. 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
  8. 8 Internationalization is easiest when it’s a part of the

    roadmap from the start ...but let’s be real
  9. 9 Planning Have we done the prework? What can we

    accomplish in the time we have? What locales will we support? Who will translate?
  10. 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
  11. 11

  12. 12 Do not hardcode heights and widths!

  13. 13 Flexible container height and width!

  14. 14 Before and After

  15. 15 Before and After

  16. 16 BEM Block (.button) Element (.button_label) Modifier (.button--pink)

  17. 17

  18. 18 Other gotchas US-specific media Forced capitalization in CSS Hardcoded

    formatting
  19. 19 Choose localization library What are your must haves? -

    Works with React - Variables - Pluralization - Formatting - JSON translation files - Active developer community
  20. 20 React-Intl

  21. 21 React-Intl

  22. 22 Include only what’s needed Don’t do this! or this!

  23. 23 Include only what you need Webpack.config.js

  24. 24

  25. 25

  26. 26

  27. 27

  28. 28

  29. 29 Tag copy - Denote it needs translating - Display

    correct translation
  30. 30 String concatenation

  31. 31 Extract copy and translate en-US.json fr-fr.json de-de.json zh-tw.json ...

    Your app Translators
  32. 32 en-US.json { “hello”: “Hello!” } fr-FR.json { “hello”: “Bonjour!”

    }
  33. 33 View translations in context Test in every locale you

    offer. Modify Headers for Google Chrome™
  34. 34 Repeat, every time! Now that your app is localized,

    you will need to do all this each time you deliver a feature
  35. 35

  36. 36

  37. 37

  38. 38 Why should we care?

  39. 39 Let’s remove barriers

  40. 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
  41. 41 Thank you! sandya.sankr@gmail.com @sandyaaaas