7 Hal Yang Bisa Dipelajari Programmer Pemula Dari Project Warga Bantu Warga — Bagian 1
Pendahuluan
Menulis kode adalah sebuah skill. Dan kemampuan untuk menulis kode yang rapi adalah sebuah skill yang lain lagi. Ketika kode yang ditulis semakin banyak, maka akan semakin rumit pula perbaikan jika ada kekeliruan.
Seumpama rumah, tentu akan lebih mudah menemukan barang jika barang di rumah tersebut tertata dengan rapi. Begitu pula sekumpulan kode yang ditulis. Ketika kode yang ditulis tertata dengan rapi, maka akan lebih mudah mencari letak sumber masalahnya dan kemudian membenarkannya.
Sebagai pengembang perangkat lunak pemula, tentu perlu banyak waktu yang diperlukan untuk belajar cara menulis kode yang rapi. Salah satu cara memangkas waktu tersebut adalah dengan membaca project yang dibuat oleh para sepuh.
Berangkat dari hal tersebut, saya akhirnya mencoba untuk mengulik project wargabantuwarga. Daripada ilmu yang didapat terlewat begitu saja, akhirnya diputuskan untuk menuliskannya dalam tulisan ini.
Beberapa Hal yang Bisa Dipelajari
1. Berjalan di atas framework Next.js
Next.js is a flexible React framework that gives you building blocks to create fast web applications.
Next.js menyediakan salah satu tutorial yang paling ramah untuk pemula (https://nextjs.org/learn/foundations/about-nextjs).
2. Ditulis Menggunakan TypeScript
TypeScript sendiri merupakan perpanjangan tangan dari JavaScript. Perbedaannya, mereka menambahkan sintaks untuk menambahkan tipe.
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
Dengan intregasi dengan kode editor, penulis kode bisa menangkap kesalahan lebih awal. Sehingga kesalahan lebih bisa diminimalisir dan memberikan rasa aman.
3. Menggunakan Tailwind CSS
Tailwind CSS adalah framework yang ngebantu ngoding CSS jadi sat-set-sat-set.
Uniknya, dilihat di bagian presets, untuk custom stylingnya dibuatkan preset khusus dalam @kawalcovid19/tailwind-preset-wbw. Preset ini dibuat dalam satu package khusus agar bisa digunakan dalam lintas project KawalCovid19.
Tailwind preset used across the Kawal COVID-19 + WargaBantuWarga projects. — @kawalcovid19/tailwind-preset-wbw
Sama seperti config Tailwind CSS pada umumnya, custom style ditambahkan di bawah bagian theme.extend.
Ada 2 color yang ditambahkan, yaitu brand dan light-blue yang masing-masing memiliki value DEFAULT dan 100–900.
Typography menggunakan plugin tambahan @tailwindcss/typography. Tag <hr> sedikit mendapat penyesuaian.
Dan form menggunakan plugin tambahan juga @tailwindcss/forms.
Untuk yang ingin belajar menambahkan custom style bisa dibaca di dokumentasi resmi Tailwind CSS berikut ini https://tailwindcss.com/docs/adding-custom-styles.
4. Plugin Next SEO untuk mengatur SEO
Next SEO is a plugin that makes managing your SEO easier in Next.js projects. — https://github.com/garmeeh/next-seo
Meta title disimpan dalam variabel meta, kemudian dioper ke dalam <NextSeo/>.
Jika dilihat, meta mendapat value site_tagline dan site_name diimport dari siteConfig. Akan dibahas pada poin selanjutnya.
5. Export As
Melanjutkan dari poin sebelumnya, jujur, saya sedikit tidak menduga. Ketika membuka file site-configts, justru yang terlihat ada type yang di-export.
Ternyata, file JSON disimpan di file _content/site-config.json.
Ketika file JSON telah diimport, barulah di-export dalam file TypeScript menggunakan as untuk mendeklarasikan type-nya.
6. Penamaan File Menggunakan Kebab-Case
Berikut beberapa cara penamaan file/variabel.
7. Cara Memberi Type Pada useState
Type ditulis dengan <> setelah useState.
Tambahan: How to use set types on React useState with TypeScript.
Sebenarnya masih banyak yang bisa dipelajari. Semoga ada kesempatannya menuliskannya di lain waktu. Jangan lupa berkunjung ke zakiego.my.id. Terima kasih! 🤍
