frontend

Grid lima kartu layanan tinggal beberapa baris CSS. Yang berat justru menulis deskripsi pendek yang tidak terpotong dan menjaga shadow tetap konsisten.

TL;DR: Halaman layanan saya rombak dari daftar nama proyek jadi lima capability cards. Grid-nya gampang berkat resep CSS auto-fill dari MDN; yang makan waktu justru nulis copy pendek tanpa memotong teks, plus hover dan shadow konsisten sebagai penanda klik. Pelajarannya: tulis isinya dulu, layout menyusul.

Gestur roda mouse di popup jawaban AI: pasang listenernya gampang, tapi timing effect React, passive listener, dan reduced motion bikin ada empat jebakan.

TL;DR: Fitur flip jawaban AI lewat roda mouse di popup nyaris gagal karena dua jebakan: useEffect jalan saat ref masih null sehingga listener tak pernah nempel, dan event wheel default-nya passive sehingga preventDefault jadi no-op tanpa opsi passive: false. Solusinya pasang listener bergantung state terbuka plus deteksi ujung scroll. Animasi slide diatur CSS dan otomatis dihormati prefers-reduced-motion.

Pencarian AI di blog ini sekarang ingat pertanyaan kemarin. Triknya: localStorage, cap 30 turn, dan try/catch yang diam-diam menyerah saat browser menolak.

Section blog homepage yang dulu diisi manual lewat blog-posts.json sekarang fetch live dari API, plus helper formatDateWIB yang pin timezone Asia/Jakarta.

Commit 70a43a9 menambahkan artikel terkait, fetch paralel, timeline CSS, dan TOC file-tree ke halaman detail blog Next.js.

Ikon stack di list blog saya telat muncul karena fetch runtime. Saya ganti dengan SVG server-side dan fallback icon set.

Accent oranye cakep di dark mode tapi pudar di light. Ganti ke mint CodeRabbit dengan emerald-600 untuk light mode agar lolos uji kontras WCAG.

Chip tag abu flat di sidebar semua semelek bobot. Ganti ke tint primary 10% plus hairline ring inset bikin tag terasa hidup dan bisa diklik.

Heading sidebar 11px uppercase warna redup ternyata paling susah dibaca. Ganti ke 13px bold normal-case plus ikon, kontrasnya naik sesuai WCAG.