Miesiąc: sierpień 2021

Spis treści

1. Wprowadzenie
2. Czym są CSS Variables?
3. Bardzo praktyczne użycie CSS Variables
   1. Implementacja edytora wizualnego do CSS Variables
   2. Klikalny przykład na Github Pages
   3. Pełen kod przykładu na Github
4. Podsumowanie

Wprowadzenie

Przed pojawieniem się CSS Custom Properties (znane też jako CSS Variables) implementacja takich funkcjonalności jak różne motywy, tryb ciemny czy danie możliwości konfigurowania kolorystyki dynamicznie była dość uciążliwa. Preproesory takie jak SCSS wspomagały ten proces poprzez własną implementację zmiennych i możliwość pisania funkcji generujących np różne klasy dla różnych motywów – ale efektem takich działań była spora ilość generowanego kodu, który musiał powstać by zrekompensować brak dynamiki.

CSS Variables pozwalają zmieniać wartości w stylach w pełni dynamicznie – a ten post pokaże, do czego tą właściwość można wykorzystać.

Czytaj dalej „CSS Variables – czemu warto je znać?”

Spis treści

1. Wprowadzenie
2. Fejkowe API dzięki ServiceWorker
3. Zastosowanie React Query
   1. React Query a lista postów
      1. useQuery w liście postów
      2. useMutation w liście postów
   2. Lista komentarzy w poście
      1. useQuery w liście komentarzy
      2. useMutation w liście postów
   3. Pełen przykład React Query na Github
   4. Klikalny przykład React Query na Github Pages
4. Podsumowanie

Wprowadzenie

Dlaczego warto poznać React Query?

Do tej pory w projektach które tworzyłem do zarządzania stanem używany był głównie Redux. Lądowały w nim dane z serwera, stan urządzeń jak np wybrana przez użytkownika kamera i mikrofon czy różne dane potrzebne w wielu miejscach aplikacji jak uprawnienia użytkownika w systemie.

Aplikacje te miały dość rozbudowany stan kliencki, do przechowywania którego Redux jest stworzony. Stan „serwera”, czyli dane naszej aplikacji jest inny w swoim zachowaniu. Zmienia się bez wiedzy frontendu, może być z jakiegoś powodu niedostępny, łatwo też stracić synchronizację z danymi z serwera, które mogą się zmieniać w trakcie pracy klienta.

Stąd, jeśli stan aplikacji to głównie stan serwera a nie stan kliencki, rozsądne wydaje się zastosowanie biblioteki React Query. Zatroszczy się ona o cache danych, przechowywanie w aplikacji i aktualizację na serwerze.

Czytaj dalej „React Query – jak zarządzać stanem serwerowym”