O Emmet, Pug i innych takich, czyli sposoby na efektywny HTML

Jakby na HTML nie patrzeć, to sporo trzeba stukać w klawisze klawiatury, żeby napisać trochę kodu. Programiści na szczęście lubią optymalizować co się da, więc i w tej kwestii nie jesteśmy zupełnie bezradni. Na przestrzeni czasu powstało kilka podejść do tematu, czy to w postaci wtyczek do edytorów kodu (konwersja na HTML „w locie”), czy zupełnie odrębnych zależności (konwersja podczas kompilowania), które instaluje się w projekcie. Przyjrzyjmy się zatem dwóm reprezentantom wspomnianych rozwiązań.

Spis treści

• Emmet
• Emmet w praktyce
• Podstawowa składnia w Emmet
• Elementy w Emmet
• Operatory zagnieżdżeń
• Elementy potomne
• Rodzeństwo
• Mnożenie
• Operatory atrybutów
• Atrybuty id i class
• Atrybuty własne
• Operator numerowania
• Tekst
• Więcej o Emmet
• Pug, czyli rozwiązanie dla nieco bardziej zaawansowanych
• Pug w akcji
• Zapis atrybutów class i id w Pug
• Pugowy switch oraz if else
• Pugowa pętla for
• Mixiny w Pug
• Inne rozwiązania

Emmet

Emmet to wtyczka instalowana w edytorze/IDE, wykorzystująca skróty wpisywane przez programistę, które dynamicznie analizuje i generuje na ich postawie pożądany kod HTML. Samego narzędzia można używać nie tylko w połączeniu z HTML.

Przygoda z Emmet rozpoczyna się od wyboru wersji właściwiej dla naszego edytora tekstu lub IDE oraz instalacji wtyczki. Emmet można pobrać z tego miejsca.

Emmet w praktyce

Kiedy wtyczka jest już zainstalowana, można przejść do wykorzystywania jej dobrodziejstw. Najważniejszym benefitem w Emmet są wcześniej wspomniane skróty. Dla przykładu: poniższy skrót

#page>div.logo+ul#navigation>li*3>a{Item $}

zostanie po naciśnięciu klawisza zmodyfikowany do postaci

<div id="page">
  <div class="logo"></div>
  <ul id ="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
  </ul>
</div>

Napisałam „naciśnięcie klawisza”, ponieważ to którego klawisza będziemy używać, zależy od ustawień wtyczki w edytorze/IDE. W moim przypadku jest to Enter, ale nic nie stoi na przeszkodzie, żeby korzystać ze Spacji czy klawisza Tab.

Podstawowa składnia w Emmet

Kiedy zasada działania jest już znana nie pozostaje nic innego, jak nauka składni i wykorzystywanie benefitów.

Elementy w Emmet

Rodzaje tagów HTML dostępnych do wyboru nie są w żaden sposób limitowane, np. jedynie do tagów ze specyfikacji języka. Oznacza to, że użycie ul i naciśnięcie klawisza wygeneruje kod

<ul></ul>

tak samo jak foo i naciśnięcie klawisza wygeneruje

<foo></foo>

Operatory zagnieżdżeń

W Emmet na kilka sposobów można określić relacje elementów.

> elementy potomne (dzieci)

Operator > służy do zagnieżdżania kolejnych elementów wewnątrz poprzednich.

div>ul>li

wygeneruje taką strukturę HTML

<div>
  <ul>
    <li></li>
  </ul>
</div>

+ rodzeństwo

Operator dodawania pozwala umieścić elementy jeden po drugim, np.

div+p+bq

wygeneruje

<div></div>
<p></p>
<blockquote></blockquote>

* mnożenie

Operator mnożenia pozwala określić ilość mnożonego elementu, np.

ul>li*3

to ekwiwalent

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Operatory atrybutów

Emmet ułatwia również sposób zapisu atrybutów poszczególnych elementów.

atrybuty id i class

Najpowszechniej używane atrybuty dysponują operatorami ułatwiającymi ich wygodny zapis.

div#header+div.page+div#footer.class1.class2.class3

wygeneruje

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

atrybuty własne

Do stworzenia własnego atrybutu należy użyć składni HTML znanej z [attr]. Tak oto

td[title="Hello world!" colspan=3]

zamieni się w

<td title="Hello world!" colspan="3"></td>

$ operator numerowania

Podczas multiplikacji elementów poprzez operator * można użyć aktualnej liczy porządkowej do numerowania elementów. Dla przykładu

ul>li.item$*3

równa się

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

Tekst

Do dodawania tekstu do elementu służą operatory nawiasów klamrowych: {}. Na przykład skrót

a{Click me}

wygeneruje po naciśnięciu klawisza kod

<a href="">Click me</a>

Więcej o Emmet

Wygodne skróty dla elementów to dla mnie główna przyczyna wykorzystywania tej wtyczki, jednak jej możliwości są daleko szersze – dość wspomnieć, że użycie operatora ! oraz naciśnięcie klawisza spowoduje wygenerowanie podstawowej struktury pliku HTML. Wszystkie ficzery zostały opisane w dokumentacji, a lista dostępnych skrótów w przystępnej formie dostępna jest w dedykowanym cheat sheet.

Pug, czyli rozwiązanie dla nieco bardziej zaawansowanych

Pug to przedstawiciel silników służących do budowy struktury HTML w nieco odmienny sposób. Pakiet wymaga zainstalowania w projekcie za pomocą npm:

npm install pug

Po skompilowaniu kodu Pug do czystego HTML, przeglądarka będzie mogła wyrenderować widok. Pug umożliwia dostosowanie tych procesów do własnych potrzeb, jak również integrację z frameworkami JS 1.

Pug w przeszłości funkcjonował pod nazwą Jade, która to nazwa okazała się być zastrzeżonym znakiem towarowym, co doprowadziło do zmiany. Tyle teorii, a jak prezentuje się Pug w praktyce?

Pug w akcji

Dzięki temu narzędziu możemy w o wiele krótszy sposób zapisywać elementy HTML oraz ich atrybuty. Rozważmy przykład:

<a class="link" href="google.com">Google</a>

za pomocą Pug można zapisać następująco:

a(class='button', href='google.com') Google

Przecinki oddzielające atrybuty są opcjonalne tak długo, jak długo nie używamy w atrybutach „dziwnych znaków” (np. nawiasów lub nawiasów kwadratowych) i nie są one umieszczone w cudzysłowach, np.

div(class='div-class', (click)='play()')
div(class='div-class' '(click)'='play()')

w obu przypadkach dadzą:

 <div class="div-class" (click)="play()"></div>

natomiast

div(class='div-class' (click)='play()')

zgłosi błąd.

Zapis atrybutów class i id w Pug

Pug pozwala skrócić składnię jeszcze bardziej, niż pokazano w akapicie wyżej, przy okazji – w moim odczuciu – zyskując na czytelności kodu. Poniższy HTML

<a class="button"></a>

można zapisać w sposób następujący:

a.button

Natomiast element

<a id="main-link"></a>

zapisujemy jako:

a#main-link

Element <div> jest traktowany jako domyślny w Pug i można go zapisać bez podawania nazwy tagu:

<div class="container" id="main-container">

którego ekwiwalentem w Pug może być:

.container#main-container

Pugowy switch oraz if else

Kolejnym benefitem korzystania z Pug jest możliwość wykorzystywania instrukcji switch znanej choćby z JavaScript 3. To jeden z wariantów zapisu instrukcji warunkowej, gdzie wykonanie pewnej akcji (w tym przypadku wyrenderowania HTML) zależne jest od spełnienia warunku. Rozważmy zapis:

- var friends = 10
  case friends
  when 0
    p you have no friends
  when 1
    p you have a friend
  default
    p you have #{friends} friends

Powyższa instrukcja spowoduje wyświetlenie się elementu

<p>you have 10 friends</p>

Dzieje się tak, ponieważ nie został spełniony warunek 0 ani 1 i wyrenderowany komunikat domyślny (default), w którym #{friends) oznacza wartość zmiennej friends – w rozważanym przypadku to liczba 10.

W Pug można również zapisać instrukcję warunkową w postaci zapisu if… else:

- var user = { description: 'foo bar baz' }
- var authorised = false
#user
if user.description
     h2.green Description
     p.description= user.description
   else if authorised
     h2.blue Description
     p.description.
       User has no description,
       why not add one…
   else
     h2.red Description
     p.description User has no description

co w efekcie da

<div id="user">
  <h2 class="green">Description</h2>
  <p class="description">foo bar baz</p>
</div>

Pugowa pętla for

Dzięki Pug możemy również stosować pętlę for do renderowania wybranych elementów 4. Poniższy HTML

<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>

można uzyskać za pomocą pętli for w taki sposób:

- for (var x = 0; x < 3; x++)
 li.item item #{x}

Natomiast czymś na kształt pętli for… in będzie w Pug pętla each… in:

- var list = ["Uno", "Dos", "Tres", "Cuatro", "Cinco", "Seis"]
 each item in list
    li= item

spowoduje powstanie elementów

<li>Uno</li>
<li>Dos</li> 
<li>Tres</li> 
<li>Cuatro</li> 
<li>Cinco</li> 
<li>Seis</li> 

Mixiny w Pug

Ostatnim benefitem Pug, który chciałabym tu pokrótce omówić są mixiny. To nic innego jak bloku kodu, które można wcześniej zadeklarować i używać w wielu miejscach, oszczędzając sobie pisania linijek kodu. Mixiny mogą przyjmować argumenty, czyli wartości przekazywane do mixinu. Poniższy przykład

mixin pet(name)
   li.pet= name
 ul
   +pet('cat')
   +pet('dog')
   +pet('pig')

to nic innego jak Pugowy zapis kodu

<ul>
  <li class="pet">cat</li>
  <li class="pet>dog</li>
  <li class="pet">pig</li>
</ul>

W tym miejscu możliwości Pug wcale się nie kończą. Zainteresowanych odsyłam jak zawsze do dokumentacji.

Inne rozwiązania

Na Emmet i Pug świat się – rzecz jasna – nie kończy. Istnieją inne narzędzia, które rozszerzają możliwości HTML oraz pozwalają skrócić czas potrzebny na jego pisanie. Ciekawy artykuł omawiający kilka technologii pojawił się w ubiegłym roku w Medium. Autor poza wspomnianymi przeze mnie narzędziami omawia jeszcze Haml, Markdown czy Slim. Link do artykułu znajduje się tutaj.