Alat atau tools tambahan dalam membuat website sebenarnya bersifat opsional. Secara wajib, hanya memerlukan notepad dan web browser. Tetapi tentunnya, kedua hal tersebut tidak cukup dan akan menghambat developer dalam melakukan coding/ membuat website.
Alat utama yang harus dimilki developer untuk membuat website adalah IDE (integrated development environment). Dalam IDE ini, dapat di install berbagai macam plugin/extension untuk development website.
Alat coding dapat meningkatkan produktivitas developer karena alat oding dapat membantu developer melakukan cek otomatis terhadap script, deployment otomatis, dan lains sebagainya.
Alat Penunjang Koding untuk Belajar Membuat Website pada Windows
Teknologi Stack dalam membuat Website
domain dari stack teknologi yang digunakan saat ini adalah :
- html – yakni sebagai bahasa pemrograman untuk membangun struktur utama website serta komponen-komponennya seperti div, span, image, table dan lain sebagaiinya
- css – sebagai bahasa pemrograman untuk memberikan desain atas komponen-komponen html tersebut seperti warna, ukuran dan lain sebagainnya.
- javascript – sebagai bahasa pemrograman untuk mengatur segala jenis action (tindakan) user terhadap komponen html seperti kondisi saat user klik tombol, saat user melakukan scroll terhadap tabel, memunculkan popup saat web browser milik user berhasil memuat halaman website tersebut
teknologi stack diatas adalah murni untuk belajar membuat website dari sisi frontend. Frontend adalah kategori development yang hanya melibatkan development coding dari sisi UI saja. Tidak melibatkan koneksi ke database (backend).
Jika teknologi stack yang akan dipelajari melebihi frontend maka tentunnya, alat untuk menunjang koding backend pastinnya juga memerlukan tambahan. Seperti contohnya jika menggunakan php (hypertext preprocessor) maka alat tambahan untuk koding yang diperlukan adalah apache & php (biasannya menggunakan bundled software seperti XAMPP & LAMPP).
setiap teknologi stack backend akan memiliki alat tambahan khusus, sesuai dengan bahasa pemrograman yang digunakan
Teknologi stack beserta alat penunjang developmentnya untuk backend
Berikut ini adalah daftar tools / software yang digunakan untuk menunjang development di sisibackend berdasarkan jenis bahasa pemrogramannya
| No | Bahasa Pemrograman | Alat penunjang utama untuk coding |
| 1 | Hypetext pre-processor | XAMPP (untuk windows) / Lampp ( untuk Linux) |
| 2 | R | Rstudio |
| 3 | Python | Anaconda / miniconda |
| 4 | Java | Apache Tomcat 7.0 |
| 5 | NodeJS | NPM (Node package manager) / Nodejs |
apapun jenis bahasa pemrograman yang digunakan pada backend, ini tidak akan mengubah stack teknologi pada frontend, yakni : HTML, Javascript dan CSS
Alat Penunjang Koding untuk Belajar Membuat Website dari sisi Frontend
Alat penunjang koding website 1 – IDE (integrated development environment) visual studio code
visual studio code(VSC) adalah IDE besutan microsoft. IDE ini, memiliki berbagai macam extension yang dapat digunakan untuk menunjang developer dalam melakukan koding.
visual studio code juga memiliki integrated terminal, sehingga untuk menjalankan CLI command (perintah command line) tidak perlu membuka window yang baru.
Visual studio code adalah IDE yang mensupport perkembangan ecmascript dan typescript, sehingga, plugin yang ada di visual studio code terkait dua hal itu selalu memiliki update yang paling cepat.
gunakan tautan link dibawah ini untuk mengunduh visual studio code
https://code.visualstudio.com/
Extension visual studio code untuk menunjang belajar koding website
untuk lebih menunjang proses pengembangan website (frontnend) dengan visual studio code, maka diperlukan extension – extension dibawah ini agar dapat meningkatkan produktivitas. VSC dapat melakukan otomasi dibeberapa sisi.
cara install extension ini sangat mudah, cukup masuk ke tab extension kemudian tuliskan nama extension tersebut
extension dibawah ini meliputi alat penunjang untuk pemrograman HTMl, CSS dan Javascript.
Extension 1 untuk penunjang koding website – live server
extension visual studio code ini berfungsi sebagai web server. Sehingga website dapat dipanggil dengan menggunakan domain localhost ataupun ip address 127.0.0.1. Ini dikarenakan beberapa api hanya mengizinkan header source dari request dari alamat-alamat tertentu(CORS – Cross-Origin Resource Sharing). Dengan menggunakan live server, developer dapat mengkonfigurasi alamat server dan portnya
Extension 2 untuk penunjang koding website – JSLint
Linting adalah suatu proses analisa terhadap seluruh kode untuk menemukan baris kode yang tidak mengikuti standar penulisan bahasa pemrograman tersebut. Sehingga JSlint berfungsi untuk membantu developer dalam mengidentifikasi kode yang tidak mengikuti standar kaidah penulisan yang dapat menyebabkan error saat kode tersebut di deploy.
JSLInt adalah extension yang sangat wajib harus digunakan, dapat meningkatkan produktivitas karena JSLint dapat memastikan dan cek kualitas kode
Extension 3 untuk penunjang koding website – CSSLint
Sama halnya dengan JSLint, linting juga dapat dilakukan pada CSS. Seluruh bahasa pemrograman yang digunakan dalam koding secara ideal harus memiliki extension linting.
jika menggunakan SASS maka gunakanlah SASS lint, karena SASS dan CSS memiliki kaidah penulisan yang berbeda.
Jika memory (RAM) yang digunakan pada website kecil, disarankan untuk hanya mengaktifkan JSLint saja. Karena CSSLint tidak terlalu besar dampaknya apabila tidak mengikuti kaidah penulisan.
Extension 4 untuk penunjang koding website – HTML snippet extension ?
hal ini tidak diperlukan. Secara default, visual studio code telah memiliki built-in HTML snippet extension.Cukup buat file html dan tuliskan syntax html, maka secara otomatis autocomplete syntax akan muncul beserta dengan dokumentasinnya.
Alat penunjang koding website 2 – Web Browser
Gunakanlah chrome sebagai browser utama terlebih lagi jika nantinnya ingin menggunakan nodejs untuk frontend (contoh : framework angular). Maka menggunakan chrome adalah hal wajib.
Kekurangan dari chrome adalah memory consumption yang tinggi. Pastikan hanya membuka sedikit tab apabila jumlah ram pada laptop/pc kecil
ini dikarenakan nodejs adalah bahasa pemrograman yang menggunakan javascript v8 runtime. Sehingga, penggunaan chrome telah mengikuti standar yang digunakan pada nodejs engine.
Chrome memiliki integrated console untuk debug dan networking
chrome juga memiliki integrated console yang dapat membantu proses debugging saat membuat website (frontend).
Console tidak hanya mencakup dari sisi koding , tetapi juga mencakup pada sisi networking monitor (latency saat memanggil API dari backend)