Indonesian (Bahasa Indonesia) translation by Fitri Karina (you can also view the original English article)
Sebagian besar dari kita sudah mengenal utilitas Zen Coding yang populer sekarang. Bagi mereka yang tidak, itu mengubah proses pembuatan markup kompleks menjadi pemilih seperti CSS. Ini dapat menghemat banyak waktu; namun, ada beberapa kekurangan. Untungnya, alat lain, Sparkup, terinspirasi oleh Zen Coding, mengatasi masalah ini, dan mendorong produktivitas Anda lebih tinggi!
Lebih suka Video Tutorial?
Tunggu... Apa Zen Coding?
Pertimbangkan markup berikut:
<div id="container"> <nav> <ul> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> </ul> </nav> </div>
Ini adalah markup yang cukup umum yang akan Anda buat untuk setiap situs web baru. Dengan anggapan bahwa Anda belum menyimpan ini sebagai potongan, ia dapat dengan mudah dibuat kembali dalam hitungan detik, dengan Zen Coding.
#container > nav > ul > li*4
- Target
ids
danclasses
dengan#
dan.
penyeleksi. - Gunakan
>
untuk memfilter pohon dan membuat elemen anak-anak. - Minta banyak elemen dengan menggunakan simbol
*
. - Gunakan simbol
+
untuk membuat saudara kandung.
Kamar untuk Perbaikan
Sayangnya, ada beberapa masalah yang saya miliki dengan Zen Coding.
- Sejauh pengetahuan saya, tidak ada cara mudah untuk melakukan perjalanan kembali ke atas pohon. Misalnya, jika saya membuat pemilih
ul > li*4
, saya tidak mengetahui cara untuk memfilter kembali keul
, dan kemudian membuat elemen saudara. - Tidak ada cara untuk menetapkan
innerHTML
ke suatu elemen. Bukankah lebih bagus jika saya bisa mengetik,ul>li {Some Text Here}
? - Saya tidak percaya ada cara untuk
tab
antara berhenti, setelah Anda berkembang.
Untungnya, sebuah utilitas, yang terinspirasi oleh Zen Coding, memperbaiki semua masalah yang tercantum di atas. Ini kompatibel dengan maju -- artinya, semua pengetahuan Coding Zen Anda akan ditransfer dengan lancar.
Tersedianya
Pada saat penulisan ini, Sparkup tersedia untuk TextMate, Vim, dan untuk penggunaan umum, melalui baris perintah. Cukup mudah untuk menginstal. Untuk informasi lebih lanjut, lihat screencast di atas.
Naiki Pohon
Dengan Sparkup, kita dapat melakukan perjalanan kembali ke atas pohon.
Syntax
ul > li*3 > a < < + #contents
Perhatikan bagaimana kita menggunakan >
untuk melakukan perjalanan kembali ke atas pohon. Dari tag anchor, satu <
akan membawa kita ke item daftar, dan yang lain akan membawa kita kembali ke daftar tidak terurut, di mana kita dapat membuat saudara kandung dengan simbol +
. Sangat membantu!
Output
<ul> <li> <a href=""></a> </li> <li> <a href=""></a> </li> <li> <a href=""></a> </li> </ul> <div id="contents"></div>
Tambahkan Teks ke Elemen
Dengan menggunakan kurung kurawal, kita dapat menetapkan nilai, atau innerHTML
ke elemen yang kita buat. Fitur ini sangat dibutuhkan.
Syntax
ul > li > p { My Text Here }
Output
<ul> <li> <p> My Text Here </p> </li> </ul>
Tab Stop
Dengan Sparkup, kita dapat tab berhenti yang diperlukan, sehingga kita dapat secara manual memasukkan atribut/nilai kita secepat mungkin. Dengan MacVim, seperti yang ditunjukkan dalam screencast, Anda dapat menggunakan Control + N
dan Control + P
untuk beralih di antara berhenti.
Dengan cara ini, daripada harus menggunakan banyak penekanan tombol arah, satu perintah akan membawa Anda ke tempat yang Anda inginkan. Lihat screencast untuk contoh.
Jadi apa yang Anda pikirkan? Apakah Anda akan beralih?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weekly