MediaSession API – zarządzaj mediami na stronie spoza przeglądarki!

Spis treści

  1. Wprowadzenie
  2. Zarządzanie mediami
  3. Wygląd UI
    1. Desktop
    2. Mobile
  4. Działający przykład na Github Pages
  5. Pełny kod przykładu na Github
  6. Podsumowanie

Wprowadzenie

Dzięki MediaSession API możemy sterować listą odtwarzania spoza karty przeglądarki, która odtwarza dźwięk/wideo.

Przez to obsługa multimediów odtwarzanych przykładowo na stronie zespołu muzycznego jest dużo prostsza – użytkownik nie musi wracać na stronę i szukać na niej customowych przycisków.

W tym artykule zaimplementujemy bazową obsługę odtwarzania playlisty na stronie i jej kontrolę za pomocą MediaSession API.

Czytaj dalej „MediaSession API – zarządzaj mediami na stronie spoza przeglądarki!”

MediaRecorder API – sprawdź jak nagrywać z poziomu Web!

Spis treści

  1. Wprowadzenie
  2. Użycie MediaRecorder
    1. Jak działa MediaRecorder API?
    2. Pobieranie streamu z kamery
    3. Pobieranie streamu z udostępniania ekranu
    4. Pobieranie streamu z canvasa
    5. Klikalny przykład na Github Pages
    6. Pełny kod przykładu na Github
  3. Podsumowanie

Wprowadzenie

Sporo osób nie wie o istnieniu MediaRecorder API – a umożliwia ono nagrywanie z poziomu przeglądarki internetowej. Warto znać to API na wypadek, gdy będziesz potrzebować zaimplementować np wysyłanie wiadomości głosowych czy wideo – możliwość stworzenia nagrania bezpośrednio z aplikacji może być uznana za wartościową funkcjonalność.

W tym wpisie sprawdzimy jak nagrać wideo z trzech źródeł:

  1. Kamera internetowa
  2. Pulpit użytkownika
  3. Canvas
Czytaj dalej „MediaRecorder API – sprawdź jak nagrywać z poziomu Web!”

Sprawdź jak walidować formularze w czystym JS!

Spis treści

  1. Wprowadzenie
  2. Walidowanie formularzy
    1. Baza pod przykłady
    2. Customowe wiadomości dla walidacji standardowej
    3. Customowy sposób prezentacji rezultatów walidacji
    4. Klikalny przykład na Github Pages
    5. Pełny kod przykładu na Github
  3. Podsumowanie

Wprowadzenie

Walidowanie formularzy nie zawsze jest prostym zadaniem – najczęściej wyłączamy domyślną walidację i piszemy bardzo customowy kod. Okazuje się jednak, że JS ma wbudowane Constraint Validation API a także umożliwia prostą zmianę domyślnych tekstów które pokazywane są użytkownikowi podczas domyślnej walidacji formularza.

Czytaj dalej „Sprawdź jak walidować formularze w czystym JS!”

Dowiedz się czemu warto czekać na pseudoklasę :has!

Spis treści

  1. Wprowadzenie
  2. Pseudoklasa :has
    1. Jak działa pseudoklasa :has?
    2. Jakie pseudoklasa :has ma wsparcie i jaką biblioteką go zasymulować?
  3. Użycie pseudoklasy :has do stylowania formularzy na bazie walidacji pól
    1. Stworzenie skryptu transformującego CSS
    2. Style odpowiadające za kolorystykę walidacji
    3. Wymagany kod JS
    4. Efekt działania aplikacji
    5. Klikalny przykład na Github Pages
    6. Pełny kod przykładu na Github
  4. Podsumowanie

Wprowadzenie

Stack Overflow pełen jest pytań o to, czy w CSS istnieje „parent selector”. O ile możemy stylować dzieci bazując na tym, kto jest rodzicem – w drugą stronę póki co to nie działa.
Na szczęście w specyfikacji znajduje się pseudoklasa :has – a dzięki sprytnej bibliotece możemy używać jej nawet dziś, gdy jeszcze żadna przeglądarka go nie wspiera.

Zapraszam do przeczytania wpisu o tym, jak za pomocą tego selektora stylować walidację formularzy.

Czytaj dalej „Dowiedz się czemu warto czekać na pseudoklasę :has!”

CSS Variables – czemu warto je znać?

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ć?”

React Query – jak zarządzać stanem serwerowym

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”