Front Cave

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!

Spis Treści

1. Wprowadzenie
2. Generatory
   1. Przykład generatora
   2. Kod przykładu generatora na Github
3. Redux Saga
   1. Przykład Sagi
   2. Pełny kod Sagi
   3. Kod przykładu Sagi na Github
4. Podsumowanie

Wprowadzenie

Redux Saga to popularny middleware dla Reduxa, oparty na generatorach. Umożliwia obsługę asynchroniczności w sposób przypominający kod synchroniczny.

Warto poznać tą bibliotekę ze względu na prostotę tworzonego przy jej użyciu kodu – Sagi są dobrym miejscem na izolację logiki naszej aplikacji, oddzielenie jej od UI i od samego Reduxa.

Można pokusić się o pytanie, czemu zamiast Redux Saga nie użyć Redux Thunk wraz ze składnią async / await? Przewagą Sag jest możliwość tworzenia bardziej skomplikowanego flow obejmujące chociażby oczekiwanie na pojawienie się konkretnej akcji.

Czytaj dalej Dowiedz się, jak obsługiwać efekty uboczne dzięki Redux Saga

Spis treści

1. Wprowadzenie
2. Zatrzymywanie się na modyfikacji HTML
   1. Modyfikacja wewnątrz elementu
   2. Modyfikacja atrybutu elementu
   3. Usunięcie elementu
   4. Kod w repozytorium Github
3. React – zatrzymywanie się na modyfikacji HTML
   1. Kod w repozytorium Github
4. Podsumowanie

Wprowadzenie

Możliwość debugowania zmian w HTML była funkcjonalnością, o której sam długo nie widziałem. Co prawda jest ona dużo bardziej użyteczna w JS niż w React, warto jednak o niej wiedzieć – nadal przecież powstają strony nieużywające frameworków JS. Możliwość zapięcia się na zmiany HTML może również być użyteczna w sytuacji, gdy nasza aplikacja używa bibliotek zewnętrznych GUI, by móc sprawdzić np dlaczego jakiś element został ukryty. Stąd ten krótki wpis – myślę że to drobna rzecz o której naprawdę warto wiedzieć.

Czytaj dalej Dowiedz się, w jaki sposób w Chrome DevTools możesz debugować zmiany w HTML

Ten post jest trzecim z serii o GraphQL:

GraphQL w React #1 – poznaj podstawy GraphQL!

GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client

---

Spis Treści

1. Wprowadzenie
2. Zarządzanie cache w Apollo Client
   1. Cykliczne powtarzanie zapytania do serwera
   2. Ręczna aktualizacja cache
3. Dwukierunkowa komunikacja z serwerem za pomocą Subscription i WebSocket
   1. Obsługa Subscriptions i WebSocket na serwerze
   2. Obsługa Subscriptions i WebSocket na kliencie
   3. Kod obu aplikacji na Github
4. Debugowanie za pomocą Apollo Developer Tools
   1. Zakładka GraphQL
   2. Zakładka Queries
   3. Zakładka Mutations
   4. Zakładka Cache
5. Podsumowanie

---

Wprowadzenie

Poprzednie dwa posty omówiły podstawy zastosowania GraphQL zarówno na stronie serwera jak i klienta. Możliwości Apollo Client wykraczają jednak daleko poza wysyłanie zapytań na serwer.

Czym więc zajmiemy się w tym wpisie?

1. Cache’owaniem danych przez Apollo Client
2. Dwukierunkową komunikacją pomiędzy serwerem a klientem
3. Debugowaniem za pomocą Apollo Developer Tools

Zmęczenie wadami podejścia REST oraz rosnąca popularność GraphQL powodują, że warto przeczytać ten post i zgłębić wiedzę na temat Apollo Client.

Kod tego posta będzie rozszerzeniem kodu 2 poprzednich: GraphQL w React #1 – poznaj podstawy GraphQL! oraz GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client.

Czytaj dalej GraphQL w React #3 – cache, WebSocket i debugowanie w Apollo Client

Spis Treści

1. Wprowadzenie
2. Dotychczasowe nagrania
   1. CSS GRID – webinar Tarnow Devs
   2. Redux Toolkit – wprowadzenie
   3. Niemutowalność w React z ImmerJS – wprowadzenie
3. Podsumowanie

---

Wprowadzenie

Poza wpisami na blogu, istnieje kanał Frontcave na Youtube. Choć w tym momencie nie jest on tak aktywny jak sam blog, są już plany na kolejne nagrania. Tutaj zaprezentowane zostaną dotychczasowe nagrania.

Czytaj dalej Dotychczasowa działalność Frontcave na Youtube

Ten post jest drugim z serii o GraphQL w React:

GraphQL w React #1 – poznaj podstawy GraphQL!

Spis Treści

1. Wprowadzenie
2. Użycie klienta Apollo Client do załadowania danych z serwera
   1. Wystartowanie serwera
   2. Utworzenie klienta i pobranie danych z serwera
      1. Udostępnienie klienta w aplikacji
      2. Pobranie i wyświetlenie danych za pomocą hooka useQuery i zapisanie danych za pomocą hooka useMutation
         1. Komponent Animals i pochodne – ładowanie danych przez useQuery
         2. Komponent Owners i zapisywanie danych przez useMutation
   3. Kod aplikacji na Github.
   4. Pełny kod aplikacji
3. Podsumowanie

Wprowadzenie

Ponieważ w poprzednim poście przy pomocy biblioteki Apollo Server postawiliśmy serwer GraphQL, dziś używając Apollo Client stworzymy część kliencką aplikacji. Za jej pomocą pobierzemy dane z serwera.

Czytaj dalej GraphQL w React #2 – połącz się z serwerem dzięki Apollo Client