Blog

Nyamain gaya kartu layanan ternyata bukan soal nambah class, tapi hapus dekorasi dan pinjam satu kelas pembatas yang udah ada.

TL;DR: Awalnya gue pengen nyamain gaya kartu layanan dengan cara nambahin kelas utilitas kayak border sama shadow. Tapi ternyata kartu yang rapi cuma pake satu kelas bersama, reference-divider, jadi solusinya justru hapus semua dekorasinya. Pelajarannya: konsistensi paling gampang dicapai lewat penghapusan kode, bukan nambah-nambah kelas.

Copy class dari kartu jaringan perusahaan ternyata nggak cukup: identitas elemen li dan handler keyboard-nya harus ikut pindah.

TL;DR: Gara-gara niru kartu pakai copy-paste class Tailwind doang, garis pembatasnya nggak muncul karena struktur DOM-nya beda. Solusinya, kartu kantor diekstrak jadi komponen OfficeCard dengan role button dan handler keyboard, terus tinggal dipakai di dua ul berbeda. Ada juga bug daftar nampil dobel gara-gara ul lama kelupaan dihapus.

Dua dari empat badge ISO di hero kami menunjuk edisi yang sudah atau sedang digantikan. Tahun edisi ternyata data yang harus diaudit, bukan teks statis.

TL;DR: Ternyata badge sertifikasi di website bisa kadaluarsa: ISO 9001:2015 udah mau diganti edisi 2026, dan ISO 37001:2015 juga udah diganti edisi 2025. Tahun edisi itu data yang perlu diaudit tiap tahun, bukan teks statis. Mau cek transisi standar jangan asal percaya situs sekunder, langsung cek halaman resmi ISO sama IAF aja.

CSS max-width bikin hint sizes next/image menjanjikan slot vw yang salah. Perbaiki pakai nilai piksel biar srcset memilih kandidat yang pas.

TL;DR: Ganti ukuran gambar pakai CSS doang ternyata nggak cukup, browser masih ngunduh file gede gara-gara hint sizes masih janji 40vw. Solusinya jujur aja tulis nilai piksel langsung di sizes biar sinkron sama clamp-nya. Sekarang tiap utak-atik gambar, cek tab Network udah jadi langkah wajib.

Atribusi peta muncul dua kali di pojok. Yang satu duplikat buatan sendiri; TileJSON pemasok sudah lama mengirim atribusi bawaan.

TL;DR: Atribusi dobel di pojok peta ternyata gara-gara customAttribution yang diketik manual, padahal MapLibre udah otomatis ambil dari TileJSON. Solusinya hapus string itu, ganti compact: false biar atribusi selalu kebaca tanpa perlu diklik. Ingat, atribusi itu kewajiban lisensi ODbL, bukan hiasan UI, jadi jangan sampai hilang.

Event klik kartu React belum cukup untuk menggerakkan peta imperatif. Tiga jembatan kecil: registry ref, klik sintetis untuk popup, lalu flyTo.

TL;DR: Marker di maplibre nggak punya API buka popup, jadi triknya dispatch klik sintetis yang nge-bubble ke peta biar popup muncul sendiri, plus flyTo buat zoom ke lokasinya. Pakai useRef buat nyimpen marker dan nahan request fokus sebelum peta selesai load. Tambah counter di dependency biar klik kartu yang sama tetap ke-trigger.

Ganti peta statis dengan MapLibre di Next.js 16, tile-nya nggak muncul dan console diam saja. Ternyata worker-nya yang tak pernah jalan.

TL;DR: Peta MapLibre abu-abu kosong di Next.js 16 padahal console bersih, ternyata Turbopack gagal emit file worker-nya jadi tile nggak pernah diminta. Solusi cepatnya: load MapLibre 4.7.1 dari CDN karena build itu inline worker sebagai blob URL. Pelajarannya, kalau komponen hidup setengah tanpa error, cek tab Network duluan.

Section group-network dipisah dari about-teaser, terus kepikiran buat portabel: dibangun ulang jadi custom element shadow DOM yang bisa ditempel di mana saja.

TL;DR: Jadi penulis refaktor komponen group-network dari React jadi web component native. Ternyata JSX nggak bisa langsung nempel di HTML biasa, butuh build step dan React runtime. Solusinya bikin custom element pakai HTMLElement, Shadow DOM, sama template, jadi komponennya portable dan bisa dipakai tim lain tanpa React.

Peta kantor glowing plus garis ngalir tanpa Mapbox: satu SVG overlay viewBox 0-100, preserveAspectRatio none, animasi CSS yang aman buat reduced-motion.

TL;DR: Daripada pasang Mapbox buat peta dekoratif, cukup tumpukin SVG overlay di atas next/image pakai viewBox "0 0 100 100" dan preserveAspectRatio="none", jadi koordinat titiknya persen dan ikut meregang pas resize. Garis alir sama denyut titik murni CSS, nol JavaScript. Kalau nanti butuh akurasi beneran, baru ganti ke library peta.