Szybkie i Nowoczesne Strony
4 godz. 29 min · ReactJS · Full-stack i Programowanie
Adam RomanskiFrontend developer & YouTube CreatorI tak i nie! Gatsby to faktycznie React wzbogacony o pewne supermoce. Na początku kursu dowiesz się, jak poprawnie ich używać. Opowiem Ci w jaki sposób zaszyto Reach Router we wnętrze Gatsbyego – zobaczysz, że to bardzo intuicyjne i wygodne rozwiązanie. Ponadto opowiem Ci, w jaki sposób tworzyć uniwersalne, globalne style i layouty dla naszej aplikacji, aby zaoszczędzić sobie pracy. W tym wszystkim pomogą nam pluginy przygotowane specjalnie dla Gatsbyego (psst! Czy wiesz, że Gatsby posiada ich ponad 1500?).
Nie masz konta na fejsie? Nie szkodzi! Facebook stworzył nie tylko popularną platformę społecznością (i Reacta 😎), ale także przełomową specyfikację dla GraphQL – języka służącego do komunikacji między klientem a serwerem. To właśnie GraphQL zasila Gatsbyego w warstwę danych. Nie ważne czy mówimy o obrazkach, plikach markdown, json, yaml czy po prostu API – aby to wszystko ze sobą pogodzić musisz znać GraphQL. A ja w tym kursie pokażę Ci, że korzystanie z niego to czysta przyjemność.
Na początku pomysł importowania obrazów przez GraphQL może Ci się wydawać przerostem formy nad treścią. Dlatego poświęciłem w tym kursie cały dział na to, aby pokazać Ci, jak potężne możliwości stoją przed developerem wyposażonym w GraphQL, Sharp Image Transformer oraz Gatsbyego. Zapomnij o skalowaniu, przerabianiu i dostosowywaniu obrazków ręcznie w programach graficznych. Sprytne rozwiązania w Gatsbym pozwolą Ci za pomocą paru linijek zoptymalizować zasoby wizualne dla twojej strony.
Zarządzanie treścią to krytyczny punkt wielu produktów cyfrowych – z jednej strony CMS (content management system) musi być użyteczny dla developera przygotowującego całą strukturę treści, ale z drugiej strony ich końcowym użytkownikiem zawsze jest edytor, który nie musi znać się na programowaniu. W tym kursie pokażę Ci, jak w dosłownie kilku krokach stworzyć wygodną w użyciu strukturę dla bloga w oparciu o pliki markdown. Z małym udziwnieniem. Będą to pliki MDX łączące prostotę plików markdown z potężnymi możliwościami Reacta.
HeadlessCMS to podejście, które może przywoływać na myśl horrory klasy B, natomiast ich działanie przyprawia o zachwyt rodem z komedii romantycznej. Gdy zobaczysz jak proste, intuicyjne i wygodne (zarówno dla developera i edytora) jest korzystanie z podejścia headless, już nigdy nie wrócisz do klasycznych CMS-ów. W tym kursie pokażę Ci to na przykładzie fenomenalnego produktu jakim jest DatoCMS, którego odkryłem podczas budowania dużej struktury informacji dla strony mojej firmy.
Deployment strony w Gatsbym zajmuje dosłownie kilka sekund, zwłaszcza jeśli użyjemy do tego odpowiednich narzędzi. W tym kursie dowiesz się, w jaki sposób Gatsby przygotowuje zasoby przed wysłaniem ich na serwer, skąd biorą się dane w Gatsbym oraz w jaki sposób wdrożyć gotową stronę za pomocą serwisu Netlify.
Ten kurs powstał z myślą o osobach, które chcą być na bieżąco ze zmieniającym się ekosystemem frontendowym. Kurs koncentruje się nie tylko na Gatsby.js, ale także na technologiach orbitujących wokół tej technologii, korespondujących z nowym trendem nazwanym JAMStack.
2.19.12+
Okej skoro nasza strona główna wygląda już tak jak trzeba to możemy
teraz sobie przejść do wykorzystania sharp transformer do tego żeby właśnie
wykorzystywać obrazki przetworzone przez ten plugin więc
teraz przejdźmy sobie tutaj i zaraz pokażę ci jak możemy
napisać query wykorzystujące właśnie sharp transformer a nie po prostu public url
tak jak to miało do tej pory czyli po prostu skopiowany do folderu public
przez gatsby obrazek jeśli odpalimy sobie teraz localhost
z graphql wybierzemy file
możemy nawet podać tutaj name dla
przypomnienia equals hero dostajemy
ten obrazek i teraz spójrzmy co my tu jeszcze mamy szukamy konkretnej
rzeczy szukamy child image sharp tak się nazywa ten element
w graphql którego będziemy poszukiwać ponieważ to on odpowiada za przetwarzanie przez
sharpa właśnie tutaj mamy zresztą w nazwie sharp przez sharpa obrazek
który będziemy wykorzystywać za chwilę i teraz zauważysz że mamy tutaj
dwie opcje fluid i fixed i to są dwie rzeczy które są
dla nas bardzo istotne bo to na nich będziemy bazować i teraz zanim pokażę
ci jak to wykorzystać przy takim zwykłym img jak mamy w tym miejscu to
muszę ci wyjaśnić dlaczego to fluid i fixed powstało ponieważ istnieje taka biblioteka
jak gatsby image którą pokażę ci w następnej lekcji i to ona bardziej wykorzystuje
właśnie te właściwości fixed i fluid polega to generalnie na tym tak
w dużym skrócie że fixed używamy wtedy kiedy wiemy i jaki
rozmiar ma mieć dane zdjęcie na danej rozdzielczości ekranu to znaczy jeśli na przykład
na desktopie mamy mieć 500 na 600 to wtedy możemy wykorzystać właśnie
fixed podać mu tutaj width 500
później height 600 a
następnie pobrać sobie odpowiednio jakiś format który nas
akurat interesuje zauważ że właśnie mamy tutaj kilka tych formatów mamy
base 64 którego nie polecam mamy tracedSVG który może być
całkiem ciekawy i kilka jeszcze innych opcji ale za chwilkę ci to wszystko wyjaśnię
w każdym razie chodzi na razie tylko i wyłącznie o to rozróżnienie fixed
używamy w momencie kiedy wiemy dokładnie ile pikseli ma mieć obrazek
wyświetlany na stronie rzadko się to zdarza zazwyczaj mamy fluid czyli
takie obrazki które mają jakąś maksymalną szerokość i wysokość natomiast
rozciągają się do szerokości kontenera w którym się znajdują i w
praktyce zobaczysz że to ma zastosowanie wyłącznie właśnie w tym gatsby image
i tak naprawdę jeśli teraz wykorzystamy to w takim zwykłym tagu img
to my odpowiadamy za to jaki będzie rozmiar tego obrazka więc
nie ma to dla nas jakiegoś specjalnego znaczenia czy wybierzemy fluid czy fixed w momencie
kiedy korzystamy z img jest nam to raczej wszystko jedno ja
zazwyczaj wykorzystuje fluid i mogę tutaj określić sobie max-height
i max-width więc mogę tutaj określić że na przykład ten obrazek
ma mieć maksymalnie 800 pikseli szerokości i
wysokości niech będzie na przykład 1200 to
co jest super interesujące to możemy tutaj też określić quality zaraz
ci pokażę jak to działa i to co nas szczególnie tutaj interesuje
to formaty które możemy sobie tutaj wykorzystać w następnej lekcji
pokażę ci jak działa gatsby-image który bardzo dobrze współgra z tymi wszystkimi tutaj
rzeczami typu base 64 traceSVG i tak dalej natomiast w
mojej praktyce w takich komercyjnych projektach jak korzystając z gatsby
to prędzej czy później zdarza się tak że gatsby-image ma pewne ograniczenia na
przykład pozycjonowanie obrazków przy wykorzystaniu gatsby-image jest
naprawdę udręką i szczerze mówiąc to repozytorium jeszcze nie jest
jakoś super dopracowane to gatsby-image potrafi czasami zawieźć więc jeśli mamy
jakieś takie proste elementy na stronie jakieś proste layouty które wykorzystają
po prostu zdjęcie to możemy spokojnie sobie to gatsby image wykorzystać bo
on daje nam bardzo dużo jeśli chodzi o optymalizację on się wczytuje dopiero w momencie kiedy zdjęcie
pojawi się na ekranie czyli na scroll po prostu się wczytuje tak
zwany lazy-loading wykorzystuje właśnie rzeczy typu tracedSVG czyli
najpierw pokazuje nam taki jakby traktowany obrazek svg który
jest łatwiejszy do wczytania dopiero później wczytuje zdjęcie przez co użytkownik widząc taką
stronę po prostu ma takie przyjemniejsze wrażenie że
już coś na tej stronie jest to wszystko już następnej lekcji natomiast w
mojej praktyce zazwyczaj ograniczam się do tego żeby wykorzystać src
source set tak zwany i sizes a następnie
wrzucić to wszystko do tagu img i może nie będziemy
mieć tam tracedSVG nie będziemy mieć jakiś super efektów na wczytanie o ile
sami sobie ich nie napiszemy ale to co będziemy mieć to będziemy mieć super responsywność
ponieważ source set jak widzisz zawiera różne ścieżki do różnych plików
w zależności od brake pointu na którym się znajdujemy dla najmniejszych rozmiarów
ekranu on wczyta nam najmniejsze zdjęcie dla średnich wczyta średnie dla największych
największe przez co oszczędzamy dużo danych transferowych out-of-the-box
praktycznie po prostu gatsby za nas przygotowuje kilka plików wcześniej
w dawnych czasach było tak że musieliśmy sobie sami te wymiary przygotować tutaj
mamy to automatycznie zrobione i dlatego mówiłem że bardzo fajnie jest wykorzystywać
właśnie graphql do zaczytywania obrazków w gatsby ponieważ mnóstwo
roboty mam po prostu oszczędza zauważ też że możemy określić jakość zaraz pokażę
ci jak to wygląda w praktyce tylko skopiujmy sobie najpierw to co tutaj napisaliśmy
czyli podmieniamy to co mamy wewnątrz klamr ten
file zauważ że teraz już nie będziemy mieć data file public
url tylko file child image sharp i tak dalej więc
najpierw sobie wyplujmy może to w jakimś console logu żeby zobaczyć jak teraz wygląda nasze
data zauważ
że obrazek nam zniknął więc mamy
child image sharp fluid i dopiero mamy src source set i sizes
więc możemy sobie to wyciągnąć nawet
możemy po prostu kopiować te nazwy które mamy tutaj moglibyśmy to też
zdestrukturyzować oczywiście jest taka możliwość to możemy sobie zrobić później
a na razie zróbmy tak tagu img
możemy właśnie wykorzystać z source set który podaje nam kilka wymiarów
i musimy też zawsze podać sizes żeby
ten source set nam odpowiednio działał teraz jak
to zapisze cannot read property fluid of undefined gdzie
my to mamy czyżbym coś pominął
file fluid okej
mamy data nie mamy file po kropce teraz
będzie dobrze okej
i nasz obrazek się pojawił i teraz pokażę ci jeszcze jedną właśnie bardzo fajną rzecz
czyli to quality jeśli teraz zmniejszę quality do
10 to zauważ co się dzieje z naszym
obrazkiem to jest naprawdę mega mega dobre bo możemy automatycznie
sterować jakością naszego obrazka jeśli chcemy żeby był bezstratny żeby był po prostu 100%
to mamy 100% ale jeśli chcemy żeby był trochę gorszy żeby po prostu szybciej
się wczytywał bo na przykład nie jest to jakiś najważniejszy obrazek na świecie to zauważ że ta jakość
nie spada jakoś diametralnie może nie jest już tak idealna bo widzimy pewne
takie tutaj kształty troszkę popsute i tak dalej natomiast nadal jest to obrazek
który może być gdzieś na stronie może nie na hero bo hero zawsze musi być takie
mega uderzające i ładne ale nadal jest to w
miarę dobrej jakości obrazek jest czytelny więc możemy w prosty sposób manipulować
jakością naszego obrazka i jak sobie zobaczysz to tutaj mamy
naprawdę sporo jeszcze innych opcji które możemy wykorzystywać jedną
z takich ciekawszych którą chciałem ci pokazać jest duo tone tylko muszę wrócić
do dokumentacji sharp jak wpiszę sobie sharp transformer duo tone
to gdzieś zaraz znajdziemy na pewno jakiś przykład duo tone
przyjmuje obiekt po prostu jak
sobie wkleimy tutaj coś takiego czyli mamy duo tone dwukropek
i w obiekcie mamy highlight i shadow czyli dwie wartości dwa kolory zapisane
w heksadecymalnym formacie to teraz jak wrócimy
sobie do naszej strony bang to nasza strona zmieniła od razu kolor i
to jest też taki mega ładny mega ciekawy efekt trochę taki w stylu spotify oni
mieli taką kampanię reklamową więc zauważ że mamy tutaj naprawdę sporo
opcji zobacz jak możemy to wszystko robić możemy jeszcze zmienić opacity na przykład
więc jeśli dodam tutaj opacity żeby na przykład ten duo tone nie był
uderzający na przykład zrobimy 70 to
wtedy ten kolor jest taki trochę bardziej wyblakły i to jest tylko jedna z opcji zobacz
że mamy tutaj jeszcze trim mamy crop mamy fit mamy mamy
naprawdę sporo rzeczy mamy rotate możemy sobie obracać ten obrazek zachęcam
cię do poeksperymentowania właśnie z tym query żeby sobie zobaczyć wszystkie te opcje
link możesz znaleźć w opisie do tej lekcji tutaj jest właśnie
taki przykład z dokumentacji gdzie możemy sobie trochę popatrzeć co tutaj się dzieje więc po
raz ostatni jeszcze spójrzmy na nasz kot i podsumujmy co tutaj się wydarzyło napisaliśmy
sobie query które wykorzystuje sharp transformer do tego żeby umożliwić nam
wykorzystanie albo opcji fluid albo fixed która w przypadku
tagu img nie ma jakiegoś wielkiego znaczenia bo tak jak mówiłem to my tutaj decydujemy
jaka będzie wielkość tego obrazka wewnątrz opcji
fluid wykorzystaliśmy sobie maksymalną wysokość szerokość i jakość
wykorzystaliśmy duo tone które zmienia nam kolory i później wypluliśmy
sobie z tego src czyli to src które znamy z obrazków source set które
odpowiada za ładowanie odpowiednio dopasowanych do rozdzielczości obrazków oraz
sizes które właśnie współpracuje z tym src teraz jeszcze ostatnia ostatnia rzecz
którą chciałem ci pokazać co jeśli ten styled byłby div i jeśli
zamiast src chcielibyśmy podać tutaj po prostu background-image
moglibyśmy sobie tutaj podać jakiegoś propsa może się nazywać image może się nazywać bg
image może się nazywać jakkolwiek może się nazywać background na przykład
i chcemy podać tutaj propsa do styled component żebyśmy
mieli tutaj background image po prostu wystarczy że zrobimy
coś takiego styled component wykorzystamy sobie url otworzymy
tutaj funkcję zdestrukturyzujemy sobie image czyli tego propsa
którego podaliśmy do tego styled component w tym miejscu po strzałce po prostu
go sobie wyrzucimy tutaj jedyne co musimy tutaj podać
to po prostu właśnie data file child image
sharp fluid src w
tym momencie jak odpalimy sobie stronę to nasz obrazek również
jest widoczny to tutaj mamy background repeat którego nie wyłączyłem po prostu ale
widzisz że podanie propsa również działa jeśli chcemy mieć po prostu w
div background image po prostu wykorzystujemy url i za ten
url po prostu odpowiada props podany tutaj ponieważ
pod tym obiektem znajduje się nic innego jak
ścieżka do obrazka znajdującego się wewnątrz public static i tak
dalej więc to tyle a od następnej lekcji pokażę ci jak wykorzystać gatsby image przed
którym cię trochę pewnie nastraszyłem ale nie bój się to nie jest aż tak okropne