Cześć  👋

Co znajdziesz w dzisiejszym mailu?

✅ Pigułka wiedzy o Promise
✅ 7 rzeczy, które powinien wiedzieć każdy junior

⚡ Wprowadzenie do architektury oprogramowania
⚡ 5 przydatnych sztuczek dla typu Never w TypeScript
⚡ 10 rzeczy, których prawdopodobnie nie wiedziałeś o debugowaniu w Chrome
⚡ Cztery rodzaje przeglądów kodu
⚡ Wskazówki dotyczące CSS dla lepszego tworzenia stron internetowych

⚙️ Typesafe Tailwind
⚙️ LazyWeb

Promise’y to najczęściej wykorzystywana funkcjonalność w JavaScript. Korzystamy z niej przy komunikacji z API oraz operacjach I/O w Node.js. Co warto wiedzieć o nich?

Promise pozwalana nam obsługiwać wartości asynchronicznie. Czyli nie czekamy, aż dostaniemy dane, ale idziemy dalej z kodem i obsługujemy wartość, gdy się pojawi. Promise jest obietnicą, że wartość się pojawi kiedyś w przyszłości.

Promise’a możemy otrzymać za pomocą funkcji, które implementują tę funkcjonalność albo tworząc własnego przy pomocy new Promise. Dzięki temu możemy tworzyć Promise’a z funkcji, która tego nie wspiera np.: setTimeout

Promise może być w następujących stanach:

• pending - stan początkowy
• fulfilled - Promise zakończony poprawnie
• rejected - Promise zwrócony z błędem

Promise może być tylko w jednym ze stanów w danym momencie i określamy go jako settled, gdy jest fullfilled albo rejected.

Do obsługi ukończonych Promise’ów służy nam metoda .then(onFullfilment, onRejection), która przyjmuje dwa parametry:

• funkcja do obsługi Promise zakończonego sukcesem
• funkcja do obsługi Promise’a zakończonego błędem

Błędy możemy obsługiwać na dwa sposoby:

• osobną funkcją w każdym .then()
• wykorzystując blok catch

Mamy do dyspozycji jeszcze jedną funkcję - finally. Uruchamia się, gdy Promise jest w stanie settled, czyli albo zakończył się sukcesem, albo błędem. Jest to przydatne, gdy mamy operacje, które są wspólne dla obu stanów.

Pracując z Promise’ami nie można zapomnieć o tzw.: Promise Methods. Są to specjalne funkcje, które umożliwiają zarządzanie większą ilością Promise’ów. Każda z metod przyjmuje tablice Promise'ów jako argument.

Promise.all. Przyjmuje jako parametr tablicę Promise’ów i zwraca Promise’a. Po rozwiązaniu będzie zawierał on tablicę wartości dla każdego rozwiązanego Promise’a wewnątrz. Będzie on rozwiązany poprawnie, jeśli wszystkie wartości przekazane jako argument rozwiążą się poprawnie. Jeśli na którymś Promise wystąpi błąd, to wykonywanie funkcji zostaje wstrzymane i jest zwrócony błąd tzw.: fail-fast

Promise.allSettled. Nie przerywa działania podczas wystąpienia błędu. Jako wynik dostajemy informację, jak każdy przekazany w argumencie Promise się rozwiązał oraz z jaką wartością. Dzięki temu nawet jak jedna operacja się nie powiedzie, to z pozostałych dostaniemy informacje. Tutaj ważna uwaga - dostajemy tablicę obiektów {status, value} więc do właściwych wartości musimy się dopiero dostać.

Promise.race. Jako wynik dostajemy pierwszą wartość, która się rozwiąże - nie ważne czy to będzie poprawne rozwiązanie, czy też wystąpi błąd.

Promise.any. Jako wynik jest zwracana pierwsza wartość, która rozwiąże się poprawnie. Oznacza to, że nawet jeśli jakiś błąd wystąpił szybciej, to zostanie zignorowany i funkcja będzie czekać na poprawną wartość.

Dodatkowe materiały

📖 Książki:

• https://eloquentjavascript.net/11_async.html#h_sdRy5CTAP/
• https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch3.md

📄Artykuły:

• https://2ality.com/2014/09/es6-promises-foundations.html?m=1
• https://2ality.com/2014/10/es6-promises-api.html
• https://fsgeek.pl/post/javascript-promise-all-allsettled-race-any/

📽️ Filmy:

• https://www.infoq.com/presentations/javascript-asynchronous-patterns/
• https://www.youtube.com/watch?v=DHvZLI7Db8E - Promise’y wytłumaczone na przykładach
• https://www.youtube.com/watch?v=1l4wHWQCCIc - jak stworzyć własną implementację Promise’a

📖 Koniecznie zerknij

Jak korzystać z obiektu Console

Odświeżyłem mój post na temat obiektu Console (oraz całego bloga). W artykule znajdziesz inne metody niż log, które można użyć do wyświetlania informacji. Jakie metody znajdziesz w artykule?

• assert
• error
• warn
• count
• table
• trace
• group
• time

7 rzeczy, które powinien wiedzieć każdy młodszy programista

1. Zadawaj pytania i rozmawiaj o aplikacji. Autor radzi, żebyś brał/a udział w rozmowach o projekcie przy kawie. Dzięki temu możesz dowiedzieć się ciekawych rzeczy. Tak samo jest z zadawaniem pytań.
2. Zainteresuj się pracą innych zespołów. Nie skupiaj się tylko na swojej bańce. Zainteresuj się, czym zajmują się testerzy, biznes itd. Jeśli będziesz lepiej rozumieć ich pracę i potrzeby tym lepszym deweloperem będziesz. No ćwiczysz umiejętności komunikacyjne.
3. Analizuj kod. Patrz, jak bardziej doświadczeni programiści piszą kod. Pytaj, jak podchodzą do rozwiązywania problemu, dlaczego taka implementacja, a nie inna. Jeśli masz możliwość, analizuj kod innych zespołów np.: zaglądając do Pull Request'ów
4. Ćwicz, ćwicz, ćwicz. Bez praktyki ciężko być dobrym programistą. Jeśli uczysz się czegoś, to spróbuj stworzyć jakiś projekt i przetestować to w praktyce.
5. Przygotuj się na gorsze dni. Czasem są dni, gdzie rozwiązanie wpada od razu, a czasem siedzimy dni nad czymś prostym. Takie jest programowanie. Jeśli czujesz taką blokadę, to pomaga przerwa pisaniu kodu, krótki spacer, przejście do innego zadania, itd. Warto też przeanalizować problem i wypróbować różne rozwiązania i zapytać kogoś bardziej doświadczonego.
6. Bądź cierpliwy. Uczysz się nie tylko kodu, ale również organizacji w której zaczynasz pracę. To mnóstwo wiedzy do przyswojenia i potrzeba czasu.
7. Świętuj małe zwycięstwa. Udało ci się zrobić nową funkcjonalność? Fajną animację? Komponent dla innych programistów? To ciesz się z tego, pokaż radość, pochwal na kanale/daily.

Zajrzyj również do...

⚡️ Wprowadzenie do architektury oprogramowania

Ciekawa seria artykułów na tematy architektoniczne. Długie artykuły ze sporą ilością wiedzy. Warto przejrzeć i wybrać interesujące fragmenty.

⚡️ 5 przydatnych sztuczek dla typu Never w TypeScript

Typ never jest chyba jednym z najrzadziej stosowanych. A ma bardzo ciekawe zastosowania. Jakie? Sprawdź w artykule.

⚡️ 10 rzeczy, których prawdopodobnie nie wiedziałeś o debugowaniu w Chrome

Debuggowanie to nasz chleb powszedni. Bardzo rzadko mam dni, gdy nie otwieram devtools w chrome. W artykule znajdziesz 10 porad jak usprawnić sobie pracę z tym narzędziem. Polecam szczególnie mniej doświadczonym programistom.

⚡️ Cztery rodzaje przeglądów kodu

Ciekawy artykuł na temat różnych przeglądów kodu i tego jakie dają rezultaty. Warto przeczytać i dobrać odpowiedni rodzaj do sytuacji.

⚡️ Wskazówki dotyczące CSS dla lepszego tworzenia stron internetowych

10 wskazówek jak budować lepsze apliakcje przy pomocy CSS'a. Najdziesz tu tematy od scroll-snap przez animacje i layout do selektorów i debuggowania. Sporo wiedzy przekazanej w fajny sposób.

Kawusia ☕

Ten newsletter oraz wszystkie materiały powstają dzięki dobrej kawie 😁. 

Jeśli podoba ci się to, co tworzę, to możesz mi zafundować kawusię.

Podoba mi się to co dostaję 😍

Narzędzia, biblioteki i inne

⚙️ Typesafe Tailwind

Typescript + Tailwind = <3. Biblioteka, która zapewnia type safe dla klas w tailwind. Bardzo mi się podoba to podejście i wypróbuję w swoim projekcie. 

⚙️ LazyWeb

Zbiór różnych przydatnych narzędzi i stron, które przydają się pracy. Polecam zerknąć.

📖 Promocje w Helion na Tłusty Czwartek (link affiliacyjny)

📖 Promocja na książki o Docker i Kubernetes (link afiliacyjny)

Wyzwanie na ten tydzień

Spróbuj przepisać jakąś funkcję, by wspierała Promise. Jeśli nie masz pomysłu, to spróbuj owrapować funkcję fs.ReadFile z Node'a. Powodzenia. 

Co sądzisz o tej wiadomości? 🤔

Podobało ci się ta wiadomość? Daj mi znać co o tym sądzisz. Dzięki temu będę mógł się poprawiać z wiadomości na wiadomość. Jest to dla mnie bardzo ważna informacja.

Jest super 😍. Trzymaj tak dalej.

Może być 🙂

Jest słabo. Musisz popracować nad mailem 😡

Miłego tygodnia
Aleksander Patschek
https://fsgeek.pl/

P.S Jeśli mail ci się podobał, odpisz: promise