design

Mega panel video butuh tiga lapisan URL: path identitas, query state UI, hash timestamp. State video butuh sync manual ke hash. Preload metadata + poster, bukan auto. Prefetch route matikan auto, pakai hover.

TL;DR: Gunakan path URL untuk ID video, query buat state panel, dan hash (#t=) buat timestamp video. Set video preload='metadata' plus poster biar hemat bandwidth, prefetch route pakai hover manual bukan auto. Sinkronin manual currentTime ke hash pas seek biar bookmark dan share tetap work.

Migrasi test ke paket eksternal memaksa keputusan ekspor: tiga pintu antara tulis-ulang jalur publik, ekspor nyata, dan export_test.go.

TL;DR: Gak nyangka, mindahin test ke paket luar ternyata bisa jadi audit API gratis. Pas migrasi, fungsi internal yang minta diekspor justru nunjukin logika yang selama ini kependeman padahal berguna, kayak deteksi duplikat sama sanitasi XSS. Ada tiga jalan: tulis ulang test lewat jalur publik, ekspor beneran kalau emang bernilai, atau akalin pake export_test.go.

Mengunci intent desain bukan dengan dokumentasi tebal, tapi dengan unit test yang memaksa class Tailwind tetap sesuai aturan token.

TL;DR: Abis restyle komponen, desainnya rapi bentar terus balik berantakan lagi gara-gara ketimpa kode dari branch lain. Bikin dokumen setebel apapun ternyata nggak ngaruh, akhirnya gue kunci pola class-nya pake unit test 129 baris yang ngecek string HTML. Jadi kalau ada yang nggak sengaja balikin style lama kayak bg-white atau rounded-xl, test-nya langsung meledak dan ketahuan di CI.

Lima subpage terasa seperti website lain setelah homepage didesain ulang. Solusinya bukan mempercantik satu per satu, tapi memindahkan bahasa desain ke komponen shared.

TL;DR: Awalnya homepage cakep tapi halaman lain kayak website beda jadi berantakan. Ternyata solusinya simpel cukup pakai dua komponen shared page-hero dan page-cta biar semua halaman konsisten. Ganti token sekali semua ikut keubah, kartu jadi lebih clean tanpa border tebal dan tombol pill-nya seragam.

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.

Panel konteks kanan workspace AI dilepas dari bingkai kartu: satu border kiri sebagai divider, mengikuti bahasa desain sidebar.

TL;DR: Panel konteks di kanan chat workspace berubah dari kartu melayang jadi panel yang nempel rata ke tepi viewport. Diff-nya cuma satu baris class, tapi perannya bergeser dari bingkai empat sisi jadi divider vertikal di sisi kiri. Pelajarannya: elemen yang nempel ke tepi layar nggak butuh bingkai, cukup satu garis pemisah ke sisa layout.

Mencerahkan token background menggeser seluruh halaman. Navbar butuh rasa putih khas chrome, jadi warna literal plus dark variant.

TL;DR: Navbar transparan terlihat kotor di light mode karena memakai token --background yang dibagi dengan seluruh halaman. Solusinya: warna literal bg-white untuk light mode, sedangkan dark mode tetap pakai token lewat variant dark:. Trade-off-nya navbar tak lagi ikut tema bila token diubah, tapi jalur migrasi ke token khusus tinggal satu baris.