React Testing Library - testy accessibility
Testować accessibility możemy różnymi narzędziami i na różne sposoby... W tym wpisie na tapet bierzemy testy dostępności skupione na zakresie komponentu z pomocą biblioteki `jest-axe` 🧪
Czytaj więcej
Artykuły
React Testing Library - Mock Service Worker
MSW to narzędzie nowej geneneracji, które umożliwia łatwiejszą i przyjemniejszą pracę z mockami...
Czytaj więcej
React Testing Library - testy w praktyce
Po ostatnim wprowadzającym wpisie przyszedł czas na przykłady z życia wzięte. Dzisiaj przetestujemy sobie komponent, który bardzo często znajduję się w naszych codebasach. Przez jednych lubiany, przez drugich znienawidzony - formularz...
Czytaj więcej
React Testing Library - podstawy
React Testing Library to najpopularniejsza biblioteka do testowania kodu napisanego w React. Wchodzi ona w skład większej całości - DOM Testing Library...
Czytaj więcej
Urodziny Frontlive 🎉
Dokładnie rok temu na tym blogu pojawił się pierwszy wpis. Pomyślałem, że warto podsumować sobie ten rok i przedstawić Ci plany na przyszłość!
Czytaj więcej
Jest - mock functions
Czym jest mockowanie? Jak działają mock functions? Kiedy powinniśmy z nich korzystać i dlaczego są tak przydatne podczas testowania kodu za pomocą Jest?
Czytaj więcej
Jest - pierwszy test
Poznaj najpopularnieszy framework do testowania kodu JavaScript!
Czytaj więcej
Testowanie JS - podstawy
Testowanie kodu jest bardzo pożądaną umiejętnością u każdego programisty... Ale zacznijmy od początku. Dlaczego tak właściwie potrzebujemy testów? Jakie są ich rodzaje?
Czytaj więcej
Frontend 2021
Co przyniesie nowy rok? Jakie technologie będą na topie i na jakie warto zwracać uwagę?
Czytaj więcej
Nowoczesny CSS - CSS Variables
Chociaż CSS nie jest językiem programowania to posiada swoje zmienne. Czym są i jak się ich używa? Do jakich celów możesz je wykorzystać?
Czytaj więcej
Nowy rok, nowy Frontlive!
Kulisy powstawania nowej odsłony Frontlive - mojego bloga i jednocześnie strony portfolio. Jak dobrałem technologię do projektu? Z jakimi wyzwaniami się mierzyłem?
Czytaj więcej
Nowoczesny CSS - min(), max() i clamp()
Znasz ten ból posiadania wielu media-queries w swoich projektach? A co jeśli bym Ci powiedział, że można to zmienić? Zobacz jak działają funkcje logiczne w CSS i jak pomagają nam tworzyć responsywne layouty.
Czytaj więcej
React Query - czy zastąpi Reduxa?
Czy to kolejna biblioteka do zarządzania stanem pokroju Reduxa, Recoila, Zustanda i wielu innych? Nie! Mamy tutaj do czynienia z czymś kompletnie innym, a cała biblioteka skupia się na akcjach asynchronicznych i cachowaniu danych
Czytaj więcej
Dostępność - czytniki ekranowe i testowanie
W poprzednich artykułach pisałem o dobrych praktykach, błędach i filozofii inkluzywności. Dziś pomówimy o czytnikach ekranowych i narzędziach do testowania dostępności.
Czytaj więcej
Dostępność - top 10 najczęściej popełnianych błędów
Często gdy robię code review napotykam na te same błędy dostępności, powtarzają się one tak często, że postanowiłem zrobić listę najczęściej popełnianych błędów dostępności. Przy każdym błędzie postaram Ci się wytłumaczyć dlaczego to jest błąd i jak go naprawić.
Czytaj więcej
Dostępność - projektowanie i semantyczny HTML
Na co zwrócić uwagę tworząc design nie tylko pod względem interfejsu, ale też ze strony user experience? Zamienimy brzydki kod w ładny używając do tego odpowiednich znaczników HTML, a na sam koniec dowiesz się czym jest drzewko dostępności 🌳
Czytaj więcej
Dostępność - to nie tylko niepełnosprawni
Każdy z nas, a przynajmniej większość, kiedyś słyszała o dostępności, mniej lub bardziej. Wiadomo są jakieś tam osoby z pewnymi niepełnosprawnościami, jakiś tam mały odsetek, ale pewnie nie będą korzystać z naszej strony, co nie?
Czytaj więcej
Recenzja - TypeScript na poważnie
Ostatnio trafiła w moje ręce książka o TypeScripcie Michała Miszczyszyna - popularnego blogera z naszego świata webdevelopmentu. Czy jest tak dobra jak mówią? Sprawdźmy to!
Czytaj więcej
GraphQL + TypeScript - wygeneruj sobie typy!
Lubimy zaoszczędzać czas, a jednocześnie zrobić coś dobrze. Tak samo jest w przypadku programowania. Poznaj GraphQL Code Generator - narzędzie, które zaoszczędza czas i zapewnia TypeScriptowe typy!
Czytaj więcej
GraphQL + React - apollo, hooki i paginacja
Jak połączyć GraphQL i React? Skorzystać z Apollo! Wybierzmy się na tą misję i stawmy czoła realnej aplikacji!
Czytaj więcej
GraphQL - zapytania, mutacje i schema
Kontynuujemy przygodę ze światem GraphQLa i zabieramy się za realne zagadnienia 🥳 Dziś poznasz zapytania, mutacje, scheme, typy i wiele więcej, a w następnym wpisie, ze zdobytą dziś wiedzą podbijamy Reakta!
Czytaj więcej
GraphQL - podstawy
GraphQL jest językiem zapytań, który stanowi alternatywę do standardowego RESTa. Jest bardziej elastyczny, precyzyjny i przede wszystkim wygodniejszy.
Czytaj więcej
Portfolio programisty z GitHub Profile README
Ostatnio na GitHubie pojawiła się bardzo ciekawa nowość, a mianowicie, zostało wprowadzone GitHub Profile README. Zobacz czym jest i dlaczego powinieneś zrobić swój własny profil README!
Czytaj więcej
Svelte - nie tylko React, Vue i Angular
Obecnie w środowisku frontendowym mamy świętą trójcę jeśli chodzi o frameworki/biblioteki UI. Jest to jak zapewne wiecie React, Vue i Angular. Warto jednak wyrwać się na chwilę z tej bańki i poznać coś innego. Pora na Svelte!
Czytaj więcej
CSS Houdini - przyszłość CSSa czy niepotrzebna nowość?
CSS Houdini to zbiór API, udostępnionych przez przeglądarkę, dzięki którym, mamy bezpośredni dostęp do drzewka CSSOM.
Czytaj więcej
React - Suspense & Concurrent mode
Concurrent mode to zestaw nowych funkcjonalności, obecnie w fazie eksperymentalnej. Całą filozofia concurrent mode opiera się na nieblokowaniu renderowania elementu.
Czytaj więcej
Webpack 4 - loadery, pluginy i niestandardowa konfiguracja
W poprzednim wpisie poznałeś podstawy Webpacka, dzisiaj wykorzystamy tą wiedzę w praktycę i stworzymy pełnoprawną konfigurację projektu.
Czytaj więcej
Webpack 4 - pierwsze kroki z module bundlerem
Webpack to tzw. module bundler, pozwala nam na budowanie drzewa zależności, które ma na celu połączenie wielu modułów naszej aplikacji w jeden pakiet.
Czytaj więcej
Atomic Design - myśl atomami i klockami LEGO!
Jak dobrze zorganizować strukturę katalogów, w naszej aplikacji, tak, aby całość nawet przy większych rozmiarach była czytelna i łatwa w utrzymaniu? Atomic Design na ratunek!
Czytaj więcej
TypeScript - React, Redux i Styled Components
Moje ulubione połączenie - React + TypeScript! Sprawdź jak typować aplikację, która korzysta z Reakta, Reduxa i Styled Components - kompletny poradnik!
Czytaj więcej
TypeScript - Generics, klasy i zaawansowane typy
Zagłębiamy się w TypeScripta. W tym wpisie poznasz typy genereczyne, typy zaawansowane, a i dla fanów OOP coś się również znajdzie!
Czytaj więcej
TypeScript - podstawy
TypeScript jest statycznie typowanym językiem od Microsoftu, bazuje on na JS. Uwierz mi, jak już go poznasz, nie będziesz chciał się wracać do czystego JavaScriptu
Czytaj więcej
JavaScript - ES6 to już przeżytek, nastała era ES2019!
JavaScript cały czas się zmienia, kilka lat temu powstała specyfikacja ES6, która po dziś dzień, jest uważana, przez niektórych, za nowość. Niestety programistyczny świat i technologię rozwijają się bardzo szybko i co roku wychodzą nowe ficzery.
Czytaj więcej
JavaScript - Nullish coalescing & Optional chaining
Specyfikacja ECMAScript cały czas się rozwija, powstają nowe ciekawe featury. Jakiś czas temu, zostały zaproponowane dwa nowe: nullish coalescing i optional chaining
Czytaj więcej
CircleCi + Netlify - Continuous Integration & Deployment
Na pewno każdy z Was słyszał o magicznym CI/CD, ale co to takiego, z czym się to je i dlaczego zaoszczędzi Ci to mnóstwo czasu?
Czytaj więcej
README na GitHubie - robisz to źle!
Bardzo często spotykam się ze źle zrobionym README w autorskich projekach na GitHubie. Wiele osób zaznacza tylko tytuł projektu i pozostawia plik pustym.
Czytaj więcej
Firebase - reguły zabezpieczeń, cloud functions i deploy
Zabezpiecz swoją aplikację za pomocą reguł bezpieczeństwa, wykonaj funkcję po stronie serwera i wypuść kod na produkcję!
Czytaj więcej
Firebase - dodawanie danych do Firestore
Poznaj techniki obsługi Firestore, stwórzmy aplikację z naszymi ulubionymi twórcami!
Czytaj więcej
Firebase - pobieranie danych z Firestore
Wnieś swoją wiedzę na temat Firebase na wyższy poziom, poznaj Firestore - bazę danych Firebase.
Czytaj więcej
Firebase - autoryzacja w 10 minut? To mozliwe!
Potrzebujesz autoryzacji użytkowników wraz z prostym formularzem logowania i rejestracji. Firebase sprawdzi się idealnie!
Czytaj więcej