od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
W tym dziale będę opowiadał trochę o procesorach.
Czym są procesory i dlaczego ich potrzebujemy.
Jak już wspomniałem CSS nie jest narzędziem idealnym.
Jest bardzo elastyczny ale ma też swoje słabe strony.
Jednym z takich podstawowych przykładów
jeszcze parę lat temu było to że nie mogliśmy robić zmiennych w Teksasie.
Przed powstaniem CSS Custom Properties
i rozwiązaniem było to że stworzyliśmy super sety CSS czyli jakby nad zbiory
które składową wspierały.
Wszystko to co CSS oczywiście wspierał
ale ponadto dodawały własne funkcjonalności jak np.
zmienne pętle.
Zagęszczenie
sektorów czy dużo innych ciekawych funkcjonalności
i to co jest ważne w kontekście procesorów jest to że to że my piszemy kod w ten
sposób czyli klasyczny CSS tak jakbyśmy chcieli na razie nie jest to żadna.
Wariacja pokroju CSS Still czy les.
Tak czy siak
jeżeli korzystamy z procesorów byłaby przez procesor Dana czyli przeanalizowane
przez program który ktoś napisał często w krypcie.
Będzie dodawała nam różne funkcjonalności jak na przykład auto.
To co pokazałem już wcześniej na
przykładzie CSS a też może być użyte na przykład w sosie laguny które
automatycznie będą miały wszystkie nasze zapytania w oparciu
o listę przeglądarek które chcemy wspierać.
Czy dynamicznie generować kod pętla.
Czy jeżeli my napiszemy sobie pętlę
w czasie no to ten kod powiedzmy zostanie trzykrotnie.
Ale tutaj byśmy mieli inną wartość tej
zmiennej w zależności od tego która jest to literacka pętli.
Do takich rzeczy oczywiście warto mieć
podstawy programowania ogólnie nie tylko CSS a.
Ale to jest najważniejsza część
tego czego powinniśmy powinniście wiedzieć o procesorach.
Przede wszystkim że nie jesteśmy w stanie bezpośrednio ładować do przeglądarki np.
plików czasowych jeżeli do
przeglądarki załadować byśmy plik kropka S CSS
no to oczywiście jeżeli korzystamy z Pascala czyli takiego menedżera który
automatycznie nam to tutaj zamienia na CSS to nie będzie to działało.
Nie jesteśmy w stanie bezpośrednio
załadować w przeglądarce CSS ów tak samo jak nie jesteśmy w przeglądarce w stanie
załadować krypta czy framework no po prostu to nie działa w ten sposób musimy
doładować jakby najpierw w zależności bądź w przypadku procesorów.
Ten kod przeanalizować i wypalić kod źródłowy który będzie
załadowany w przeglądarce czyli często robi się tak że KOD dzieli się na
katalogach na serce który jest skrótem od sort.
Jak kod źródłowy i dysk jak KOD
dystrybuowany do różnych przeglądarek to jest ten kod który procesory opluwają.
Więc tak naprawdę czego na pewno nie robić jeżeli korzystacie z procesorów.
No to po pierwsze nie komentować.
Jeżeli korzystacie z getta tego co procesory wykluczyły
ponieważ to się przy każdej operacji tego procesora
będzie zmieniało więc wasze zmiany tak naprawdę nie będą miały znaczenia.
Po drugie.
Komentowanie tego co procesory wypisują jest bez sensu
ponieważ ponowne uruchomienie procesora sprawi że nie będziemy musieli tego
zapisywać w gazecie tylko będziemy mogli to dynamicznie wygenerować
przez co nasze repozytorium będą lżejsze będzie łatwiej przeglądać pól Request czy
po prostu widzieć zmiany w naszym projekcie.
Na czym to polega czyli generalnie zasada
najprostsza nie czujemy dysków czy aut butów.
Zależy jak sobie skonfigurować nasze
świece sorry ale nie można plików wynikowi komentować ani edytować bezpośrednio.
Do tego służą pliki źródłowe które można np.
w pliku serce ustawić w związku z czym nie
będę przedłużał już dłużej następnej lekcji opowiem
jakie są najpopularniejsze dostępne procesory kodu w kontekście CSS a
oczywiście później omówi je jak skonfigurować wasze
środowisko tak abyście mogli korzystać z jednego z nich.
Ja wybrałem Sasa ponieważ najlepiej go znam i najbardziej go lubię.
Oczywiście możecie skonfigurować wasze
edytor kodów tak by pracowały z innymi procesorami.
Tak więc zapraszam do następnej lekcji gdzie mówimy dostępne procesory CSS.