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

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

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

I18n is much easier to integrate into your project early

💡

@elibelly

internationalisation

≠

localisation

@elibelly

react-intl

@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

react + i18n: You have no excuse!

By Eli Schütze Ramírez

react + i18n: You have no excuse!

While about 51% of the world's websites are in English, only about 25% of web users are English speakers.With half of the world’s population online, internationalisation is as crucial as ever. In this talk, we'll explore why all your lame excuses for not internationalising are wrong and how you can get started with i18n today.

3,235