FRONT-ENDOWE BŁĘDY
Front-end jest często niezgodny z designem!
Front-end jest często niezgodny z designem!
Literówki
Lazy Loading
Lazy Loading
Nazewnictwo klas CSS
.color-dark-grey
.color-red
.color-blue
.color-smokyWhite
.bg-lightGray
--> .color-smoky-white
--> .bg-light-gray
Chuj*** nazwy klas
Nazwy klas powinny być zrozumiałe i czytelne od razu z nazwy!
Błędy przy BEM
Błędy przy BEM
Zapoznaj się z zasadami BEM (musisz je znać bardzo dobrze, na pamięć!): http://getbem.com/naming/
Brak nagłówków
<section>
<article>
Używając <section> lub <article>, ZAWSZE MUSI BYĆ NAGŁÓWEK!
Brak nagłówków
Używaj narzędzia: HTML5 Outliner
to oznacza, że brakuje nagłówka
Złe nagłówki
- Zachowuj hierarchię nagłówków: h1, h2, h3, h4, h5, h6
- Tylko jeden <h1> - w górnej części strony
- Jeżeli są podwójne tytuły - użyj tylko jednego nagłówka:
<h2>
<h1>
<p>
<h1>
Złe nagłówki
powinno być:
<h2>
powinno być:
<p> (lub inny, w zależności
od struktury strony)
Brak koloru linku w obrębie .content
Brak koloru linku w obrębie .content
Warstwy, które mają mieć wysokość 100%
Warstwy, które mają mieć wysokość 100%
Warstwy, które mają mieć wysokość 100%
Problem z 100vh
na iOS, Safari!
Warstwy, które mają mieć wysokość 100%
Używajcie tego tricku: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
Jest to wbudowane w naszego boilerplate'a!
Warstwy, które mają mieć wysokość 100%
Jest to wbudowane w naszego boilerplate'a!
Warstwy, które mają mieć wysokość 100%
Jest to wbudowane w naszego boilerplate'a!
Linki zewnętrzne otwierane w nowym oknie
PRAWIDŁOWO:
Brak atrybutu ALT w obrazkach
Brak atrybutu ALT w obrazkach
Jednostki
Mniej px
Używajcie rem
Używajcie em
Jednostki
Używajcie dynamicznego obliczania rozmiaru tekstu (MEGA RZECZ!)
Nie lepiej po prostu: line-height: 1.3 ?
Więcej testujcie!
Testujcie, testujcie, testujcie (na komórkach, tabletach, różnych przeglądarkach) - zanim przekażecie klientowi!
Zbyt głębokie osadzanie node'ów
Po cholerę tyle tych div'ów?!
Po cholerę tyle tych div'ów?!
UX menu na urządzeniach mobilnych
Po otwarciu menu, spróbuj skrolować w dół i zobacz, czy jesteś w stanie zeskrolować do elementów menu osadzonych na dole
Dobrze jest blokować scroll strony "pod spodem" (pod menu) i umożliwić skrolowanie jedynie otwartego menu
Nie używajcie !important w CSS!
Front-end developerzy - piszcie kod z myślą o integracji z CMSem!
Dziękuję!