
ChatGPT adalah salah satu model bahasa otomatis yang dikembangkan oleh OpenAI. Model ini merupakan evolusi dari model bahasa GPT (Generative Pre-training Transformer) yang telah terbukti efektif dalam menghasilkan teks yang terlihat alami dan memiliki tingkat kemiripan yang tinggi dengan teks manusia.

ChatGPT merupakan model yang dapat digunakan untuk membuat obrolan chatbot yang dapat berkomunikasi dengan pengguna secara alami dan menjawab pertanyaan atau menyediakan informasi yang dibutuhkan oleh pengguna. Model ini juga dapat digunakan untuk membuat sistem tanya jawab (Q&A) atau untuk mengisi formulir secara otomatis.

Cara penggunaan ChatGPT cukup mudah. Pertama, kamu harus menyiapkan data latih yang akan digunakan untuk melatih model ChatGPT. Data latih ini biasanya berupa pertanyaan dan jawaban yang disusun dalam bentuk pasangan (pair). Kamu juga dapat menambahkan contoh-contoh obrolan atau percakapan yang akan digunakan sebagai data latih.

Setelah data latih siap, kamu dapat mulai melatih model ChatGPT dengan menggunakan perangkat lunak yang disediakan oleh OpenAI. Proses pelatihan model ini biasanya memakan waktu yang cukup lama, tergantung pada jumlah data latih yang tersedia dan kapasitas komputer yang kamu miliki.

Setelah proses pelatihan selesai, kamu dapat menggunakan model ChatGPT untuk membuat chatbot atau sistem tanya jawab dengan menggunakan perangkat lunak yang tersedia. kamu juga dapat menggunakan model ini untuk membuat aplikasi yang dapat berkomunikasi dengan pengguna secara alami dan menjawab pertanyaan atau menyediakan informasi yang dibutuhkan oleh pengguna.

Penggunaan ChatGPT sangat bermanfaat bagi perusahaan atau organisasi yang ingin membuat chatbot atau sistem tanya jawab untuk meningkatkan layanan pelanggan atau untuk membantu pengguna dalam mencari informasi. Selain itu, ChatGPT juga dapat digunakan oleh individu yang ingin membuat chatbot atau aplikasi bahasa alami untuk kebutuhan pribadi.

Untuk mencobanya secara langsung kamu tinggal mengunjungi situs [chat.openai.com/chat](https://chat.openai.com/chat) lalu buat akun untuk dapat masuk, kamu juga bisa masuk menggunakan google. Setelah berhasil masuk kamu tinggal mengetikan pertanyaan atau perintah di kolom chat yang tersedia seperti pada aplikasi chatting secara umum.

ChatGPT hampir bisa melakukan atau menjawab setiap pertanyaan atau perintah yang kita ajukan termasuk pertanyaan seputar coding dan membuatkan contoh kode yang kita butuhkan. Bahkan percaya atau tidak percaya artikel ini juga dibuat oleh ChatGPT (saya hanya edit-edit sedikit 😆). Tertarik untuk mencoba?

Jika kamu suka artikel ini jangan lupa share juga ke teman-temanmu ya!

Cara Menggunakan ChatGPT

React adalah sebuah UI library yang paling populer saat ini, banyak perusahaan yang membutuhkan tenaga seorang React Developer menjadikannya peluang yang terbuka luas untuk kamu yang ingin bekerja di bidang frontend development. Jika kamu seorang newbie yang belum tahu harus mulai dari mana, tenang saja karena artikel ini akan membahas langkah-langkahnya dari awal sampai akhir. Untuk menjadi seorang React Developer tentunya kamu harus siap untuk mempelajari banyak hal tapi tidak perlu sekaligus, kamu bisa melakukannya tahap demi tahap.

Banyak sekali fitur dan benefit yang ditawarkan oleh React dan karena itu juga React menjadi UI library paling populer, kita dapat membuat berbagai macam aplikasi yang diantaranya seperti:
- Progresive Web Apps
- Scalable web applications
- Reusable components
- Proyek berskala kecil sampai besar

Di artikel ini kita akan membahas bahasa dan tools apa saja yang diperlukan untuk bisa membuat aplikasi dengan React dan membuat kamu jadi seorang React Developer yang handal.

 

### HTML
Pertama-tama kamu harus pelajari dulu HTML untuk dapat membuat komponen di React, jangankan React semua website juga memerlukan yang namanya HTML sebagai bahasa markupnya. HTML tidak terlalu susah untuk dipelajari dan resourcenya tersedia banyak sekali di internet seperti di W3School dan youtube. Di React kita bisa menggunakan HTML langsung dalam sebuah komponen.

```jsx
const MyComponent = () => (
 <div>
 <h1>Heading 1</h1>
 </div>
);
```

 

### CSS
Setelah kamu terbiasa menggunakan HTML untuk membuat struktur dari sebuah halaman website, selanjutnya kamu harus belajar CSS untuk memberikan styling agar website yang kamu buat terlihat lebih bagus dan menarik. Belajar CSS memang agak tricky tapi jika kamu sudah bisa memahaminya maka kedepannya akan lebih mudah karena kita bisa menggunakan framework CSS seperti Bootstrap, Tailwind, Material UI dan sebagainya untuk mempercepat proses pengembangan website yang kita buat. Jika sudah paham dasar-dasar CSS dan bisa mengaplikasikannya kamu bisa mencoba tools CSS Preprosessor seperti Sass agar penulisan kodenya lebih rapih dan ringkas.

 

### Javascript
Oke, setelah kamu bisa menggunakan HTML dan CSS untuk membuat layoutnya, ditahap ini kamu harus belajar bahasa pemrograman Javascript untuk menghandle logic dan semua alur yang terjadi pada aplikasi web yang kamu buat. Javascript sendriri merupakan core atau inti dari React itu sendiri, jadi pastikan kamu jangan skip langkah ini. Belajar bahasa Javascript mungkin akan sedikit lebih sulit karena kita mulai diharuskan untuk berfikir tentang logika-logika dan menerapkan algoritma pada aplikasi kita agar dia bisa berjalan dengan baik seperti yang kita harapkan. Tapi seiring berjalannya waktu kamu pasti akan paham dan bisa menerapkannya sendiri.

 

### NPM
NMP adalah sebuah package manager untuk library dan framework javascript, kamu akan membutuhkannya untuk menginstal React dan dependencies lainnya yang munkin kamu butuhkan dalam aplikasi yang kamu buat. Kamu bisa mencari tahu lebih lanjut tentang NPM di website resminya [npmjs.com](https://npmjs.com)

 

### Git
Dalam dunia pemrograman, Git adalah tools yang juga menjadi salah satu yang paling penting untuk dikuasai karena bersangkutan dengan version control dari aplikasi yang kamu buat. Dengan menggunakan git kamu bisa mengontrol perubahan pada kode yang kamu tulis dengan sangat mudah selain itu kamu juga dapat berkolaborasi dengan developer lain hingga mendeploy aplikasi yang kamu buat ke hosting dengan hanya memasukan beberapa perintah saja. Mempelajari git tidaklah sesulit yang dibayangkan dan resourcenya banyak di internet kamu bisa mencarinya dengan mudah.

 

### React
Ini dia yang ditunggu-tunggu, jika kamu sudah menguasai dasar-dasar dari poin-poin sebelumnya maka kamu seharusnya sudah siap untuk belajar React Js. Untuk mempelajari React Js tersedia banyak resource yang dapat kamu akses secara gratis maupun berbayar. Untuk belajar secara gratis kamu bisa coba dari [dokumentasi resminya](https://reactjs.org) atau Playlist youtube. Berikut ini beberapa channel/playlist youtube dalam bahasa Inggris maupun Indonesia yang bisa kamu coba:
- [Parsinta](https://www.youtube.com/playlist?list=PLRKMmwY3-5MwC02nYlx4kgyNO0fRvPdDc)
- [Array Id](https://www.youtube.com/@arrayid4435)
- [FreeCodeCamp](https://www.youtube.com/@freecodecamp)

Jika kamu lebih suka dengan yang berbayar agar mendapat benefit lain seperti sertifikat dan job opportunity kamu bisa mencoba kursus online berbayar di:
- [Codepolitan](https://codepolitan.com)
- [Dicoding](https://dicoding.com)
- [BuildWith Angga](https://buildwithangga.com)
- [Udemy](https://udemy.com)

Selain itu kamu juga bisa belajar dari komunitas React developer:
- [Grup Facebook ReactJs Indonesia](https://web.facebook.com/groups/442974152553174)
- [Telegram ReactJs Indonesia](https://t.me/react_idn)

> Eits, jangan senang dulu, kita masih belum selesai... Masih ada beberapa langkah lagi biar skill kamu tambah GG 😋

 

### State Management
Setelah menguasai React Js kamu harus belajar juga yang namanya State Management. Apa itu? State management adalah suatu cara untuk mengatur data / state kita secara global agar dapat digunakan secara berulang kali (reusable) tanpa harus menuliskan kode yang sama secara terus menerus di tempat yang berbeda dan juga menghindari props drilling. Sederhananya state global itu mirip seperti bank data dimana saat kita butuhkan maka kita tinggal panggil saja di komponen yang kita butuhkan. Jika hanya menggunakan local state (seperti useState hook) maka data tersebut hanya bisa dipakai di komponen parent atau diturunkan ke komponen child melalui props. Ada banyak tools state management untuk React seperti:
- Context API (Bawaan React)
- Redux & Redux Toolkit
- Zustand
- MobX
- Recoil

Kamu tidak perlu mempelajari semuanya cukup pilih salah satu, dan yang paling banyak digunakan saat ini yaitu Redux Toolkit.

 

### TypeScript (Opsional)
Akan lebih baik jika kamu bisa menggunakan Typescript juga untuk meminimalisir error yang terjadi karena tipe data. Dengan Typescript kamu bisa menentukan tipe data apa saja yang akan dipakai dalam suatu komponen atau method dan juga tersedia fitur auto complete yang dapat memudahkanmu dalam proses development. Dengan begitu setiap error akan bisa lebih terprediksi. Menggunakan Typescript di React memang agak sedikit lebih sulit dan memakan waktu karena kita harus melakukan setup dan konfigurasi terlebih dahulu. Tapi jika sudah terbiasa maka akan terasa lebih mudah.

 

### Next Js
Kalau kamu sudah terbiasa menggunakan React sekarang mungkin saatnya kamu untuk mencoba Framework Next Js yang merupakan framework yang dibangun diatas ekosistem React. Dengan Next Js kamu akan dimudahkan dengan segudang fitur yang siap pakai seperti Routing berdasarkan folder/file dan juga fitur Static Site Generation dan Server Side Rendering untuk meningkatkan SEO. Seperti yang kita ketahui jika React Js merupakan UI library yang hanya support Client Side Rendering jadi jika berkaitan dengan SEO maka akan lebih rumit proses developmentnya. Dengan Next Js kamu tidak perlu memikirkan itu semua, karena Next Js sudah menyediakannya untukmu.

 

### What's Next?
Oke kalau sudah bisa semua terus apa lagi? Ini adalah langkah yang paling penting dan wajib kamu lakukan. Untuk jadi React Developer kamu harus membuat beberapa proyek portfolio yang menarik dengan mempraktikan semua hal yang sudah kamu pelajari dari awal dan jangan lupa untuk dihosting agar bisa kamu pamerkan hasil karyamu pada calon client atau perusahaan. Dengan begitu kemungkinan kamu untuk dapat pekerjaan atau proyek freelance akan semakin besar. Jadi sudahkah kamu siap untuk memulai karier sebagai React Developer di 2023?

Jika kamu suka artikel ini jangan lupa untuk share ke teman-temanmu ya... 😉

Roadmap React Developer 2023

Typing atau menentukan tipe data, suka atau tidak fitur ini memiliki banyak keuntungan seperti pengalaman development yang lebih baik (melalui intellisense auto-complete), dokumentasi kode yang lebih baik, dan memakan waktu yang lebih sedikit pada error. Manfaatnya jauh lebih besar daripada biayanya, jadi kenapa beberapa orang masih menghindari menggunakannya? Alasannya cuma satu yaitu karena **Typescript**. Kamu perlu menyiapkannya terlebih dahulu dan memastikan tools yang kamu gunakan benar-benar berjalan seperti yang diharapkan yang mana menambah sebuah layer frustasi pada proyek manapun.

Bagaimana jika native typing mungkin saja akan diadopsi di Javascript? Seperti mendapatkan sebuah hadiah yang luar biasa bukan.

 

### Proposal
TC39 adalah sebuah komisi yang bertanggung jawab atas spesifikasi Javascript. Mereka membantu untuk mempertahankan dan mengembangkan definisi Javascript. Kalau kamu penasaran kamu bisa membaca [artikel ini](https://dev.to/christopherkade/the-future-of-javascript-features-to-keep-an-eye-on-3d0h). Mereka baru saja memindahkan proposal Anotasi Tipe ke stage 1 (dari 4 stage), yang berarti saatnya untuk berspekulasi secara luas tentang dampak dan implikasi dari fitur tersebut!

>**Note:** Hal ini tidak akan menandakan berakhirnya TypeScript dengan cara apa pun, ini hanya akan memungkinkan kode Javascript yang lebih clean dan lebih andal untuk proyek yang tidak berencana menggunakan TypeScript atau yang ingin menggunakan keduanya secara bersamaan.

 

### Akan Seperti Apa Penampakan dari Native Typing Pada Javascript Jika Proposalnya Lolos?
Penampakannya akan sangat mirip seperti yang biasa kita gunakan pada Typescript dan Flow:

```javascript
// Kedua parameter bertipe data number dan method ini juga mereturn number
function add(a: number, b: number): number {
 return a + b;
}
```

Anotasi-anotasi ini tidak akan menghentikanmu dari mempassing sebuah string atau tipe variabel lain manapun sebagai parameter. Mereka akan diabaikan pada runtime dan disana fungsinya hanya sebagai guideline yang bisa digunakan oleh type checker pihak ketiga seperti IDE. Argumen untuk menentukan tipe data yang ketat mendapat tempatnya dalam diskusi ini. Dalam proposalnya saat ini, jenis ini hanyalah jenis anotasi, yang sudah kita miliki berkat JSDoc. Jadi pertanyaannya tetap: kenapa?

 

### Lalu Apa Gunanya?
Kita ada dalam situasi yang aneh. Javascript adalah satu-satunya bahasa yang membuat kita menulis dalam bahasa lain seperti Typescript untuk kemudian ditranspilasikan ke bahasa Javascript itu sendiri. Lapisan-lapisan ini menambah kerumitan dari proyek apapun, jadi semakin banyak tools yang ditambahkan pada default tool kita maka semakin baik.

Kebutuhan akan Typescript menciptakan bentuk monopoli pada tools yang tersedia saat ini, dimana masing-masing dan setiap orang perlu berevolusi dengan Typescript agar tidak tertinggal. [The State of the Octoverse 2022](https://octoverse.github.com/2022/top-programming-languages) menunjukkan popularitas TypeScript yang mengesankan pada tahun 2022, yang berarti kebutuhan untuk berevolusi menjadi hampir wajib untuk linter, bundler, dll.

Dengan adanya fitur ini yang sudah dibundel di dalam native Javascript akan membuatnya menjadi paket yang lebih lengkap dan membantu kita memperlambat pembengkakan tools yang saat ini sedang kita hadapi.

Jadi bagaimana pendapat kamu tentang hal ini baguskah atau biasa saja? Apakah kamu akan jadi orang yang pertama mencobanya setelah dirilis atau tetap setia dengan Typescript? Yuk diskusikan di kolom komentar!

Jika kamu suka artikel ini jangan lupa untuk share ke teman-temanmu ya! 😉

Sumber: [Dev.to](https://dev.to/christopherkade/goodbye-typescript-hello-native-typing-for-javascript-3ee1)

Selamat Tinggal Typescript, Halo Native Typing Javascript!

Kalau kamu lihat berbagai aplikasi React, kamu pasti tahu bagaimana caranya untuk merender bagian-bagian dari sebuah kompenen secara kondisional berdasarkan props dan state. Biarpun ada banyak cara untuk melakukan conditional rendering, artikel ini akan fokus membahas operator `&&` pada Javascript saja. Alasan utama untuk penekanan ini adalah operator `&&` sering kali memunculkan bug pada UI, yang mana sebenarnya bisa dihindari dengan mudah dan juga hal ini tidak banyak yang membahasnya.

 

### Cara "&&" Bekerja
Sebuah cara klasik dari penggunaan operator `&&` di React akan tampak seperti:
```javascript
function MyComponent({ condition }) {
 return (
 <div>
 <h1>Title</h1>
 {condition && <ConditionalComponent />}
 </div>
 );
}
```

Penjelasan:
- Jika `kondisi` adalah truthy value, maka `<ConditionalComponent />` akan dirender
- Jika `kondisi` adalah falsy value, maka `<ConditionalComponent />` tidak akan dirender

Kenapa demikian? Hal ini bukan spesifik di React saja tapi merupakan sebuah perilaku dari Javascript dan bahasa-bahasa pemrograman lainnya yang disebut dengan **_short-circuit evaluation_**. Yaitu jika operan pertama (`kondisi`) adalah falsy, operator AND (&&) akan berhenti dan tidak mengevaluasi operan kedua (`<ConditionalComponent />`).

Kamu dapat mencobanya di browser dengan menjalankan potongan kode berikut di console:
```javascript
// Ini akan menampilkan sebuah alert box.
true && alert('Hello');
// Ini tidak akan terjadi apa-apa
false && alert('Not hello');
```

 

### Kenapa Tidak Boleh Memakai "&&"?
Sintaks pendek `&&` sering lebih disukai dan memang juga berfungsi. Tapi hanya karena kamu bisa memakainya bukan berarti kamu harus memakainya juga.

Di kasus kita yang disebutkan diatas, jika `kondisi` bernilai `true` atau `false`, kamu akan mendapatkan hasil yang kamu harapkan — `<ConditionalComponent />` masing-masing akan dirender atau tidak. Semua berjalan baik sejauh ini. Namun, jika kondisi tidak mengevaluasi ke boolean, hal ini justru dapat menyebabkan masalah.

**Contohnya:**

- Jika `kondisi` adalah 0, 0 akan ditampilkan di UI
- Jika `kondisi` adalah `undefined`, kamu akan mendapatkan error: "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

 

### Lalu Apa Yang Seharusnya Digunakan Selain "&&"?
Untuk menghindari sesuatu yang tidak kamu inginkan di UI, misalnya nilai 0 yang bisa merusak layout, kamu bisa menggunakan ternary operator sebagai gantinya

```javascript
condition ? <ConditionalComponent /> : null
```

 

### Kesimpulan
Untuk mencegah bug UI yang dapat dihindari, gunakanlah operator ternary Javascript untuk melakukan conditional rendering komponen React daripada menggunakan logic operator AND (&&). Ini adalah mantra yang sederhana tapi tidak bisa dihancurkan 🧙‍♂️
```javascript
// 🔴 Jelek
condition && <ConditionalComponent />
// 🟢 Bagus
condition ? <ConditionalComponent /> : null
```

Jadi, apakah kamu masih sering menggunakan operator `&&` daripada ternary operator? Coba kasih tahu di kolom komentar dibawah!

Terimakasih sudah membaca, jangan lupa share juga ke teman-teman kamu kalau kamu suka artikel ini.

 

Sumber: [Medium](https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8)

Berhenti Pakai '&&' Untuk Conditional Rendering Di React

Javascript adalah sebuah bahasa pemrograman yang menakjubkan, tapi meski begitu menulis clean code di javascript bisa menjadi tantangan tersendiri bahkan untuk para programmer yang sudah berpengalaman sekalipun.

Seperti apa sih clean code di Javascript? Kodenya haruslah:

1. Gampang dibaca
2. Gampang di debug
3. Efisien dan berperforma tinggi

Berikut ini adalah beberapa tools populer dan trik-trik yang dapat kamu gunakan agar kualitas kode javascript yang kamu tulis lebih kece lagi:

### 1. Gunakan Try Catch Pada Semua API Request dan JSON methods

Banyak hal yang bisa salah saat membuat request ke api untuk mengambil data, jadi menangani skenario ini adalah suatu keharusan. Saat menangani JSON tidak secara otomatis kita bisa begitu saja mempercayai apa yang diberikan, cobalah untuk membuat kode kamu menjadi lebih kuat dengan menangani kemungkinan inkonsistensi yang mungkin saja terjadi.

```javascript
try {
 // Membuat request ke API dan manipulasi JSON
} catch (error) {
 // Handle error
}
```

 

### 2. Gunakan Linter (ESLint)

Linter adalah sebuah alat analisis kode statis yang akan memeriksa kesalahan program dan gaya penulisan berdasarkan seperangkat aturan dan konfigurasi yang telah ditentukan. Singkatnya itu akan meningkatkan performa Javascript/TypeScript dan membantu membuatnya lebih konsisten secara penulisan.

 

### 3. Lacak Masalah-masalah Javascript di Editormu

Komponen utama untuk menjaga codebase Javascript kamu agar tetap bersih adalah memudahkan untuk melacak dan melihat masalah dalam kode itu sendiri. Melacak masalah codebase di editor memungkinkan para engineer untuk:

- Mendapatkan visibilitas penuh tentang masalah yang lebih besar seperti tech debt
- Melihat konteks untuk setiap masalah pada codebase
- Mengurangi context switching
- Menyelesaikan tech debt secara berkelanjutan

Kamu dapat menggunakan berbagai tools untuk melacak technical debt tapi cara tercepat dan termudah untuk memulai adala dengan menggunakan ekstensi Stepsize gratis untuk VSCode atau JetBrains yang terintegrasi dengan Jira, Linear, Asana dan project management tools lainnya.

 

### 4. Gunakan String Template

String template akan memungkinkan kamu untuk memasukkan nilai ke dalam string sambil mempertahankan format dan kodenya, jauh lebih ramah pembaca daripada melakukan aritmatika string.

```javascript
// Hindari ini
const headerText = "Halo " + user.name + " ✌️. Selamat datang di " + workspace.name;

// Lakukan ini
const headerText = `Halo ${user.name} ✌️. Selamat datang di ${workspace.name}`;
```

 

### 5. Gunakan Regex Saat Perlu Mencari String

Meskipun regex dapat terlihat esoterik dari luar, tapi ini adalah string parsing tool yang powerful dan memungkinkanmu untuk membuat pola yang kompleks untuk menjelaskan berbagai skenario pencocokan string yang sulit.

 

### 6. Gunakan Optional Chaining

Berhentilah memiliki konjungsi logis yang panjang dan sederhanakan kodemu dengan optional chaining.

```javascript
// Hindari ini
if(data && data.payload && data.payload.workspace.name === 'default') {
 // Lakukan sesuatu...
}

// Lakukan ini
if(data?.payload?.workspace.name === 'default') {
 // Lakukan sesuatu...
}
```

 

### 7. Hindari Bersarang (Nesting)

Bersarang (nesting) adalah cara yang pasti untuk meningkatkan kompleksitas kode dan membuatnya lebih sulit untuk dibaca dan dipahami. Pertimbangkan refactoring jika kedalamannya lebih dari dua level, dengan memiliki kondisi pengembalian level root, blok yang lebih pendek, dan abstraksi logika bersarang ke functionnya sendiri.

 

### 8. Komentari Semua Kode Atipikal, Tapi Jangan Biarkan Itu Menggantikan Keterbacaan Kode

Akan ada masanya saat kamu harus menghandle skenario yang tidak umum dimana tidak adanya konvensi yang jelas. Mengomentari kode seperti ini untuk membantu menjelaskan apa yang dilakukannya dan konteks yang sedang dipertimbangkan akan sangat membantu programmer lain untuk memahaminya juga menjadi pengingat untuk diri kamu sendiri ketika kamu kembali melihat kode tersebut di masa yang akan datang. Tapi cara ini tidak boleh digunakan sebagai cara utama karena kita malas memikirkan cara penulisan kode yang mudah dibaca sejak awal!

Itulah tips yang dapat kamu terapkan dalam menulis kode di Javascript agar lebih clean dan mudah dibaca, karena programmer yang baik adalah programmer yang dapat menulis kode yang bukan hanya bisa dibaca mesin tapi juga dapat dibaca manusia.

Terima kasih sudah membaca, jangan lupa share ke teman-temanmu juga ya! :)

 

Sumber: [Dev.to](https://dev.to/alexomeyer/8-must-know-tips-for-writing-clean-code-with-javascript-i4)

8 Tips Untuk Menulis Clean Code Dengan Javascript Yang Harus Kamu Tahu

Skill dasar coding seperti HTML, CSS dan Javascript memanglah diperlukan, tapi kemampuan apa lagi sih yang bisa bikin kamu jadi lebih baik sebagai Frontend Developer?

Ada berbagai macam kategori web developer dan mereka semua mengambil bagian kedalam coding, pemeliharaan dan analisis dari proyek-proyek penting di seluruh dunia.

Seorang Backend Developer membuat framework yang dibutuhkan agar sebuah website dapat memproses permintaan dan query data. Berfokus pada lingkungan dan pengalaman pengguna Frontend Developer membuat semuanya lebih mudah diakses dan praktis bagi pengguna.

![Basic Coding Skills](https://miro.medium.com/max/828/1*yFE17MXHbwjao70cokEZGQ.png)

 

### 1. Skill Coding Dasar

Para Frontend Developer perlu memiliki sebuah fondasi dalam memahami tentang bagaimana caranya membuat sebuah website yang aman dan berfungsi dengan baik. Setiap Frontend Developer perlu untuk dibekali dengan pengetahuan dalam bidang-bidang seperti:

- HTML
- CSS
- Sass
- Javascript / Typescript
- Manipulasi DOM

 

### 2. Framework (Kerangka Kerja)

Memahami fundamental pemrograman sangatlah krusial, tapi framework dapat menambah kecepatan kamu dalam bekerja dan membuatnya lebih mudah di deploy sebagai proyek online yang signifikan. Framework-framework berikut ini adalah hal yang esensial untuk dikuaasai setiap developer:

- Famework CSS
 - Bootstrap
 - Tailwind CSS
 - Foundation
- Framework Javascript
 - React Js
 - Vue Js
 - Angular
 - Ether

 

### 3. Skill Desain

Seperti yang sering disebutkan, Frontend Developer bertugas sebagai penghubung antara Backend Developer dan UI/UX Designer. Oleh karena itu, seorang Frontend Developer diharapkan memiliki kreativitas dan keterampilan yang lebih besar dalam bidang desain web. Beberapa kualitas yang membedakan kamu dari developer lain adalah jika kamu bisa menguasai dasar dari:

- Canva
- Figma
- Photoshop
- Pemilihan warna

 

### 4. Responsive Web Development

Saat kamu membuat kode website, sangatlah penting untuk website tersebut dapat berfungsi dengan baik di perangkat seluler dan tablet. Menurut statistik 97% orang lebih suka mengakses Internet melalui perangkat seluler, sehingga sangat penting untuk membuat website dengan mempertimbangkan pengguna seluler terlebih dahulu atau lebih dikenal dengan sebutan Mobile-first approach. Frontend Developer yang ideal haruslah:

- Familiar dengan media query
- Terbiasa menggunakan flexbox dan grid

 

### 5. Manajemen Waktu

Manajemen waktu adalah bakat yang mutlak harus kamu miliki, terlepas dari dimana karir kamu dalam dunia web development, dalam pengembangannya itu sendiri atau seberapa berpengalaman kamu. Untuk mendapatkan hasil maksimal dan tetap produktif hingga dapat menyelesaikan proyek dengan cepat, kamu harus bisa mengatur waktumu secara efisien. Tips berikut dapat kamu ikuti:

- Selalu persiapkan to do list
- Gunakan teknik pomodoro saat bekerja
- Tracking progres harianmu dengan kanban atau MS. Excel

 

### 6. Menggunakan Sumberdaya Web

Dengan begitu banyak tools yang tersedia untuk membuat kode yang kamu buat berjalan lebih baik di sisi client, mengembangkan website menjadi sangat sederhana dan lebih mudah di jaman sekarang. Alih-alih memulai dari awal atau menggunakan teknik kuno, kamu harus terbiasa dengan Google dan semua sumber daya yang tersedia secara online yang dapat menghemat lebih banyak waktu dan mempercepat proses pengembangan. Berikut adalah beberapa tipsnya:

- Gunakan tools untuk meningkatkan Javascript dan CSS (Bootstrap, Tailwind, React, Next Js dst.)
- Gunakan code generator (Emet, Github Copilot, dst.)
- Gunakan tools untuk konfigurasi desain
- Manfaatkan tools untuk menoptimalkan kode (Prettier, ESLint, dst.)
- Gunakan tools verifikasi kode (Jest, Puppeter, dst)
- Manfaatkan tools SEO (Google tag, Facebook pixel, dst.)

 

### 7. Examining / Testing

Lakukan pengujian frontend untuk menilai kegunaan, fungsionalitas, dan UI dari aplikasi online atau software (GUI). Sebuah produk menjalani pengujian untuk meningkatkan kinerja dan meningkatkan daya tarik pengguna. Selama fase pengembangan, pengujian yang diperlukan biasanya:

- Test Performa
- Test alur dari awal hingga akhir
- Test di beberapa platform
- Unit test

 

### 8. Softskills

Menjadi seorang Geek tidak akan ada gunanya jika kamu tidak dapat mengkomunikasikan ide dan pandanganmu kepada orang lain. Jika kamu ingin menjadi developer hebat dan bukan hanya orang di belakang layar, keterampilan komunikasi sama pentingnya dengan keterampilan teknis dan tidak boleh diabaikan. Kamu membutuhkan softskill seperti:

- Mendengar sebelum berbicara
- Skill komunikasi yang baik
- Bisa berbahasa nasional dan bahasa asing khususnya bahasa Inggris
- Menggunakan bahasa tubuh saat berkomunikasi untuk mendukung argumenmu

Itulah semua hal yang mungkin kamu perlu tahu sebagai Frontend Developer yang lebih baik. Terima kasih sudah membaca!

 

Sumber: [Medium](https://medium.com/@mantearpj/8-skills-for-front-end-developers-in-2023-cce9f384f014)

8 Skill Yang Harus Dikuasai Frontend Developer di 2023

Next Js 13 Sudah Rilis!

### Intro

Para Software Developer biasanya punya gaya dan aturan masing-masing dalam menulis kode atau penggunaan tools untuk membuat sebuah produk softaware. Preferensi dan gaya yang berbeda-beda tersebut sering kali menjadi argumen dan perdebatan panas di kalangan developer sepanjang waktu.

**Developer A:** Gua lebih seneng pake spasi daripada tabs.\
**Developer B:** Single quotes lebih cakep daripada double quotes!\
**Developer C:** Bro! Kok ada ya yang pake light mode di VSCode?

Masalah-masalah tersebut sebenarnya bisa diatasi dengan menggunakan tools linter seperti ESLint (biar kode kita konsisten), prettier (buat format kode kita supaya rapih) dan husky (bantu kita buat masuk ke lifecycle pre-commit dan post-commit git).

Sebelum meng-commit kode kamu serangkaian pengecekan aturan-aturan akan di jalankan untuk memastikan kode yang kamu tulis sesuai dengan aturan-aturan yang ditetapkan dalam file eslint dan prettier. Pengecekan ini adalah yang memaksa dan memastikan "kesehatan" dan memaintain kekonsistenan penulisan kode dalam proyek, khususnya saat bekerja dengan tim developer atau orang-orang yang melakukan commit kode ke proyek open source yang kamu buat.
 
 

### Ayo Kita Mulai

Untuk menggunakan eslint, prettier dan husky di proyek Next Js atau React yang kamu buat pertama-tama kita instal terlebih dahulu dependencies ini dengan mengetikan perintah berikut ini:

```javascript
yarn add --dev eslint prettier husky lint-staged eslint-config-prettier
```

Tujuan dari dependency yang di instal antara lain:

- **eslint:** untuk memastikan kualitas penulisan kode.
- **prettier:** untuk memastikan kode terformat dengan baik berdasarkan aturan-aturan yang telah ditetapkan.
- **husky:** memungkinkan untuk menjalankan skrip dalam file package.json dalam git lifecycle hooks.
- **lint-staged:** menjalankan skrip yang ditentukan hanya pada file yang ditetapkan.
- **eslint-config-prettier:** mencegah berbagai macam konflik format kode antara eslint dan prettier. Seperti yang kita tahu, eslint menghandle kualitas kode dan format kode. Package ini mendisable aturan dalam eslint yang berfungsi untuk memformat kode jadi eslint cuma fokus dalam memastikan kualitas penulisan kode.
 
 

### Konfigurasi Prettier

1. Buat file bernama `.prettier.json` dan masukkan perintah di bawah ini:

```json
{
 "trailingComma": "es5",
 "bracketSpacing": true,
 "printWidth": 80,
 "tabWidth": 2,
 "singleQuote": true,
 "arrowParens": "always"
}
```

2. Buat lagi sebuah file bernama `.prettierignore`. Kamu bisa memasukan folder dan file yang tidak boleh di format oleh prettier saat melakukan formatting. Berikut ini adalah beberapa file dan folder yang biasanya di ignore:

```javascript
node_modules;
build;
dist;
```

 
 

### Konfigurasi ESLint

Proyek seperti _create-react-app_ dan Next Js biasanya sudah punya konfigurasi eslint didalamnya. Yang perlu kamu lakukan adalah mengaitkan prettier kedalam file file eslint `.eslintrc.json`. Alasannya karena kita mau eslint cuma fokus dibagian masalah kualitas kode dan membiarkan prettier yang mengurus formatting kode kita. Ini adalah saat dimana package `eslint-config-prettier` yang kita instal sebelumnya bermain.

```json
{
 "extends": ["next/core-web-vitals", "prettier"]
}
```

Tapi untuk proyek yang belum punya konfigurasi eslint bisa mengikuti langkah berikut:

1. Lakukan inisialisasi eslint dan ikuti perintah yang muncul di command prompt

```javascript
npx eslint --init
```

2. Setelah mengikuti perintah tersebut, sebuah file bernama `.eslintrc.json` akan dibuat. Lalu kaitkan prettier disana.
3. Tambahkan file `.eslintignore` untuk mengabaikan folder node_modules, builds dan dist.
 
 

### Konfigurasi Lint-Staged

Jalankan perintah berikut ini untuk menginstal dan mengkonfigurasi husky dan lint-staged:

```javascript
npx mrm@2 lint-staged
```

Saat lint-staged selesai, dia akan membuat skrip dalam `package.json` seperti ini:

```json
"lint-staged": {
 "*.{js, jsx, ts, tsx}": "eslint --cache --fix",
 "*.{js, css, md}": "prettier --write"
}
```

Dan juga sebuah folder bernama `.husky` akan dibuat. Buika file pre-commit dalam folder tersebut dan tambahkan perintah berikut:

```javascript
yarn lint-staged
```

Perintah diatas akan menjalankan skrip lint-staged dalam file `package.json` ketika mengcommit dan memastikan kode sudah di format sesuai dengan aturan-aturan yang ditetapkan dan kode tersebut terbebas dari berbagai masalah linting.

![Console](https://i.ibb.co/jzCxLrk/console.png)

Sumber: [Medium](https://victorbruce82.medium.com/setting-up-eslint-prettier-and-husky-in-your-nextjs-project-b468fb56331)

Cara Setting ESLint, Prettier dan Husky di Next Js


Buat kalian yang suka ngoding mungkin udah gak asing lagi bukan dengan istilah "Hello World" di dalam bahasa pemrograman. Hello World sendiri sebenarnya adalah sebuah kalimat yang biasanya digunakan untuk mengilustrasikan bagaimana sebuah program dapat berjalan dan buat mastiin aja sih kalo program yang kita buat berjalan dengan baik atau enggak.

Biasanya program hello world dibuat oleh para programmer pemula yang baru pertama kali belajar ngoding. Hampir setiap programmer pernah mencoba membuat program hello world di masing-masing bahasa pemrograman yang mereka pelajari.

Berikut ini cara buat program hello world pertama kalian dalam bahasa JavaScript. Cukup buka browser kalian dan buka console dengan cara inspect element lalu masuk ke tab console. Setelah itu ketikan perintah berikut ini untuk mencetak kalimat "Hello World" ke console lalu tekan enter untuk menjalankannya

```javascript
console.log("Hello World!");
```

Hasilnya kurang lebih seperti ini

![heloworld](https://i.ibb.co/f2n3CGY/Screenshot-329.png)

Selamat program hello world pertama kamu sudah berhasil dibuat! Sekarang saatnya kamu untuk belajar lebih banyak lagi tentang pemrograman dan perdalam bahasa pemrograman yang kamu suka, semangat!


Blogs