Eli schütze ramírez

ui developer

@elibelly

👋

  👶🏽    ❤️    🤓    📝   🏡

🇲🇽🇳🇮🇺🇸🇨🇳🇬🇧

united kingdom

nicaragua

Let's talk about internationalisation

(AND WHY YOU'RE AVOIDING IT)

  • I DON'T NEED IT / MY BOSS DOESN'T CARE

  • I don't know much about it

  • I DON'T HAVE TIME/MONEY OR I'LL "DO IT LATER"

  • I HATE JSON FILES

the i18n excuse cheat sheet

@elibelly

i18n? wtf?

🤔

@elibelly

Numeronym

A number-based word, for example:

  • Numbers AS sounds: K9, l8r

  • numbers as meaning: 411, 007

  • adding up the number of letters between the first and last and then using that number instead of the middle of the word, wow, what a good idea : i18n, l10n, a11y

  • ... n7m

@elibelly

i18n? wtf?

🤔

@elibelly

THE internet™

@elibelly

Internationalisation

If you internationalise, you design or develop your application in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language.

W3C Standards

@elibelly

@elibelly

In the 2011 census

in England + Wales had a main language other than English or Welsh

4.2 MILLION PEOPLE

🇬🇧

@elibelly

Icon made by Dot on Paper from www.flaticon.com 

Languages of Websites

internet users by language

🌍🌎🌏

@elibelly

internationalisation

is part of accessibility

 

 

💡

@elibelly

@elibelly

Internationalization

If you internationalize, you design or develop your application in a way that ensures it will work well for, or can be easily adapted for, users from any culture, region, or language.

W3C Standards

@elibelly

think about..

  • Language

  • Writing System - é, โลก, 世界

  • Formatting Date, Time, Currency - 01/09/17

  • Writing Direction - RTL, LTR

  • Ordering, Pluralisation - one, few, many

  • Grammar

  • Relative time - 'days ago'

  • Locale

@elibelly

Thank god for unicode

☕️

咖啡

قهوة

coffee

@elibelly

CLDR - COMMON LOCALE DATA REPOSITORY

The most extensive standard repository of locale-specific data

Maintained by Unicode Consortium

Most devs will never see it - usually wrapped in libraries

It's in XML 

 

Locale-specific

Formatting

and parsing

Translations of names of things

Language and scripts

Country

info

Dates

Times

Timezones

Numbers

Currency

Languages

Countries/Cities

Timezones

Months/Weekdays

Currency

Characters Used

Writing Direction

Capitalization

Plural Cases

Sorting rules

Language Usage

Currency

Telephone Codes

Calendar conventions

@elibelly

CLDR TLDR

It's a big fucking repository of all the official locale stuff

@elibelly

ICU

international components for unicode

defines message format for resource strings 

set of C/C++ and Java libraries
wraps cldr

 

@elibelly

  • Welcome, { name } !
     
  • There were { count, number } people there        // 1,000 vs 1.000
     
  • My birthday is { birthday, date , short }      //   04/02/2017 vs 02/04/2017
     
  • { gender, select ,
        male { He likes trains },
        female { She likes trains },
        other { They like trains }
    }
     
  • { count , plural ,
      =0 {No more seats available }
      one {Just a single seat left!}|
      other { # seats left}
    }   // some languages have few and many !

@elibelly

BCP47

LOCALEs ≠ language !

Internet Engineering Task Force

best common practice

Tags for Identifying Languages

@elibelly

[Language Tag]-[Subtags]*
en-US, en-GB
mn-Cyrl-MN
zh-Hant-HK
es-419

@elibelly

👶🏽    ❤️   🤓    📝   🏡

🇲🇽🇳🇮🇺🇸🇨🇳🇬🇧

es_MX      es_NI     en_US  zh_Hans_CN    en_GB

es_419

My Locales

what will you show me?

@elibelly

🚨Javascript alert🚨

@elibelly

ECMAScript INTL API

ECMA 402

@elibelly

@elibelly

I18n is much easier to integrate into your project early

💡

@elibelly

internationalisation

≠

localisation

 

@elibelly

react-intl

@elibelly

@elibelly

@elibelly

@elibelly

1. Load Locale Data

@elibelly

2. ADD CONTEXT

@elibelly

Always let the user choose what locale they want

💡

@elibelly

3. Provide messages

@elibelly

USE COMPONENTS everywhere 🎉

@elibelly

<FormattedMessage
          id="app.welcome_message"
          defaultMessage={`
            Welcome {name}, you have received {unreadCount, plural,
                =0 {no new messages}
                one {{formattedUnreadCount} new message}
                other {{formattedUnreadCount} new messages}
            } since {formattedLastLoginTime}.
        `}
          values={{
            name: (
              <b>
                {this.state.name || (
                  <FormattedMessage id="app.you" defaultMessage="you" />
                )}
              </b>
            ),
            unreadCount: unreadCount,
            formattedUnreadCount,
            formattedLastLoginTime,
            gender,
          }}
        />

@elibelly

If you hate json
you can do some babely  webpackY magic 

@elibelly

internationalise

all the things!

@elibelly

🙏 Thank you 🙏

@elibelly

@elibelly

Made with Slides.com