Disclaimer

Ini bukan artikel tutorial ya, hahaha. Ini hanya artikel yang membahas lebih kepada pengalaman pribadi bagaimana saya membuat ulang personal website saya, yaitu yehezgun.com dengan framework dan pendekatan metode yang berbeda yang sekiranya bisa menjadi referensi bagi teman-teman pembaca juga.

Pendahuluan

Berawal dari proyek freelance yang menggunakan React beserta library-library pendukung lainnya, membuat saya penasaran dan ingin terjun sedikit lebih jauh, hahaha. Di samping itu, metode pengerjaan proyek dengan planning sebelum koding sangat membantu dalam pengerjaan proyek itu sendiri.

Akhirnya saya memutuskan untuk men-challenge diri saya sendiri untuk mempelajari framework tersebut dengan cara me-remake web portfolio saya sendiri. Sebenarnya, saya sudah memiliki personal web saya di yehezkielgunawan123.vercel.app, namun saya ingin membuat ulang dengan konsep yang lebih minimalis dan tentu dengan framework yang berbeda.

Awalnya saya adalah tipe programmer barbar yang lebih suka langsung koding tanpa pikir panjang. Tapi rupanya, setelah setahun bekerja sebagai frontend engineer, rupanya kebiasaan itu saya akui toxic dan harus diubah. Untuk itulah kali ini saya mencoba menerapkan perencanaan sebelum saya koding untuk personal web saya yang baru supaya code yang dihasilkan pun lebih berkualitas dan maintainable. Tentunya proses planning sebelum koding kali ini saya sesuaikan dengan scope yang lebih kecil untuk personal project.

Membuat Design atau Mockup UI

Sebelum memulai proses koding, pertama-tama saya harus mendapatkan gambaran bagaimana tampilan web yang akan saya buat nantinya. Untuk hal ini, saya menggunakan Figma untuk membuat mockup-nya.

Karena saya bukan UI Designer, saya agak effort untuk memikirkan konsep desain web saya sendiri, hahaha. Tapi bukan berarti saya tidak bisa mendesainnya ya. Beruntungnya, tanpa sengaja saya menemukan sebuah web milik Lee Robinson yang memiliki desain minimalis dan sederhana tetapi tetap enak dipandang. Akhirnya saya pun membuat desain minimalis seperti miliknya dengan beberapa penyesuaian dan preferensi dari saya sendiri.

Desain mockup saya ini dapat diakses di sini

Tidak memiliki jiwa seni bukan berarti tidak bisa membuat desain ya. Prinsip klasiknya amati, tiru, dan modifikasi. Mungkin terdengar klasik, tetapi justru prinsip inilah yang bahkan bisa membuat sebuah negara seperti Tiongkok menjadi negara maju sekarang.

Sah-sah saja mengambil referensi dari karya orang lain, selama kita cantumkan nanti di daftar referensi yang akan dibuat ya. Di dunia yang serba cepat ini, tak perlu harus membuat dari nol. Kita bisa cari sumber pengetahuan dari orang lain yang sudah membuatnya terlebih dahulu.

Menentukan Library dan Framework Apa saja yang akan Digunakan

Ibarat ingin membuat kue, tentu kita harus menentukan alat dan bahan apa saja yang akan dibutuhkan. Ini perlu dilakukan agar tools yang kita gunakan tidak terlalu overpowered (OP) atau kekurangan tools.

Semakin banyak library yang di-install tentu akan membuat node-modules akan semakin gemuk dan bisa saja mempengaruhi performa web yang dibuat. Untuk itulah, saya menentukan apa saja framework dan library yang akan digunakan sejak awal.

Dalam hal ini, saya memutuskan untuk menggunakan:

• Repo Template NextJS + Typescript + Chakra UI sebagai project initialization
• Library React Notion sebagai renderer elemen dari Notion untuk React component.
• Chakra UI untuk styling dan UI component.
• React Icon untuk keperluan menampilkan icon-icon.

Selain menentukan framework dan library, tak lupa saya juga membuat config untuk ESLint agar code yang dihasilkan bisa lebih rapi.

//.eslintrc
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "next"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ],
        "moduleDirectory": [
          "node_modules",
          "src/"
        ]
      }
    }
  },
  "rules": {
    "no-console": 1,
    "no-unused-vars": "warn",
    "no-return-assign": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "no-undefined": "warn",
    "complexity": "warn"
  }
}

//.prettierrc
{
    "semi": true,
    "trailingComma": "all",
    "printWidth": 80,
    "singleQuote": false
}

Menentukan Struktur Folder dan File Project

Sebenarnya, sudah ada struktur file default yang telah disediakan ketika melakukan create project menggunakan Next JS, tetapi kali ini, saya membuat sedikit perubahan pada struktur project yang ada.

/src
   /components
   /constant
   /function
      /helper
      /lib
   /pages
   theme.tsx

Folder components berisi komponen-komponen kecil yang merupakan hasil modularisasi untuk ditampilkan di halaman web. Selain itu, biasanya saya juga membuat reusable component di dalam folder ini yang bisa digunakan secara berulang agar tidak redundant.

Pada folder constant dapat berisi variabel-variabel global yang digunakan di banyak component. Terkadang, saya juga menyimpan variabel dari local environment di sini.

Di folder function, ini berisi hal-hal yang sifatnya logic. Subfolder helper berisi function-function yang berisi logic yang membantu proses development, contohnya function untuk mengubah tampilan tanggal. Untuk function yang sifatnya untuk fetch data, biasanya ditaruh di dalam subforlder lib.

Di Next JS, folder page berisi component keseluruhan dari halaman yang akan ditampilkan dalam web yang akan dibuat. Beruntunglah, framework ini memiliki routing bawaan yang cukup membantu proses development, karena saya cukup menyamakan nama file dengan nama routing-nya.

Proses Koding

Ya, tibalah proses koding. Saya bukan manusia ambis yang langsung menyelesaikannya dalam satu hari. Karena faktor pekerjaan fulltime dan juga ada proyek freelance yang sedang saya kerjakan, otomatis saya hanya punya sedikit waktu saat sedang senggang atau ketika weekend.

Karena menggunakan Typescript, hal pertama yang saya lakukan adalah men-define tipe variabel apa saja yang akan saya butuhkan. Setelah itu, barulah saya membuat function atau logic yang diperlukan. Terakhir, saya membuat UI untuk tampilan web saya ini.

Untuk task management, saya hanya membuat to-do list sederhana di catatan Notion saya. Saya hanya perlu menuliskan apa saja fitur yang harus dibuat dan menandainya ketika sudah selesai. Contohnya seperti ini :

• Fetch data Project
• Fetch data Artikel
• Halaman Home
• Halaman Projects
• Halaman Artikel
• Halaman About Me

Karena terbiasa barbar, saya jarang men-define tipe variabel saat ngoding Typescript. Tetapi dengan bantuan ESLint, saya memaksa diri saya sendiri untuk belajar membuat kodingan yang rapi dan readable, sehingga memudahkan saya sendiri untuk mengembangkannya di masa mendatang.

Self Code Review dan Minta Feedback Teman

Tak lupa setelah web saya selesai dibuat, saya dengan polosnya meminta feedback dari beberapa teman yang saya kenal. Bukan untuk pamer sebenarnya, tetapi lebih untuk mengetahui apa saja yang bisa saya improve dari yang sekarang.

Ada yang lucu dari proses ini. Ketika saya mengecek sendiri kodingan saya, saya merasa kodingan saya berjalan dengan baik. Tapi rupanya, ketika saya meminta teman saya untuk mengeceknya, rupanya banyak hal yang perlu di-improve sekalipun itu bukan bug.

Tak sedikit komentar dan saran dari teman-teman saya. Bukannya membuat kecewa, tetapi justru hal inilah yang membuat saya semangat kembali untuk memperbaiki apa saja yang salah dan meng-improve tampilan dan bahkan kodingan saya.

Self Retrospective

Seperti project sungguhan, saya menampung feedbacks dari teman-teman saya dan menyesuaikannya dengan apa yang saya buat. Jadi, sembari saya publikasikan karya saya di Linkedin, saya juga sambil jalan memperbaiki dan mengembangkan kembali apa yang bisa di-improve.

Itulah mengapa makin hari ada banyak perubahan yang terjadi dalam web saya, entah secara tampilan atau logic kodingan.

Keseluruhan proses di atas saya lakukan kurang lebih selama sebulan sepanjang bulan Agustus 2021. Cukup struggle karena harus menyempatkan diri di tengah kesibukan pekerjaan dan freelance. Tapi ternyata, ketika melihat hasilnya saya sendiri cukup terkejut dengan diri saya sendiri yang rupanya bisa melampaui batas saya sendiri.

Di sini saya banyak belajar, bahwa sebenarnya feedback dari orang lainlah yang membuat saya jadi tau apa yang kurang dan perlu dikembangkan lebih lagi. Penting sebagai programmer untuk meminta feedback dari yang lebih jago atau berpengalaman. Saya sendiri sudah mengalaminya dan akan melakukannya lagi suatu saat nanti.

Seperti itulah kira-kira cerita saya dalam membangun personal website saya, yaitu yehezgun.com. Untuk Github repository-nya, kalian bisa akses di https://github.com/yehezkielgunawan/yehezgun.com. Silahkan juga kalau teman-teman pembaca ingin memberikan feedback lewat kolom komentar atau PR di Github ya, hahaha.