← Wszystkie tematy W 4% ogłoszeń · 2 z 47 ogłoszeń frontend React

Internacjonalizacja

Bajka opowiadana w wielu językach

Internacjonalizacja pojawia się w 2 z 47 ogłoszeń, ale w firmach działających na kilku rynkach jest codziennością. Polskie liczby mnogie to ulubione pytanie, bo wiele osób się na nich wykłada.

Przerobione Opanowane 0 z 3 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„Doświadczenie z aplikacjami enterprise, w tym accessibility, localization, security i compliance”
GS Services · Frontend Engineer | React + Next.js
„Deliver enterprise-grade functionality: localization, accessibility compliance, cross-browser support, and security”
Shelf · Senior Frontend React Developer

Scena pierwsza · liczba mnoga

1 plik, 2 pliki, 5 plików

Po angielsku są dwie formy: file i files. Po polsku są aż cztery: jeden plik, dwa pliki, pięć plików i półtora pliku. A 22 to znowu „pliki”, chociaż 12 to „plików”. Prosty warunek „jeden albo więcej” myli się co chwilę. Intl.PluralRules zna zasady każdego języka. Przesuwaj suwak.

Ile plików?

n === 1 ? 'plik' : 'pliki'

Intl.PluralRules('pl')

Scena druga · daty, pieniądze, liczby

Ta sama bajka w wielu językach

Ta sama data i ta sama kwota wyglądają inaczej w każdym kraju: inna kolejność dnia i miesiąca, inny separator tysięcy, waluta przed albo po liczbie. Nie sklejaj tego ręcznie. Wszystko poniżej liczy prawdziwe Intl w Twojej przeglądarce.

kraj	data	kwota	liczba	za 2 dni

PLN EUR USD

Zmień walutę. Zauważ, gdzie stoi znak waluty i jakim znakiem oddziela się tysiące.

Porównajmy

Ręcznie czy przez Intl i bibliotekę?

	Sklejanie ręczne	Intl + biblioteka i18n
Liczba mnoga	if (n === 1) … else …Działa po angielsku, po polsku myli 5, 12, 25.	Reguły języka z CLDR.`Intl.PluralRules`, format ICU: `{n, plural, one {# plik} few {# pliki} many {# plików} other {# pliku}}`.
Daty	d.getDate() + "." + (d.getMonth() + 1)Zła kolejność w USA, brak nazw miesięcy w dopełniaczu.	Gotowe dla każdego kraju.`Intl.DateTimeFormat`, `Intl.RelativeTimeFormat`, strefy czasowe przez `timeZone`.
Pieniądze	kwota + " zł"Złe separatory i zaokrąglenia.	Waluta i separatory z lokalizacji.`Intl.NumberFormat(locale, { style: "currency", currency })`. Kwoty trzymaj w groszach.
Teksty	Wpisane w komponenty.	Klucze i pliki tłumaczeń.react-intl (FormatJS), i18next, next-intl. Ładowanie języków na żądanie.
Układ	Wszystko od lewej.	Myśli też o arabskim i hebrajskim.`dir="rtl"`, logiczne właściwości CSS (`margin-inline-start`), miejsce na dłuższe teksty po niemiecku.

Cztery formy

Po polsku: plik, pliki, plików, pliku. PluralRules wybierze dobrą.

Nie skleja się

Daty, kwoty i liczby formatuj przez Intl, nigdy przez dodawanie stringów.

Całe zdania

Tłumacz całe zdania z miejscami na liczby, a nie kawałki sklejane w kodzie.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Jak obsłużyć liczby mnogie po polsku (1 plik, 2 pliki, 5 plików)? (Intl.PluralRules, ICU)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Po polsku liczba mnoga ma cztery ubranka: plik, pliki, plików i pliku. Intl.PluralRules wie, które ubranko założyć do której liczby.

Na rozmowę: Polski ma kategorie CLDR: one (1), few (2–4, 22–24, ale nie 12–14), many (0, 5–21, 25…), other (ułamki). Warunek n === 1 myli się przy 5, 12, 25. Używam new Intl.PluralRules('pl').select(n) albo formatu ICU w bibliotece (react-intl, i18next z ICU, next-intl): {count, plural, one {# plik} few {# pliki} many {# plików} other {# pliku}}. Tłumacze dostają całe zdania z placeholderami, a nie sklejane kawałki.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Jak formatować daty, waluty i liczby dla różnych krajów? (Intl)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Ta sama data i te same pieniądze wyglądają inaczej w każdym kraju, więc nie skleja się ich ręcznie, tylko prosi o to tłumacza, który zna zwyczaje.

Na rozmowę: Intl.DateTimeFormat (z timeZone, bo serwer i klient mogą mieć różne strefy, co powoduje hydration mismatch), Intl.NumberFormat ze style: 'currency' i kodem waluty, Intl.RelativeTimeFormat („za 2 dni”), Intl.ListFormat („A, B i C”). Formatery tworzę raz i cache’uję, bo konstruktor jest kosztowny. Kwoty trzymam w najmniejszej jednostce (grosze) albo jako decimal z backendu, nigdy jako float do obliczeń. Locale biorę z ustawień użytkownika lub URL, a nie tylko z navigator.language.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak zorganizować tłumaczenia w aplikacji React i nie ładować wszystkich języków naraz?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Każdy język ma swoją książeczkę z bajkami. Dziecku dajesz tylko książeczkę w jego języku, a nie całą bibliotekę.

Na rozmowę: Klucze w plikach JSON per język i per przestrzeń (namespace) funkcji, biblioteka react-i18next, react-intl lub next-intl. Języki ładowane dynamicznie (import() lub backend HTTP), w SSR tylko potrzebne przestrzenie dla danej trasy. Locale w URL (/pl/, /en/) dla SEO z hreflang. Typowane klucze (TypeScript), wykrywanie brakujących tłumaczeń w CI, platforma dla tłumaczy (Crowdin, Lokalise). W CSS logiczne właściwości (margin-inline-start) i dir='rtl' dla języków od prawej, plus zapas miejsca na dłuższe teksty.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Dziesięć języków do aplikacji, która ma teksty wpisane na sztywno

Panel B2B ma 400 ekranów i wszystkie teksty po polsku wpisane bezpośrednio w JSX. Firma wchodzi na 10 rynków w ciągu pół roku. Zespół tłumaczy jest zewnętrzny, a developerzy nie mogą zatrzymać pracy nad funkcjami.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy planujesz migrację stopniowo i z automatyzacją
Czy znasz format ICU i bibliotekę, która go obsługuje
Czy projektujesz proces z tłumaczami, a nie tylko kod

Odpowiedź seniora

Biblioteka z obsługą ICU MessageFormat (react-intl / FormatJS, i18next z ICU, next-intl lub Lingui), bo polskie odmiany, płeć i liczby wymagają czegoś więcej niż podmiany stringów. Klucze nazywam po znaczeniu i miejscu (checkout.summary.total), nie po treści.

Migracja: codemod lub narzędzie ekstrakcji (np. formatjs extract, Lingui extract) wyciąga teksty z JSX do katalogu wiadomości, reszta ręcznie moduł po module. Reguła ESLint zabrania nowych tekstów wpisanych na sztywno, więc problem nie rośnie. Tłumaczenia ładowane leniwie per język i per obszar aplikacji, nie jeden plik na 2 MB.

Proces: plik źródłowy synchronizowany z platformą tłumaczeń (Crowdin, Lokalise, Phrase) w CI, kontekst i zrzuty ekranu dla tłumaczy, brakujące tłumaczenia z fallbackiem i raportem, pseudo-lokalizacja w testach do wykrycia nieprzetłumaczonych i ucinanych tekstów. Wdrażam rynek po rynku za flagą.

Typowe wpadki

Sklejanie zdań z kawałków: t('masz') + liczba + t('wiadomosci')
Klucze będące polskim tekstem
Ręczne wysyłanie plików JSON do tłumaczy mailem

Dopytają o

Jak obsłużysz teksty pochodzące z backendu i CMS-a?
Jak przetestujesz, że nowy ekran nie ma brakujących tłumaczeń?
Kto zatwierdza tłumaczenia i jak wycofasz błędne?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Wejście na rynek arabski i niemiecki psuje layout

Po dodaniu niemieckiego przyciski i tabele się rozjeżdżają, bo teksty są o 40% dłuższe. Teraz firma chce arabskiego, czyli kierunku od prawej do lewej. Design system ma 120 komponentów z marginesami left i right.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz właściwości logiczne CSS i atrybut dir
Czy projektujesz komponenty odporne na długość tekstu
Czy wiesz, czego nie odwracać przy RTL

Odpowiedź seniora

RTL: atrybut dir na html z języka, a w CSS właściwości logiczne zamiast fizycznych: margin-inline-start, padding-inline-end, inset-inline-start, text-align: start. Migrację robię w design systemie, nie w każdej aplikacji osobno: stylelint z regułą wymuszającą właściwości logiczne i codemod dla istniejących stylów. Ikony kierunkowe (strzałki, wstecz) odwracam, a logo, wykresy czasowe, odtwarzacze i numery telefonów zostają.

Długie teksty: komponenty bez stałych szerokości, przyciski z min-width zamiast width, zawijanie i ellipsis z tooltipem tam, gdzie przestrzeń jest ograniczona, hyphens: auto z lang. Testuję pseudo-lokalizacją, która wydłuża teksty o 40% i dodaje znaki diakrytyczne, oraz wizualnymi testami Storybooka w trybach de, ar i en.

Do tego czcionki z obsługą alfabetu arabskiego i sprawdzenie, czy formularze i liczby zachowują się poprawnie w tekście mieszanym (izolacja kierunku przez bdi).

Typowe wpadki

transform: scaleX(-1) na całej stronie
Osobne arkusze stylów dla RTL utrzymywane ręcznie
Projektowanie w Figmie tylko na krótkich angielskich tekstach

Dopytają o

Jak przetestujesz RTL w CI?
Jak zachowują się flexbox i grid przy zmianie kierunku?
Co z liczbami i datami w tekście arabskim?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

Routing, SEO i wybór języka dla serwisu w wielu krajach

Serwis działa pod jedną domeną, a język wybierany jest na podstawie ciasteczka i Accept-Language bez zmiany adresu. Google indeksuje tylko wersję angielską, użytkownicy nie mogą udostępnić linku po polsku, a wersje krajowe różnią się cenami i walutą.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz strategie adresów dla wersji językowych
Czy wiesz, jak działają hreflang i canonical
Czy odróżniasz język od kraju i waluty

Odpowiedź seniora

Język musi być w adresie: prefiks ścieżki (/pl/, /de/) albo subdomena lub domena krajowa. Prefiks jest najprostszy w utrzymaniu, domeny krajowe dają silniejszy sygnał lokalny i oddzielne ceny. Rozróżniam język od rynku: /de-at/ i /de-de/ mogą mieć ten sam język, ale inną walutę i asortyment.

Każda strona ma tagi hreflang dla wszystkich wersji plus x-default, canonical wskazujący na siebie, a mapa witryny zawiera alternatywy. Automatyczne przekierowanie na podstawie Accept-Language tylko przy pierwszym wejściu na stronę główną i nigdy dla robotów, a wybór użytkownika zapisuję w ciasteczku i zawsze można go zmienić.

Technicznie routing przez middleware (np. next-intl lub i18n routing frameworka), tłumaczone slugi z mapowaniem, generowanie statyczne per język i ładowanie tylko potrzebnego katalogu tłumaczeń. Mierzę zaindeksowane strony per język w Search Console.

Typowe wpadki

Zmiana języka bez zmiany adresu
Wymuszone przekierowanie po IP bez możliwości zmiany
Canonical wszystkich wersji wskazujący na angielską

Dopytają o

Jak przetłumaczysz slugi i obsłużysz zmianę nazwy produktu?
Jak cache CDN ma się do wersji językowych?
Co z treściami, które nie mają tłumaczenia w danym języku?

Zapytaj Claude Rozwiń case Zagraj interviewera