Dostępny i użyteczny komponent karty

Cześć !

Witaj w kolejnym newsletterze Ahoy Dev! Jak zwykle mamy dla Ciebie serię linków ze świata Full-Stack, podsumowanie ostatniego tygodnia na Ahoy! oraz merytoryczny artykuł, tym razem od Damiana Wajera.

Pamiętaj, że możesz dać nam znać co sądzisz o naszym newsletterze w dedykowanej do tego ankiecie - dzięki!

Trzymaj się!
Jarek

Dostępny i użyteczny komponent karty (bez JavaScript)

Na stronach i w aplikacjach komponent karty występuje bardzo często, jednak nie zawsze jego implementacja jest taka sama. Czasem ze względu na użyteczność lub bezpośrednio z designu wymagane jest, aby cała karta była klikalna.

Pierwsze co przychodzi do głowy w takim zadaniu to po prostu owrappowanie całej treści w link lub użycie `onclick` z JavaScriptu. Niestety te podejścia mają pewne wady, np. w kontekście nawigacji klawiaturą, wewnątrz wrappującego linka nie umieścimy kolejnych linków, uniemożliwimy zaznaczanie tekstu, a `onclick` zablokuje standardowe zastosowania prawego przycisku myszy (nowa karta, kopiowanie linku itp.).

Jak więc przygotować komponent karty bez uszczerbku dla usability/accessibility? W tym wpisie sprawdzimy rozwiązanie w czystym HTML i CSS, bez JavaScriptu, z użyciem tzw. pseudo-content tricku.

Zadanie
cała karta powinna być klikalna
wewnątrz karty znajduje się link “czytaj więcej”
karta może zawierać inne linki w treści
nie możemy ograniczyć klikania prawym przyciskiem myszy, kopiowania i otwierania linków w nowej karcie przeglądarki
widoczne powinny być adekwatne style karty dla stanów hover i focus
użytkownik powinien móc zaznaczyć i skopiować tekst wewnątrz karty
Dostępny komponent karty
Tego typu rzeczy najlepiej uczyć się w praktyce, dlatego od razu przejdź na JSFiddle, aby zobaczyć działające demo. Na początek sprawdź kursorem myszy poszczególne interakcje, następnie kliknij w widoczny “Button 1” i klawiszem “Tab” przełączaj się po kolejnych elementach.

Jak osiągnąć takie rozwiązanie w HTML i CSS?
Polecam sprawdzenie kodu źródłowego w powyższym przykładzie. Poniżej krótkie podsumowanie najważniejszych rzeczy:

`position: relative` na kontenerze
`position: absolute` na pseudo-elemencie `:after` głównego linka “czytaj więcej” oraz wartość `0` na jego właściwościach `top`, `right`, `bottom` i `left`
Pseudo-klasy `:focus-within` i `:hover`, do stylowania różnych stanów
Zaznaczenie tekstu możliwe dzięki wartości `z-index` np. `2` (musi być większa niż `z-index` pseudo-elementu `:after`)
Kolejne linki wewnątrz karty dodajemy z klasą `card__separate` czyli tak jak treść możliwa do zaznaczania
Najważniejsze fragmenty kodu
HTML

(S)CSS
.card {
position: relative;
border: 3px solid green;
// Style hover and focus states.
&:hover,
&:focus-within {
border-color: red;
}
// Make the content selectable.
&\_\_separate {
position: relative;
z-index: 2;
}
// Make the whole card clickable.
&\_\_link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
}
}
Podsumowanie
Powyższa technika bywa nazywana “pseudo-content trick”. Nie jest to z pewnością jedyne, ani idealne rozwiązanie, jednak fajnie przedstawia koncepcję.

W tym miejscu muszę załączyć "creditsy", bo po raz pierwszy trafiłem na ten sposób na stronie Inclusive Components. Jeśli tak jak ja masz smykałkę do kwestii dostępności, znajdziesz tam dużo więcej przykładów inkluzywnych implementacji różnych komponentów zgodnie z dobrymi praktykami dostępności. W tym także bardziej szczegółowe rozpisanie problematyki komponentu karty. Polecam!

Ciekawe linki
5 znaków rozpoznawczych słabego deva samouka - mocno wierzymy w to, że można i warto uczyć się kodować samemu. Tylko niestety, jeżeli nie robi się tego dobrze, to można nabrać złych przyzwyczajeń, które stają się swoistymi znakami rozpoznawczymi. Sprawdź w artykule, czy Ty lub znane Ci osoby pokazują takie znaki.

Por_no produktywności - jeżeli jeszcze nie wiesz, na Ahoy mamy sposób osób zajawionych na temat produktywności. Niektórzy wydają się w tym temacie mistrzami i... to może być dla niektórych z nas problemem. Mogą pojawić się niezbyt zdrowe odczucia, czy chęć wykorzystania wszystkiego co się da, żeby im dorównać. Z resztą, przeczytaj artykuł i sam zdiagnozuj, czy i Ty masz problem z po4no produktywności.

Rozrysuj to na diagramie - diagramy mogą pomóc w wielu miejscach w pracy inżyniera (i nie tylko). W zasadzie to jeden ze sposób, żeby ustrukturyzować świat, który nas otacza i myśli, które mamy w głowie. Dobry obraz zastępuje 1000 słów. Dobry diagram zastępuje 1000 idei.

Alternatywy console.log - nie ma co wiele tłumaczyć, po prostu alternatywy. Warto zajrzeć.

Na Społeczności
Web workery - ciekawy artykuł prosto od Jakuba Fedoszczaka. Czym są web workery, do czego mogą się przydać i jak wygląda web worker API? To wszystko w artykule.

Wygodne zmniejszanie obrazów dockerowych - Wojtek Połowniak podzielił się sposobem na wygodne zmniejszanie obrazów dockerowych - narzędzie, które jest w stanie zmniejszyć rozmiar naszych deployowanych obrazów nawet aż 30x!.

TOP10 kanałów do nauki programowania na YT - Ahoy.so to społeczność dla pasjonatów Tech&Design, którzy chcą i lubią się rozwijać, dlatego pewnie nieprzypadkowo Daniel Noworyta opublikował tam taką TOPkę. Warto zajrzeć, bo przed nami jeszcze prawie miesiąc wakacji.

Second Brain w notion - poza przyswajaniem wiedzy, warto ją również gdzieś zapisywać, katalogować, uzupełniać, planować, itd. W takiej sytuacji przydaje się second brain. W tym artykule Adam Gospodarczyk dzieli się swoim podejściem do tematu.

Wydarzenia
Jak oszczędzać najważniejsze zasoby programisty opowiadał niedawno specjalnie dla nas Sebastian Wesołowski. Wideo z wydarzenia oczywiście dostępne na Ahoy (przy okazji, to nie czas jest najważniejszym zasobem programisty wg tego, co zapowiadał Sebastian - warto posłuchać!).

A skoro już mówimy o czasie, skupieniu i robieniu czegoś dobrze, to warto polecić kolejne spotkanie Ahoy Book Club, podczas którego na warsztat bierzemy książkę Esencjalista Grega McKeown. Osobiście zapewniam, że to świetna książka (nie tylko dla uzależnionych od por_no produktywności).