Zen Coding: szybsze tworzenie dokumentu HTML

Dziś kolejny wpis z kategorii: „Jak ułatwić sobie życie”. Tematem będzie proste i niezwykle przydatne (jak dla mnie ;)) narzędzie jakim jest Zen Coding. W sieci dostępne jest już od dłuższego czasu, więc liczę się z faktem że niektórzy z was już o nim słyszeli. Wpis kieruję zatem do osób którym termin Zen Coding nic nie mówi, lub niewiedzą jak tego używać. Ja osobiście nie wyobrażam sobie pisania jakiegokolwiek dokumentu HTML, bez użycia tego narzędzia. Więc co to takiego?

Zen Coding zmienił się w Emmet, o którym napisałem tutaj.

Czas na małą refleksje. Przypomnij sobie ile razy już pisałeś jakąś prostą stronę w HTML? Co najbardziej denerwowało Ciebie podczas jego tworzenia? Za każdym razem to samo, tag html, head, potem muszę dodać jakieś menu, o matko przecież tu będzie lista, jakieś dane tabelaryczne i tak w kółko. Od samego początku odechciewa się wszystkiego. Fakt, można przecież zrobić sobie szkielet dokumentu, ale co z resztą? Pojawią się też pewnie głosy, że niektóre lepsze edytory, same robią za nas niektóre trywialne rzeczy, takie jak zamykanie tagów. Ale to wciąż mało. Czas zapoznać się z Zen Coding.

Instalacja

Zanim zaczniemy, warto sprawić sobie to narzędzie. Ja opiszę jak to zaimportować do Notepad++, gdyż tego narzędzia najczęściej używam. By pobrać odpowiedni plugin wystarczy wejść na stronę Zen Coding. Po zapisaniu paczki na dysku i jej rozpakowaniu, wszystkie pliki przerzucamy do katalogu plugins, znajdującym się w głównym katalogu notepad++. Po ponownym uruchomieniu naszego edytora, na pasku menu, powinna się pojawić opcja Zen Coding. To znak, że wtyczka jest gotowa do użycia.

Skróty klawiszowe

Zen Coding udostępnia kilka opcji, z których każda rzecz jasna robi coś innego. Poniżej przedstawiam listę dostępnych komend:

  • Ctrl + E – zamiana skrótu na tagi
  • Ctrl + Shift + A – opakowanie kodu
  • Ctrl + Shift + B – zaznaczenie kolejnych tagów
  • Ctrl + Alt + ] – następny punkt edycji
  • Ctrl + Alt + [ – poprzedni punkt edycji
  • Ctrl + Alt + L – kursor wędruje na początek lub koniec tagu w którym się znajdował
  • Ctrl + Alt + M – zaznaczenie całego taka w którym znajduje się kursor
  • Alt + / – zakomentowanie całej linii
  • Ctrl + ‚ – zamknięcie/ dodanie tagu
  • Ctrl + Shift + ‚ – usunięcie tagu

Oczywiście te same komendy są dostępne na pasku menu, po kliknięciu w zakładkę Zen Coding. Ok czas teraz na najważniejszą część, czyli składnie.

Składnia

Zen Coding swoje działanie opiera na selektorach CSS, więc jeżeli potrafisz z nich korzystać tworząc arkusz stylów, bez problemu załapiesz składnie. Dla przykładu, jeżeli wpisał bym w moim edytorze:

div#post>h1.title+p.post-content+p.post-footer

… otrzymam taki oto wynik:

<div id="post">
  <h1 class="title"></h1>
  <p class="post-content"></p>
  <p class="post-footer"></p>
</div>

Prawda, że szybsze a co najważniejsze prostsze rozwiązanie? Wystarczyło zaledwie kilka sekund by zaoszczędzić sobie trudu pisania tego wszystkiego samemu. Jak już powiedziałem Zen Coding opiera swoje działanie na selektorach CSS, dzięki którym wie jakiej składni oczekuje od niego programista.

Poniżej prezentuje listę obsługiwanych operatorów i właściwości:

  • E – Nazwa elementu (div, p)
  • E#id – Element z identyfikatorem (div#header, p#intro)
  • E.class – Element wraz z klasą (p.content, span.message.success)
  • E#id.class – Klasy można łączyć razem z identyfikatorami (div#content.post)
  • E>N – Element wraz z potomkiem (div>p, div#content>div.post)
  • E+N – Lista kolejnych elementów (header+nav+section#content+footer)
  • E*N – Mnożenie elementu (ul.menu>li*5>a)

Z całej tej listy najmniej zrozumiały może być ostatni podpunkt. Nie jest to składnia występująca w CSS, więc warto by coś o niej powiedzieć. Załóżmy, że mamy do napisania listę 10 elementową, do tego każdy z tych elementów ma zawierać w sobie link. W Zen Coding wystarczy użyć operatora gwiazdki (*) która mnoży wybrany tag przez podaną liczbę. Tak wyglądał by nasz selektor:

ul#menu>li*10>a

Istnieje jeszcze jedna ciekawa rzecz związana z mnożeniem. Co jeśli chcielibyśmy nadać elementom li indywidualne klasy np item-1, item-2 itp? Z pomocą przychodzi nam znak $. Po wpisaniu tego selektora:

ul#menu>li.item-$*5>a

… otrzymamy taki wynik:

<ul id="menu">
  <li class="item-1"><a href=""></a></li>
  <li class="item-2"><a href=""></a></li>
  <li class="item-3"><a href=""></a></li>
  <li class="item-4"><a href=""></a></li>
  <li class="item-5"><a href=""></a></li>
</ul>

Cóż łatwy i przyjemny sposób, który przyśpieszył nasze działanie, dzięki czemu możemy poświęcić się innym elementom naszej strony. I o to właśnie chodzi.

Dodatkowe elementy

Na początku wspomniałem o szkielecie dokumentu html. Kiedyś dobrym rozwiązaniem były przykładowe wzory, zapisane gdzieś na dysku. Teraz wystarczy że wpiszę coś takiego:

html:5

… a na wyjściu otrzymam szkielet HTML5:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  
</body>
</html>

Istnieją również skróty dla innych wersji dokumentu, np:

html:4t
html:4s

Inną ciekawą rzeczą są komentarze warunkowe. Jeżeli ktoś jeszcze tworzy haki dla Internet Explorer to na pewno ten kod nie jest dla niego rzeczą obcą:

<!--[if lte IE 6]>
  
<![endif]-->

Teraz by to osiągnąć wystarczy tylko wpisać:

cc:ie

lub:

cc:ie6

CSS

Pisałem, że Zen Coding ułatwia nam pisanie dokumentu HTML, to jednak nie wszystko. Możemy go stosować również w plikach CSS (ważne by był to plik z rozszerzeniem .css, inaczej Zen Coding będzie wstawiał nam tagi a nie właściwości). Przykładowe skróty umieściłem poniżej:

  • m:a – margin: auto
  • bdrs – border-radius: ;

Osobiście nie używam akurat tej metody, głównie dla tego, iż w moim notepad++ skróty nie są interpretowane tak jak jest napisane w dokumentacji. Dodatkowo do tworzenia arkuszy istnieją inne sposoby, choćby LESS, o którym pisałem niedawno.

Dokumenacja

Linki poniżej prowadzą do spisu wszystkich dostępnych skrótów. Warto się z nimi zapoznać by w pełni wykorzystać moc Zen Coding

Podsumowanie

Zen Coding to niezwykle przydatne narzędzie, które praktycznie większość kodu tworzy za nas. Przy większych projektach, potrafi naprawdę zaoszczędzić masę czasu i energii, którą wcześniej traciliśmy sami pisząc całą strukturę dokumentu. Od teraz takie rzeczy jak menu, czy tabela stają się niezwykle proste. Na sam koniec warto dodać, że poza pluginem do notepad++, istnieją jeszcze dodatki do innych popularnych edytorów. Wystarczy tylko spojrzeć na dostępną pod tym adresem listę. Odsyłam również do przykładowego filmiku ukazującego całą potęgę Zen Coding: link.