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.
Część w tej lekcji opowiem trochę o
odchudzaniu prezesa czyli sprawdzaniu aby nasze bundle
w sytuacji gdy faktycznie idziemy na produkcję były krótsze i węższe.
Tutaj jest taka strona fitness online i możemy z niej skorzystać.
Klikając TUTAJ nasz kod HTML owy kod CSS
owy aby porównać które z tych elementów faktycznie zostały użyte czyli jeśli byśmy
sobie zrobili z Pana o klasie a powiedzmy nie tutaj zrobimy Hello world.
Jestem ciekawy czy to narzędzie generalnie
pozwoli nam na takiego uproszczonego CSS a i tutaj zrobimy sobie klasę a która ma
kolor niebieski oraz klasę B która ma powiedzmy b.
Grunt na Pink.
Zrobimy klina CSS i faktycznie
tutaj coś się im źle wyświetla natomiast widzimy że ten kod wynikowi po pierwsze
jest zainfekowany czyli po pierwsze zmieniły się nam nazwy kolorów na
ekwiwalent które są lżejsze
wszystkie białe znaki czyli Space Enter zostały usunięte.
No i faktycznie ta klasa która nie została użyta czyli klasa B.
Tutaj się też już nie pokazuje na samym
dole jakbyśmy oczywiście dodali tutaj klasy B z powrotem no to ona by się tutaj
pokazała więc fajnie jest takie narzędzie którego możecie też używać oczywiście nie
tylko online możecie je sobie w gal Pawła Paca w parasola.
I ono automatycznie będzie wam się pozbywać całego kodu CSS który nie jest
użyty a jest to o tyle ważne że od niedawna Gogol podobno patrzy tzn.
Gogol w kontekście protestu czy innych narzędzi które
faktycznie mierzą nasz kod i jakoś go oceniają.
Patrzy na nieużywany CSS w związku z czym ma to oczywiście wpływ na SEO.
Ma to wpływ na prędkość ładowania się stron.
No i koniec końców o to o co w tym wszystkim chodzi czyli na użytkowników.
No i oczywiście możecie sobie to ręcznie też sprawdzić.
Więc jedna rzecz to jest fikcja a druga
rzecz to jest usuwanie nie używanego CSS a całkowicie z naszego.
Możemy też tutaj przetestować jakieś strony internetowe np.
firmy Google kropka.
Nie wiem czy Google nam akurat pozwoli się ze skopiować ale pozwolił.
No i widzimy że faktycznie Google nie ma tutaj za dużo tego nie używanego CSS.
Ale jeśli sprawdzimy jakąś większą platformę np.
ePUAP PL no to tego na pewno będzie więcej ponieważ biuro nie patrzy domyślnie
na rzeczy takie jak Hoover style jak klasy które są dynamicznie dodawane.
Więc to że macie takie wartości wysokie nie zawsze znaczy że jest to jakiś błąd z
waszej strony i macie tak dużo tego CSS a nie używanego.
Tylko że po prostu domyślnie usuwa te rzeczy które są dynamicznie dodawane do
waszego HTML a więc oczywiście jeżeli byście to
skonfigurować z paskiem z dowolnym innym narzędziem którego nie używa cie na
froncie tylko jest narzędziem które generuje wam kod No to musicie tam dodać
wszystkie wyjątki które pozwolą Wam określić które klasy zostały
usunięte poprawnie a które powinny zostać bo są np.
dodawane przez JavaScript
ale faktycznie widzimy tutaj że zakładając że wszystkie te klasy które
zostały usunięte przez to narzędzie online zostały usunięte poprawnie.
No to nasz Bundle Six może aż skurczyć się o prawie 60 proc.
więc możemy tutaj sobie podejrzeć jak wygląda ten kod CSS owy usunięty
czyli ten wytyczony i możemy też zobaczyć porównanie jak
wygląda różnica CSS między tym z fałszowaniem no i tym
razem oczywiście im większa strona tym dłużej będzie się nadawała ta strona no i.
Podejrzewam że nawet dla niektórych opcji to może być za dużo.
Widzę że tutaj Cloud fair niestety na tym narzędziu padł.
No ale w każdym razie możecie to sprawdzić
też na swoim komputerze na własnych projektach.
No i generalnie CSS to nie jest tylko narzędzie on line
możecie z niego korzystać też programowo w waszych projektach np.
podczas.
Czyli elementu czy po prostu zanim wyśle się waszą stronę
do klienta to możecie ją troszkę odchudzić przy pomocy tego narzędzia.
Więc warto pamiętać o usuwaniu nieużywanych sektorów oraz manifestowania
naszego bandyta tak aby nie było tutaj żadnych niepotrzebnych znaków.