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.
Cześć tej lekcji mówimy
jak skonfigurować CSS a chłopakiem spośród tych wszystkich Bundle.
Sposobów jak możemy to zrobić.
Zdecydowanie jestem najbardziej skomplikowanym.
Przede wszystkim dlatego że Web Pack
jest nastawiony na to aby go skonfigurować do własnych potrzeb
i nie ma jak w przypadku partnera takiego podejścia które będzie pasowało do każdego
jednego przypadku tylko właśnie w wypadku sami konfiguracja.
Twórcy Packard wychodzą też z założenia że my jako deweloperzy wiemy czego chcemy i
musimy umieć to po prostu skonfigurować aby dobrze korzystać z narzędzia.
Więc to co ja tutaj zrobiłem w tym
przykładzie to ja przeniosłem wszystkie nasze pliki źródłowe do katalogu.
To jest ten parter na którym też już
wcześniej mówiłem który jest bardzo popularny w projektach o prawdziwej skali.
Mnie w takich domowych projektach
tym katalogu będą znajdowały się wszystkie nasze pliki źródłowe które my jako
deweloperzy powinniśmy edytować i które później koniec końców zostaną przetworzone
w taki sposób aby były gotowe aby wysłać je na produkcję.
Więc co się stało w tym pliku. Indeks HTML.
Jak widzicie nie ma już w ogóle
zajmowanych Styrii co jest bardzo ciekawe i jest inną rzeczą
jaka w kontekście porównywania ich do innych modeli banerów
wszystko. Cała logika które style które
Java skrypty czy skrypty powinny się znaleźć znajduje się w łeb.
Kropka kropka.
Jest oczywiście jeden plik można sobie nazwać jak się chce.
Natomiast to jest taka standardowa nazwa która powinna działać i jak to działa.
My paka ładuje dodatkowe plagi których potrzebujemy.
Aby osiągnąć dany efekt
w kontekście budowania naszej produkcji czy po prostu środowiska.
Deweloperskiego i tutaj generalnie mówimy
chłopakowi że entry point to jest kropka indeks.
To jest taki klasyczny
punkt gdzie mimo wszystko pomimo tego że nie mamy tutaj żadnego
drzewa skryptu samego w sobie to importuje my tutaj style czyli te style zostaną.
Zbuntowane razem z całą resztą rzeczy
poprzez JavaScript to nie znaczy że już piszemy CSS w krypcie tylko tyle że
poprzez drzewa z krypty sklep style są importowane do całego naszego banda.
Więc to definiuje nam Entry który plik jest plikiem wyjściowym
później dajemy definicję tego co ma się dziać w naszym module czyli np.
reguły są takie.
Możemy oczywiście zdefiniować jakie chcemy
że dla każdego pliku który pasuje sam faksem czy rozszerzeniem
do kropka CSS albo kropka SAS no to korzystamy z takich liderów Stay Loud.
Generalnie jest potrzebny chłopakowi żeby był w stanie interpretować style ogólnie
tak samo jak Slaughter no i sam Slaughter jestem super facetem CSS a który też
chłopak musi umieć zrozumieć aby zbudować go z naszych plików.
No i później jawnie ustalamy gdzie chcemy nasze pliki mieć ustalone.
Oczywiście to też można zrobić w PSL u i w karpie i wszędzie indziej.
Nawet kąpiel hero czyli tym rozszerzeniu
do VII w którym już też mówiliśmy no to generalnie tutaj możemy stworzyć
sobie dynamiczne ścieżki jak nasze pliki mają się nazywać
w tym przypadku jest to akurat odniesienie do Java skryptu nie do samego CSS a
ponieważ CSS będą zintegrowane wewnątrz naszej klatki HTML owej
no i definiujemy że chcemy aby te wszystkie pliki
znalazły się w katalogu Disc w obecnej ścieżce Pack wymaga od nas ścieżki
absolutnej więc rezultat daje nam ścieżkę absolutną ze ścieżki względnej.
No i dodatkowo musimy tutaj zadeklarować
HTML Web plagi aby wskazać chłopakowi że chcemy korzystać z klatki HTML
bo często nie jest to konieczne jeżeli tylko budujemy aplikacje np.
dla Jamesa wtedy indeks HTML jest nam zupełnie niepotrzebny ponieważ
nie jesteśmy w stanie wyświetlić HTML a możemy tworzyć paczki takie jak np.
chleb czy parasol.
I generalnie uruchamiamy to poprzez polecenie UE tak oczywiście musimy też go
zainstalować poprzez n.p.m. Instal dla UE paka jest to bodajże Web Pack.
No i wszystkie też zależności w naszym pakiet czy pakiet bloku
powinny być wypełnione tak abyśmy mogli tak naprawdę używać tego plagi.
Abyśmy mogli używać stają bez lidera czy SAS.
Jak już jednak to wszystko mamy możemy
wyczyścić konsolę poleceniem Clear i odpalić polecenie Web Pack
i wskazać mu plik konfiguracji czyli nasz Web Pack konflikt.
Jak to uruchomimy
nie stworzy nam się tutaj żaden serwer ponieważ nie stworzyliśmy żadnego serwera.
Trzeba byłoby to jawnie w wypadku określić czy chcemy mieć jakieś serwery z jakimś
lodem więc on nam tak naprawdę tylko i wyłącznie z pasował.
Wszystkie nasze pliki i stworzył katalog silnikowy.
I tutaj widzimy że faktycznie jest katalog
Disc w którym zawarty jest jazz który jest pusty ponieważ
nie jest pusty przepraszam
nie jest pusty ponieważ tutaj te nasze style się zęby dawały.
No i on jest oczywiście też
dosyć definiowany aby zajmować jak najmniej miejsca w kodzie produkcyjnym.
Oczywiście że nie jest pusty
ale widzimy tutaj nasze style rozstrzygnięte lawinowo.
To też nie jest oczywiście najlepsze
rozwiązanie ponieważ zgodnie z zasadą Progressive Enhanced
nie powinniśmy być zależni od drzewa skryptu aby
załadować style na naszej stronie więc tutaj trzeba byłoby naprawdę
chłopakiem trochę kombinować żeby domyślnie style wstrzymywał się np.
do klatki HTML owej.
Możemy to zrobić w konfiguracji tutaj HTML in.
No i możemy też podejrzeć jak wygląda nasz plik wynikowi.
Jest on praktycznie taki sam.
Z tym że automatycznie zostały ujęte tutaj pliki.
Czy jeżeli byśmy to zadeklarowali też
pliki HTML owe mogłyby zostać rozstrzygnięte tutaj.
Tak abyśmy nie musieli tego CSS
tutaj ładować poprzez JavaScript więc moglibyśmy mieć tutaj po prostu linki.
Z szefem tutaj powiedzmy dostaje Access
i łeb Pack sam automatycznie by nam to wygenerował.
Oczywiście to byłoby pewnie zachowane żeby nie było problemów
na środowiskach produkcyjnych.
I też jedna rzecz o której warto tutaj w sumie pokazać.
Jeżeli ja uruchomi jeszcze raz tego chłopaka no to on mi Nat pisze te
wszystkie moje zamiany które tutaj zrobiłem czyli cały ten zbiór.
Wszystkie zmiany w tym że się.
One wszystkie są usuwane i są zastępowane
tym co Web Pack opluwa siebie podczas kompilacji.
Dlatego nie można edytować ani komentować
plików list ponieważ będzie to po prostu trudne do pracy a mamy tutaj ładnie
wydzielony katalog FCC w którym możemy edytować rzeczy dowolne.
Chłopak jest zdecydowanie Najcięższym z
tych czterech narzędzi które przedstawiłem.
Jeżeli zależy ci tylko i wyłącznie na kompilacji CSS a być może nie jest to
narzędzie dla ciebie zwłaszcza że możesz tak naprawdę
kombinować z CSS a nawet przez narzędzia online SAS on line kompilator np.
też.
Zrobi dokładnie taką samą robotę.
Jeżeli nie masz pełnego Flow
zautomatyzowane to też będzie jak najbardziej OK.
W kolejnych lekcjach mówię konkretnie jak.
Pracować ze stresem jakie są.
Najbardziej oczywiste.
Problemy które możecie napotkać np.
korzystając z Ga-Pa a w następnych lekcjach opowiem troszkę
więcej o architekturze czyli na przykład jak układać katalogi i jak dzielić pliki
na komponenty czy na inne abstrakcyjne formy pracy z kodem.
Tak jak w tym przypadku zrobiliśmy sobie
prosty katalog Soros tak tam będziemy dzielić to też na konkretne katalogi które
później możecie wykorzystać w swoim ulubionym framework bądź pracując
bezpośrednio w czystych technologiach HTML CSS i JavaScript.
DO ZOBACZENIA W kolejnym dziale.
webpack.config.js · 2 min
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: ["./src/index.js"],
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
],
},
],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
publicPath: ""
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html',
})]
};