nextjs

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.

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.

Mengganti [PLACEHOLDER] dengan fakta yang bisa diverifikasi, dan kenapa teks generik justru dekat dengan sinyal spam Google.

TL;DR: Isi kartu profil masih placeholder, jadi gw sempat pengen generate teks marketing generik biar kelihatan penuh. Ternyata itu berbahaya, karena Google nganggep konten generik massal sebagai scaled content abuse alias spam. Solusinya mending riset fakta nyata tiap perusahaan, walau singkat, soalnya data valid jauh lebih bernilai daripada teks kosong yang nempel.

Foto latar hero plus overlay saya ganti satu div CSS: gradient diagonal dari token warna, drift 28 detik, dan tetap statis untuk pengguna reduced-motion.

TL;DR: Dia hapus foto hero di situs Next.js dan ganti pola garis diagonal murni CSS pakai linear-gradient plus color-mix, tanpa gambar atau library animasi. Animasinya cuma transform translate3d di compositor, jadi tetap mulus di HP biasa. Ada prefers-reduced-motion juga biar yang sensitif gerakan tetap lihat versi statisnya.

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.

Grid 113 logo klien bikin homepage panjang tiada ujung. Saya rombak jadi marquee CSS murni dua baris: loop -50 persen, gerbang reduced-motion.

TL;DR: Homepage penuh 113 logo klien bikin konten penting kebawa jauh ke bawah. Daripada pasang library JS yang overkill, ganti pake marquee CSS murni: dua track diduplikasi, dianimasikan pake translate3d, dan jebakan margin di tile terakhir diganti padding biar loop mulus. Bonusnya performa ngebut plus aksesibilitas aman lewat aria-hidden dan prefers-reduced-motion.

Satu gambar raksasa dinding logo klien saya pecah jadi 113 tile seragam: segmentasi whitespace, kanvas 220 x 130, lalu grid next/image yang stabil.

TL;DR: Halaman homepage tadinya nge-load satu gambar raksasa berisi dinding logo klien. Penulis motong jadi tile pakai scan baris-kolom piksel putih, samain ukuran via ImageOps.pad, terus render pakai next/image dengan lazy loading. HTTP/2 bikin banyak file gak masalah, dan gerbang mutu nyingkirin tile jelek sampai tinggal 113.