Radosław Anuszewski / Frontcave.pl
JavaScript, HTML5, CSS3
Ostatnie newsy
Poznaj 4 Powody Dlaczego Przy Code Review Kodu Warto Pobrać Lokalnie Brancha Ze Zmianami
Przez długi czas podchodziłem do CR trochę po macoszemu, przeglądając tylko zmiany w narzędziu do zarządzania kodem i nie interesując się, jak to faktycznie działa. Z perspektywy czasu widzę jednak, że mój CR mógł być znacznie lepszy gdybym analizował kod również lokalnie. Podam Ci 4 powody, dla których warto pobrać brancha lokalnie i jak taka …
3 nieoczywiste miejsca na rozwój programisty – bywasz tam?
Jako programiści powinniśmy nieustannie poszukiwać nowych zasobów. Aby nadążyć za zmieniającym się otoczeniem – ale też by móc wykorzystać nowe możliwości jakie ono daje. Rozwój programisty jest ważny, bo kto stoi w miejscu ten się cofa. A każda pliszka swój ogonek chwali – stąd uważam oczywiście, że miejsca w którym sam szukam są najlepsze 🙂 …
Pozbądź się niebezpieczeństw z Sanitizer API!
Spis treści Wprowadzenie Content dynamicznie generowany, takie jak wiadomości użytkownika, niosą ze sobą ryzyko niebezpieczeństw takich jak wykonanie kodu JS. Do tej pory by się przed tym zabezpieczyć używaliśmy bibliotek, takich jak sanitize-html. Jednak od Chrome 105 dostępne dla wszystkich jest Sanitizer API, do tej pory w Chrome i FF dostępne tylko po włączeniu odpowiedniej …
Przeglądaj pliki na dysku z poziomu Web z File System Access API
Spis treści Wprowadzenie File System Access API Krótkie wtrącenie o Origin Private File System Stworzenie prostej przeglądarki plików tekstowych Założenia Implementacja Działająca aplikacja na Github Pages Pełen kod aplikacji na Github Podsumowanie Wprowadzenie Ukazał się już na portalu post o File System Access API: I w momencie pisania tamtego artykułu wydawało się, że zostanie ono …
Twórz obiekty i tablice ostrożnie pracując z React Redux i connect!
Spis treści Wprowadzenie Implementacja Liczenie rerenderów komponentu Podejście standardowe Podejście z przeniesieniem tworzenia obiektu Działająca aplikacja na Github Pages Pełen kod aplikacji na Github Podsumowanie Wprowadzenie W jednym z poprzednich wpisów: 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 …
Udostępniaj tylko to co chcesz z Region Capture!
Spis treści Wprowadzenie Region Capture Konieczność udostępnienia obecnej karty perferCurrentTab Przycinanie z CropTarget i cropTo() getViewportMedia Działająca aplikacja na Github Pages Pełen kod aplikacji na Github Podsumowanie Wprowadzenie Podczas udostępniania ekranu na Web możemy się obecnie spodziewać dwóch problemów: Udostępnienia nie tego ekranu / taba którego chcieliśmy W tabie który chcieliśmy udostępnić znajdują się rzeczy, …
Użyj Capture Handle do wsparcia sterowania udostępnianą zakładką!
Spis treści Wprowadzenie Implementacja zarządzania prezentacją przy pomocy identyfikacji z Capture Handle Strona z prezentacją Strona zarządzająca prezentacją Kod aplikacji na Github Klikalna wersja aplikacji na Github Pages 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 …
Podnieś robienie zdjęć na Web na wyższy poziom z MediaTrackConstraints!
Spis treści Wprowadzenie Zastosowanie MediaTrackConstraints w robieniu zdjęć Kod przykładu na Github Działający przykład na Github Pages 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: Możesz jednak podnieść poziom robionych zdjęć za pomocą MediaTrackConstraints dla robienia zdjęć. Przeczytaj ten artykuł by zobaczyć, jak …
Nie przekazuj obiektów jako props w Redux – sprawdź czemu!
Spis treści Wprowadzenie Eksperymenty implementacyjne Zwykły useSelector Zwykły useSelector + memo na komponencie Zwykły connect Connect z memo useSelector z shallowEqual useSelector pobierający proste wartości Connect pobierający proste wartości Connect z mapStateToProps który zwraca tylko jeden obiekt Kod przykładów na Github Działający przykład na Github Pages Podsumowanie Wprowadzenie Kwestie wydajności to jedna z tych rzeczy, …
MediaSession API – zarządzaj mediami na stronie spoza przeglądarki!
Spis treści Wprowadzenie Zarządzanie mediami Wygląd UI Desktop Mobile Działający przykład na Github Pages Pełny kod przykładu na Github 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 …
MediaRecorder API – sprawdź jak nagrywać z poziomu Web!
Spis treści Wprowadzenie Użycie MediaRecorder Jak działa MediaRecorder API? Pobieranie streamu z kamery Pobieranie streamu z udostępniania ekranu Pobieranie streamu z canvasa Klikalny przykład na Github Pages Pełny kod przykładu na Github 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 …
Sprawdź jak walidować formularze w czystym JS!
Spis treści Wprowadzenie Walidowanie formularzy Baza pod przykłady Customowe wiadomości dla walidacji standardowej Customowy sposób prezentacji rezultatów walidacji Klikalny przykład na Github Pages Pełny kod przykładu na Github 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 …
Dowiedz się czemu warto czekać na pseudoklasę :has!
Spis treści Wprowadzenie Pseudoklasa :has Jak działa pseudoklasa :has? Jakie pseudoklasa :has ma wsparcie i jaką biblioteką go zasymulować? Użycie pseudoklasy :has do stylowania formularzy na bazie walidacji pól Stworzenie skryptu transformującego CSS Style odpowiadające za kolorystykę walidacji Wymagany kod JS Efekt działania aplikacji Klikalny przykład na Github Pages Pełny kod przykładu na Github Podsumowanie …