W tym wpisie wytłumaczę dlaczego żadna strona internetowa nie powinna być pisana „z palca” od zupełnych podstaw oraz jakie są zalety korzystania z gotowego kodu Boilerplate. Skupimy się na stronach internetowych zgodnych z HTML5. Przyjrzymy się najpopularniejszej i nowoczesnej propozycji Boilerplate dla HTML5, która zaoszczędzi każdemu koderowi kilka minut podczas rozpoczynania nowego projektu.
Boilerplate w programowaniu to powtarzalny blok kodu w konkretnym języku, który pojawia się w każdym projekcie niezależnie od jego celu i przeznaczenia. HTML Boilerplate to (jak można się łatwo domyślić) pewnego rodzaju szablon HTML strony internetowej, który może być punktem wyjściowym do tworzenia właściwego kodu, który już w całości zależy od osoby, która koduje taki plik.
Z tego powodu, praktycznie żadna strona internetowa nie powstaje w stu procentach od zera. Tworzenie plików HTML całkowicie od zera nie ma najmniejszego sensu, bo byłaby to zupełna strata czasu. Profesjonalista przeznacza cały swój czas na kreatywne myślenie i poprawną implementację użytecznych i wartościowych rozwiązań. Używanie HTML Boilerplate wyrabia dobre nawyki i ma wiele innych zalet, którym poświęcono osobny akapit.
Przykład kodu Boilerplate dla strony HTML5
Każdy dokument HTML5 musi się rozpoczynać od deklaracji typu documentu. W HTML5 wygląda on tak:
<!doctype html>
Taki kod musi się pojawić w pierwszej linii poprawnego dokumentu HTML5. Informuje on przeglądarkę, że to co zamierza ona renderować jest faktycznie stroną zgodną z HTML i przeglądarka działa w trybie standardowym. Brak tego kodu spowoduje, że przeglądarka będzie działać w trybie zgodności (ang. Quirks Mode), co może spowodować nieoczekiwane i niepożądane efekty.
Następny znacznik to główny znacznik <html>z deklaracją języka dokumentu:
<html lang="pl-PL">
W kodzie strony umieszczamy pewne informacje, które nie są widoczne na stronie internetowej. To informacje o dokumencie nie będące jego treścią czyli metadane. Wszystkie te elementy zazwyczaj są umieszczone w sekcji head. Sekcja ta jest kontenerem dla takich elementów jak tytuł, opis, kodowanie znaków, style, skrypty, favicon, kolor przewodni motywu a także inne metadane:
<head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/main.css"> <meta name="theme-color" content="#fafafa"> </head>
W sekcji head opcjonalnie możemy umieścić inne tagi np. OpenGraph, lub tagi, dzięki którym usługi zewnętrzne mogą zweryfikować kto jest jej właścicielem.
Następny znacznik to <body>, który zawiera ciało dokumentu czyli zasadniczą treść strony internetowej.
<body>
<p>Hello world!</p>
<script src="js/main.js"></script>
</body>
Przed znacznikiem zamykającym body umieszczamy odniesienia do plików JavaScript a całość kończy znacznik zamykający </html>.
Kompletny Boilerplate może wyglądać tak:
<!doctype html> <html lang="pl-PL"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/main.css"> <meta name="theme-color" content="#fafafa"> </head> <body> <p>Hello world!</p> <script src="js/main.js"></script> </body> </html>
Dobre praktyki
Jak widać, w powyższym kodzie znajdują się odniesienia do nieistniejących plików. Warto zauważyć, że mają już nadane nazwy i są umieszczone w osobnych katalogach. Ten wydawałoby się drobny szczegół znacznie ułatwia pracę, zwalnia od podejmowania błahych decyzji co do tego jak nazwać folder czy plik ze stylami CSS i JS.
Istotą Boilerplate są także takie szczegóły, które standaryzują kod i powodują, że jesteśmy o te kilka kroków do przodu. Szybkie i namacalne efekty pracy nad stroną internetową zwiększają motywację i produktywność. Warto stworzyć puste pliki, które będą na nas już czekały kiedy zdecydujemy się napisać pierwsze linie stylów CSS lub skryptów JS.
Przykłady gotowych paczek z HTML Boilerplate
Popularną paczką startowego kodu HTML5 jest html5boilerplate. Paczka ta jest dobrym punktem startowym do tworzenia nowoczesnych stron i aplikacji internetowych. Paczka oprócz standardowego kodu HTML5 Boilerplate zawiera między innymi:
- arkusz normalize.css, który powoduje, że renderowanie strony jest bardziej przewidywalne i spójne pomiędzy różnymi przeglądarkami,
- skrypt modernizr, który ma za zadanie wykryć, które funkcje przeglądarek są niedostępne, dzięki temu ułatwia zastosować praktyki zgodne z progressive-enhancement,
- plik robots.txt,
- .htaccess z przydatnymi instrukcjami.
Zalety stosowania HTML Boilerplate
- oszczędza czas,
- zwiększa produktywność,
- obniża prawdopodobieństwo popełnienia błędów,
- zmniejsza ryzyko powielenia błędów lub przestarzałych praktyk,
- wyrabia dobre nawyki,
- standaryzuje kod i strukturę katalogów,
- zwiększa wydajność i bezpieczeństwo strony za pomocą dopracowanych plików konfiguracyjnych (np. htaccess),
- rokuje większą przyjazność dla SEO za pomocą utrzymania dobrych praktyk.
Podsumowanie
Temat kodu Boilerplate – tym bardziej w HTML może być z pozoru mało znaczący. Tak naprawdę, prezentowany Boilerplate znacznie ułatwia i przyspiesza tworzenie nowych projektów a w skrajnych przypadkach pomaga przezwyciężyć prokrastynację. Ten malutki kod powoduje, że projekt sam się rozpoczyna i wystarczy go teraz dokończyć 🙂 Posiadanie ulubionej paczki ze standardowym kodem HTML jest dużo lepszym rozwiązaniem niż szukanie w Internecie jakiegoś przypadkowego kodu, który powinien znaleźć się w nagłówku.
Dobrym pomysłem jest personalizacja i tworzenie własnych paczek z kodem Boilerplate. Przytoczoną paczkę html5boilerplate wyposażyłem w kod CSS Bootstrapa 5 i ukryty za pomocą komentarza plik do jego kodu JS. Usunąłem midernizr, bo go zwyczajnie nie używam oraz domyślny plik normalize.css, bo tego typu reguły są już zawarte w Bootstrapie. Taka paczka stanowi dla mnie punkt startowy do tworzenia nowych stron i konwersji projektów PSD, Figma, AdobeXD na postać strony internetowej.
Odpowiedz lub skomentuj