Zen Coding
Zen Coding
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
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/
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
<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
Pengisian Atribut
Pengisian atribut tag juga bisa dilakukan via Zen Coding. misalnya :
ul>li>a[href="www.ariona.net" title="ariona.net"]
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
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 < . biar tidak repot, kita gunakan fitur dari zen coding dengan
menambahkan |e diakhir kode.
#content>#article+#sidebar|e
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.
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
<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}
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*
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
Sumber
http://code.google.com/p/zen-coding/