Wpisy
Hooki w React, których prawdopodobnie nie używasz
Przyjrzyjmy się natywnym hookom w Reakcie i zastanówmy się czy i kiedy warto je używać. Czym są i jak używać takie hooki jak: useLayoutEffect, useDeferredValue, useTransition, czy useReducer
Czego nauczyłem się po 1. roku pracy w zawodzie programisty?
Po pierwszym roku pracy w zawodzie na chwilę spoglądam wstecz, by uświadomić sobie, co dała mi praca i jak dzięki niej się rozwinąłem. Jest to wiedza, która różni się od wiedzy zdobytej podczas bycia developerem Wannabe. Diametralnie.
Style z bundlerem - Webpack cz. 3
Po konfiguracji prostego SPA za pomocą Webpacka przechodzimy do stylowania z wykorzystaniem tego bundlera. Zobacz, jak sonfigurować projekt, tak by css i sass budował nam się w locie.
Konfiguracja własnego SPA - Webpack cz. 2
Myślałeś kiedyś o tym jak działa CRA czy rozwiązania Single Page Application under the hood? W kolejnym wpisie z serii o Webpacku, skonfigurujemy go do imitacji zachowania Create React App. Konfiguracja Webpacka od zera z wyjaśnieniem poszczególnych kroków.
Jak działa współczesny frontend, czyli Webpack cz. 1
Webpack, czyli prawdopodobnie najpopularniejszy bundler na rynku, służy do transpilacji kodu i plików źródłowych do postaci jednej, gotowej produkcyjnie paczki. We współczesnym frontendzie trudno by było tworzyć zaawansowane aplikacje webowe bez bundlerów. Omówmy zatem ich temat na przykładzie Webpacka.
SPA, SSG i SSR, czyli wielkie porównanie sposobu serwowania stron internetowych
Świat wypracował kilka różnych sposobów renderowania stron i serwowania ich dla użytkownika. Końcowym rezultatem jest strona internetowa wyrenderowana przez "czytanie" przez przeglądarkę kodu złożonego z trzech języków: HTML, CSS i JS. To, jak możemy to osiągnąć, zależy tylko od nas
Relacja z HackYeah 2021
HackYeah to największy coroczny hackathon w Europie organizowany przez polskie firmy IT. W tym roku odbywał się w trybie zdalnym i stacjonarnym. Rok 2021 kończę udziałem w programowaniu na czas w katowickim spodku. Przeczytaj, jakie mam wrażenia i co wiąże się z uczestnictwem w wydarzeniu, takim jak hackathon.
Intersection Observer w JavaScript
Intersection Observer to natywne API JavaScript, dzięki któremu można osiągnąć wiele przydatnych rozwiązań. To na nim oparte jest wiele bibliotek służących do optymalizacji strony.
Infinite Scrolling w React (CRA, TS, Strapi, Material UI, GraphQL, Apollo)
Ekosystem Node i React jest ogromny. Na rynku do dyspozycji programistów dostępna jest masa gotowych już rozwiązań i bibliotek, które śmiało można wykorzystywać w projektach. Dziś użyjemy je, by stawić czoła dość popularnemu przypadkowi kodowemu na froncie, jakim jest infinite scrolling.
Accessibility, czyli semantyczny i dostępny HTML
Dostępność to najczęściej niedoceniany i pomijany aspekt tworzenia stron internetowych. Czym jest i dlaczego accessibility jest w dzisiejszym świecie webdevelopmentu szalenie istotne?
Dlaczego warto używać TypeScripta?
TypeScript istnieje na rynku już ładnych parę lat, jednak to w ostatnich dwóch latach zyskał największą popularność. Nie ma się czemu dziwić, bo TS wprowadza wiele zalet do pisania kodu opartym na czystym Javascripcie.
Road to dreams, czyli jak zostałem juniorem
Dziś chciałbym podzielić się dość osobistymi przemyśleniami. Opowiem, jak wyglądały moje poczynania w ostatnich kilku miesiącach i jak udało mi się znaleźć w jednym z najlepszych software housów w Polsce
Motywacja, chaos, satysfakcja, spełnienie
Za każdym razem, gdy uczymy się czegoś nowego, wkraczamy w chaos, który musimy zwalczyć, by był porządek. Porządek w głowie, dzięki któremu wszystko, co było kiedyś trudne, staje się łatwe.
Asynchroniczność, Promises, Fetch API, async await i XMLHttpRequest w JS
Przyjrzyjmy się prawdopodbnie najważniejszym konstrukcjom języka javascript w pracy frontendowca, które mnie oraz wielu innym frontendowcom spędziły sen z powiek. Porozmawiajmy o obietnicach, fetchach, async await oraz starszym XMLHttpRequest. Wszystko w pigułce.
Przydatne operatory javascript cz. 2
Operator nullowego scalania, opcjonalnego dostępu, czy nullowego przypisania. Operatory te są przykładami nowych konstruckji składniowych w javascript. Sprawdźmy czym się charakteryzują nowe operatory i w jakich sytuacjach mogą być przydatne.
Przydatne operatory javascript cz. 1
Operatorów w JavaScript jest mnóstwo, a nadal wychodzą co nowsze i bardziej nowoczesne, stanowiące lukier składniowy do starszych konstrukcji. Przeczytaj o takich operatorach jak: ternary operator, OR, END, czy double negation.
Typy zmiennych w js
Typy danych w javascript dzielą się na typy prymitywne (proste) oraz złożone. Przyjrzyjmy się im bliżej.
CORS w JavaScript
Praca z api, requestami, wymianą danych z serwerem jest integralną częścią codziennej pracy frontend developera. Z tego względu postanowiłem napisać wpis o mechanizmie CORS, który podczas nauki potrafi wprowadzić w zakłopotanie.
Struktura plików w projekcie
Struktura plików jest istotnym elementem współczesnego budowania aplikacji internetowych. Warto zadbać o przejrzystość naszych plików i uporządkować je tak, aby powrót do nich po czasie sprawiał jak najmniejsze problemy. Dzięki temu ciężej będzie również pogubić się w tworzeniu kodu.
Tworzymy własną bibliotekę w npm!
Ostatnio napisałem dość przydatną funkcję, którą fajnie by było się podzielić. Dodajmy więc ją do rejestru npm, tak by każdy programista mógł skorzystać z jej dobroci
Tworzymy własne eventy w JS!
Sam JavaScript nie posiada tego typu funkcji ani zdarzeń, a kiedy w sieci szukałem gotowego kodu do obsługi javascriptowych zdarzeń typu swipe, niczego fajnego nie znalazłem. Postanowiłem więc, że napiszę własne rozwiązanie
Zmienne w CSS
Zmienne w kaskadowych arkuszach stylów to bardzo przydatne narzędzie w pracy nad projektem, jak również integracji stylów z JavaScriptem. Przyjrzyjmy się im bliżej.
CSS Shorthands
CSS shorthands to skróty stanowiące sposób na zaoszczędzenie dużej ilości czasu podczas pisania stylów. Pod warunkiem, że ich konstrukcje znamy na pamięć. Dziś chciałbym przedstawić większość obecnych w kaskadowych arkuszach stylów shorthandów (skrótów).
Jak się uczyć programowania?
Nauka programowania to ciężka i żmudna rzecz. By osiągnąć w nim profesjonalizm, trzeba poświęcić setki - a może nawet - tysiące godzin czasu na klikanie w klawiaturę. Mimo to, zawód programista oznacza naukę przez całe życie. Jak więc robić to dobrze?
Motywacja i wytrwałość w programowaniu
Początkujący programista często natrafia na swej drodze na przeszkody w postaci nie tylko zagadnień technicznych, ale też w samym podejściu do nauki programowania. Z jakimi problemami natury miękkiej się mierzymy oraz co się wiąże z wypaleniem do nauki dla początkujących programistów?
useEffect w React - z czym to się je?
Hooki jako natywne API Reacta znacząco odmieniło podejście do tego frameworka. Zyskał on na piękności oraz sprawił, że nie potrzebujemy już używać komponentów klasowych. Jednym z najczęściej używanych hooków jest useEffect, czyli funkcja odpowiadająca w dużej mierze za operacje w cyklu życia komponentu. Z useEffect jednak wiążą się pewne smaczki. Jakie?
Jak używać refy w Reakcie?
Podczas nauki Reacta często natrafiałem na przeszkody w postaci smaczków, których się nie spodziewałem. Jednym z nich były referencje do elementów JSX. Wyjaśniam dlaczego tradycyjne refy nie działają na komponentach funkcyjnych i jak je przekazać do innych komponentów.
Eksportujemy ustawienia VSCode
Pisząc na co dzień w tym edytorze nie przejmujemy się ewentualną utratą danych, jakimi są nasze ustawienia. A jako, że o dane trzeba dbać, to zajmijmy się ich zabezpieczeniem.
Nie bój się gita
Git dla początkujących może wydawać się zbędnym narzędziem do nauki na samym starcie. Nic bardziej mylnego. Pomijając fakt, że gita wymaga prawie każdy pracodawca na rynku, to narzędzie to daje ogromne korzyści. Jakie?
Jak zaimportować SVG w React?
By zaoszczędzić trochę czasu programistom stawiającym swoje pierwsze kroki w Reakcie, chciałbym przedstawić sposoby importowania plików oraz grafik svg w projekcie reactowym. Zapraszam serdecznie
Co to jest React i create-react-app?
React i create-react-app to dwie odmienne frazy, a o fakcie tym developerzy są świadomi. Używają tych terminów zamiennie. Wyjaśniam z czego to wynika
Typy dependencji w package.json
Wyróżniamy 5 głównych typów dependencji w menadżerach pakietów, takich jak yarn lub npm. Zapraszam do omówienia ich wszystkich, dogłębnie i szczegółowo
Podstawy pracy z npm
Praca z menadżerem pakietów npm oraz zrozumienie, jak działa cały ekosystem zarządzania pakietami w projekcie, sprawiały mi, jako początkującemu programiście, dość duże problemy. Mam nadzieję, że po przeczytaniu tego tekstu, nikt nie pójdzie moją drogą.
Co to jest node.js
"Node.js to środowisko uruchomieniowe języka JavaScript oparte na silniku V8 przeglądarki Chrome" - taką definicję możemy przeczytać na oficjalnej stronie Node. W mojej opinii, jest to hasło, które nie mówi zbyt dużo początkującym developerom. Dziś chciałbym rozwiać ich wątpliwości. Zapraszam do lektury.
Po co mi blog
Jest wiele powodów, dlaczego blogowanie jest dobre i daje dużo korzyści. Paradoksalnie, nie gra tu największej roli odbiór i jak najliczniejsza baza czytelników, ani tym bardziej korzyści majątkowe. Wręcz przeciwnie - przyczyny startu mojej kariery bloggera leżą na całkowicie innych płaszczyznach. Jakich?
Jak działa blog?
Jak każda strona w sieci, reactywny.pl musi posiadać swój hosting, domenę, ewentualnie bazę danych. W przypadku tego bloga, strona korzysta z większej liczby zależności. W tym poście chciałbym przedstawić funkcjonowanie bloga od strony technologicznej i mój sposób działania w prowadzeniu serwisu. Na jakie rozwiązania postawiłem?
