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!”