Halo Dunia

Halo semuanya, selamat datang di Blog Pertama saya! Disini saya akan membagikan pemikiran saya kepada kalian semua. Nah, ayok gas.

Sebelum kita mulai, gimana kalau saya perkenalan singkat dulu? Nama saya Albet Novendo dan saya seorang software engineer. Seperti yang kalian lihat dari halaman utama. Saat ini saya bekerja sebagai Backend Developer.

Sebenarnya, saya pribadi juga menikmati beberapa hal front-end seperti mobile app juga. Okelah, itu aja. Mari kita lanjut blog ini!

Jadi kenapa website ini dibuat?

Nah mungkin kalian gatau, tapi ini adalah iterasi ke tiga dari website pribadi saya, yah kurang lebih sejarahnya ginilah:

Iterasi Pertama

Pertama kali website pribadi saya itu cuman HTML dan CSS serta beberapa JS Dependencies yang sangat berat, hiks. Tentu aja ini ga saya buat dari awal melainkan menggunakan template dari Colorlib, Lupa sih yang mana satu. Fotonya ada di bawah:

Versi pertama ini ya static, gak ada blog. Cuman resume dan beberapa project. Namun versi ini punya fitur bahasa. Inggris dan Indonesia. Lokalisasi-nya sendiri dibuat menggunakann vanilla JS langsung tukar DOM sesuai dengan pilihan user.

Jelas, ada beberapa masalah dari pendekatan ini:

HTML nya kosong, cuman structure karena contentnya di load sama JavaScript. Jadinya ya SEO nya buruk lah.
Kebanyakan dependencies, karena make template kan jadinya load time agak lama.
Tidak ada originalitas. Lagi karena template dan karena saya gabisa customize suka-suka juga sih, soalnya ga paham.

Nah sebenarnya, ada versi 1.5 yang isinya sederhana aja cuman “under construction” tapi ya projeknya ilang dan ss juga gaada. Versi itu di buat pake React dan Parcel (karena dulu gatau Vite). Isinya yah cuman link social media, pengenalan sikit, dan petunjuk lah kalau next portfolio bakal make React (jelas engga). Cuman karena versi ini udah di deploy cukup lama ya jadi nya worth mentioning lah.

Iterasi Kedua

Gambaran

Untuk versi 2 sebenarnya bukan bagian dari rencana. Melainkan, merupakan suatu uji coba untuk testing-testing NuxtJS, meta-framework dari Vue.js. Lalu untuk mempermudah design, digunakan lah Nuxt UI. Tapi hasilnya menurut saya pribadi sih rumayan yah, mengingat waktu itu gaada website pribadi juga jadinya gaslah di buatkan jadi website pribadi.

Dibanding sebelumnya, iterasi ini termasuk Full Stack Web yah karena menggunakan NuxtJS di server dan client. Kurang lebih fitur nya kayak gini:

Halaman Utama: Di halaman utama itu kurang lebih mirip sama halaman utama di web yang kalian liat sekarang, cuman gaada bagian di blog aja. Untuk pagian projectnya sih ada beberapa foto galeri.
Blog: Sementara untuk blog itu ada highlight blog paling, lalu sisanya ya di list di bawahnya. Blog nya menggunakan Nuxt Content. Selain itu tiap post juga wajib ada foto banner. Lalu ada full text search. Dan tentu saja post nya di tulis menggunakan format MDC dan di simpan di remote repository mengingat Nuxt Content support. Waktu build, barulah content nya di fetch dari remote untuk di bundle ke website.
Koleksi & Kategori: Tiap blog di grouping lagi berdasarkan koleksi dan kategori.
Pannel Admin: Lalu ada Admin Panel kurang lebih buat CRUD. Di proteksi menggunakan password dan passkey. Admin panel sendiri bertujuan untuk membuat commit ke remote repository dari content blog lalu trigger deployment ulang dari websitenya.
Dukungan API: Ada juga fitur Personal Access Token seperti punya github. Jadi dengan itu ktia bisa melakukan apa yang admin bisa tanpa harus dari admin panel saja.

Pertimbangan & Permasalahan

Dikembangkan pada tahun 2023 dan digunakan pada awal 2024, portofolio ini melayani cukup baik untuk sementara waktu. Namun, pada akhirnya jadi agak susah buat di maintain dan resource nya cukup intensif juga (i mean SSR, ISR, Serverless, dkk?) untuk sebuah situs web pribadi. Skor Lighthouse nya juga sangat mengecewakan, dan dari segi server, meskipun fungsional, menggunakan serverless function (rip duit) terutama untuk panel admin, yang pada akhirnya memicu redeployment karena static generation Nuxt Content.

Mengingat konten blog yang terbatas, saya menyimpulkan bahwa koleksi, kategori, dan panel admin tidak diperlukan. Selain itu, kurangnya waktu untuk pengembangan aplikasi seluler membuat dukungan API menjadi sia-sia. Selain itu, halaman blog sesekali menunjukkan bug terkait caching di mana konten tidak akan diperbarui selama perubahan rute, sehingga membutuhkan full page refresh.

Faktor-faktor ini membuat saya jadi pengen bikin versi baru yang secara khusus dirancang sebagai situs web pribadi yang ringan dengan fokus pada SEO, fitur-fitur minimal, dan skor Lighthouse yang sangat baik (opsional).

Iterasi Ketiga (sekarang)

Akhirnya, tibalah versi situs web pribadi saya yang sekarang. Yes yang ini. Versi ini dibuat dengan Astro, Tailwind, dan JavaScript. Tidak ada lagi framework (React, Vue, dkk), hanya HTML, CSS, dan JavaScript. Dengan Astro sih.

Gambaran Umum

Jika kamu pernah mengunjungi versi sebelumnya (di atas) maka kamu akan melihat bahwa versi ini sebenarnya sangat mirip. Ini hanya situs web yang sama ya basically di reskin lah. Tapi engga juga, dalam versi ini, saya fokus pada SEO dan performanya. Disini Astro digunankan untuk membuat situs statis dan Tailwind untuk styling.

Tidak ada lagi panel admin, koleksi/kategori, dan dukungan API. Hanya beranda dengan sebagian besar konten yang sama dengan bagian blog yang ditambahkan sebelumnya. Di sisi lain, bagian blog juga disederhanakan menjadi hanya daftar postingan blog dan postingan blog itu sendiri. Tidak ada lagi fitur pencarian (gunakan pencarian bawaan browser lah), tidak ada lagi kategori, dan tidak ada lagi koleksi. Banner juga tidak lagi diperlukan.

Kenapa Astro?

Sebelumnya saya telah mencoba Astro ketika saya membuat landing page untuk salah satu tugas saya. Kinerja dan kesederhanaannya ituloh. Tak lupa saya juga bisa menggunakan framework frontend apa pun yang saya inginkan dan semuanya akan berfungsi. Saya bisa menggunakan React, Vue, Svelte, atau bahkan HTML biasa. Win-win ga tuh. Dalam proyek sebelumnya, Saya menggunakan React dan itu kenceng parah. Jadi saya memutuskan untuk menggunakan Astro juga untuk versi ini.

Jika Anda ingin melihat proyeknya, sihlakan: Laman Landing Page Rent N Go v2.

Sekarang, mari kita bahas beberapa tantangan yang saya hadapi selama pengembangan versi ini:

Neu Brutalism Design

Versi ini juga hadir dengan tampilan baru. Berdasarkan desain [Neu Brutalism] (https://aesthetics.fandom.com/wiki/Neubrutalism). Udah dari dulu pengen coba membuat situs web yang sedekat mungkin dengan desain Neu Brutalisme. Skema warna, font, dan tata letak.

Setelah mendapatkan inspirasi dari berbagai sumber seperti Dribbble, Behance, dan Pinterest, saya sampai pada desain akhir ini. Meskipun mungkin ada beberapa kekurangan di sana-sini, seperti palet warna yang mungkin sedikit berlebihan, Secara keseluruhan, saya senang dengan hasilnya.

Sekarang, mengapa Neu Brutalisme? Gabisa di bilang unik juga sih, lihat WA, dah implemen mereka. Tapi satu hal yang pasti adalah karena ya saya suka aja sih. Dibandingkan dengan desain lainnya, desain ini terasa lebih kreatif dan ekspresif.

Pendekatan ini, yang ditandai dengan banyaknya warna, bentuk, dan ukuran, menciptakan pengalaman visual yang merangsang dan menyenangkan. Ini sangat kontras dengan desain saya sebelumnya yang lebih serius, yang sering mengandalkan palet monokrom, bentuk yang minimal, dan kehadiran persegi panjang bulat di mana-mana.

Tetapi, ada masalah dengan desain saat ini:

Kurangnya Inspirasi: Tentu saja, mungkin ada banyak desain pada dribble dan sebagainya. Tetapi beberapa di antaranya hanya dikit aja kek satu halaman dan bukan keseluruhan situs web. Nah jadi saya pula yang harus mikir gimana biar konsisten. Ya sudahlah sambil jalan dicoba.
TERLALU TERANG: Lagi-lagi alasan yang sama seperti di atas. Kebanyakan light mode semua weh, jadi entah gimana dark mode. Tar cari tau lah.
Ketanggapan: Mengingat desain ini sering kali hadir dengan font yang besar, rotasi yang aneh, dan sebagainya, Responsivitas dengan menjadi sebuah tantangan. Pada akhirnya, Saya harus memotong beberapa desain pada ponsel untuk membuatnya responsif (maksa).

Setelah semua itu, sayapun berhasil mengatasi poin pertama dan terakhir, tetapi poin kedua… jadi roadmap dululah.

Jejak Cursor (Mouse Trailing)

Salah satu fitur unik situs web ini adalah efek Mouse Trailing. Efek ini menggunakan JavaScript untuk melacak posisi mouse dan memperbarui posisi elemen indicatornya. Elemen indikator itu yang bulat lingkaran yang mengikuti kursor mouse anda ituloh. Lingkaran dibuat menggunakan elemen div dan dan ditata menggunakan CSS. Posisi lingkaran diperbarui menggunakan JavaScript dengan listen ke event mousemove pada objek document.

Efek mouse trailing menambahkan elemen interaktif dan dinamis ke situs web. Efek ini menciptakan kesan gerakan dan keaktifan yang meningkatkan pengalaman pengguna. Efeknya halus dan tidak mengganggu kegunaan situs web. Ini adalah fitur yang menyenangkan dan menarik yang menambah minat dan kepribadian visual ke situs web.

Interaksi dapat dilihat dari atribut data-interactable. Atribut ini dapat ditempatkan pada elemen apa pun untuk membuatnya dapat berinteraksi. Setelah mouse melayang (on hover) di atas maka kontennya akan berubah sesuai dengan nilai atribut data-interactable.

Untuk beberapa alasan (sebelumnya), jejak mouse akan terus ditampilkan meskipun mouse Anda melayang di atas data-interactable=none. Ini hanya akan berhenti muncul, setelah Anda berhenti menggerakkan mouse Anda. Untungnya, hal ini telah diperbaiki dengan mengubah urutan untuk menangani interaksi terlebih dahulu sebelum menganimasikannya.

Penampakan topbar ini juga dianimasikan dalam animasi fade vertikal dari atas ke bawah. Hal ini dicapai dengan menggunakan properti CSS clip-path dan properti animation.

Pada awalnya, saya berencana untuk menganimasikan hanya border saja, tetapi setelah dicoba-coba kok animasi saat ini, oke gituloh. Juga karena saya tidak tahu bagaimana cara menganimasikan hanya border aja sih.

Kotak Dialog

Website ini juga punya dialog binding yang dipakai terutama di bagian Projek. Dialog ini pakai elemen native <dialog /> dan dikontrol lewat atribut dengan bantuan JavaScript. Kotak dialog ini nggak bisa ditutup dengan cara klik diluar, karena memang dibuat kek gitu sih. Kalau Anda klik di luar, maka akan ada animasi di dialog boxnya, supaya Anda sadar kalau kotaknya masih terbuka. Animasi nya menggunakan Web Animation API.

Tapi ada satu masalah sama kotak dialog ini. Kotaknya muncul di atas konten yang ngikutin gerakan mouse. Bahkan Z-Index nggak bisa beresin masalah ini. Saya masih coba cari solusi buat ini.

Halaman Blog

Membuat halaman blog itu rumayan sulit. Banyak waktu diluangkanlah untuk mencari integrasi terbaik buat halaman blog ini. Sebelumnya, sempat coba Markdown Astro Bawaaan. Bagus, tapi gak bisa jadi dinamis.

Lalu saya coba MDX. MDX juga bagus karena saya bisa mengganti output HTML-nya dengan komponen lain, termasuk komponen Astro. Tapi masalahnya, seringkali mereka nggak menyediakan Props. Contohnya, untuk tag <code /> dan <pre />, jadinya harus tengok class terus parsing deh: language-${lang}.

Tapi ada masalah lain. Blok kode-nya itu di parse secara default sama si shiki secara default, jadi saya nggak bisa bikin fungsi Copy. Solusinya, saya harus bikin komponen kustom dan memanggilnya di MDX dengan mengirim kode sebagai props. Tapi ini jelas nggak ideal.

Kemudian saya coba Markdoc. Markdoc benar-benar bagus dan sesuai dengan yang saya butuhkan. Tapi, integrasinya tidak mendukung rehype, jadi saya nggak bisa pakai plugin yang saya inginkan. Saya akhirnya harus buat plugin sendiri. Pada akhirnya, saya balik lagi ke MDX.

Karenna ini Expressive Code! Dan wow, ini mantap sekali. Saya cuma perlu mengonfigurasi beberapa default props dan menyesuaikan styling, lalu voila!

Terakhir, soal TOC (Table of Contents). Ini saya harus bikin sendiri. Saya harus mem-parse HTML-nya, ambil heading, dan buat daftar dari heading itu. Lalu, saya harus bikin fungsi scroll ke heading saat pengguna klik TOC-nya. Cukup sulit, tapi akhirnya berhasil dibuat. Dengan menambahkan data-toc di setiap elemen li, saya bisa menggunakan observer untuk mengamati heading. Begitu heading terlihat di viewport, saya bisa menyorot TOC dengan mencocokkan data-toc di elemen li dengan id dari heading itu.

Perbedaan dengan versi lama

Jadi, apa saja perbedaan antara versi ini dengan versi sebelumnya?

Performa: Versi ini juga berfokus pada performa. Saya menggunakan Tailwind untuk styling dan Astro untuk static site generation tanpa menggunakan Front End Frameworks. Hasilnya, waktu build hanya memakan hitungan detik dibandingkan versi sebelumnya yang bisa memakan waktu hingga beberapa menit.
Kesederhanaan: Versi ini juga berfokus pada kesederhanaan. Saya menghapus panel admin, koleksi/kategori, dan dukungan API.
Kemudahan Pemeliharaan: Versi ini juga berfokus pada kemudahan pemeliharaan. Tidak ada lagi SSR, ISR, Serverless Functions, dan sejenisnya. Hanya HTML, CSS, dan JavaScript biasa. (Murah juga hehe)

Kedepannya

Sekarang setelah saya menyelesaikan iterasi ketiga dari situs pribadi saya, saya sangat antusias untuk melihat bagaimana situs ini akan berkembang di masa depan. Saya sudah punya beberapa ide untuk ke depannya:

Lokalisasi: Seperti pada versi pertama, saya ingin menambahkan dukungan multi-bahasa, yaitu Bahasa Inggris dan Bahasa Indonesia. Blog post bisa tersedia untuk kedua bahasa atau eksklusif untuk salah satu. Saya sedang mempertimbangkan untuk menggunakan Astro i18n untuk ini. Btw ini udah jadi. Kalau belum, ya blog post ini ga bakal ada.
Mode Gelap: Semua orang suka mode gelap. Saya ingin menambahkan mode gelap ke situs ini. Tapi saya masih mencari cara untuk membuatnya cocok dengan desain yang sekarang.

Saya juga terbuka untuk saran dan masukan dari Anda. Jika Anda punya ide atau fitur yang ingin Anda lihat di situs saya, jangan ragu untuk menghubungi saya.
Terima kasih sudah membaca blog post ini. Saya harap Anda menikmatinya dan mendapatkan sesuatu yang baru. Nantikan blog post lainnya di masa mendatang!