Must Have (Free) Tools for Web Development

Bismillah. Sebelumnya sorry banget kalo judulnya pakai bahasa Inggris, ya karena awalnya artikel ini memang akan ditulis dalam bahasa Inggris, hanya supaya mempermudah semua lapisan maka ditulis pakai bahasa Indonesia (ngeles :D). Yang penting kan esensinya.

Pagi ini saya akan mengajak sobat sekalian untuk mendayagunakan resource-resource free tools dalam pengembangan website. Free disini berarti sobat bisa menggunakannya tanpa harus khawatir akan legalitas dan pastinya gak pake deg-degan kalo ada sweeping penggunaan software versi Pak Tani…lho kok Pak Tani dibawa-bawa…mau tahu lanjuttt …(save dulu ah, kemarin malam artikel ini sudah hampir jadi, tapi lupa di save :)) )

Web development tools itu mahal?

Kalo ada yang bilang web development tools itu harus mahal, fitnah tuh :D. Menggunakan prinsip, selama masih hidup dan terkoneksi ke internet seharusnya segalanya harus murah syukur-syukur bisa gratis :D.

Gratis disini bukan berarti tanpa modal sedikitpun ya. Intinya selama masih ada koneksi internet sobat bisa mendownloadnya langsung dari sumber resmi (hati-hati lho kalo download dari sumber warez , bukan sumber waras ( kalo yang ini bisa-bisa yang didownload jangan-jangan susternya lagi…hehehe)

Kalo gak ada koneksi internet di rumah, bisa ke warnet atau nimbrung di rumah teman atau ke tetangga atau yang paling sering dilakukan (menurut pengakuan di forum2-forum) adalah dengan menggunakan internet kantor 🙂

Kalo koneksi internet pun masih menjadi kendala, sobat bisa melakukan aktifitas copy paste dari komputer teman.
Kalo gak ada juga, sobat bisa janjian ketemu saya, nanti saya kasih web development tools yang akan diulas dibawah ini. Free? ya, paling bawa flash disk sendiri 😀

Kembali ke Pak Tani, ada apa dengan versi Pak Tani? apa Pak Tani juga develop website? Jawabnya bisa ya, bisa gak, coba cari tahu sendiri ya sob.
Selama ini kita selalu dihadapkan bahwa alat-alat untuk mengembangkan website itu harus powerful dan pastinya mahal. Jawabnya bisa ya bisa gak.

Mau tahu kenapa?

Ya sudah, saya gak mau nambah beban prioritas lain, langsung aja ya.
Alat-alat yang dibutuhkan dalam membuat website, disusun tidak secara urut (maaf saya bukan tukang urut :D, apalagi tukang urut plus-plus …jiahhhh )

  1. Local serverTools
  2. Super Yummy Text editor
  3. Browser extensions / addon
  4. Aneka ragam CheatSheet
  5. Sweet Image editor
  6. Spesification and or Technical Manuals

Local server, miliki server sendiri di komputer anda

saya yakin kalo para pengembang web sudah tahu ada itu local server. Buat yang belum tahu, local server itu adalah server (beneran lho) yang dijalankan dari komputer yang (bisa) tidak terhubung ke komputer lain dalam suatu jaringan, baik jaringan dalam (intranet) maupun luar (internet). Dengan menggunakan local server kita bisa banyak menghemat waktu dalam hal pengujian website yang sedang didevelop.
Kecuali sobat adalah tipikal “kalo bisa langsung online, kenapa pakai mode local segala”, itu lain urusan, hanya resiko bila ternyata ada bug di webnya ya tanggung sendiri.

Local server yang biasa saya pakai dan sarankan untuk Windows box adalah XAMPP (jangan tanya saya singkatan dari apa, cari tahu aja sendiri ya).
Kenapa saya sarankan pakai XAMPP, karena portabilitas dan ringkas.
XAMPP tidak perlu diinstal selayaknya software yang lain, itu lah sisi portabilitasnya. Bisa dijalankan dari mana saja, termasuk Portable media storage macam USB Flash Disk atau dari harddisk external. (kalo gak lupa dan ada kesempatan akan saya bahas juga di Myfia On The Web tentang cara menggunakan XAMPP dari portable media storage).

Bila sobat lebih suka yang manual, silakan juga. Hanya sangat tidak disarankan buat pemula, karena bila tidak memiliki mental maju terus pantang mundur (beda sama maju mundur, emangnye lagi main boom boom car 😛 ) bisa jadi bukan development website, tapi malah jadi service komputer deh (becanda sob 🙂 ).

Pengalaman aja, saat mensetup local server (dulu belum tahu ada XAMPP, itulah akibatnya kalo gaptek), saya harus mensetup satu persatu, mulai dari Apache, MySQL dan PHP nya sendiri.
Kalo dipikir-pikir setup manual di Linux Box lebih mudah dibanding manual setup di Windows, ya itu kalau di Linux Box nya pakai mode package, macam RPM atau DPKG, lain halnya kalau harus kompilasi dulu dari source tarbal nya. Jadi ingat saat dulu setup server di Debian Linux Box tanpa mode package…. 🙁

silakan comot XAMPP di Apachefriends

OK, sampai disini urusan local server sudah deal, free kan.

Super Yummy Text Editor

Ya untuk urusan ketik-mengetik kode saya pilih Notepad++ (baca: Notepad plus plus), ini bukan sembarang notepad, ini Notepad powerful. Ipad aja belum ada versi Ipad Plus Plus nya 😀 (jaka sembung main holahoop…ngawur deh).

Kalo belum punya atau pakai Notepad++ bisa download langsung versi terbarunya di situs Notepad++.
Supaya lebih powerful, sobat tinggal tambahkan plugin tertentu di Notepad++ nya.

Kalo mau yang versi portable juga ada, silakan didownload dari Portable software. Isinya tetap sama, pluginnya pun bisa dipasang begitu saja tanpa susah payah.

Yang mau pakai Notepad ++ silakan meluncur kesini
dan untuk Plugin Notepad++ bisa dicomot dari sini

Must Have Browser Extensions/ Addon

Ini juga salah satu hal yang (bisa jadi) terlupakan. Saking sibuknya mencari dan mendownload plus mempelajari ragam software. Sementara sejumlah browser sudah dipersenjati dengan sekumpulan alat bantu berupa extensioin / addon (istilahnya aja beda :D)

Berhubung saya adalah penggemar berat Firefox browser (sejak jaman kali pertama nongol dan jadi alternatif selain Opera dan IE yang saya pakai dulu), maka saya akan sajikan sejumlah Firefox browser yang powerfull dan GPL (gak pake lama) downloadnya.

Berikut daftar dan ketengan singkat masing-masing Firefox addon:

  1. Firebug – kalo yang ini saya malah jarang pakai, biasa pakai yang nomor 9 sih
  2. Web Developer – Many various tools inside
  3. HTML validator – Tool for making clean code
  4. Page Speed – How fast your website
  5. YSlow – Cek Optimasi speed website
  6. ScreenGrab – bikin screenshot langsung dari browser, ukuran dan layar tampilan pilih sendiri
  7. …sengaja dikosongin 😀
  8. FontFinder – cek properti font yang digunakan
  9. Element Properties – mantap bin yahud buat cek langsung bagian yang mau diutak-atik
  10. UserAgent Switcher – test kompatibilitas di berbagai user agent

dah segitu dulu. Kalo kebanyakan juga percuma, apalagi kalo banyak-banyak terus gak dioptimalkan ya mubazir deh

Dimana downloadnya? Aloooo, sudah lihat link di masing-masing jenis extension (maaf kalo penanda link nya belum dirapikan di css nya – lupa terus :D)

Aneka ragam CheatSheet

Ini salah satu alat yang jangan sampai tertinggal. Kenapa?
Begini sob, kalo sobat main game apalagi yang online macam PointBlank, atau apalah, (maaf saya gak tahu banyak , lantaran amat gaptek kalo game online, maklum gak pernah dan gak punya waktu untuk itu, paling main Onet – Chinesse puzzle game :)) ),biasanya belum lengkap kalo belum disertai CheatCode kan :..ayoo ngaku ….

Nah begitu juga dengan web development. Isitilah CheatSheet ini sendiri kalo ditranslasi asal-asalan berarti Lembaran Contekan.

lalu apa isi CheatSheet alias Lembaran Contekan ini?
Begini sobat pemirsa Myfia On The Web yang semoga yang baca ini pada sehat, banyak orderan dan rajin menabung dan banyak pacar (oops, yang terakhir cukup satu saja, maksudnya satu di lingkungan sekolah, satu di kegiatan ekskul, satu di kota A dan seterusnya …just kidding …tanggung sendiri yee)

Saya sendiri masih suka membuka-buka CheatSheet, buat apa?
Karena saya tidak hafal semua fungsi dan fitur yang ada.
Maksoood looo ??????Napsu amat nih nanyanya 😛

Aneka Ragam Cheat Sheet yang saya maksud, antara lain (tergantung kebutuhan juga)

  1. CSS 2.1 Visual CheatSheet
  2. CSS 3 CheatSheet
  3. HTML 5 Visual CheatSheet
  4. HTML5 Visual Canvas Cheat Sheet
  5. jQuery Visual CheatSheet (belum nemu yang versi terbarunya – saat ditulis sudah masuk jQuery versi 1.6)
  6. Regular expression (Regex) CheatSheet
  7. WordPress Visual CheatSheet
  8. PHP PCRE CheatSheet
  9. kalo ada lagi nanti ditambahin

Dengan adanya CheatSheet ini sobat bisa menghemat waktu banyak, dan percaya deh dengan prinsip biar lambat tapi hafal, lambat laun juga ingat dengan sendirinya dan bisa merdeka dari CheatSheet …hooreee…

Ini contoh tampilan cheasheetnya, kalo mau silakan download dari link dibawah

Dapatkan Riesurya CheatSheets Collections for free ( zipped file – contain various cheatsheets in PDF version)
Oom Riesurya, cheatsheetnya boleh dibagi-bagiin gak?
Oh, sangat dianjurkan sekali. Biar semua merasakan betapa enaknya pakai Lembaran Contekan 😀

Sweet Image Editor

Unuk urusan menyunting (editing) image alias gambar, selama ini kita selalu dihadapkan pada Photoshop. Ooh, saya bukan anti Photoshop, tidak sama sekali. Hanya karena penggunaan Photoshop itu sendiri kan lumayan mahal lisensinya. Saya tidak bilang sobat dilarang pakai atau belajar Photoshop, itu kembali ke masing-masing.

Hanya bila ada yang free dan lisensinya gak aneh-aneh macam GPL-based kan lebih enak.
GIMP misalnya.

Pada distro Linux bisa ditemui aneka macam image editor, misal GIMP – The GNU Image Manipulation Program, XPaint. Untuk versi Windowsnya sendiri ada juga GIMP for Windows.

dan yang terakhir (bisa juga gak, kalo ada lagi ntar ditambahin kan) adalah …dibawah ini

Spesification and or Programming Manuals

Bila kita baca-baca CheatSheet dan mau lebih tahu lebih dalam dan paham,gak usah sungkan -sungkan untuk membuka Manual.

Antara lain:

  1. PHP Manual
  2. CSS 2.1 Spesification
  3. CSS 3 Spesification
  4. HMTL 4.0.1 Spesification
  5. HTML 4.0 Guidelines for Mobile Access
  6. XHTML 2.0 Technical Documents
  7. Apache Manual
  8. kayaknya ada ketinggalan, klo ingat ditambah lagi

* Daftar lengkap dan link download W3C Document Recommendation bisa diperoleh langsung di W3C All Standards and Drafts

Untuk manual-manual diatas akan lebih efektif bila langsung dipraktekkan. Kenapa? Kalo kebanyakan teori trus kapan bisanya 😛

Catatan sedikit:
untuk PHP Manual sendiri ada yang versi bundled (format html compiled – ekstensi .chm), dan disertai Notes (catatan) dari para pengguna PHP berserta contoh. Hanya sayangnya di versi terakhir-terakhir ini sudah tidak ada lagi :(.

Sobat,
sampai disini kita bisa mendapatkan Must Have Free Tools for Development, dengan biaya minimal (sekitar 5000 rupiah untuk sewa internet selama 2 jam cukup kan, asal gak surfing ke situs-situs ehem-ehem aja 😀 – yang terakhir dijamin lupa waktu ).

So masih (cari) ada alasan kalo Tools buat Develop Website itu mahal ?

-Wuihh, nulis artikel pagi, baru ingat belum upload cheatsheet plus pas koneksi lagi gak seperti biasanya (hari libur kali ya, pada nongkrong depan internet …hehehe, mayan lah masih bisa dapat 300Kbps)

Comments are closed.