Zen Coding : Cara cepat menulis kode

HTML & CSS

Oleh Rian Ariona 20 Jan 2012 Diupdate 6 Feb 2014

Share Artikel:

16

65

Penulisan Kode HTML dan CSS bisa dibilang itu-itu saja, atau yang kita tulis disetiap
pembuatan markup HTML dan Styling tidak jauh berbeda dari markup atau styling kita
sebelumnya. artinya kita hanya mengulangi pengetikan beberapa baris kode yang hampir
sama, namun paling tidak berbeda antara nama ID dan Class (HTML) dan value pada CSS.
untuk mempercepat proses Coding kedua bahasa tersebut, Zen Coding-lah solusinya. Zen
Coding adalah plugin bagi beberapa text editor seperti notepad++, sublime text, coda dan
lainnya yang fungsinya untuk mempercepat pengetikan kode HTML dan CSS anda.
sebagai contoh, berapa lama anda mengetikkan kode berikut ?
<div id="header">
<img src="" alt="" id="logo">
<nav>
<ul id="main-menu">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
</div>

Untuk ukuran orang yang menggunakan teknik 10 jari paling tidak memerlukan waktu 5-10
menit. Namun dengan menggunakan zen coding, kita hanya butuh waktu 1-2 menit dengan
mengetikkan 1 baris kode berikut :
#header>img#logo+nav>ul#main-menu>li*5>a

Penasaran bagaimana cara menginstall dan menggunakan Zen Coding? ayo lanjut bacanya.

Instalasi
Untuk Instalasi Zen Coding, saya akan membahas bagaimana cara penginstallan Zen Coding
pada Notepad++ dan Sublime Text. untuk teks editor lainnya bisa anda lihat di situs
resminya.

Notepad++
Jika anda mempunyai Koneksi Internet, anda dapat menginstall Plugin zen-coding langsung
melalui Plugin Manager (Plugin > Plugin Manager). Scroll sampai anda menemukan Plugin
Zen Coding, beri checklist dan klik install. setelah proses instalasi selesai, anda harus

merestart Notepad++ anda.

[image url="http://ariona.net/wp-content/uploads/2012/01/plugin-manager.jpg" title="Plugin
Manager"]
Jika anda tidak punya koneksi internet, download plugin zen coding terlebih dahulu. Lalu
ekstrak file di folder Plugin Notepad++ (biasanya disini C:\Program
Files\Notepad++\plugins\)

Sublime Text
Untuk sublime text anda dapat mendownload package Zen Coding disini.
Simpan file yang sudah di download di folder Installed Package dalam folder instalasi
Sublime Text.
Untuk instalasi text editor lainnya silahkan untuk mengunjugi situs official sublime text disini
http://code.google.com/p/zen-coding/

Cara Penggunaan Dasar

Penulisan Kode HTML dengan Zen Coding sangatlah. sebagai contoh, untuk membuat
sebuah div dengan id wrapper kita bisa menulikannya seperti ini :
#wrapper

tanda pagar (#) berasal dari gaya penulisan ID dalam CSS. selanjutnya tekan kombinasi
tombol Ctrl+Alt+Enter (Notepad++) atau cukup menekan Tab pada Sublime Text.
kode yang dihasilkan adalah :
<div id="wrapper"></div>

Kemudian jika anda ingin membuat sebuah ul dengan id menu, maka anda tinggal
menuliskan kode seperti ini :
ul#menu

Untuk pemberian Class, sama halnya dengan CSS, gunakan tanda titik sebelum nama class :
ul.category

Child
untuk membuat child dari suatu elemen, misalnya membuat li dalam ul, yang perlu anda
tambahkan adalah tanda lebih besar dari (>)
ul#menu>li

contoh lebih detail :

nav>ul.menu-utama>li>a

yang akan menghasilkan kode berikut :

<nav>
<ul class="menu-utama">
<li><a href=""></a></li>
</ul>
</nav>

Sibling
Sibling, atau saudara berari element yang berada satu level dengan elemen lainnya.
perhatikan contoh berikut :
<div id="content">
<div id="article"></div>
<div id="sidebar"></div>
</div>

article dan sidebar disebut sibling dan child dari content. untuk membuat sibling anda tinggal
menambahkan tanda plus (+) contohnya :
#content>#article+#sidebar

Pengulangan
Pengulangan sangat cocok untuk membuat suatu elemen yang berulang, contohnya li. anda
tinggal menambahkan tanda bintang (*) diikuti jumlah elemen yang akan dibuat.
ul>li*5

akan menghasilkan kode berikut :

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

Pengisian Atribut
Pengisian atribut tag juga bisa dilakukan via Zen Coding. misalnya :
ul>li>a[href="www.ariona.net" title="ariona.net"]

akan menghasilkan kode :

<ul>
<li><a href="www.ariona.net" title="ariona.net"></a></li>
</ul>

Penomoran Otomatis

Misalnya kita akan membuat 5 buah class dengan nama class berurutan mulai dari type1
sampai type5. maka penulisan kodenya menjadi seperti berikut :
.type$*3

hasil dari kode tersebut adalah

<div class="type1"></div>
<div class="type2"></div>
<div class="type3"></div>

Filter
Pada versi terbarunya, Zen Coding menambahkan fitur filter. filter digunakan untuk merubah
beberapa karakter menjadi entity. misalnya ketika pengetikan kode pada blog, kita diharusnya
mengganti tanda < menjadi &lt; . biar tidak repot, kita gunakan fitur dari zen coding dengan
menambahkan |e diakhir kode.
#content>#article+#sidebar|e

dan kode yang dihasilkan adalah :

&lt;div id="content"&gt;
&lt;div id="article"&gt;&lt;/div&gt;
&lt;div id="sidebar"&gt;&lt;/div&gt;
&lt;/div&gt;

Cheat Sheet
Untuk melihat daftar lengkap kode Zen Coding / singkatan-singkatan dalam zen coding bisa
didownload disini http://code.google.com/p/zencoding/downloads/detail?name=ZenCodingCheatSheet.pdf

Kesimpulan
Keberadaan Zen Coding akan sangat membantu anda dalam proses markup HTML dan
styling. bagaimana tidak, hanya dengan mengetikkan beberapa karakter andapun akan
mendapat beberapa baris kode. Zen Coding sangat tepat untuk anda yang ingin menghemat
waktu dalam proses Coding.

Zen Coding : Cara cepat menulis kode

HTML & CSS Bagian 2
Oleh Rian Ariona 14 Aug 2012

Share Artikel:

53

Artikel ini adalah Update dari artikel yang sama sebelumnya (Zen Coding : Cara cepat
menulis kode HTML & CSS), Pada artikel ini kita akan mempelajari teknik-teknik lain dari
penggunaan Zen Coding dan Fitur terbaru Zen Coding untuk mempercepat pembuatan
markup Anda.

Unlimited Nesting
Pada tutorial sebelumnya tidak dibahas bagaimana jika setelah kita membuat Child lalu ingin
membuat sibling untuk parent yang lain. Anda tidak bisa menggunakan Script seperti berikut
untuk melakukannya :
#parent<.child>#parent-sibling>.child

yang dimaksudkan membuat markup seperti berikut :

1.
2.
3.
4.
5.
6.

<div id="parent">
<div class="child"></div>
</div>
<div id="parent-sibling">
<div class="child"></div>
</div>

Untuk menyelesaikan masalah tersebut, Anda harus menggroupkan bagian yang memiliki
child dengan tanda kurung, seperti berikut:
(#parent>.child)+(#parent-sibling>.child)

Dengan begitu, markup di atas akan anda dapatkan ketika menekan tab (expand
abbreviation). Dengan teknik ini bukan tidak mungkin untuk menulis seluruh Markup
HTML hanya dalam 1 Baris!!, coba ketikkan/copy paste kode berikut, lalu tekan tab.
html:5>(header#header>(h1#logo>a[href="http://www.ariona.net"])+(nav#menu>u
l>li*3>a))+(#content>(#main-content>.post*5>img.postthumbnail+h1+p)+(aside#sidebar>ul.widgetarea>li.widget*3))+(footer#footer>a)

Pengisian Content
Pada versi terbarunya, kita dapat mengisi Konten dari suatu tag, Anda tinggal memasukkan
konten tersebut di dalam kurung kurawal {} seperti berikut:
a.button{Download}

Dan anda akan mendapatkan sebuah link lengkap dengan kontennya :

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

Wrap with Abbreviation

Jika anda ingin menambahkan sebuah elemen sebagai parent dari suatu div, seperti kasus
berikut : Terdapat sebuah div

<div id="content">Saya Konten</div>

kemudian anda ingin menambahkan parent pada div tersebut menjadi seperti kode berikut :
<div id="content-container">
<div id="content">Saya Konten</div>
</div>

Yang harus anda lakukan, adalah memblok div tersebut, lalu tekan shortcut
CTRL+ALT+ENTER(Sublime Text) atau Ctrl+ALT+SHIFT+ENTER (Notepad++) atau cari
menu Wrap with Abbreviation dimenu zen coding, Sebuah dialog akan muncul dan
ketikkan kode yang ingin anda tambahkan.

Teknik ini bisa digunakan untuk merubah sebuah list mentah menjadi list dengan tag ul/ol.
Misalnya kita punya list mentah seperti berikut
item ke 1
item ke 2
item ke 3

Seleksi/block list mentah tersebut, lalu tekan shortcut di atas, dan ketikkan kode berikut :
ul>li*

Kini list mentah anda menjadi list beneran :).

1. <ul>
2.
<li>item ke 1</li>
3.
<li>item ke 2</li>
4.
<li>item ke 3</li>
5. </ul>

Zen Coding Untuk CSS

Banyak yang bertanya seperti ini Ini kan contoh untuk HTML, nah untuk CSS bagaimana?,
Padahal saya sudah menyarankan untuk mendownload Cheatsheetnya, Anda dapat
mendownload Cheatsheet ZenCoding disini.
Download Cheatsheet

dan perhatikan bagian CSS (Halaman Ke-4), bagian property adalah property CSS yang ingin
anda ketik, dan bagian kiri (Alias) adalah kode ZenCoding untuk property tersebut.

Memang anda tidak akan bisa menggunaan Zen Coding untuk CSS seperti pada HTML,
karena keduanya adalah bahasa yang berbeda. namun anda masih bisa menggunakan konsep
sibling untuk CSS, seperti kode berikut :
m:0+d:ib+ff:ss

Anda akan mendapatkan property-property berikut :

1. margin: 0;
2. display: inline-block;
3. font-family: sans-serif;

Sumber
http://code.google.com/p/zen-coding/