𝗟𝗼𝗰𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗦𝗼𝗳𝘁𝘄𝗮𝗿𝗲 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 (Frontend Developers)

#webdev #javascript #learning #localisation

A startup built a product for 6 months.
Launched in Japan. Zero users. App was fully in English. 🤦

Here's what Localisation actually means — and how to do it right 👇

🧠 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗟𝗼𝗰𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻?

👉 i18n (Internationalisation) — designing app to support multiple languages
👉 L10n (Localisation) — actually adapting it for a specific region
👉 They are NOT the same thing

i18n = building the infrastructure
L10n = filling it with regional content

i18n is done once.
L10n is done for every new market.

✔ Language translation
✔ Date, time & number formats
✔ Currency symbols
✔ Text direction (LTR vs RTL)
✔ Cultural sensitivities

📝 1️⃣ 𝗧𝗿𝗮𝗻𝘀𝗹𝗮𝘁𝗶𝗼𝗻 — 𝗡𝗲𝘃𝗲𝗿 𝗛𝗮𝗿𝗱𝗰𝗼𝗱𝗲 𝗦𝘁𝗿𝗶𝗻𝗴𝘀

👉 Every visible string must live outside your code

// ❌ Hardcoded — impossible to translate
<h1>Welcome back, John!</h1>

// ✅ Using i18n keys
<h1>{t('welcome', { name: 'John' })}</h1>

// en.json
{ "welcome": "Welcome back, {{name}}!" }

// ja.json
{ "welcome": "おかえりなさい、{{name}}さん！" }

✔ Use libraries: react-i18next, i18next, react-intl
✔ Keys should be semantic — not the English text itself
✔ Never use Google Translate for production — hire translators

📅 2️⃣ 𝗗𝗮𝘁𝗲 & 𝗧𝗶𝗺𝗲 𝗙𝗼𝗿𝗺𝗮𝘁𝘀

👉 Date formats are wildly different across regions

// ❌ Hardcoded format — confusing globally
"04/05/2025" // Is this April 5 or May 4?

// ✅ Use Intl.DateTimeFormat
new Intl.DateTimeFormat('en-US').format(date)
// → "4/5/2025"

new Intl.DateTimeFormat('en-GB').format(date)
// → "05/04/2025"

new Intl.DateTimeFormat('ja-JP').format(date)
// → "2025/4/5"

✔ Always store dates in UTC internally
✔ Format only at display time
✔ Never hardcode date separators or order

💰 3️⃣ 𝗖𝘂𝗿𝗿𝗲𝗻𝗰𝘆 & 𝗡𝘂𝗺𝗯𝗲𝗿𝘀

👉 Numbers & currency look different in every country

// ❌ Hardcoded — wrong for most of the world
"$1,000.50"

// ✅ Use Intl.NumberFormat
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1000.50)
// → "$1,000.50"

new Intl.NumberFormat('de-DE', {
  style: 'currency',
  currency: 'EUR'
}).format(1000.50)
// → "1.000,50 €"

✔ Decimal separator: . in US, , in Germany
✔ Currency symbol position varies by locale
✔ Always use Intl.NumberFormat — never manual formatting

↔️ 4️⃣ 𝗥𝗧𝗟 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲𝘀 (𝗥𝗶𝗴𝗵𝘁-𝘁𝗼-𝗟𝗲𝗳𝘁)

👉 Arabic, Hebrew, Urdu — entire layout flips direction

<!-- ❌ Hardcoded direction — breaks RTL languages -->
<div style="text-align: left">Content</div>

<!-- ✅ Dynamic direction -->
<html dir="rtl" lang="ar">

<!-- ✅ Tailwind RTL support -->
<div class="text-left rtl:text-right">Content</div>
<div class="ml-4 rtl:mr-4 rtl:ml-0">Icon</div>

✔ Use dir="rtl" on <html> tag
✔ CSS logical properties: margin-inline-start instead of margin-left
✔ Test your entire layout in RTL — icons, buttons, animations all flip

🕐 5️⃣ 𝗧𝗶𝗺𝗲𝘇𝗼𝗻𝗲𝘀

👉 One of the most common bugs in global apps

// ❌ Using local time — breaks for other timezones
new Date().toString()

// ✅ Always work in UTC, format locally
new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Tokyo',
  hour: '2-digit',
  minute: '2-digit'
}).format(new Date())

// ✅ Use date-fns-tz or Luxon for complex timezone logic
import { zonedTimeToUtc } from 'date-fns-tz';

✔ Store all timestamps in UTC in your database
✔ Convert to user's timezone only at display
✔ Never use new Date() for timezone-sensitive features

🔤 6️⃣ 𝗣𝗹𝘂𝗿𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 & 𝗚𝗲𝗻𝗱𝗲𝗿

👉 "1 item" vs "2 items" — every language handles this differently

// ❌ English-only logic — fails in Russian, Arabic
`You have ${count} message${count !== 1 ? 's' : ''}`

// ✅ i18next plural handling
t('messages', { count: 5 })

// en.json
{
  "messages_one": "You have {{count}} message",
  "messages_other": "You have {{count}} messages"
}

// ar.json — Arabic has 6 plural forms!
{
  "messages_zero": "...",
  "messages_one": "...",
  "messages_two": "...",
  "messages_few": "...",
  "messages_many": "...",
  "messages_other": "..."
}

✔ Never build plural logic manually
✔ Use CLDR plural rules via i18next
✔ Arabic has 6 forms. Russian has 3. Plan for this.

🖼️ 7️⃣ 𝗜𝗺𝗮𝗴𝗲𝘀, 𝗜𝗰𝗼𝗻𝘀 & 𝗖𝗼𝗹𝗼𝘂𝗿𝘀

👉 Visuals carry cultural meaning — not just language

✔ 👍 Thumbs up = positive in West, offensive in Middle East
✔ ⚪ White = purity in West, mourning in parts of Asia
✔ Avoid country-specific idioms in illustrations
✔ Flag icons can be politically sensitive

// ❌ Using flags to represent languages
🇺🇸 English  🇫🇷 French

// ✅ Use language names — not flags
EN  FR  DE  JA

⚛️ 𝗥𝗲𝗮𝗹 𝗦𝗲𝘁𝘂𝗽 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁

npm install react-i18next i18next

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n.use(initReactI18next).init({
  lng: 'en',
  fallbackLng: 'en',
  resources: {
    en: { translation: require('./locales/en.json') },
    ja: { translation: require('./locales/ja.json') }
  }
});

// Component usage
const { t, i18n } = useTranslation();
<h1>{t('welcome')}</h1>
<button onClick={() => i18n.changeLanguage('ja')}>日本語</button>

✔ Lazy load translations — don't bundle all languages upfront
✔ Detect browser language automatically with i18next-browser-languagedetector
✔ Store user language preference in localStorage

🚨 𝗖𝗼𝗺𝗺𝗼𝗻 𝗠𝗶𝘀𝘁𝗮𝗸𝗲𝘀

❌ Hardcoding strings directly in components
❌ Using new Date() without timezone handling
❌ Building plural logic manually in English
❌ Using flag icons to represent languages
❌ Adding i18n as an afterthought — design for it from day one
❌ Assuming all text expands the same — German text is 30% longer than English

💡 𝗦𝗲𝗻𝗶𝗼𝗿-𝗟𝗲𝘃𝗲𝗹 𝗜𝗻𝘀𝗶𝗴𝗵𝘁

i18n is architecture. L10n is content. Confuse the two and you rebuild from scratch.
Design for localisation on day one — retrofitting it costs 10x more.

🎯 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗢𝗻𝗲-𝗟𝗶𝗻𝗲𝗿

Localisation (L10n) is the process of adapting software for a specific region — covering language translation, date/time/currency formatting, RTL support, pluralisation, and cultural nuances — built on top of Internationalisation (i18n), which is the architecture that makes localisation possible without rewriting code.

Is your current app localised? Which language did you add first? 👇

#Localisation #i18n #Frontend #ReactJS #WebDevelopment #JavaScript #InterviewPrep #GlobalProduct #EngineeringMindset