tailwind

Tiga commit restyling malam itu arahnya satu: buang ring, buang wrapper ikon, hapus strip sertifikasi yang dobel. Difnya negatif.

TL;DR: Pas restyle grid layanan, penulis sadar wrapper ikon cuma kebiasaan lama, jadi dihapus dan ikon Lucide dirender langsung dengan ukuran lebih besar plus stroke tipis biar lebih ringan. Strip sertifikasi ISO yang diduplikasi dari hero ikut dihapus, 34 baris kode lenyap. Moralnya, restyling yang sukses itu soal penghapusan; hiasan nggak perlu cuma jadi gangguan.

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.

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.

Header navy gelap terasa berat di light mode. Solusinya: taruh 92% alpha di dalam token --color-header, biar backdrop-blur bekerja tanpa override per komponen.

TL;DR: Awalnya gue coba fix header light mode lewat bg-white/60 per komponen, malah ribet karena semua elemen harus di-override. Solusinya ternyata lewat token: bikin --color-header dengan nilai alpha di tokens.css, ditambah backdrop-blur-md buat efek kaca buram. Sekali ubah token, light sama dark mode langsung konsisten semua, cuma konsekuencinya navbar nggak ikut berubah kalau --background diganti total.

Satu baris import CSS yang tertinggal saat root layout pindah ke app/[locale] bikin semua halaman tanpa styling sama sekali — dan build tetap hijau.

TL;DR: Habis mindahin layout ke folder [locale] buat i18n, tampilan web jadi berantakan kayak HTML polosan. Ternyata penyebabnya sepele, lupa mindahin import globals css yang isinya @import tailwindcss jadi stylenya nggak keload sama sekali. Build tetap lolos tanpa error jadi ngecoh, padahal cukup cek grep globals css sebelum commit biar nggak buang waktu debugging.

Sidebar sticky yang gagal tanpa satu baris error: stretch flexbox makan ruang scroll, offset top ketutup header, dan ancestor ber-overflow.

TL;DR: Sticky sidebar gue nggak jalan gara-gara tiga hal: flexbox stretch bikin parent sedinggi viewport, top-0 nyangkut di balik header fixed, dan ada ancestor overflow-hidden yang motong. Fix-nya cuma items-start plus offset 55px yang disesuaikan tinggi header. Sekarang tiap pasang sticky, gue selalu cek inset, ruang scroll parent, dan rantai ancestor-nya.

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.