Membangun sebuah tempat untuk belajar dan menumbuhkan ide-ide baru di ruang publik

Sudah beberapa kali saya mengembangkan website portofolio saya sendiri dengan tujuan untuk menunjukkan hasil implementasi hal-hal yang sedang ataupun sudah saya pelajari dari bangku perkuliahan ataupun course yang saya ambil. Website ini juga sudah beberapa kali saya rombak, mulai dari menggunakan HTML dan CSS, kemudian PHP (mata kuliah pemrograman web), sampai saya ubah lagi menggunakan HTML, CSS, dan JavaScript dengan Web Componentnya.

Tujuan pengembangan website saya yang baru ini sebenarnya sama, dengan beberapa tujuan tambahan, salah satunya adalah agar saya bebas berbagi dan beropini tentang hal-hal yang saya buat dan pelajari saat ini, terutama tentang teknologi. Beberapa hal yang menjadi pertimbangan saya ketika mengembangkan website ini, yaitu:

1. Performance - Lighthouse score ≥ 90
2. Accessible - Sebuah website memang sudah seharusnya mudah digunakan oleh semua orang
3. Maintainable - Kode yang ada sebisa mungkin dibuat sesederhana mungkin sehingga mudah ditambahkan, sunting, dan hapus.

Proses

Dari ketiga hal diatas, saya menentukan beberapa teknologi yang akhirnya saya pakai untuk mengembangkan website ini.

1. Performance

   Hal yang pertama saya pikirkan adalah perfomance, tujuannya tentu saja agar pengunjung tidak perlu nunggu lama hanya untuk membuka website ini. Pilihan saya jatuh sama Next.js, selain karena saya sudah berniat menggunakan Next.js karena learning curve yang cukup landai (dokumentasi dan tutorialnya mantap) dan kemudahan buat make MDX sebagai content management system-nya, Next.js juga punya fitur-fitur bawaan yang mendukung optimisasi seperti Automatic Image Optimization dan Font Optimization

2. Accessible

   Dari komponen yang ada, beberapa komponen saya memilih untuk pakai Reach UI karena jika saya membuatnya sendiri, belum tentu saya bisa memastikan komponen tersebut memiliki aksesibilitas yang baik, contohnya komponen Modal dan Menu, selain itu karena setiap komponen yang ada di Reach UI udah diuji menggunakan berbagai macam peramban beserta screen reader-nya seperti Safari dengan VoiceOver, Firefox dengan NVDA, dan Edge dengan JAWS.

3. Maintainable

   Jujur sampai saat ini saya masih belum tau untuk membangun sebuah struktur folder dan mengatur aplikasi skala produksi yang scalable dan maintanable, yang menjadi patokan saya saat ini untuk membangun struktur folder adalah artikel yang ditulis oleh Tania Rascia yaitu React Architecture: How to Structure and Organize a React Application. Untuk mengatur kodenya saya dibantu oleh ESLint bawaan Next.js sebagai static code analysis dengan sedikit rules tambahan dan Prettier sebagai code formatter.

Antarmuka Pengguna

Rancangan

Berbekal sedikit pengalaman saya yang sering kali ditunjuk sebagai seorang "desainer grafis" dalam sebuah organisasi dan sedikit pengalaman sebagai layouter di majalah sekolah dan majalah dinding dulu (haha), saya mencoba merancang beberapa halaman website ini menggunakan Figma. Berikut beberapa hasil rancangan tersebut:

Halaman Home dengan tema light

Halaman Detail Blog di desktop dengan tema light

Halaman Detail Blog di desktop dengan tema dark

Implementasi

Karena berbagai alasan, ada beberapa perubahan yang saya lakukan ketika mengimplementasikan rancangan tampilan antarmuka pengguna ini, contohnya seperti pada halaman home yang saya buat menjadi lebih sederhana karena saya kesulitan untuk memilih dan mengkombinasikan warna, namun karena terlalu sederhana dan terkesan membosankan saya mencoba menambahkan fitur interaktif yang terinspirasi dari taliacotton.com agar tidak terlalu membosankan

Konten

Karena tujuan saya mengembangkan website ini adalah berbagi, maka konten yang ada adalah tentang berbagi apa yang menjadi passion saya saat ini dan berbagi ke komunitas tentang apa yang sedang saya alami, pelajari, dan kerjakan, walaupun saya sadar bahwa apa yang saya kerjakan mungkin tidak terlalu berguna untuk orang lain setidaknya website ini, buat saya, bisa jadi wadah arsip untuk proses yang telah saya lalui dan sedikit hasil yang pernah saya dapat.

Tech Stack

Dalam mengembangkan website ini, saya memilih Next.js, SCSS Modules, MDX, dan Vercel sebagai kekuatan utama untuk mempersenjatai ~~buruh tani~~ website ini. Adapun teknologi tambahan yang saya pakai, yaitu:

Web Technologies

1. Web Share API
2. Font Loading API
3. CSS Custom Properties
4. CSS Grid

Syntax Highlighting

1. rehype-prism-plus
2. rehype-autolink-headings
3. rehype-code-titles
4. rehype-slug

UI Component

1. @reach/dialog
2. @reach/menu-button

Utility

1. classnames
2. reading-time
3. sharp
4. copy-to-clipboard

Bantuan

Beberapa artikel/issues/code snippet/website yang sangat membantu saya dalam mengembangkan website ini:

Markdown

1. MDX Bundler with Next.JS by Adam Laycock
2. MDX in Next.js using mdx-bundler by Dipesh Wagle

Dark Mode

1. Dark Mode on the Web by Fatih Kalifa
2. A Complete Guide to Dark Mode on the Web by Adhuham
3. Emulate dark or light schemes in the rendered page
4. Disable theme transitions on theme toggle by Paco Coursey

Syntax Highlighting

1. Code blocks, but better by Pedro Duarte

Web Share

1. How to Use the Web Share API by Ayooluwa Isaiah
2. The Simplest (and Most Performant) Way to Offer Sharing Links for Social Media by Adam Coti

Open Graph

1. Open Graph Meta Tags: Everything You Need to Know by Michal Pecánek

Favicon

1. Favicon Generator
2. SVG, Favicons, and All the Fun Things We Can Do With Them by Eric Bailey

Typography

1. Type Scale - A Visual Calculator
2. Fluid typography

Webmention

1. Webmention
2. Into Webmentions With NextJS (or Not) by Atila Fassina
3. Using Webmentions in Eleventy by Max Böck
4. A Short History of Bi-Directional Links by Maggie Appleton

Code Snippet

1. Outline focus by Adam Argyle (@argyleink)

   globals.scss

    @media (prefers-reduced-motion: no-preference) {
     :focus {
       transition: outline-offset 0.25s ease;
       outline-offset: 3px;
       outline-color: var(--accent-color-1);
     }
   
     html {
       scroll-behavior: smooth;
     }
   }
   

2. Mouse in-out transition by Adam Argyle

saya ucapkan terima kasih untuk semua author yang sangat baik hati karena sudah mau berbagi ilmunya secara cuma-cuma :)

Inspirasi

Beberapa website yang menjadi inspirasi desain website ini:

Home

It's Nice That

Thinking*Room

Fatih Kalifa | Interface Engineer

We are COLLINS

archives.design

Experiments with Google

Dwinawan - User Interface Designer

Maggie Appleton

Talia Cotton, designer & coder

Hasil

Dari beberapa proses yang udah saya jalani tadi, berikut hasil dari pengukuran performa website saya menggunakan Lighthouse:

1. Desktop

   
   

2. Mobile

   
   

Seperti yang terlihat di atas, bahwa di sisi performa website saya saat ini, terutama pada perangkat mobile—yang saya duga karena banyaknya font yang digunakan dan fitur interaktif yang ada pada halaman home—, masih perlu adanya sebuah perbaikan, namun sejauh ini saya cukup puas dengan keseluruhan hasilnya :)

What's Next?

Mencoba untuk mulai belajar menulis seputar software engineering dan teknologi, yang semoga saja bisa bermanfaat bagi diri sendiri dan orang lain.

Jika kalian punya pertanyaan seputar website ini, atau sekedar ngobrol, maupun berkolaborasi, bisa sapa saya di Twitter