W ostatnim czasie ukazało się kilka wpisów ściśle związanych z projektem UWar. Dlatego dziś, dla chwilowego odpoczęcia od tego tematu, wraz z Olgą Stefaniuk, postanowiłem przedstawić najczęstsze błędy początkujących frontend developerów.
To kolejny wpis przygotowany z uczestniczką konkursu Daj Się Poznać 2017. Warto wspomnieć, że Olga zajęła 3 miejsce w tegorocznej edycji konkursu. Oto drugi wpis cyklu błędy początkujących Frontend Developerów, pierwszy możecie znaleźć pod linkiem.
Niewłaściwe drzewo plików
Nie ma nic bardziej denerwującego, niż to, gdy ktoś prosi Cię o pomoc przy projekcie, którym aktualnie się zajmuje. Spoglądasz, a tam wszystkie pliki w jednym katalogu: pliki HTML, CSS, JS oraz grafiki – takie “misz masz”.
Dlaczego tak się nie robi?
Dla utrzymania czytelności całego projektu oraz dla łatwiejszego wprowadzania zmian. Wyobraźmy sobie projekt który posiada łącznie 50 plików, w tej chwili potrzebujesz znaleźć jeden z nich i zaczyna się szukanie.
Każdy typ plików, powinien znajdować się w osobnych podkatalogach np. pliki CSS w katalogu, gdzie znajdują się wszystkie pliki tego typu.
Przykładowe drzewo plików
Teraz kilka słów o przedstawionym drzewie plików.
assets – znajdują się w nim pliki nie podlegające modyfikacji (po publikacji strony, nie są już zmieniane), czyli pliki CSS, JS oraz grafiki.
src – tutaj znajdują się wszystkie pliki związane z obsługa strony, czyli np. pliki z rozszerzeniem php, służące do generowania dynamicznych części strony, a także pliki konfiguracyjne, które przy odpowiedniej konfiguracji serwera nie są dostępne dla gości odwiedzających naszą stronę.
Testowanie strony w jednej przeglądarce
Kolejnym z ważnych błędów jest sprawdzanie wyglądu na jednej przeglądarce. Później okazuje się, że u klienta strona wygląda inaczej niż na naszym komputerze. Powodem tego może być nieobsługiwana na danej przeglądarce właściwość, której użyliśmy, lub narzucanie niechcianego parametru wyglądu, np. Safari dodaje border przy niektórych elementach.
Z rozwiązaniem pierwszego z problemów przychodzą przedrostki, które zapewniają nam obsługę danej właściwości dla określonej przeglądarki.
Po co powstały przedrostki?
Powodem powstania przedrostków, były różnice w interpretowaniu niektórych właściwości przez przeglądarki. Dana linijka CSS, musi być obsłużona w inny sposób na Chrome, niż na Safari, itd.
Przedrostki
-webkit – przedrostek przeznaczony dla przeglądarek Chrome oraz Safari
-moz – przedrostek przeznaczony dla przeglądarki Mozilla
-ms – przedrostek przeznaczony dla przeglądarki Internet Explorer
o – przedrostek przeznaczony dla przeglądarki Opera
Przykład
Problematyczny zapis
div {
transform: rotate(90deg);
}
Poprawny zapis
div {
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
Jak widzimy właściwość transform posiada przedrostki, o których należy pamiętać, inaczej możemy nie dostrzec wprowadzonej zmiany po odświeżeniu strony.
Reset stylów
Zdarzyło Ci się kiedyś, że nagle przy danym elemencie pojawił się jakiś padding czy margines? Było to prawdopodobnie spowodowane przez przeglądarkę, która domyślnie narzuca pewne wartości związane z wyglądem elementów HTML lub poprzez dodanie frameworka CSS’owego. Aby temu zapobiec stosuje się kod odpowiedzialny za usunięcie tego efektu.
Kod resetujący
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
body {
line-height:1;
}
ul, ol {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
Kod pochodzi z http://webkod.pl/kurs-css/lekcje/dzial-4/reset-css
Selektor stylowany w różnych miejscach dokumentu
Gdy widzi się tak napisany styl CSS, na myśl przychodzi tylko jedno “co autor miał na myśli tak to pisząc?”. Wyobraźmy sobie sytuację, że przed naszymi oczami pojawia się kod, gdzie na samej górze oraz na samym dole, opisana jest właściwość interesującego nas elementu. Chcemy zmienić kolor, więc odnajdujemy jego klasę na samej górze i tam ustawiamy swoją wartość. Odświeżamy przeglądarkę i nic się nie dzieje. Po długim poszukiwaniu okazuje się, że kolor był zadeklarowany na samym dole.
Dla czytelności powinno się dany element opisywać w jednym miejscu. Ułatwia to późniejsze modyfikacje oraz czytanie samego kodu.
Przykład
.test{
margin-top: 1.5em;
background-color: #ff0b00;
border: 1px solid #ff0b00;
color: yellow;
}
.test2 {
background-color: #ff0b00;
border-color: #ff0b00;
border-radius: 0px;
}
.test{
color: red;
}
Ostatnia wartość nadpisuje poprzednią, dlatego na powyższym przykładzie tekst będzie koloru czerwonego, a nie żółtego.
Kolejność właściwości selektorów
Istnieją trzy sposoby pisania selektorów css.
Totalny chaos
Najczęściej stosowany przez osoby zaczynające swoją przygodę z CSS. Oczywiście taki sposób będzie działał tak samo jak inne, ale w momencie kiedy przyjdzie nam coś zmienić, będziemy musieli szukać odpowiedniej właściwości, którą za każdym razem znajdziemy w innym miejscu. Widzimy zatem jakie utrudnienia generuje ta metoda?
.test {
height:50px;
background: red;
top:10px;
padding:5px;
color: blue;
margin:5px;
position:absolute;
width:50px;
}
Podział alfabetyczny
Dużo lepszym rozwiązaniem jest stosowanie podziału alfabetycznego, ponieważ jest to zdecydowanie bardziej czytelny i powtarzalny schemat, niż opisany powyżej. Jednak nie jest to jeszcze metoda najczęściej stosowana.
Przykład
.test {
background: red;
color: blue;
height:50px;
margin:5px;
padding:5px;
position:absolute;
top:10px;
width:50px;
}
Podział wagowy
Jest to metoda najczęściej stosowana przez profesjonalistów. Zakłada, że najważniejsze właściwości związane są z pozycją elementu w dokumencie. Kolejne elementy to te określające wymiary, zaś na końcu pozostałe właściwości.
Przykład
.test {
position:absolute;
top:10px;
width:50px;
height:50px;
padding:5px;
margin:5px;
background: red;
color: blue;
}
Brak optymalizacji wykorzystywanych bibliotek
Równie częstym błędem na początku przygody z tworzeniem stron jest dodawanie wielu bibliotek. Powoduje to, że strona ładuje się długo. Dodatkowo jest przez to “ciężka”. Osoba wchodząca z użyciem transferu danych może być niezadowolona, że nagle uciekło jej dużo cennych megabajtów z niewiadomego powodu. Dlatego warto o tym pamiętać tworząc stronę i przed jej publikacją sprawdzić, czy wszystkie dodane wcześniej biblioteki są wykorzystywane oraz czy istnieje możliwość dodania tych bibliotek bez znaków białych (np. bez spacji), to również sposób optymalizacji.
Przykład
Framework Bootstrap, daje możliwość pobrania tylko interesujących nas komponentów, a nie całego pliku ze wszystkimi klasami, nawet tymi, które nie są wykorzystywane na stronie. Do tego wraz ze zwykłym plikiem bootstrap.css dołączony jest również plik bootstrap.min.css, min oznacza, że jest to wersja po kompresji i minimalizacji. Właśnie taki plik powinien być dołączony do finalnej wersji strony.
Niewykorzystywane selektory
Również i mi na początku zdarzało się pozostawiać niewykorzystywane selektory w kodzie CSS po publikacji strony. Jednak to kolejny błąd, ponieważ wraz z ładowaniem plików stylowych, wczytywane są także klasy, których nie wykorzystujemy. Dlatego warto jest przed publikacją strony sprawdzić i oczyścić kod z pozostałości po naszej produktywności.
Brak responsywnosci
Responywność w dzisiejszych czasach jest tak samo istotna jak funkcjonalność strony. Spowodowane jest to popularyzacją smartphonów oraz tabletów, które mają różne rozdzielczości ekranów. Aby strona dobrze wyglądała na każdym typie urządzenia, ważne jest by pamiętać o tym wspaniałym wynalazku.
Czym jest responsywność?
Responywność to automatyczne dostosowywanie szerokości strony do wielkości ekranu na jakim jest wyświetlana.
Sposoby na responsywność
Istnieje kilka popularnych frameworków, które przy prawidłowym zastosowaniu, zapewniają naszej stronie responsywność.
Frameworki:
•Bootstrap,
•Materialize,
•Foundation.
Istnieje również możliwość napisania samemu odpowiedniego systemu, który będzie zapewniał nam stronę wyglądającą olśniewająco w każdych warunkach.
Strona stworzona na bazie elementu <table>
Gdy internet nie był jeszcze tak powszechny, strony wyglądały zupełnie inaczej. Nie zawierały efektów poprawiających część wizualną witryny. Dlatego warto pamiętać, aby nie nawiązywać do tamtych czasów tworząc strony za pomocą znacznika <table>. Oczywiście efekt jaki otrzymamy będzie taki sam jak za pomocą divów, ale tego po prostu się już nie stosuje.
Przykład kodu
<table> <tr> <td></td><td>Nagłówek</td><td></td> </tr> <tr> <td>Lewy panel</td><td>Kontent</td><td>Prawy panel</td> </tr> <tr> <td></td><td>Footer</td><td></td> </tr> </table>
Brak meta danych ważnych dla SEO
W nagłówku strony deklarowane są ważne dane dla botów przeglądających strony dla wyszukiwarek takich jak Google, Bing czy Yahoo. Początkujący nie zwracają na tą część uwagi. Wczytują pliki .css i tyle, porzucając całą resztę danych jakie powinny się tutaj znaleźć, w tym także kodowanie w jakim ma być wyświetlana nasza strona. Później dziwią się, że zamiast polskich znaków pojawiają się krzaczki.
Przykład
<head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
charset – określa kodowanie na stronie. Aby prawidłowo wyświetlać nasze ogonki należy podać wartość atrybutu UTF-8
name=”description” – to krótki opis strony
name=”keywords” – zawiera słowa kluczowe, po jakich będziemy mogli znaleźć stronę w wynikach wyszukiwania
name=”author” – przechowuje dane o autorze strony
name=”viewport” – odpowiada za skalowanie strony do rozmiarów ekranu, o czym możemy przeczytać więcej w pierwszej części wpisu (link).
Podsumowanie
Wpis ten zawiera wiele przydatnych informacji na temat błędów popełnianych przez osoby początkujące. Niektóre błędy są mniej zauważalne, inne bardziej. Jednak warto pamiętać, że gdy zaczyna się coś robić, warto to robić możliwie najbardziej jakościowo. Sam na początku mojej przygody z „webówką” miałem wiele problemów, wynikających z błędów jakie popełniałem. Dlatego też postanowiłem przygotować z Olgą kilka wpisów, aby nasi czytelnicy mieli troszkę łatwiej niż my. Chciałbym również podziękować jej za współpracę przy tym wpisie i zachęcić Cię do odwiedzenia jej bloga.
Pozdrawiam,
sirmarbug
