Emmet


Az Emmet egy ingyenes plugin, ami a legtöbb ismert szerkesztőhöz letölthető és arra hivatott, hogy meggyorsítsa a munkafolyamatokat.
 
A legfontosabb támogatott programok:
-Sublime
-Atom Text
-Coda
-Eclipse/Aptana
-TextMate 2
-Notepad++
-NetBeans
-Adobe Dreamweaver
 
Az Emmet css-szerű rövidítéseket alakít html kóddá. Segítségével villámgyorsan elkészíthetjük egy weboldal HTML struktúráját (természetesen nem csak erre jó, de most ezen a vonalon fogjuk vizsgálni).
A működése hihetelenül egyszerű, csak beírjuk a rövidítést és nyomunk egy "TAB"-ot (fontos, hogy a kurzor a rövidítés végén álljon).
 
Nézzük is meg a működését különböző példákon keresztül:
 
 

1. HTML elem "ID"-val:

div#megnevezes -> <div id="megnevezes"></div>
p#megnevezes -> <p id="megnevezes"></p>
span#megnevezes -> <span id="megnevezes"></span>
 
 

2. HTML elem "class"-al:

div.megnevezes -> <div class="megnevezes"></div>
p.megnevezes -> <p class="megnevezes"></p>
span.megnevezes -> <span class="megnevezes"></span>
 

3. Gyermek elemek létrehozása

div.megnevezes>p.leiras
 
<div class="megnevezes">
<p class="leiras"></p>
</div>
 

4. Testvér elemek létrehozása

div.megnevezes+div.leiras
 
<div class="megnevezes"></div>
<div class="leiras"></div>
 
 
Végezetül pedig készítettünk pár gifet amin élesben is látható, hogy mennyire hatékony eszközről van szó és milyen mértékben tudjuk vele meggyorsítani a kódolási folyamatokat.
 

HTML5 váz

navigáció

 

unordered list készítése adott elemekből villámgyorsan (CTRL+SHIFT+G billenytűkombinációval hívható elő a panel)

 

különböző rövidítések akcióban

Hírlevél feliratkozás

* kötelező mezők