Masz już konto? Zaloguj się

CSS Houdini

CSS Houdini to zestaw API dający możliwość dostępu do CSSOM z poziomu JavaScriptu.

1 lekcji

33min

5 (1 oceny)

CSS Houdini - Przegląd Możliwości

CSS Houdini to zestaw API dający możliwość dostępu do CSSOM z poziomu JavaScriptu. Dzięki nim zyskujemy ogromną kontrolę nad renderowaniem elementów. Możliwe jest nawet rozszerzanie samego CSS poprzez "uczenie" go sposobu rysowania bądź układania elementów. To wszystko przy zachowaniu najwyższej wydajności wynikającej z bezpośredniej interakcji z mechanizmami renderowania, wykorzystywanymi przez przeglądarki. CSS Houdini przez wielu uznawane jest jako "przyszłość CSS".

CSS Houdini "dziś"

Obecnie CSS Houdini a konkretnie różne API które należą do tej grupy, nie są jeszcze w pełni dostępne. W tym warsztacie skupimy się na poznaniu tych, z których już teraz możemy korzystać z uwzględnieniem wsparcia nowoczesnych przeglądarek. Są to: Typed OM API, Custom Properties & Values API oraz Paint API.

Wysoka wydajność i kontrola

Do tej pory interakcja pomiędzy JavaScriptem a CSS była możliwa, natomiast jednocześnie bardzo ograniczona. Dodatkowo np. animacje tworzone w ten sposób często charakteryzowały się niższą wydajnością w porównaniu do zastosowania natywnych opcji takich jak "transition" czy "animation". Z pomocą CSS Houdini zyskujemy dostęp do poszczególnych etapów procesu renderowania w przeglądarce, co daje nam niemal nieograniczone możliwości przy zachowaniu wysokiej wydajności.

Czy CSS Houdini to przyszłość CSS?

Na ten moment trudno jeszcze jednoznacznie to stwierdzić. Jednocześnie patrząc na już dostępne API i ich możliwości, trudno wyobrazić sobie że może stać się inaczej. Z tego powodu dobrym pomysłem jest rozszerzanie swojej wiedzy zarówno z zakresu CSS, JavaScript (w szczególności Canvas) ale również tego w jaki sposób działają przeglądarki oraz jak renderowane są elementy interfejsu. W przypadku wzrostu popularności CSS Houdini taka wiedza będzie na wagę złota.

Czy CSS Houdini można wykorzystywać produkcyjnie?

To zależy od tego jaki projekt realizujesz, natomiast na dzień przygotowania tego materiału, tylko część API jest dostępna i tylko w niektórych przeglądarkach. Więcej na temat dostępności CSS Houdini możesz przeczytać tutaj: https://ishoudinireadyyet.com

Czy jako JavaScript developer powinienem zainteresować się CSS Houdini?

Tak, bez wątpienia. A jeżeli czujesz że masz jeszcze braki dotyczące wykorzystania samego CSS lub tego w jaki sposób działają przeglądarki pod kątem wyświetlania elementów, to jest to wiedza którą warto uzupełnić. Wiele wskazuje na to, że sposób w jaki będziemy pracować z CSSem w dużym stopniu przeniesie się do środowiska JavaScriptu.

Dla kogo jest ten kurs?

Warsztat przeznaczony jest dla osób które chcą poznać nowe możliwości CSS. CSS Houdini to zaawansowany temat wymagający dobrej znajomości samego CSS, JavaScriptu oraz elementów dotyczących tego jak działa przeglądarka (szczególnie sposób renderowania elementów).

Czego się nauczysz?

  • Czym jest CSS Houdini?

  • Przegląd API

  • Problemy z pracą z CSS w JavaScript

  • Nowy sposób pracy z CSS w JavaScript (Typed OM API)

  • Własne właściwości i wartości w CSS (Custom Properties API)

  • Rysowanie i własne animacje (Paint API)

  • CSS Houdini w praktyce - animacja gradientu

  • CSS Houdini w praktyce - efekt "ripple"

Autor kursu

Adam Gospodarczyk

Średnia ocen autora: 5

Bio
Nazywam się Adam Gospodarczyk, jestem designerem i full-stack developerem. Przez całą swoją karierę zawodową pracuję w świecie startupów z branży edukacji, szkoleń pracowników oraz rekrutacji. Jestem współzałożycielem trzech produktów, które rozwijałem w roli CTO od samego początku. Przez ten czas zdobyłem szerokie doświadczenie znacznie wykraczające poza zakres samej technologii. W maju 2017 roku założyłem kanał na YouTube „overment” (https://overment.com) w ramach side-project’u po godzinach. Dziś jest to jeden z największych w Polsce tego typu projektów dla programistów za który otrzymałem nagrodę „JavaScript Hero of Community” podczas konferencji JS Poland 2019. Łącząc moje startup’owe doświadczenie z pasją do technologii, pomogę Ci nauczyć się programowania patrząc szerzej na perspektywę całego biznesu - jest to doceniana przez pracodawców umiejętność, którą wiele osób całkowicie pomija. Przy tym wszystkim pokażę Ci jak ważna jest regularna nauka i pozostawanie na bieżąco.
Inne kursy tego autora
Prompt Engineering Osobisty Avatar AI No-code Kurs Newsletter na Autopilocie Kurs NestJS w Praktyce Kurs NestJS od Podstaw

Dołącz do ponad 10 tys. zadowolonych z naszych kursów

Roman Sródka

6 marca 2022

Kurs CSS Houdini

  • 1 lekcji wideo

  • 33min materiału

  • Ostatnia rewizja 26.02.2021

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych

Dlaczego wybrać właśnie ten kurs?

Efektywna nauka

Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!

Wiedza ekspertów

Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.

Praktyczne przykłady

Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.

Pytania i odpowiedzi

Przeczytaj najczęściej zadawane pytania

Masz więcej pytań?

Porozmawiaj z nami na na czacie

Wyślij nam e-mail

Zadzwoń +48 880880606

Czy każdy kurs ma pliki źródłowe?

Nie każdy. Jeśli pliki są dostępne dla danego kursu, znajdziesz je w zakładce źródła. Niektóre kursy nie posiadają źródeł ponieważ nie są potrzebne, inne nie mogły być zamieszczone np. ze względu na prawa autorskie do wykorzystania komercyjnych prac naszych autorów. Staramy się aby kursy były maksymalnie praktyczne i chętnie pokazujemy zaplecze zawodowe naszych autorów, ale niekiedy nie możemy dołączyć go w postaci źródeł.

Jak jest skonstruowany kurs?

Kurs składa się z rozdziałów oraz lekcji. Staramy się, aby optymalnie kursy miały 5-7 rozdziałów po około 5-10 lekcji w każdym. W ten sposób nauka jest optymalna a podtrzymanie uwagi staje się łatwiejsze. Rekomendujemy przerabianie nie więcej niż jednego rozdziału naraz a po jego przerobieniu powtórzenie materiału we własnym zakresie.

Jak najlepiej wykorzystać kurs?

Potraktuj kurs jako inspirację do własnej pracy. Tam, gdzie się da staraj się powtarzać czynności, które wykonuje autor. Nie powtarzaj ich jednak bezmyślnie - spróbuj zmodyfikować przykłady i dostosować je do swoich potrzeb. W ten sposób przyswoisz materiał jeszcze lepiej!

Jak mogę uzyskać dostęp do kursu?

Możesz albo wykupić ten konkretny kurs przez koszyk, uzyskując do niego (i jego rewizji) bezterminowy dostęp, albo wykupić wariant abonamentu, który obejmuje dany kurs i w ten sposób oglądać go oraz inne materiały na platformie tak długo, jak Twój abonament jest aktywny.

Czy kurs jest aktualny?

Staramy się aby wszystkie materiały na stronie były aktualne. Nie znaczy to, że kurs powstał bardzo niedawno. Często na stronie znajdziesz trochę starsze kursy, jednak regularnie wykonujemy ich rewizję i zmieniamy lekcje - czy to przez dodanie stosownych komentarzy z aktualizacją, czy poprzez nagranie danej lekcji jeszcze raz. Datę ostatniej rewizji znajdziesz w informacjach o kursie.

Czym się różni kurs od warsztatu i ścieżki?

Kursy to kilku godzinne, kompleksowe opracowanie danego zagadnienia, podzielone na lekcje i rozdziały. Często uzupełniają je Warsztaty, które mają formę jednej dłuższej, praktycznej lekcji (30min-1h), natomiast ścieżki stanowią zbiór jednych i drugich materiałów - ułożoną z kursów i warsztatów playlistę, która pozwala Ci kompleksowo opanować dane zagadnienie.

We frontendzie nie można stać w miejscu, niezależnie od tego, czy jest się początkującym, czy zaawansowanym. Narzędzia i techniki się zmieniają, więc trzeba cały czas trzymać rękę na pulsie. Jako twórca kursów i programista mogę spokojnie polecić eduweb.pl jako aktualne i dobre źródło wiedzy.

Adam Romański

helloroman.com

Zacznij naukę w CSS Houdini

  • 1 lekcji wideo

  • 33min materiału

  • Ostatnia rewizja 26.02.2021

  • Certyfikat w ramach ścieżek

  • Dostęp z urządzeń mobilnych