Miesiąc: styczeń 2021

Spis treści

1. Wprowadzenie
2. Zanim zaczniemy
   1. React Context
   2. CSS Custom Properties (aka CSS Variables)
      1. Czym są CSS custom properties?
      2. Przykład użycia CSS Variables
      3. Kod przykładu na Github
      4. Interaktywny przykład na Github Pages
   3. Prefers-color-scheme
      1. Czym jest prefers-color-scheme?
      2. Przykład użycia prefers-color-scheme
      3. Kod przykładu na Github
      4. Interaktywny przykład na Github Pages
3. Tryb ciemny w React
   1. Przykład
   2. Kod przykładu na Github
   3. Interaktywny przykład na Github Pages
4. Podsumowanie

Wprowadzenie

Tryb ciemny jest standardowym rozwiązaniem w nowoczesnych aplikacjach jak Github. Zmianę trybu na bardziej sprzyjający używaniu komputera po ciemku wspierają już natywnie systemy operacyjne. Na coraz większej ilości stron internetowych, między innymi dokumentacji Material UI, dostępne są przyciski przełączające między trybem dziennym i nocnym.

Sam zapewne używasz trybu ciemnego w swoim IDE, jak większość programistów.

Warto więc wiedzieć, jak w prosty sposób zabrać się za implementację tych trybów w Twojej aplikacji, zwłaszcza że – spoiler alert! – istnieje możliwość sprawdzenia z poziomu CSS i JS, czy system operacyjny użytkownika działa w trybie nocnym i do tego dostosować wyświetlanie w aplikacji.

Najpierw omówimy potrzebne tematy z osobna, a potem wszystko zgrabnie połączymy w prosty przykład obsługi trybu jasnego i ciemnego.

Czytaj dalej „Sprawdź jak zaimplementować tryb ciemny w React”

Spis Treści

1. Wprowadzenie
2. Sortowanie z uwzględnieniem znaków diaktrycznych
   1. Intl.Collator
   2. Przykład sortowania z użyciem Int.Collator.compare
      1. Podpowiedzi z użyciem elementu Datalist
3. Formatowanie dat
   1. Intl.DateTimeFormat
   2. Przykład użycia Intl.DateTimeFormat
4. Tłumaczenie nazw
   1. Intl.DisplayNames
   2. Przykład użycia Intl.DisplayNames
5. Względne formatowanie dat
   1. Intl.RelativeTimeFormat
   2. Przykład Intl.RelativeTimeFormat
6. Kod przykładów na Github
7. Interaktywny przykład na Github Pages
8. Podsumowanie

Wprowadzenie

Internacjonalizacja aplikacji niesie za sobą wiele wyzwań – różne języki w różny sposób formatują daty, liczby czy czas relatywny, są to rzeczy bardzo kontekstowe które nie zawsze da się rozwiązać z poziomu tłumaczeń np. z plików JSON. Wyświetlanie nazw państw, regionów czy jednostek administracyjnych również nastręcza problemów ponieważ jest tego bardzo dużo. Jest też potrzeba formatowania wyświetlania walut.

Choć trzymanie tłumaczeń plikach JSON nie zniknie zapewne nigdy, część przypadków da się rozwiązać natywnie – przy użyciu obiektu Intl. Obiekt ten zawiera metody zwracające obiekty które mogą tłumaczyć relatywny czas czy nazwy krajów w podanym języku, czym oszczędzą nam pracy przy tłumaczeniu aplikacji.

Czytaj dalej „Rozwiąż część problemów wielojęzyczności za pomocą API Intl!”