Cześć w tym wideo stworzymy interaktywną mapę polski zgodną z duchem idei progressive enhancement.
‍

No więc mamy taki oto przykład prosty plik
html z jednym obrazkiem map.png jest to obrazek
mapy województw na której będziemy pracowali.

Więc nasz cel jest taki aby stworzyć interaktywne elementy tutaj to znaczy w momencie kiedy klikamy na dane województwo zostajemy przeniesieni do odpowiedniej definicji.

No i oczywiście zależy nam na tym aby te kształty były respektowane
zgodnie z tym jak one mniej więcej są usytuowane na mapie
polski więc zgodnie z duchem idei progressive enhancement zaczniemy od naszego html.

Tworzymy sobie prostego diva o klasie "map" w którym będziemy umieszczali wszystkie nasze
elementy no i zależy nam na tym aby była to lista klikalnych
linków w związku z czym stworzymy właśnie to, więc tworzymy sobie tutaj naszą listę nienumerowaną, no i wewnątrz niej będziemy
mieli pojedyncze elementy tej listy to jest jedyny poprawny element html
który może znajdować się bezpośrednio wewnątrz "ul".

l no i oczywiście nasze odnośniki, to odnośniki będą kierowały nas na
odpowiednią stronę wikipedii i oczywiście tutaj będziemy przekierowywali nasz ruch na odpowiednią stronę.

Tutaj możemy sobie zamienić wyescape'owane znaki UTF-8 na prawdziwe znaki z polskimi akcentami, to też nam zadziała no i będziemy musieli na szczęście podmieniać tylko i wyłącznie nazwę województwa aby przenieść się na daną podstronę.

Więc zacznijmy sobie od województwa mazowieckiego
wstawimy sobie tutaj tekst do naszego elementu jak widzimy ten element listy już nam się tutaj pokazał, co możemy jeszcze zrobić to stworzyć sobie dedykowaną klasę dla tego
województwa, bo każde województwo będziemy musieli troszkę inaczej ostylować aby stworzyć sobie właśnie takie kształty dla każdego z nich.

No i tutaj od razu chciałem zrobić wstęp do tego że w html-u mamy
odpowiednie znaczniki do tego aby tworzyć interaktywne mapy
jest to znacznik "map" wewnątrz którego umieszczamy elementy "area"
natomiast są one o tyle problematyczne że nie możemy stylować ich z poziomu css-a, mają też różne inne implikacje jak na przykład kwestie
dostępności czy implikacje SEO oczywiście jeżeli chodzi
o wyszukiwarki internetowe one zmieniają swoje algorytmy dosyć często i to może się w przyszłości zmienić, natomiast fakt że elementy "map"
i "area" nie są stylowalne z poziomu css-a, skłonił mnie do przygotowania takiego przykładu gdzie będziemy korzystali z faktycznie semantycznych tagów i po prostu ostylujemy je tak aby wyglądały jak nasza mapa.

Jest to oczywiście zgodne z tym co progressive enhancement mówi, w dużym skrócie chodzi o to aby projektować nasze strony w taki sposób aby były one używalne nawet jeżeli na przykład nie mamy css-a czy javascriptu, czyli na każdym etapie ładowania strony ta strona powinna być używalna - w związku z czym jeżeli teraz ja sobie kliknę na ten odnośnik mazowieckie oczywiście przeniesie mnie tutaj
do podstrony wikipedii w związku z czym moja strona pomimo
tego że to jest czysty html jest funkcjonalna w tym momencie.

No i usprawnimy sobie troszkę ten experience tworząc odpowiednie style
css-owe, w związku z czym zacznijmy od stworzenia selektora
który złapie nam ten obrazek mapy no i
może troszkę go podrasujmy tutaj filtrem ustawimy mu
brightness na 1.5 i no może nas zostawić tak chciałem jeszcze kontrast powiększyć zobaczymy czy to coś zmieni
1.2 no nie ma chyba za dużo różnicy więc zostawmy to jako brightness
jest to po prostu troszkę bardziej czytelne niż nasz obrazek początkowo
to co dalej chcielibyśmy zrobić to umieścić wszystkie elementy listy
na tej naszej mapie w związku z czym stworzymy sobie tutaj selektor
samej mapy i ustawimy mu position
relative i wypozycjonujemy
wszystkie elementy listy wewnątrz tego elementu "map".

Możemy tutaj sobie ustawić jeszcze chwilowo background na #34b399
tak aby te elementy były pozycjonowane względem tego
właśnie kontenera materiał o position też znajdziesz na kanale, karta powinna wyskoczyć Ci w prawym górnym rogu ekranu, więc stworzymy sobie takie style aby nasze "ul" i nasze "li"
były pozycjonowane absolutnie, no i ustawimy im
top na 0 left na 0 width
na 100% i height na 100%, możemy
przy okazji też wyzerować tutaj te punktory czyli
"list-style-type: none".

Oczywiście nie musielibyśmy tego ustawić
na pojedynczych elementach listy ale w ten sposób po prostu będziemy mieli jeden selektor który łapie więcej elementów, no i tak samo padding
ustawimy na 0 i margines również na 0 i teraz widzimy że ten element jest tutaj wypozycjonowany w lewym górnym rogu tego kontenera "map" i aby z tego naszego elementu "li" stworzyć taki oto kształt, czy możemy zacząć od województwa mazowieckiego wykorzystamy taki trik, że każdy element listy będzie miał background biały
oczywiście ten tekst sobie ukryjemy i przy pomocy
właściwości jaką jest "clip-path" przytniemy ten element do odpowiedniego kształtu.

‍
Więc zanim do tego przejdziemy może jeszcze ukryjmy sobie ten tekst
mazowieckie natomiast nie możemy zrobić tutaj po prostu czegoś takiego jak "display: none" czy "visibility: hidden" ponieważ ma to implikacje z poziomu dostępności.

W związku z czym jest taka klasa której możemy sobie użyć, ona
się nazywa różnie w zależności od projektu może to być albo "visually-hidden" albo "sr-only" no i to jest taki sposób który po prostu ukrywa element tak, że nie jest on widoczny dla użytkowników widzących
natomiast będzie on dalej dostępny z poziomu czytników ekranowych o tym oczywiście też mogę zrobić materiał w przyszłości, nie będziemy się nad tym tak długo zatrzymywać.

Więc to co możemy zrobić to na naszym odnośniku "a" ustawić
sobie nowego "spana" i ustawić mu klasę
"visually-hidden", więc po umieszczeniu tego
tekstu wewnątrz tego "spana" ten tekst jest niewidoczny, natomiast gdybyśmy korzystali z czytnika ekranowego on dalej zostałby poprawnie przeczytany.
‍

Więc teraz przejdźmy sobie do "clip-path" i na naszym
elemencie "li", oczywiście będziemy musieli to stylować osobno dla każdego województwa dlatego stworzyłem tutaj klasę mazowieckie i możemy to od razu zrobić w tym miejscu.
‍

Więc tworzymy sobie klasy mazowieckie i tutaj wykorzystamy "clip-path", więc "clip-path" ma dosyć dużo możliwości składniowych możemy wykorzystywać różne kształty na przykład "circle" i tutaj podać sobie wartość na przykład w pikselach ten element nam się przyciął tylko że ten white ustawiamy na każdym elemencie "ul", a nie na pojedynczych listach w związku z czym ustawmy sobie tutaj "map"
"li" i ustawmy kolor na biały i w tym momencie widzimy, że
ten element już tutaj się przyciął.

Możemy chwilowo ukryć naszą mapę
tylko oczywiście musimy to ustawić na
elemencie "img" no i on zniknął nam ponieważ nie mamy żadnego elementu który nie jest wypozycjonowany absolutnie więc możemy
zamiast robić tutaj display none zrobić sobie "opacity" 0.
‍

No i widzimy że ten element nam się tutaj wyświetla
czyli ten element listy który ma klasę mazowieckie jest przycięty
do takiego rozmiaru jaki tutaj podaliśmy, no i oczywiście możemy też tutaj podawać wartości w procentach, bądź w przypadku poligonów możemy w ogóle definiować pojedyncze punkty
naszego kształtu czyli na przykład jeżeli chcielibyśmy aby w osi x
nasz poligon zaczynał się od lewego górnego ekranu potem
gdzieś tam w połowie miał kolejny element no i powiedzmy
50%, 75% kolejny, no to oczywiście przytnie się to nam natomiast jest to trudne w pracy ponieważ nie do końca wiemy w którym miejscu powinniśmy ustawić to nasze przycinanie.

Czyli jak tutaj sobie usuniemy to "opacity" to zobaczymy że musimy
tak to wypozycjonować aby ten element mazowieckie był ładnie wycięty
i tego z reguły nie robi się ręcznie w związku z czym ja chciałem
zaproponować tutaj takie narzędzie które znajdziecie też na stronie koduje.pl, jest to darmowe narzędzie które nazywa się "Clippy" no i ono jest tutaj dostępne do waszej dyspozycji, oczywiście też możecie korzystać z linka bezpośredniego, ale jeżeli nie znacie tego linka no to możecie wejść na koduje.pl - narzędzia deweloperskie i znajdziecie
tutaj to narzędzie, więc dzięki niemu jesteśmy w stanie tworzyć dowolne
kształty po prostu przeciągając dane elementy i jak widzimy tutaj generuje nam się "clip-path", którego możemy użyć w naszych projektach czyli jak to sobie tutaj wkleję, no to przycięło mi się to zgodnie z tym co sobie zadeklarowaliśmy.

‍
Więc to co my zrobimy to ja tutaj wstawię
obrazek naszej mapy i to co jest istotne
aby to rozwiązanie mogło nam zadziałać jest to że musimy znać
rozmiar naszego obrazka zanim zaczniemy tutaj wykiwać nasze elementy, w związku z czym jak tutaj podejrzymy sobie w vs-codzie, mamy rozmiar natywny naszego obrazka to jest 523x478px, więc ja tutaj tej wartości użyję właśnie w naszym demo 523x478px
i jak widzimy mamy naszą mapę już załadowaną i w tym momencie nic nam się nie będzie rozjeżdżał o gdy faktycznie załadujemy ten obrazek na naszej stronie.

Więc to co możemy tutaj zrobić to zaznaczyć sobie jeszcze to "show outside clip-path" i widzimy to co faktycznie będzie przycięte, gdy już zaaplikujemy sobie to "clip-path", więc to co możemy zrobić to wybrać sobie tutaj z listy "custom polygon" i po prostu wyklikać
kształt województwa mazowieckiego, więc tutaj trzeba
oczywiście być troszkę ostrożnym, bo jeżeli za bardzo
wyjedziemy poza linią to po prostu ten nasz poligon nie będzie wyglądał
dobrze ale w razie czego też możemy to sobie po prostu przeciągnąć więc nie ma z tym najmniejszego problemu, więc zaaplikujemy sobie tą klasę i gdy zobaczymy nasz element już może ten background sobie usuńmy to faktycznie ten element nam się tutaj wypozycjonował - tylko jako że on ma tło białe no to faktycznie zasłania nam nazwy województwa więc to co możemy zrobić to po prostu ustawić sobie
tutaj "opacity" na 0.5, albo pozbyć się po prostu tego tła domyślnie i faktycznie gdy będziemy chcieli na przykład podświetlić
ten element no to wtedy możemy wykorzystać trik z backgroundem
i z "opacity", skąd wiemy, że w tym momencie to działa no możemy po prostu wyłączyć sobie ten obrazek i tutaj ustawić background na biały
i widzimy że ten element nam się tutaj pojawi tylko oczywiście musimy zrobić sobie "opacity" na 0, zamiast "display: none", więc może zaadresujmy ten problem, zróbmy teraz dwie rzeczy po pierwsze
obsłużymy taki przypadek kiedy tego obrazka nie ma
tak aby dalej nasza mapa dobrze się wyświetlała więc
aby to zrobić możemy ustawić tutaj na kontenerze "map"
odpowiednią szerokość 523px.

No i jako że elementy w środku są elementami pozycjonowanymi absolutnie musielibyśmy też na sztywno ustawić tutaj wysokość natomiast nie jest to najlepsze pod kątem skalowalności w związku z czym to co możemy zrobić to po prostu skopiować sobie "aspect-ratio" tego obrazka i jest taka właściwość jak właśnie "aspect-ratio", w przeszłości korzystało się z paddingów na danych kontenerach aby symulować to "aspect-ratio", natomiast
możemy tu po prostu wpisać 523/478
nie 500 i faktycznie w tym momencie kiedy
zmienimy naszą szerokość powiedzmy na 800px to nasza mapa
będzie dalej dobrze wyglądać tylko tutaj musielibyśmy ustawić sobie może "width" na 100%, albo w ogóle wypozycjonować samo
"map.img" równolegle, absolutnie razem
z naszymi elementami "map" i "ul" i w tym momencie nieważne
od tego jaka będzie szerokość naszego kontenera czy to 523px czy jakakolwiek inna ten element będzie się nam pozycjonował.

Więc to co możemy zrobić dalej to ustawić sobie style dla naszego
"li" czyli że na "hoverze" i na "focusie" to
przypominam musi być też dostępne z poziomu klawiatury
czyli powiedzmy że nawet "a:focus" i zamiast
"li:focus" zrobimy sobie "a:hover", zrobimy sobie background
#34b399 no i tutaj możemy sobie dodać też
"map a", raczej jest to rzadki przypadek użycia pozycjonowania
absolutnego ale w tym przypadku do naszego komponentu mapy myślę że spokojnie możemy tego wykorzystać no i widzimy że w momencie po najechaniu na dowolny punkt który zadeklarowaliśmy na naszym "clip-pathie" na "li" to nam
się podświetla i tak samo jeżeli byśmy się tabowali no to ten element będzie nam się zaznaczał i tutaj możemy ustawić sobie "opacity" na 0.5
i może zmienić kolor na #696e9e i w tym momencie kiedy zapiszemy faktycznie mamy taki efekt że po najechaniu myszką robi się nam to troszkę fioletowe no i po stabowaniu się tutaj
używam taba też ten element nam wskoczy więc analogicznie
teoretycznie moglibyśmy sobie po prostu skopiować ten selektor i na
active ustawić sobie #34b399 i po kliknięciu na dany element on się będzie nam podświetlał na kolor zielony i oczywiście przekierowywał na naszą stronę pod spodem.

Więc stwórzmy sobie jeszcze kilka innych "clip-pathów", tak aby lepiej zapoznać się z narzędziem aby zresetować sobie te pole możemy po prostu wybrać inny kształt i wrócić do "custom polygon", więc zróbmy sobie może województwo podlaskie, skopiujemy podlaskie
wstawiamy tutaj naszego "clip-patha" i po przejściu
do html-a oczywiście musimy to sobie tutaj dodać więc jak to zrobić w sposób wydajny?

No według mnie możemy po prostu skopiować sobie słowo mazowieckie
teraz w vs-codzie nacisnąć ctrl bądź cmd+D aby zduplikować
nasz kursor i w momencie gdy klikniemy to dwa razy no to zaznaczy
nam się zarówno klasa link jak i sam tekst więc możemy
tutaj po prostu wpisać podlaskie i po zapisaniu
mamy już ładnie przycięte dwa województwa tutaj podlaskie moglibyśmy troszkę poprawić, czyli zaznaczyć
i przeciągnąć trochę w tę stronę przekopiować sobie "clip-patha"
i wrzucić to do podlaskiego i w tym momencie to wyświetla się nam ok, więc tak dla sportu jeszcze raz to zrobimy dla warmińsko-mazurskiego, a resztę już oczywiście zrobię na przyspieszeniu.

Czyli jeszcze raz robimy warmińsko-mazurskie, tutaj bez polskich znaków więc to już będziemy musieli troszkę inaczej zrobić, wracamy sobie do naszego narzędzia wyklikujemy obszar naszego województwa zamykamy ścieżkę, robimy małe poprawki, kopiujemy, wklejamy, wracamy do html-a
kopiujemy, element shift+option +↓ bądź w ↑
albo shift+alt+↓ bądź ↑ no i tutaj ponownie zaznaczamy sobie podlaskie i wpisujemy warmińsko-mazurskie i tutaj musimy się pozbyć tylko
tego polskiego znaku z nazwy klasy po zapisaniu faktycznie
widzimy że te elementy ładnie się nam przycięły no i jak klikniemy to oczywiście jesteśmy przekierowywani na odpowiednie podstrony.

Teraz co istotne w momencie gdy wyłączymy te style nasza strona może wygląda gorzej ale jest tak samo operacyjna możemy dalej korzystać z pełnej funkcjonalności witryny niezależnie od tego czy nasz css jest czy go nie ma na naszej stronie, więc póki co jest to zgodne
z ideą progressive enhancement, jeszcze za chwilę dodamy troszkę javascriptu aby sprawić że experience korzystania z tej aplikacji będzie przyjemniejszy.
‍

Aale w międzyczasie ja przekopiuję sobie wcześniej przygotowane
"clip-pathy" dla naszych województw i w tym momencie dalej powinny nam się te elementy dla których mamy mark-up podświetlać i tak faktycznie jest w związku z czym wrócimy sobie do naszego
html-a i stworzymy również nasz mark-up, jego też sobie przekopiuję natomiast będziemy musieli zaktualizować ten link.

Więc to usuwamy, ja wklejam sobie te elementy listy
tutaj formatowanie nam się troszkę zepsuło no ale oczywiście możemy to sobie naprawić no i w tym momencie faktycznie cała nasza mapa jest już
interaktywna i możemy po niej się też nawigować przy pomocy taba
tutaj warto też wspomnieć że jednym z kryterium poprawnej dostępności naszych stron www jest fakt aby elementy były focusowalne
w sposób naturalny dla użytkownika czyli chcielibyśmy aby najpierw było zaznaczone powiedzmy zachodniopomorskie, potem pomorskie, warmińsko-mazurskie, podlaskie no i oczywiście kolejne województwa analogicznie od lewej do
prawej z góry na dół więc ja szybko poprawię ten mark-up...
‍

Ok mamy już poprawiony mark-up, zobaczmy czy faktycznie gdy klikniemy sobie ten pierwszy element
focus będzie nam podążał naturalnie i faktycznie widzimy że jest to już o wiele bardziej poprawne w kontekście tego jakbyśmy
czytali ten element oczywiście moglibyśmy tutaj się spierać, który element powinien być po
którym ale chodzi tu orientacyjne umieszczenie tych elementów oczywiście też niektóre
elementy mogą nie być przycięte idealnie więc to możecie sobie oczywiście zrobić
na własną rękę ale tak jak wspomniałem musimy jeszcze zmienić jedną rzecz, bo w tym przykładzie który przekleiłem i przygotowałem sobie wcześniej
nie zamieściłem tych linków z wikipedii, więc to co możemy zrobić to ponownie skorzystać z funkcji duplikacji kursora w vs-codzie i zaznaczyć
sobie powiedzmy taki fragment czyli znacznik "a" i atrybut "href" wraz z kotwicą i teraz klikamy sobie
cmd+D bądź ctrl+D tak aby zduplikować to sobie
do wszystkich naszych województw i teraz strzałka w lewo bądź w prawo sprawi
że dalej będziemy mieli te kilkanaście kursorów i będziemy mogli wyedytować sobie ten tekst, więc ja tutaj sobie wkleje ten link do wikipedii.
‍

Mogę jeszcze tutaj poprawić te
wyescape'owane znaki, oczywiście nie ma to takiego znaczenia ale powinno zadziałać i oczywiście
widzę że tutaj przekopiowało mi się jeszcze mazowieckie więc to usuwam.

Zapiszemy i teraz część województw będzie nam już działać na przykład zobaczmy zachodniopomorskie
ono faktycznie nam działa pomorskie też nam działa tylko te które mają polskie znaki w swojej nazwie, je będziemy musieli poprawić czyli warmińsko-mazurskie tutaj musimy po prostu dodać polskie znaki, dolnośląskie
łódzkie, śląskie, świętokrzyskie, małopolskie i podkarpackie... mam nadzieję że wszystkie faktycznie nam zadziałały ale zaraz to oczywiście będziemy mogli sprawdzić.

‍
No i w tym momencie ja mogę z poziomu klawiatury aktywować dowolny ten link i przejść
na tą stronę internetową czyli jakbym nie miał myszki też moja strona jest w pełni operacyjna
i tak jak wcześniej wspomniałem bez css-a ta aplikacja też nam działa, więc zróbmy ostatnią rzecz, stworzymy sobie taką logikę która w momencie gdy klikniemy dane województwo będzie otwierała nam tą stronę wikipedii w "iframe", tutaj obok, no i to się wszystko będzie działo z poziomu javascriptu - to znaczy bez javascriptu nasza aplikacja będzie działać w taki sposób, ale jeżeli
mamy javascript no to będzie nam się to otwierało tutaj w mini okienku, więc tworzymy sobie plik
javascriptowy możemy tak naprawdę napisać tutaj tą logikę inline-owo, nie ma z tym najmniejszego
problemu no i stwórzmy sobie dynamicznie naszego iframe'a.
‍

Więc możemy użyć metody "document.createElement()"
i tutaj podajemy nazwę naszego elementu nazwę tagu czyli "iframe" możemy ustawić mu jakiś domyślny
source powiedzmy na to pierwsze nasze województwo zachodniopomorskie, czyli kopiujemy sobie ten element i jego "href" stawiamy to jako "stringa" i dodamy
do naszej strony przed naszą mapą czyli "document.body.prepend()" i tutaj nazwa tego elementu który chcemy dodać dynamicznie zapisujemy i faktycznie widzimy że ten element nam się tutaj wyświetlił tylko nie jest jeszcze ostylowany, więc wróćmy do naszego pliku style.css no i możemy
stworzyć selektor możemy nawet stworzyć klasę "iframe".

Oczywiście docelowo powinniśmy albo to zamknąć w jakimś scopie naszej mapy albo tego typu sprawy, natomiast w tym momencie nie ma z tym problemu
więc ustawmy mu "width" na powiedzmy 1024px
"height" na 800px, no i możemy to troszkę zmniejszyć transformem "scale(0.5)" i dlaczego ja zmniejszam to transformem zamiast tutaj zmienić ten "width"i "height"? no bo jeżeli zmienimy
sobie to na 500x400px to ten frame będzie renderował treść w sobie troszkę inaczej mamy prostu mniejszy "view-port" w tym momencie, więc gdy ustawimy
sobie "view-port" na 1024x800px, ale zmniejszymy go
transformem, no to po prostu mamy większy
"view-port" w mniejszej przestrzeni no i możemy nawet jeśli byśmy chcieli zrobić jakiś trik z marginesem ujemnym "margin-right: -100px" i faktycznie już wygląda to ok, no i musimy dopisać tą logikę, która sprawi że w momencie kiedy javascript jest
wyłączony to o kliknięcie na dowolne województwo nie będzie przenosiło na stronę wikipedii tylko będzie podmieniało tutaj url tego "iframe'a".
‍

Wwięc wracamy do naszego javascriptu
i tworzymy sobie "document.querySelector()"
naszą mapę znajdujemy, dodajemy "addEventListener()"
na "clicka" i przechwytujemy zdarzenie "event"
w sytuacji gdy kliknięty element czyli element pod właściwością target obiektu
"event" danego zdarzenia html
będzie pasował selektorem do naszego odnośnika, który
ma jakiegoś "hrefa".

To są oczywiście troszkę bardziej zaawansowane rzeczy
javascriptiowe, mogę o tym zrobić osobny materiał aby wytłumaczyć jak to wszystko dokładnie działa, natomiast chciałem zaprezentować jak można
pociągnąć tą ideę progressive enhancement do javascriptu, więc tutaj musimy sobie anulować to zdarzenie czyli "preventDefault()", tak aby
po kliknięciu w taki element to już nas nie przekierowywało na podstrony wikipedii
i teraz zobaczymy czemu to na mnie działa - bo to jest "match", a nie "matches" oczywiście jest to "matches()" metoda.

No i po kliknięciu na dowolny element faktycznie to nas nie przekieruje nigdzie pomimo tego że ten odnośnik jest faktycznie ustawiony
czyli w momencie kiedy my sobie pozbędziemy się tego skryptu to nasza aplikacja działa ale gdy nasz skrypt będzie mógł być uruchomiony to faktycznie
te odnośniki nie będą przekierowywały na odpowiednią stronę więc to co musimy tutaj zrobić to ja proponuję ustawić "window.location.hash"
tutaj na wartość tego województwa czyli użyjemy sobie "temples stringów" z ES6 aby pobrać "ev.target.innerText()", czyli tak naprawdę tą treść każdego elementu.

No i tutaj musimy ją poprzedzić haszem i w tym momencie gdy klikniemy
sobie dowolne województwo zmienia nam się tutaj w pasku przeglądarki kotwiczka do której będziemy się przekierowali
no i pozostało nam tylko i wyłącznie ustawić na naszym "iframe'ie" source taki który pasuje do naszego
"event target" czyli pobieramy element kliknięty
"getAttribute('href')" i w momencie gdy
klikniemy na dowolny element to przekierowuje nas na odpowiednie województwo.
‍

Więc jak widzicie ta aplikacja jest napisana w taki sposób, że niezależnie od tego czy mamy wsparcie
javascriptu, czy też nie to ona dalej jest funkcjonalna, dalej możemy przekierować
się na dowolną stronę wikipedii o danym województwie, nawet jeżeli w ogóle mamy całkowicie wyłączone style, bo w tym momencie mamy wyświetlony po prostu
sam element "img" który oczywiście ma ustawionego "alta", no i listę odnośników do danego województwa, jest to rozwiązanie które jest przyjazne zarówno użytkownikowi jak i silnikom wyszukiwarek
internetowych, ponieważ używamy semantycznych tagów a to jest jedna z ważniejszych
kwestii w kontekście tego jak nasze strony są później pozycjonowane poza
oczywiście samą treścią, no i jako ten ostatni krok
możemy uruchomić nasz javascript no i mieć
najprzyjemniejsze doświadczenie skorzystania z naszej małej aplikacji i czytać informacje o waszych ulubionych województwach.

Było tutaj oczywiście bardzo dużo treści, poruszyliśmy rzeczy takie jak "aspect-ratio", "clip-path", pozycjonowanie absolutne, "specificity"
czy właśnie progressive enhancement, dajcie znać co sądzicie o tym wideo o których elementach chcielibyście
dowiedzieć się więcej, jak wspomniałem jest to rozwiązanie dostępne w związku z czym
czytniki ekranowe też nie będą miały najmniejszego problemu aby korzystać z takiego rozwiązania
jeśli podobało ci to wideo koniecznie rozważ subskrypcję
kanału koduje a ja dziękuję serdecznie za wszystkie pozytywne komentarze pozostawione
pod poprzednimi wideo jak zwykle jestem otwarty na wszelkie sugestie
materiałów, czy tematów o których chcielibyście usłyszeć
na kanale koduje i zapraszam was na stronę www.koduje.pl - gdzie znajdziecie wszystkie narzędzia deweloperskie z których korzystam w moich filmach.

[Bloopers]
albo shift+alt+strzałka bu... chhr, hyhy
zależy (error)
o jezu
czekamy aż śmieciarka odjedzie, bo będziecie słyszeli
śmieciarkę, a nie mnie, no to se jeszcze poczekamy
śmieciara pojechała
dobra to jedziemy dalej... zmywarka

‍