💻 SSR, ISR, SSS i inne dziwne skróty, polecane książki i ciekawe narzędzia 😎


Rozwój Web Developera	Przeczytaj w przeglądarce

Wydanie 016 | 23.01.2022 | Piotr i Paweł

It's Web Dev - Rozwój Web Developera

Wersja online maila

Archiwum wiadomości

Pomóż ulepszyć ten newsletter

Cześć,

Witajcie w zapowiadanym pierwszym mailu, tworzonym wspólnie z Piotrkiem.

Mamy nadzieję, że wyciągniesz z tego newslettera dużo wartości w nowym roku.

Na początek formalności.

Jeżeli używasz Gmaila, to ta wiadomość prawdopodobnie zostanie ucięta. Wystarczy, że na dole strony klikniesz, pokaż całą wiadomość, a na pewno nic Ci nie umknie.

W dzisiejszym wydaniu znajdziesz

♟️ 5 książek, które pomogły mi stać się lepszym programistą,

♟️ Warto wiedzieć

❓ 10 najważniejszych umiejętności na froncie w 2023 roku

🖥️ Różnica między SSR, ISR, SSS

📱 Mobile First

🎥 Ciekawe narzędzia

🕸️ Czemu position:sticky nie działa?

♟️ Rozwojowo

👨‍💻 Public Speaking

Podziel się wiedzą by Paweł

5 książek, które pomogły mi stać się lepszym programistą

Zwykle wspominam o książkach, które aktualnie czytam w sekcji “Rozwojowo”.

Nie są to długie opisy, a część z tych książek nie jest branżowa.

Z tego powodu postanowiłem wybrać 5, które na pewno polecam i które pomogły mi wskoczyć na dużo wyższy poziom, jeśli chodzi o codzienną pracę. Mam tutaj zarówno na myśli umiejętności twarde, jak i te miękkie.

Ułożenie nie jest przypadkowe. Jest to również moja rekomendacja kolejności, w jakiej polecam czytać te książki.

Zawód Programista od Macieja Aniserowicza - książka bardzo fajnie opisuje realia naszego zawodu. Podoba mi się luźny język i prostota przekazywanych informacji. Znajdziesz tam swoiste vademecum polskiej branży IT. Szczególnie polecam osobom zastanawiającym się nad nauką programowania lub będącym na początku swojej kariery. Książka bardzo dobrze wprowadza w temat i pozwala zredukować ilość popełnionych błędów.
Software Craftsman od Sandro Mancuso - książka pomagająca stać się profesjonalistą i świadomym developerem, a nie tylko klepaczem kodu. Jest to chyba najlepsza branżowa pozycja, jaką czytałem. Książka jest stosunkowo młoda (w porównaniu do innych bestsellerów), dlatego większość informacji jest całkowicie aktualna. Polecam szczególnie dla osób, które wiedzą już co nieco o IT i chcą wskoczyć na wyższy poziom swoich umiejętności.
Mistrz Czystego Kodu od Robert C. Martin - Tematyka podobna i zarazem inna od wymienionej wyżej Software Craftsman. Cel książki jest podobny, czyli kształtowanie prawdziwych specjalistów, jednak opisywane tematy trochę się od siebie różnią. Znajdziesz tam bardzo ciekawy rozdział o asertywności i dobrze rozpisane informacje o zarządzaniu czasem w pracy. Pisałem o tym jakiś czas temu tutaj.
Technical Leadership od Mariusz Sieraczkiewicz - Ta książka to najlżejsza i najbardziej skondensowana pigułka wiedzy o roli lidera w IT, jaką znalazłem. Bardzo przyjemna pozycja dla osób myślących o objęciu roli związanej z zarządzaniem ludźmi i projektami. Dowiesz się z niej o różnicy pomiędzy seniorem i liderem, pułapkach czyhających na programistów obejmujących role liderskie, zarządzaniu zespołem, motywacji i wiele więcej.
Inteligencja Emocjonalna od Daniel Goleman - Tę pozycję dodaję jako bonus. Nie jest to coś stricte związanego z IT. Książka pomaga zrozumieć, jak działa ludzki mózg pod względem emocji, reakcji i zachowań. Lektura daje wiele do myślenia i różne aspekty można odnieść do codziennej pracy w zespole. Książka jest długa i w pewnym momencie wydaje Ci się, że wciąż czytasz o tym samym, dlatego polecam tylko osobom, które faktycznie czują, że powinny popracować nad kwestią emocji. Szczególnie ważne dla przyszłych managerów i liderów.

Podziel się swoim top 5 odpisując na maila 💪🏻

Warto wiedzieć by Piotr | Źródło

10 najważniejszych umiejętności na froncie w 2023 roku

Branża IT zmienia się bardzo dynamicznie, pojawiają się nowe aktualizacje, rozszerzenia, narzędzia, biblioteki, frameworki, technologie.

Nie da się ukryć, że należy stale poszerzać swoje umiejętności i być na bieżąco z tym, co nowego pojawia się w ekosystemie.

Według artykułu najważniejszymi umiejętnościami są:

HTML, CSS, JavaScript, responsywność stron, korzystanie z kontroli wersji, zgodność z różnymi przeglądarkami, debugowanie kodu, optymalizacja itp.

Osobiście uważam, że powyższe rzeczy są niezbędne do pracy programisty, jednak na liście brakuje mi pewnych punktów takich jak:

Znajomość frameworków JavaScript — programiści front-end powinni znać jeden lub więcej frameworków JavaScript, takich jak React, Angular lub Vue.js
Znajomość preprocesorów CSS — programiści front-end powinni znać przynajmniej jeden preprocesor CSS np. Sass lub LESS

Znajomość trendów i nowinek technologicznych — programiści front-end powinni być na bieżąco ze światem technologii i być otwarci na uczenie się nowych narzędzi i technologii.
Umiejętność pracy w zespole — programiści front-end powinni umieć współpracować z innymi programistami, projektantami i menedżerami projektu, aby uzyskać najlepsze rezultaty.
Znajomość narzędzi do tworzenia interfejsów użytkownika — programiści front-end powinni znać narzędzia takie jak Adobe XD lub Figma.

Próg wejścia dla programistów jest coraz wyższy, konkurencja jest bardzo duża. By znaleźć pierwszą pracę, trzeba się wyróżnić na tle pozostałych kandydatów.

Warto wiedzieć by Piotr | Źródło

Różnica między SSR, ISR, SSS

Server Side Rendering (SSR) - to technologia pozwalająca na renderowanie stron internetowych na serwerze. Oznacza to, że cała strona jest generowana i przetwarzana na serwerze, a następnie wysyłana do przeglądarki jako gotowy kod HTML.

SSR jest często stosowane w przypadku dużych witryn o dużym ruchu, ponieważ pozwala zmniejszyć obciążenie przeglądarki i zapewnia lepsze doświadczenie użytkownika. Strony renderowane na serwerze są również lepiej indeksowane przez wyszukiwarki internetowe, ponieważ ich treść jest dostępna od razu po wejściu na stronę, a nie dopiero po załadowaniu skryptów JavaScript.

Aby wykorzystać SSR, konieczne jest stosowanie specjalnych frameworków lub bibliotek, takich jak Angular Universal, Next.js lub Nuxt.js. Te narzędzia pozwalają na łatwe wdrożenie SSR w aplikacji i zarządzanie procesem renderowania na serwerze.

In-Browser Side Rendering (ISR) - to technologia pozwalająca na renderowanie stron internetowych w przeglądarce z wykorzystaniem JavaScript. Oznacza to, że strona jest generowana dynamicznie przez skrypty JavaScript działające w przeglądarce użytkownika.

ISR jest często stosowane w przypadku aplikacji o dużej interaktywności, które wymagają szybkiej zmiany treści bez konieczności przeładowywania całej strony. Dzięki temu użytkownik może szybko przeglądać różne sekcje aplikacji bez opóźnień spowodowanych przeładowywaniem strony.

ISR jest często stosowane w połączeniu z frameworkami JavaScript takimi jak React, Angular lub Vue.js, które umożliwiają łatwe tworzenie aplikacji o dużej interaktywności. Niektóre z nich, takie jak React, posiadają również wbudowane mechanizmy do obsługi ISR.

Należy jednak pamiętać, że ISR może być mniej efektywny niż SSR w przypadku dużych witryn o dużym ruchu, ponieważ cała strona musi być wczytywana i przetwarzana przez przeglądarkę użytkownika, co może prowadzić do wolniejszego ładowania strony.

Static Site Generation (SSG) - to technologia pozwalająca na generowanie statycznych stron internetowych z wykorzystaniem narzędzi takich jak Gatsby, Next.js lub Hugo. Oznacza to, że cała strona jest generowana w postaci plików HTML, CSS i JavaScript podczas procesu budowania, a następnie umieszczona na serwerze do udostępnienia użytkownikom.

SSG jest dobrym rozwiązaniem dla stron o niskim ruchu lub stron informacyjnych, ponieważ pozwala zmniejszyć obciążenie serwera i zapewnia szybkie ładowanie strony. Strony te są również łatwiejsze do zarządzania i aktualizowania, ponieważ nie wymagają dynamicznego przetwarzania na serwerze podczas każdego żądania użytkownika.

Aby skorzystać z SSG, konieczne jest wykorzystanie specjalnych narzędzi lub frameworków, które pozwalają na tworzenie statycznych stron z wykorzystaniem popularnych technologii takich jak React, Vue.js lub Markdown. Te narzędzia umożliwiają również łatwe wdrożenie SSG w istniejących projektach i zarządzanie procesem generowania stron.

Warto wiedzieć by Piotr

Mobile First

Mobile first - podejście do projektowania stron internetowych i aplikacji mobilnych, które polega na tym, że priorytetem jest tworzenie wersji mobilnej strony lub aplikacji, a następnie dostosowywanie jej do wersji na komputery.

Ideą podejścia mobile first jest to, że coraz więcej osób korzysta z internetu na swoich urządzeniach mobilnych, dlatego też projektowanie stron internetowych i aplikacji powinno rozpoczynać się od wersji mobilnej.

A Ty jak zaczynasz swoje projekty?

Osobiście najbardziej do gustu przypadła mi metoda by rozszerzać widok do wersji tabletowej i desktopowej 🙂

Zabawa w css’ie jest bardzo relaksująca 😀

Warto wiedzieć by Piotr

Ciekawe narzędzia

Adobe Color Wheel - to narzędzie do tworzenia i edytowania palet kolorów.

Jest to interaktywny kolorofon, który umożliwia tworzenie palet kolorów za pomocą różnych schematów, takich jak monochromatyczny, analogowy, dopełniający itp.

Narzędzie pozwala również na tworzenie palet kolorów z wybranego obrazu lub zdjęcia.

Można w nim również zmieniać nasycenie i jasność poszczególnych kolorów, a także zapisywać i edytować utworzone palety.

Adobe Color Wheel jest przydatnym narzędziem dla projektantów graficznych, web developerów oraz osób zajmujących się tworzeniem stron internetowych i aplikacji mobilnych, ponieważ umożliwia szybkie i łatwe tworzenie palet kolorów.

A11yphant - to narzędzie służące do sprawdzania dostępności stron internetowych dla osób z niepełnosprawnościami.

Pozwala ono na szybkie znalezienie problemów z dostępnością strony i sugerowanie sposobów ich rozwiązania.

Narzędzie to jest szczególnie przydatne dla web developerów, którzy chcą zapewnić, aby ich strony były dostępne dla jak największej liczby użytkowników, w tym tych z niepełnosprawnościami.

A11yphant dostępny jest zarówno jako rozszerzenie do przeglądarki internetowej, jak i jako samodzielna aplikacja.

✔ Mockaroo - to internetowe narzędzie do generowania losowych danych testowych.

Może być ono używane do tworzenia przykładowych zestawów danych do testowania oprogramowania lub do symulowania danych w celu przetestowania aplikacji.

Mockaroo pozwala na tworzenie zestawów danych z różnych typów pól, takich jak liczby, daty, adresy

Warto wiedzieć by Paweł | Źródło

Czemu position:sticky nie działa?

Na ten problem natknąłem się ostatnio w pracy.

Jak się okazało, sticky może nie działać z kilku powodów:

Przeglądarka bez wsparcia.
Nie ustawione wartości top i bottom.
Brak prefixu dla Safari.
Parent nie ma odpowiedniej wysokości.

I najważniejsze, czyli przyczyna moich problemów:

Ustawiony overflow na dowolnym parencie naszego sticky elementu.

Dokładniejszy opis każdej z przyczyn znajdziesz w źródle.

Mi najbardziej pomógł zamieszczony tam snippet, który pozwala na szybkie wyszukanie, czy jakikolwiek parent posiada ustawiony overflow.

let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

Rozwojowo by Paweł

Public Speaking

Końcówką zeszłego roku brałem udział w warsztatach z Public Speakingu i bardzo dużo się nauczyłem.

Nie wiem jeszcze kiedy i czy będę mógł przypiąć sobie nalepkę prelegent ale i tak warsztaty śmiało mogę polecić.

Dodatkowo wziąłem się za książkę w tej samej tematyce, czyli Jak stać się doskonałym mówcą i rozmówcą i wydaje się, że także dużo wyniosę z tej pozycji.