JavaScript

JS OOP – wszystko o this

Poznajemy słówko kluczowe this i jeśli nie wszystkie, to większość różnych pułapek i trudnych bądź mylących spraw związanych z tym słówkiem i jego użyciem, na jakie możemy napotkać się w JavaScript.
Web Components – OOP + DOM 3 (JS)

Dotkniemy teraz tematu, jakim są Custom Web Components a także dziedziczenia z wbudowanych typów. Napiszemy klasę będącą własną wersją tagu o innej funkcjonalności.
Szybki JS – OOP + DOM 2

Kontynuujemy naukę obiektowego podejścia do pisania kodu JavaScript, wykonując hover effect z kolorem na każdej literze tagu z pewnym opóźnieniem. Piszemy klasę JS, która obiekt o podanej klasie CSS zamieni na jednoliterowe elementy , które z odpowiednim opóźnieniem będą wykonywały efekt zmiany koloru.
Szybki JS – OOP + DOM

Nauczymy się odtworzyć efekt ScrollIntoView używając bardziej obiektowego podejścia w JS pisząc klasy i zapewniając większą modularność naszego kodu, możliwość aktywowania efektu jedną linijką.
Bardzo szybki JS – znikający przycisk z Web Animations API

Piszemy z Web Animations API event przycisku, który po wciśnięciu znika na krótką chwilę, po czym pojawia się znowu. Idealne do różnego rodzaju przycisków kopiowania. Wykorzystamy właściwość CSS filter z funkcją opacity oraz Web Animations API.
Bardzo szybki JS – invalid input shake przy każdym złym znaku

Web Animation API sprawia, że animacje tworzy się w JavaScript bardzo łatwo, szybko i w dodatku lepiej to się komponuje z kodem niż tradycyjne animacje w CSS. Zrobimy „invalid input shake”, ale taki, który działa za każdym wciśnięciem nieprawidłowego przycisku.
Bardzo szybki JS – kopiuj z navigator clipboard

Uczymy się korzystać z nowego clipboard API dostępnego teraz w obiekcie navigator. Plus pewne sztuczki z setTimeout i prostym efektem pokazującym, że element został skopiowany do schowka.
Vanilla JS mini-projekt – korzystanie z API vol. 2

Kolejny projekt, w którym korzystami z API. Tym razem dynamicznie tworzymy elementy DOM w oparciu o dane z API i korzystamy z bardziej zaawansowanych rozwiązań.
React mini-projekt – komponent CountDown

Tworzymy w React prosty komponent CountDown, który odlicza od przekazanej w props wartości w dół co każdą sekundę. W momencie, gdy odliczanie się zakończy, komponent wyświetla wartość przekazaną w JSX pomiędzy jego otwierającym i zamykającym tagiem (poznajemy props.children). Wykonujemy pierwszy prop forwarding.
Bardzo szybki JS – scrollTo, scrollIntoView

Nauczymy się robić kotwice do elementów na stronie WWW przy pomocy tagu oraz odpowiedniego ID, następnie zajmiemy się bardziej płynnym scrollowaniem z poziomu JavaScript, wykorzystując funkcje scrollTo oraz scrollIntoView.
React podstawy vol. 3 – ugruntowanie wiedzy

Przypominamy sobie podstawowe hooki Reacta – useState, useEffect, useRef oraz useReducer. Uczymy się korzystać z API zewnętrznych oraz instalować i wykorzystywać zewnętrzne biblioteki Reacta. Przypominamy sobie własne komponenty oraz ich propsy.
Vanilla JS – łączymy się z API ze storny klienta / frontendu

Nauczymy się kilku prostych technik na wykonywanie „requesta” do zewnętrznego API i zaciąganie danych w postaci JSON, aby je następnie wyświetlić na stronie. Piszę o tym, bo w tutorialach z Reacta i Wordpressa już to robiliśmy, ale w vanilla JS jeszcze tego nie opisywałem. To taki wstęp do bardziej zaawansowanych technik.