Autor: Radek Anuszewski

Spis treści

1. Wprowadzenie
2. Implementacja
   1. Liczenie rerenderów komponentu
   2. Podejście standardowe
   3. Podejście z przeniesieniem tworzenia obiektu
3. Działająca aplikacja na Github Pages
4. Pełen kod aplikacji na Github
5. Podsumowanie

Wprowadzenie

W jednym z poprzednich wpisów:

Nie przekazuj obiektów jako props w Redux – sprawdź czemu!

Pisałem o tym, dlaczego należy uważać na przekazywanie obiektów jako propsy – najlepszym wtedy rozwiązaniem wydawało mi się przekazywanie typów prostych które są odporne na problemy z referencjami.

Szczególnie łatwo wpaść w kłopoty używając funkcji connect, czyli sprzed pojawienia się hooków – ale nadal używanej w wielu projektach.

Nie da się jednak ukryć że nie jest to najpraktyczniejsze rozwiązanie i przekazanie obiektu jest często czytelniejsze. Jak więc pogodzić obie zalety – wygodę obiektów i dobrą wydajność?

Kluczowe jest miejsce tworzenia obiektów, już po użyciu funkcji connect – co opiszę w tym wpisie 🙂

Czytaj dalej „Twórz obiekty i tablice ostrożnie pracując z React Redux i connect!”

Spis treści

1. Wprowadzenie
2. Region Capture
   1. Konieczność udostępnienia obecnej karty
   2. perferCurrentTab
   3. Przycinanie z CropTarget i cropTo()
   4. getViewportMedia
3. Działająca aplikacja na Github Pages
4. Pełen kod aplikacji na Github
5. Podsumowanie

Wprowadzenie

Podczas udostępniania ekranu na Web możemy się obecnie spodziewać dwóch problemów:

1. Udostępnienia nie tego ekranu / taba którego chcieliśmy
2. W tabie który chcieliśmy udostępnić znajdują się rzeczy, których nie chcemy pokazywać innym (jak np stan konta)

Pierwszy problem rozwiążemy przy pomocy Capture Handle, o którym pisałem w poprzednim wpisie:

Użyj Capture Handle do wsparcia sterowania udostępnianą zakładką!

Rozwiązanie drugiego problemu pojawiło się w Chrome Canary i nie jest jeszcze dostępne nigdzie indziej (stan na 26.06.2022). Mowa o Region Capture.

Pozwala ono przyciąć udostępnianą kartę do rozmiaru zdefiniowanego przez nas elementu.

Zapraszam do artykułu, w którym zobaczymy jak takie przycięcie zaprogramować 🙂

Czytaj dalej „Udostępniaj tylko to co chcesz z Region Capture!”

Spis treści

1. Wprowadzenie
2. Implementacja zarządzania prezentacją przy pomocy identyfikacji z Capture Handle
   1. Strona z prezentacją
   2. Strona zarządzająca prezentacją
3. Kod aplikacji na Github
4. Klikalna wersja aplikacji na Github Pages
5. Podsumowanie

Wprowadzenie

Dzięki API getDisplayMedia mamy możliwość udostępniania innym naszego ekranu – dzięki temu możemy np zrobić prezentację online. Jeśli jednak chcemy jednocześnie mieć jakieś notatki do tej prezentacji, musimy je mieć na drugim ekranie by móc z nich skorzystać. Musimy przełączać się między tabem z prezentacją gdzie są slajdy a innym tabem / ekranem gdzie są notatki, co będzie irytować odbiorców.

Z pomocą przychodzi API Capture Handle. Pozwala ono zidentyfikować stronę jaka jest nam udostępniana. Jeśli udostępniana jest właściwa strona możemy zestawić komunikację – dzięki temu czemu możemy z poziomu taba z notatkami sterować slajdami na tabie z prezentacją.

Dokładnie ten przypadek opracujemy w tym artykule – zapraszam do czytania 🙂

Czytaj dalej „Użyj Capture Handle do wsparcia sterowania udostępnianą zakładką!”

Spis treści

1. Wprowadzenie
2. Zastosowanie MediaTrackConstraints w robieniu zdjęć
3. Kod przykładu na Github
4. Działający przykład na Github Pages
5. Podsumowanie

Wprowadzenie

Dzięki opisywanemu już tu przeze mnie Image Capture API można za pomocą JS robić zdjęcia za pośrednictwem kamery/aparatu:

Sprawdź jak dzięki ImageCapture zrobisz zdjęcie prościej w swojej aplikacji

Możesz jednak podnieść poziom robionych zdjęć za pomocą MediaTrackConstraints dla robienia zdjęć.

Przeczytaj ten artykuł by zobaczyć, jak regulować takie wartości jak jasność czy nasycenie zdjęcia. Dowiesz się też, jak włączyć lampę w aparacie telefonu by zawsze mieć dobre oświetlenie 🙂 Zapraszam do czytania!

Czytaj dalej „Podnieś robienie zdjęć na Web na wyższy poziom z MediaTrackConstraints!”

Spis treści

1. Wprowadzenie
2. Eksperymenty implementacyjne
   1. Zwykły useSelector
   2. Zwykły useSelector + memo na komponencie
   3. Zwykły connect
   4. Connect z memo
   5. useSelector z shallowEqual
   6. useSelector pobierający proste wartości
   7. Connect pobierający proste wartości
   8. Connect z mapStateToProps który zwraca tylko jeden obiekt
3. Kod przykładów na Github
4. Działający przykład na Github Pages
5. Podsumowanie

Wprowadzenie

Kwestie wydajności to jedna z tych rzeczy, którą w Redux popsuć niełatwo. Często jednak wiele mikroproblemów potrafi spiętrzyć się w jeden duży kłopot – aplikacja z każdą nową funkcjonalnością działa coraz wolniej a my, deweloperzy jak i testerzy, nie widzimy problemu na naszych ponadprzeciętnie szybkich urządzeniach. Aż z problemem wydajności aplikacji zgłasza się klient, i wtedy następuje paniczne poszukiwanie źródła problemu, gdzie często zamiast jednego dużego jest kilka mniejszych źródeł.

W tym artykule spojrzymy na wydajność pod kątem liczby i powodów rerenderów w aplikacji używającej Reduxa gdy używamy obiektów- ułatwień od twórców biblioteki, dobrych praktyk i potencjalnych nieoczywistych pułapek.

Zapraszam do czytania 🙂

Czytaj dalej „Nie przekazuj obiektów jako props w Redux – sprawdź czemu!”

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