Kompilator to nic strasznego, czyli jak działa Twój kod pod spodem?
Czym są, jak działają i jakie problemy rozwiązują współczesne kompilatory takie jak Babel?
Artykuły
Monorepo z Lerna, Yarn Workspaces i TypeScript
Jak zarządzać projektem, w którym mamy kilka repozytoriów z kodem? Utrzymywanie zewnętrzynch zależności, sprawny development, bezbolesny release, to tylko niektóre z wyzwań, z którymi musimy się mierzyć przy większych codebasach. Jak to ogarnąć?
React Children & TypeScript - jak to ogarnąć?
Koncepcja dzieci w Reakcie pojawia się nam już w bardzo wczesnych etapach nauki. Ich sposób działania po chwili okazuje się bardzo prosty, ale w praktyce children oferują znacznie więcej, są trochę tricky i potrafią zaskoczyć 🤔 Jak więc sobie z nimi radzić i na co uważać podczas ich wykorzystania?
Jak dostałem pracę jako Frontend Developer?
Czy w 2021 roku początkujący programista może liczyć na znalezienie pracy? Oczywiście, że tak. Bez studiów informatycznych. Bez większego doświadczenia komercyjnego. Wystarczy wysłać jedno, jedyne CV...
React Testing Library - Mock Service Worker
MSW to narzędzie nowej geneneracji, które umożliwia łatwiejszą i przyjemniejszą pracę z mockami...
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...
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...
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ść!
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?
Jest - pierwszy test
Poznaj najpopularnieszy framework do testowania kodu JavaScript!
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?
Frontend 2021
Co przyniesie nowy rok? Jakie technologie będą na topie i na jakie warto zwracać uwagę?
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ć?
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?
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.
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
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.
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ć.
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 🌳
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?
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!
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!
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!
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!
GraphQL - podstawy
GraphQL jest językiem zapytań, który stanowi alternatywę do standardowego RESTa. Jest bardziej elastyczny, precyzyjny i przede wszystkim wygodniejszy.
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!
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!
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.
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.
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.
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.
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!
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!
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!
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
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.
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
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?
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.
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ę!
Firebase - dodawanie danych do Firestore
Poznaj techniki obsługi Firestore, stwórzmy aplikację z naszymi ulubionymi twórcami!
Firebase - pobieranie danych z Firestore
Wnieś swoją wiedzę na temat Firebase na wyższy poziom, poznaj Firestore - bazę danych Firebase.
Firebase - autoryzacja w 10 minut? To mozliwe!
Potrzebujesz autoryzacji użytkowników wraz z prostym formularzem logowania i rejestracji. Firebase sprawdzi się idealnie!
