frontend

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.

Metadata tak terverifikasi dibuang; yang tersisa nama, sektor, deskripsi, plus tiga detail teknis yang menjaga kartu tetap aksesibel.

TL;DR: Artikel ini cerita soal memangkas kartu perusahaan di halaman about: metadata yang nggak bisa diverifikasi dihapus biar nggak jadi utang editorial. Pembagi antar-kartu dibuat pakai pseudo-element CSS, jadi DOM tetap bersih. Ikon Lucide disembunyikan dari screen reader lewat aria-hidden, dan efek hover dinolkan buat pengguna yang aktifkan prefers-reduced-motion.

Satu daftar kartu, dua baris: baris kedua keluar container pakai w-screen dan margin calc, tanpa memicu scrollbar horizontal.

TL;DR: Pasang w-screen buat full bleed tuh sering muncul scrollbar horizontal, soalnya 100vw dihitung sebelum scrollbar, jadi kelebihan beberapa piksel. Solusinya pakai ml-[calc(50%-50vw)] plus overflow-hidden di section pembungkusnya, bukan di body biar sticky header nggak mati; overflow: clip lebih aman lagi. Markup kartu cukup sekali lewat renderCard IIFE, slicing doang per barisnya.