11 Alat-alat agar Secara Langsung Mengkode Lebih Cepat

() translation by (you can also view the original English article)

Dua kali sebulan, kami meninjau kembali atau memperbarui beberapa posting dan sesi favorit pembaca kami dari sepanjang sejarah Nettuts+. Tutorial ini pertama kali diterbitkan pada September lalu.

Bukankah judulnya menjelaskan semuanya? Ada berbagai macam alat-alat dan teknik yang dapat secara drastis meningkatkan kecepatan mengkode kami. Terutama selama pengaturan yang sensitif terhadap waktu, bahkan menyimpan beberapa detik per iterasi dapat bertambah secara substansial selama sebulan. Saya akan menunjukkan sebelas alat-alat favorit saya dalam artikel ini.

1. Zen Coding

Menggabungkan kekuatan dan kekhasan dari penyeleksi CSS dengan mark-up HTML, dan Anda mendapatkan Zen Coding. Tentu saja, saya bukan satu-satunya seseorang yang ternganga pertama kali ia melihat:

1	div#container>div#contents>ul#nav>li*4

dikonversi menjadi:

1	<div id="container">
2	<div id="contents">
3	<ul id="nav">
4	<li></li>
5	<li></li>
6	<li></li>
7	<li></li>
8	</ul>
9	</div>
10	</div>

Di tahun yang lalu, proyek Zen Coding telah memperoleh perhatian yang cukup besar, dan telah diperluas untuk mendukung berbagai macam kode editor, seperti Espresso, Vim, Netbeans, TextMate, dan Komodo Edit.

"Zen Coding adalah editor plugin untuk mengkode dan mengedit HTML, XML, XSL (atau format terstruktur kode lain) berkecepatan tinggi. Inti dari plugin ini adalah mesin singkatan yang kuat yang memungkinkan Anda untuk memperluas ekspresi—mirip dengan penyeleksi CSS—ke kode HTML."

Alternatif

Sparkup

2. Membagi Jendela

Bagi banyak orang, pengalaman mengkode berbasis tab sederhana sudah lebih dari cukup, namun yang lain lebih memilih pendekatan yang lebih terintegrasi. Sayangnya, kemampuan untuk membagi jendela ini tidak banyak tersedia di editor kode. Untungnya, meskipun, beberapa dari mereka mendukungnya di berbagai tingkat fleksibilitas (Rajanya adalah Vim).

Yang sangat bagus editor Vim menawarkan tingkat belum pernah terjadi sebelumnya dari kombinasi jendelanya. Gunakan :sp dan :vsp untuk membuat jendela baru dari dalam mode normal.

Alternatif

3. Merangkul Pengkodean Sosial

Khususnya dalam dua tahun terakhir, ide pengkodean sosial ini telah mendapatkan popularitas yang cukup besar - dan mengapa tidak? Jika itu menyenangkan untuk berbagi foto di Flickr, yang sama tentu akan berlaku untuk pengkodean. Dengan yang baru saja dibeli di situs seperti Envato Snipplr, Github, atau Forrst, tidak hanya Anda dapat mengelola potongan Anda sendiri untuk penggunaan di masa depan, tetapi Anda juga dapat mengambil keuntungan dari beberapa otak dengan menerima umpan balik komunitas pada teknik pengkodean dan pilihan Anda.

Yang baru-baru ini dibeli di Envato yang populer Snipplr.com

Satu lagi situs jejaring sosial? Ya, itu benar, tapi, saya harus mengakui: itu menyenangkan. Plus, itu mendidik!

4. Alat Manajemen Kode

Jaringan online seperti Github, Snipplr, dan Forrst adalah fantastis, namun, mereka dapat memakan waktu untuk mengaksesnya, ketika Anda perlu menggunakan kembali bagian tertentu dari kode (dengan asumsi itu bukanlah sudah bagian dari bundel). Solusinya adalah dengan menginstal salah satu dari berbagai aplikasi manajemen kode yang tersedia di seluruh web.

Secara pribadi, sebagai pengguna Mac, saya lebih menyukai yang tidak-gratis aplikasi Snippets.

Dengan alat ini, ketika saya sedang bekerja pada kode, saya dapat cukup menekan, di Mac, Command + F12 untuk menyisipkan potongan kode yang saya inginkan ke proyek saya. Bahkan lebih baik, itu mengintegrasikan fitur "Export to Snipplr/Snipt/Pastie" yang sangat berguna.

Sementara banyak editor menawarkan sebuah utilitas cuplikan yang terintegrasi, sebaliknya saya akan merekomendasikan merangkul alat pihak ketiga. Dengan cara ini, potongan Anda tidak terbatas pada editor tunggal.

Pro Tip

Jika Anda ingin melakukan sinkronisasi potongandi semua komputer Anda, melalui Dropbox, Anda dapat membuat symlink.

Langkah 1: Browse ke ~/Library/Application Support/Snippets.
Langkah 2: Copy seluruh folder ke folder Dropbox.
Langkah 3: Membuat symlink. Di Terminal, ketik: ln -s ~/Dropbox/Snippets ~/Library/Application Support/Snippets.
Langkah 4: Bilas dan ulangi untuk semua komputer Anda.

Potongan Macam Apa yang Harus Saya Simpan?

Segala sesuatu yang bisa Anda pikirkan! Sebagai aturan praktis, jika Anda cenderung untuk mengetik beberapa blok dari kode yang lebih dari sekali, simpan itu. Mari kita melakukan satu yang jelas bersama-sama; ketika memproduksi sebuah situs web baru, seberapa sering Anda mengetik tiga baris atau lebih untuk membuat sudut membulat pada browser modern?

#box {
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}

Ini membutuhkan waktu sekitar sepuluh detik untuk mengetik setiap waktu. sayang sekali! Sebaliknya, buat potongan baru, dan kurangi waktu mengkode Anda sebesar 90%.

Pilihan Alternatif

Snippley : saya menggunakan yang satu ini sampai saat ini.
Code Collector Pro : Untuk Mac
Snippet App

5. Memilih Editor yang Tepat

Cawan Suci dari mengkode yang efisien; pilihan editor kode Anda akan memiliki efek terbesar pada kecepatan mengkode anda. Sayangnya, tidak ada jawaban yang pasti. Keputusan Anda akan terutama tergantung pada:

Bahasa apa yang Anda kode
OS Anda
Jenis UI yang Anda suka
Kenyamanan dengan baris perintah (atau kurang)

Sebagai contoh, seseorang yang didominasi menciptakan tema HTML untuk situs seperti ThemeForest akan tidak bijaksana untuk menggunakan IDE penuh seperti Aptana. Hanya saja tidak perlu dan terlalu lambat. Namun, hal yang sama tidak berlaku untuk pengembang server-side.

Pertanyaan untuk Ditanyakan Sebelum Memutuskan sebuah Editor

Seberapa penting mengenai kecepatan? Haruskah editor terbuka hampir seketika?
Apakah saya memerlukan alat debugging terintegrasi?
Apakah editor ini menawarkan beberapa bentuk bundel fungsi?
Seberapa mudah untuk menghafal cara pintas keyboard?
Apakah ekstensi favorit dan plugin saya (seperti Zen Coding) tersedia untuk editor kode ini?
Apakah saya memerlukan Git log terpadu?
Apakah saya baik-baik saja dengan antarmuka GUI?
Apakah saya menyukai kecepatan daripada visual...atau Vim daripada Coda?

Ketika saya bertanya pada diri sendiri pertanyaan-pertanyaan ini, saya bertekad bahwa kecepatan dan kinerja adalah yang terpenting. Seperti, saat ini saya menggunakan Sublime 2 dan Vim. Yang terahir adalah menakutkan secara signifikan pada awalnya, tetapi menyediakan tingkat fleksibilitas dan kecepatan yang belum pernah terjadi sebelumnya, karena kenyataannya bahwa bahkan melintasi halaman Anda memerlukan bahasa, semacam itu. Namun, untuk proyek yang lebih besar, yang membutuhkan debugging, saya menggunakan Netbeans.

6. Menggunakan Bundel

Bundel: pelajari mereka...gunakan mereka. Editor, seperti TextMate -- dan, kemudian E Text Editor -- bundel yang dipopulerkan; namun, mereka tersedia secara luas dari editor ke editor.

Apa yang Begitu Besar Tentang Mereka?

Berapa kali Anda menemukan diri Anda mengetik potongan generik yang sama dari bagian dari mark-up atau kode, apakah itu mungkin sebuah fungsi baru, atau struktur dari plugin jQuery baru. Berapa banyak waktu yang Anda buang setiap kali Anda mengulangi proses ini? Ini adalah di mana bundel datang ke dalam permainan.

Misalnya, dengan men-download bundel TextMate CodeIgniter, kita dapat mengambil keuntungan dari berbagai macam metode dan potongan. Ingat - mengetik lebih sedikit adalah selalu hal yang baik!

Dengan menginstal paket ini, kita hanya perlu mengetik pintasan yang dituju, dan kemudian tekan tab (di kebanyakan editor). Hal ini kemudian akan memperluas pintasan ke kode yang diminta. Apa yang memisahkan suatu bundel dari potongan adalah bahwa Anda dapat menentukan beberapa perhentian tab untuk lebih mempercepat kecepatan mengkode Anda.

Pengguna Vim: jika Anda lewatkan/iri pada fitur bundel TextMate, periksa plugin SnipMate.

7. Menggunakan Preprocessor CSS

Alat-alat seperti LESS.js dan Sass dapat secara drastis meningkatkan kecepatan mengkode Anda. Dalam hal yang mana untuk dipilih: mereka berdua sangat baik. Hari ini, saya cenderung lebih suka Sass, karena kerangka Compass dibangun di atasnya, dan memberikan Anda fungsi kenyamanan yang tak tertandingi. Ini juga tampaknya menjadi apa yang digunakan anak-anak keren. :)

Bagaimana cara kerjanya?

Alat-alat ini memungkinkan untuk semua fitur yang dimiliki CSS yang Anda inginkan--seperti variabel dan fungsi.

/*
Variables!
*/
@primary_color: green;

/*
Mix-ins are like functions for commonly used operations,
such as apply borders. We create variables by prepending
the @ symbol.
*/
.rounded(@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	border-radius: @radius;
}

#container {
/* References the variable we created above. */
	background: @primary_color;

/* Calls the .rounded mix-in (function) that we created, and overrides the default value. */
	.rounded(20px); 

/* Nested selectors inherit their parent's selector as well. This allows for shorter code. */
	a {
		color: red;
	}
}

Pro Tip: Untuk membuat browser Anda meng-update setiap saat Anda menyimpan sebuah file (fitur yang sangat berguna), gunakan metode watch. Tempatkan berikut ini di bawah proyek Anda. Tentu saja, ini berasumsi bahwa Anda sudah mengatur LESS.js.

1	less.env = 'development';
2	less.watch();

Bersiap dan berjalan dengan LESS.js (video dan artikel)

Compiler LESS

Banyak yang mungkin berpendapat bahwa itu tidak aman untuk menggunakan solusi berbasis JavaScript. Tapi itu baik-baik saja; ada beberapa kompiler yang tersedia di seluruh web. Solusi terbaik yang mampu saya temukan disebut LESS.app.

Setelah Anda men-download (gratis), Anda cukup drag folder proyek Anda ke dalam aplikasi, yang menginstruksikan agar watch semua file .LESS. Pada titik ini, Anda dapat terus bekerja pada proyek Anda, seperti biasa. Setiap kali Anda menyimpan, compiler akan berjalan, yang menghasilkan/memperbarui file style.css yang secara otomatis dibuat. Ketika Anda selesai mengembangkan aplikasi, Anda hanya perlu mengubah stylesheet Anda mereferensi dari style.less ke style.css, yang sesuai. Mudah! Sekarang tidak ada alasan untuk tidak mengambil keuntungan dari LESS — kecuali jika Anda menggunakan solusi yang berbeda, seperti Sass.

Ambil seri-mini kami untuk belajar secara persis bagaimana untuk bekerja dengan Sass.

8. Prototipe Awal dengan Firebug

Anda tahu permasalahannya: menulis sedikit JavaScript, beralih dan refresh browser Anda, menerima kesalahan, kembali ke editor...dan bilas dan ulangi. Meskipun kita semua melakukan itu, kadang-kadang, ada alternatif yang jauh lebih efisien, seperti protoyping lebih awal dengan alat-alat seperti Firebug. Dengan bekerja secara langsung di browser, Anda memotong orang yang di tengah-tengah, bisa dikatakan.

Yang sangat berbakat Dave Ward merekomendasikan tips ini, dan bahkan telah membuat screencast yang mendemonstrasikan metode ini.

Kunjungi situs web Dave untuk melihat versi kualitas yang lebih tinggi dari screencast ini.

9. Menggunakan Prefixr

Alat-alat seperti Compass, atau bahkan bundel TextMate sangat membantu – saya sering menggunakannya, sebenarnya. Namun, untuk banyak proyek, mereka tidak tersedia. Sebagai hasilnya, kita dibiarkan dalam posisi harus copy dan paste, berulang -ulang... dan lagi.

Saya membangun Prefixr untuk melakukan semua pekerjaan membosankan ini untuk saya. Cukup paste di stylesheet Anda, tekan Prefixize (atau tekan Control + Enter), dan Prefixr akan menyaring melalui properti CSS3 yang berlaku dan secara dinamis memperbarui mereka.

Tidak bisa mengingat jika Opera menyediakan versi di-prefix, katakanlah, properti transisi (o-transition)? Jangan khawatir tentang itu; itu sudah dikodekan ke Prefixr!

Dengan Prefixr, Anda hanya mengkode stylesheet Anda menggunakan markup resmi yang disarankan W3C. Bila sudah siap untuk penyebaran, jalankan stylesheet melalui Prefixr, dan selesai dengannya!

Pelajari lebih lanjut tentang Prefixr.

10. Cari Editor yang Menawarkan Multi-Select

Pertama saya akan memperingatkan Anda bahwa sangat sedikit kode editor menawarkan fitur multi-select. Editor yang saya gunakan saat ini, Sublime 2, melakukannya. Bahkan lebih baik, ia tersedia untuk pengguna Windows dan Mac.

Jadi apa itu sebenarnya multi-seleksi? Nah, editor seperti TextMate telah lama menawarkan seleksi vertikal, yang cukup rapi. Namun, dengan multi-seleksi, Anda dapat memiliki beberapa kursor pada halaman. Ini secara drastis dapat mengurangi kebutuhan untuk menggunakan regular expressions, dan query pencarian dan penggantian tingkat lanjut.

11. Jangan Membuat Ulang yang Sudah Ada

Ketika pertama kali memulai dalam bidang ini, saya selalu mengalami masalah dengan komentar-komentar seperti "Jangan Membuat Ulang yang Sudah Ada." Ini bukan tentang penemuan ulang; ini adalah tentang pemahaman bagaimana roda berfungsi. Namun, setelah Anda mengetahui cara kerja dalam roda, argumen ini tentu saja benar: Don't Repeat Yourself.

Mengkode setiap proyek baru dari awal adalah sangat memakan waktu.

Jika Anda ingin menyelesaikan proyek-proyek baru secepat mungkin (dan yang tidak), hemat waktu Anda, dan ambil keuntungan dari berbagai tingkat abstraksi yang tersedia di seluruh web. Beberapa favorit saya termasuk:

HTML5 Boilerplate - Apakah Anda memilih untuk menggunakan template ini secara keseluruhan, atau dalam potongan-potongannya, itu tidak masalah. Hanya gunakan itu! Dan sementara Anda berada padanya, membagi bagian-bagian dari kode menjadi potongan untuk digunakan kembali! Lihat panduan resmi untuk Boilerplate di Nettuts+
CodeIgniter (PHP Framework) - Untuk tingkat aplikasi PHP yang lebih tinggi, kerangka CodeIgniter adalah pilihan yang fantastis. Bahkan lebih baik, dukungan komunitas yang tidak ada duanya. Jika Anda kebetulan menjadi seorang pembelajar visual, seri CodeIgniter dari Awal kami ini, juga, yang tidak ada duanya. :)
960 (CSS Framework) - Jika Anda membutuhkan struktur seperti-grid, baik kerangka 960 dan Blueprint CSS adalah pilihan yang fantastis. Mereka dengan mudah mengubah berjam-jam kerja ke dalam proses dua menit; dan, jika Anda khawatir tentang file yang menggembung, Anda tidak perlu. Itu argumen yang konyol. Mari kami mengajarkan Anda bagaimana menggunakan 960!
jQuery (JavaScript Library) - Apakah yang satu ini benar-benar memerlukan penjelasan pada titik ini? Selamatkan diri dari sakit kepala, dan gunakan itu (yang adalah, kecuali jika Anda telah mengembangkan library mengagumkan Anda sendiri).

Kesimpulan

Saya akan menunjukkan milik saya jika Anda menunjukkan milik Anda. Alat dan sumber daya apa yang Anda gunakan agar mengkode lebih cepat?