lifelong learner — urip iku urup, currently working on accenture.

Alat Penunjang Koding untuk Belajar Membuat Website pada Windows

0
Degananda.com -

tools-thumb-coding-website-frontend

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.

vsc-integrated-terminal.JPG
integrated terminal pada visual studio code

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.

install_extension_vsc.JPG
install extension VSC

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

live-server-vsc-extension.JPG

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

js-lint-vsc-extensions.JPG

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

css-lint-vsc-extensions.JPG

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 ?

built-in-htmlsnippet.jpg

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

integrated_console_pada_chrome.JPG
integrated console pada chrome

chrome juga memiliki integrated console yang dapat membantu proses debugging saat membuat website (frontend).

integrated_network_console_pada_chrome.JPG
integrated network monitor pada chrome

Console tidak hanya mencakup dari sisi koding , tetapi juga mencakup pada sisi networking monitor (latency saat memanggil API dari backend)

 

(Visited 18 times, 1 visits today)

Leave a Reply