Emmet

Enostavnejše kodiranje z Emmet pluginom

Emmet plugin – prej se je imenoval ZenCoding, je meni osebno najboljši plugin, ki jih uporabljam pri kodiranju, saj zelo pohitri samo kodiranje.

Zdaj se verjetno že sprašujete kaj je tisto, zaradi česar je pri meni ta plugin tako priljubljen. Odgovor je sila preprost. Kot sem že zgoraj povedal, plugin nudi super-duper funkcije s katerimi si lahko zelo pohitrite kodiranje oziroma pisanje html kode.

Sam plugin je na voljo v večih različnih html urejevalnikih, naštel jih bom zgolj nekaj:

  • Sublime Text (sicer plačljiv, ampak je meni osebno top-shit urejevalnik) 🙂
  • Eclipse
  • TextMate
  • Coda
  • Brackets
  • NetBeans
  • Notepad++
  • itd.

Funkcija, katero sam največ uporabljam se imenuje (angl. “Abbreviations“) oziroma okrajšave. Pa si poglejmo na primeru, kaj ta funkcija naredi.

Naprimer, da želimo spisati kodo za navigacijo z neurejenim seznamom (unordered list oziroma ul), ki izgleda nekako tako:

lahko to isto kodo dobimo, če uporabljamo Emmet plugin, z eno samo napisano vrstico in sicer vse kar moramo napisati je zgolj to:

ter zgolj pritisniti Tab tipko.

HTML strukture

Za kreiranje html 5 strukture strani, v kateri dobimo

uporabimo naslednji ukaz

V kolikor pa želimo uporabiti html 4 pa imamo na voljo nabor naslednji bližnjic:

  • V kolikor želimo imeti HTML 4 Transitional strukturo uporabimo bližnjico html:4t, pritisnemo tipko Tab in dobimo

  •  Z uporabo bližnjice html:4s dobimo HTML 4 Strict strukturo

  •  Z uporabo html:xt pa dobimo HTML 4 XHTML Transitional

Meta oznake

Prav tako je tudi koristno, če poznamo bližnjice za meta značke in sicer za:

  • utf-8 charset uporabimo zgolj meta:utf in plugin zgenerira naslednjo kodo

  •  kodo za viewport dobimo z uporabimo meta:vp

  • za x-ua-compatible meta oznako pa uporabimo meta:compat

 Obrazci in vnosna polja

Emmet med drugim podpira tudi kreiranje značk za obrazce in vnosna polja in sicer naslednje:

  • Form
  • Input tipa:
    • hidden
    • text
    • search
    • email
    • url
    • password
    • datetime
    • date
    • datetime-local
    • month
    • week
    • time
    • number
    • color
    • checkbox
    • select
    • option
    • textarea
    • radio
    • range
    • file
    • submit
    • image ter
    • button
    • reset

Lipsum generator

Med drugim plugin ponuja tudi generator “Lorem Ipsum” teksta, ki zgenerira 100 besed dolg tekst. Uporabimo bližnjico lipsum in voila, lorem ipsum tekst je že pripravljen 🙂

Še nekaj preostalih uporabnih bližnjic

Ena tudi uporabna bližnjica je bližnjica za skok na začetek značke. Naprimer, imamo nek div v katerem je polno solate in želimo čim hitreje priti na začetek značke. Zelo enostavno in sicer postavimo se zgolj na konec značke </TUKAJdiv>in uporabimo kombinacijo tipk CTRL + T.

Potem pa je tu še uporabna bližnjica za komentiranje in odkomentiranje kode z zgolj eno kombinacijo tipk, ki pa je v osnovi nastavljena za angleško tipkovnico saj je nastavljena na kombinacijo tipk Ctrl + /, ampak tudi to se da urediti. V kolikor uporabljate  Sublime Text urejevalnik to storite tako, da greste v “Preferences” -> “Package Settings” -> “Emmet” -> “Key Bindings – Default” in uporabite iskanje ter vnesete niz “toggle_comment” ali pa greste v vrstico 48 in spremenite vrednost na tisto, katero želite imeti.

Zaključek

Verjetno vas sedaj zanima kaj zanimivega še plugin ponuja. Vsekakor ne samo to kar sem opisal zgoraj. Med drugim imamo na voljo tudi CSS okrajšave za določanje barv, širine, dolžine, odmikov in tako dalje. Več o CSS okrajšavah pa vam bom predstavil v naslednjem delu.

Do takrat pa en lep pozdrav 🙂