Wanneer je code voor een webapplicatie schrijft dan is een goede editor onontbeerlijk. Een goede editor helpt je om snel foutloze code te schrijven, onder andere door het:

  • aanmaken van nieuwe pagina's waarin al een HTML skelet klaar staat
  • automatisch afsluiten van geopende elementen
  • aanvullen van attributen en attribuutwaarden
  • invoegen van code snippets

Met de meeste van deze mogelijkheden ben je hopelijk al bekend. Maar goede editors zijn ook nog eens uitbreidbaar met plug-ins die je workflow nog verder kunnen verbeteren. Een hele handige plug-in is de Emmet Code Toolkit, voorheen Zen Coding genoemd. Hiermee kun je nog sneller HTML en CSS code schrijven. De Emmet plug-in is voor alle bekende editors beschikbaar, zowel voor de Mac als Windows. Kijk maar eens op http://emmet.io/download/.

Emmet is standaard beschikbaar in Adobe Dreamweaver vanaf CC 2015. Open maar eens een nieuw HTML document en zet de cursor in code view tussen de body tags. Normaal gesproken typ je om een paragraaf aan te maken eerst <p> en wanneer u </ heeft getypt dan sluit DW automatisch af met </p>. Met Emmet typ je enkel p en daarna gebruik je de [Tab] toets. Dit is voor Emmet het signaal om de code te expanderen naar <p>|</p> met de cursor ertussen. Lekker bijzonder denk je nu misschien, dat gedrag kan ik via de voorkeuren van Dreamweaver ook instellen... Het mooie van Emmet is echter dat je elementen met CSS selectors en een aantal operatoren kunt combineren om heel snel de corresponderende markup te genereren.

HTML genereren

Met de uit CSS bekende direct child selector maak je bijvoorbeeld snel geneste structuren aan:

nav>ul>li

Dit geeft:

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

Terwijl je met de sibling selector juist kunt stapelen:

header+article+footer

Dit geeft:

<header></header>
<article></article>
<footer></footer>

U kunt de elementen combineren met id en class selectors:

ul#navigation>li.link

Dit geeft:

<ul id="navigation">
  <li class="link"></li>
</ul>

Wanneer u de elementen weglaat dan gaat Emmet uit van <div>'s:

.container>.row>.col

Dit geeft:

<div class="container">
  <div class="row">
    <div class="col"></col>
  </div>
</div>

Tenzij het uit de context duidelijk is dat het wel een inline element moet zijn, dan wordt het natuurlijk een <span>:

p.intro>.demo

Geeft:

<p class="intro"><span class="demo"></span></demo>

Multiple classes zijn geen enkel probleem (heel handig bij werken met frameworks zoals Bootstrap):

input:b.btn.btn-primary

De toevoeging :b is een afkorting voor type="button":

<input type="button" value="" class="btn btn-primary">

Sommige standaardattributen worden automatisch geplaatst:

a>img

Dit geeft gelijk:

<a href=""><img src="" alt=""></a>

Andere attributen kunt u opgeven met een attribute selector:

nav[role=navigation]

Dit geeft:

<nav role="navigation"></nav>

Heel handig is dat u met de multiplication operator * kunt aangeven dat er meerdere elementen tegelijk moeten worden aangemaakt:

nav>ul>li*3>a

Dit heeft het volgende resultaat:

<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

Kijk, now we're talking! Met de count operator $ kunt u bovendien een teller mee laten lopen. Tekst geeft u mee tussen accolades:

nav.navbar>ul.navlist>li.item$*3>a{link $}

En hatsikidee:

<nav class="navbar">
  <ul class="navlist">
    <li class="item1"><a href="">link 1</a></li>
    <li class="item2"><a href="">link 2</a></li>
    <li class="item3"><a href="">link 3</a></li>
  </ul>
</nav>

Dummy Text

Met Emmet kunt u tevens dummy text genereren. U typt simpelweg loremXX waarbij u XX vervangt door een getal dat overeenkomt met het aantal woorden dat u wenst:

p>lorem10

geeft een paragraaf met 10 woorden dummy text:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus?</p>

Heel handig om dat zo gelijk binnen je editor te kunnen doen!

CSS genereren

U kunt met Emmet ook CSS property-value pairs genereren. Voorwaarde is dan uiteraard wel dat je in een CSS bestand of binnen een <style> element of eventueel een style attribuut werkt. Stel, je wilt in een externe stylesheet een element van de klasse demo een grijze achtergrond geven en rondom afgeronde hoeken. Dan typ je eerst simpelweg

.demo {}

Binnen de accolades zet je dan de afkorting bgc:

.demo {bgc}

Dat wordt na [Tab]:

.demo {background-color: #fff;}

De hexadecimale waarde fff is reeds geselecteerd, dus daar kun je snel ccc van maken. Vervolgens typ je de afkorting bdrs met gelijk daarachter de waarde die je wilt gebruiken, bijvoorbeeld:

.demo {background-color: #fff; bdrs5}

Dat wordt dan omgezet in:

.demo {background-color: #fff; border-radius: 5px;}

Conclusie

En dit is nog maar het topje van de ijsberg! Een volledig overzicht van alle afkortingen vind je in de cheat sheet op http://docs.emmet.io/cheat-sheet/.

Helaas worden niet alle mogelijkheden van Emmet door Dreamweaver ondersteund. Met name voor het aanpassen van bestaande code zijn er ook hele handige oplossingen. Editors als Brackets of Sublime Text kunnen daar wel heel goed mee omgaan. Maar met bovenstaande voorbeelden kunt u hopelijk al snel tijdwinst boeken terwijl u toch volledig de controle blijft houden over de gegenereerde code. De kans is echter groot dat je in het geval van Dreamweaver voor CSS liever de standaard code hinting gebruikt... Dat werkt wellicht net wat handiger! We gebruiken tools als Emmet echter graag in onze Front-end cursussen zoals onze JavaScript cursus en de HTML5 & CSS3 cursus om snel de benodigde markup te genereren.

Ben je nog niet zo bekend met begrippen als markup, elementen, attributen en CSS selectors en dergelijke dan is de basiscursus HTML & CSS wellicht interessant voor je? Hier gaan we uitgebreid in op de talen HTML en CSS om deze op een editor afhankelijke manier te leren begrijpen en in te zetten.

Happy Coding!

Waarom
Competence Factory?

  • Kleine groepen
  • De beste trainers met praktijkachtergrond
  • 6 x per jaar gratis deelname aan de Inspiration Factory
  • Kosteloos intake-adviesgesprek
  • Mogelijkheid tot persoonlijke coaching
  • Beste prijs/kwaliteit van Nederland
  • Geen verborgen kosten
Meer over Competence Factory