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 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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *