react

Field Status ada di entitas tapi hilang di mapper: API membalas string kosong, halaman edit crash. Satu baris plus regresi test menutupnya.

TL;DR: Bug muncul karena field status lupa dipetakan di dto announcement jadi frontend dapet string kosong dan crash pas baca badge. Di backend ditambahin mapping yang hilang plus test regresi, di frontend dibikin helper toFormStatus yang cuma izinin published dan scheduled sisanya jadi draft. Sekalian navigasi diganti dari window location ke router push dan refresh biar toast nggak hilang.

Nilai enum UPPERCASE bocor ke empat titik render admin; cukup satu formatter jadi pintu tunggal display, fallback ?? tetap jadi pedang dua mata.

TL;DR: Dropdown bidang nampilin huruf kapital semua padahal data di DB emang sengaja disimpan uppercase. Ternyata ada empat titik yang kelupaan pakai formatter formatBidang jadi masih ngasih nilai mentah. Fix-nya simpel tinggal colok formatter itu biar label jadi Title Case tapi value tetap uppercase biar nggak error validasi.

Super-admin tanpa bidang mengembalikan NULL dari database. Satu COALESCE di kueri login membuat kontrak API tetap total dan lencana admin tampil pas.

TL;DR: Kirain bug sepele soal lencana bidang super-admin yang hilang, ternyata DB ngasih NULL dan token lama belum punya kolom itu. Daripada nambal di tiap handler Go, mending sekalian beres di query pakai COALESCE biar selalu balikin 'ALL'. Di frontend tipenya dibikin opsional biar token lama nggak error, lencana juga cuma muncul kalau bidangnya bukan 'ALL'.

Registry as const plus union type membuat kompiler TypeScript menjaga konsistensi ikon kartu perusahaan di tiga tempat sekaligus.

TL;DR: Awalnya tujuh kartu perusahaan pakai ikon gedung yang sama, jadinya seragam dan gitu-gitu aja. Solusinya, pilihan ikon dipindah ke data konten pakai union type plus registry kecil, jadi tiap bisnis punya ikon sendiri. Kerennya, kompiler TypeScript yang jagain konsistensi—salah ketik atau lupa satu file dua bahasa langsung gagal build, bukan kelihatan aneh pas production.

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.

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.

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.

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.