react

Bentuk kartu perusahaan berubah tiga kali dalam seminggu, tapi kontrak konten bertipe tetap: field opsional plus guard bikin data kosong otomatis singkir.

TL;DR: Penulis bikin kartu perusahaan di Next.js pakai array TS lokal, dan datanya berubah bentuk tiga kali dalam seminggu. Untung field opsional plus guard truthiness bikin data kosong atau placeholder otomatis gak tampil. Nambah kartu ketujuh pun cuma edit file konten, komponennya aman total.

React 19 men-flag setiap script tag di komponen, termasuk script anti-FOUC next-themes yang sebenarnya jalan normal. Cara saya membungkamnya di dev saja.

TL;DR: Pas naik ke Next.js 16, next-themes bikin error merah soal script tag di komponen React, padahal dark mode jalan normal. Ternyata cuma false positive, script anti-FOUC-nya tetap jalan, React 19 emang warning semua script inline tanpa mikir konteks SSR. Solusinya gampang, tinggal filter console.error khusus dev buat abaikan pesan itu, kayak trik shadcn/ui.

Bikin locale switcher Next.js App Router yang preserve current path pakai usePathname dan regex swap, plus active state accessible dengan aria-current.

TL;DR: Locale switcher yang cuma link ke homepage bikin visitor kehilangan konten pas ganti bahasa. Solusinya pakai usePathname plus regex buat swap prefix locale, jadi /en/about tetep nyampe ke /id/about. Jangan lupa aria-current buat active state, dan kalo project makin ribet, pindah aja ke next-intl.

Fiord bikin peta gelap tapi datar. Saya mutasi style JSON-nya langsung di runtime: brightness ladder per layer, label terang ber-halo, plus guard anti-flash.

TL;DR: Fiord dark mode bikin jalan semua abu-abu sama, susah dibaca. Akhirnya fetch JSON Fiord, ubah paint 28 layer bikin tingkatan kecerahan jalan plus label pake halo gelap biar kelihatan kaya Google Maps. Pake cache, show peta dulu baru upgrade style, plus guard biar toggle cepat nggak bikin peta acak-acakan.

Basemap CARTO tiba-tiba wajib API key dan peta proyek saya penuh watermark. Ini cerita migrasi tiga komponen Leaflet ke MapLibre GL dengan tile OpenFreeMap.

TL;DR: Basemap CARTO tiba-tiba wajib API key, jadi semua tile peta ketutup watermark abu-abu. Daripada ngurusin kuota, saya pindah ke OpenFreeMap yang gratis tanpa key dan migrasi semua komponen Leaflet ke MapLibre GL. Style dark bawaannya kontrasnya hampir nol, akhirnya diganti fiord biar peta kebaca lagi.

Warna entri AI di navbar saya bergeser begitu urutan menu berubah. Pelajaran soal penugasan warna pakai modulo index dan fix berbasis identitas data.

TL;DR: Warna entri "Tanya AI" di navbar bergeser ternyata karena aksen dihitung pakai modulo index array, bukan bug tema. Perbaikannya mempin warna ke identitas href, plus menambah pill state idle supaya entri khusus beda bentuk sekaligus warna sesuai WCAG. Pelajarannya: identitas visual sebaiknya terikat data, bukan urutan render.

Chat mobile butuh struktur sendiri ala aplikasi pesan, tetapi logika jawaban tetap satu sumber lewat TurnBody yang diekspor ulang.

TL;DR: Layar sempit butuh struktur beda, bukan versi dipampatkan, jadi ChatMobileThread dibuat khusus di bawah breakpoint lg dengan pola aplikasi pesan: header sticky, gelembung dua sisi, dan composer di bawah. Desktop tiga kolom tak tersentuh. Logika jawaban tetap satu sumber karena TurnBody dipakai ulang lewat named export; 271 barisnya murni tata letak.

Sidebar riwayat chat hilang di breakpoint lg: tie-break order CSS dan elemen details yang dipaksa jadi wadah flex, dua akar masalah satu commit.

TL;DR: Sidebar chat menghilang di breakpoint lg karena dua bug dari refactor accordion mobile. Pertama, nilai order yang sama membuat wrapper tengah menang tie-break urutan sumber sehingga sidebar terdorong keluar viewport; solusinya cukup tambah lg:order-2. Kedua, elemen details tidak cocok jadi wadah flex di Chromium, jadi accordion diganti state React biasa dengan tombol aria-expanded dan div.

Pass responsif panel chat AI: tombol kirim 44px sesuai WCAG, font input 16px anti zoom iOS, dan transcript 65vh dengan overscroll-contain.

TL;DR: Panel chat yang rapi di desktop ternyata berantakan di mobile: tombol susah ditekan, textarea memicu zoom iOS, dan scroll bocor ke halaman. Perbaikannya bertumpu pada tiga angka standar: tombol 44px sesuai WCAG 2.5.5, font input 16px agar Safari tak memperbesar viewport, dan transcript dibatasi 65vh dengan overscroll-contain. Hasilnya, sentuhan lebih presisi dan gulir berhenti di tempatnya.