Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. General

Tips Cepat: Markup Lebih Cepat dengan Sparkup

by
Read Time:3 minsLanguages:

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:

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.

  • Target ids dan classes 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 ke ul, 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

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

Tambahkan Teks ke Elemen

Dengan menggunakan kurung kurawal, kita dapat menetapkan nilai, atau innerHTML ke elemen yang kita buat. Fitur ini sangat dibutuhkan.

Syntax
Output

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?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.