Blog
Catatan teknis seputar web development, DevOps, dan integrasi AI.
500 artikel
- 19.14frontend
Memindahkan Section Antar Halaman di Next.js App Router
Section UI tidak pernah pindah sendirian di App Router: jalur fetch, fallback, dan pembersihan jalur data mati harus ikut berpindah.
TL;DR: Section hero lama dipindahkan ke halaman pariwisata. Data section tidak ikut pindah karena dilapari oleh fetch di halaman utama. Fetch dipindahkan ke halaman pariwisata untuk memperbaiki masalah.
#nextjs#react#app-router - 15.59frontend
Grading Overlay di Hero: Tiga Lapis Penjaga Kontras Teks
Headline putih di atas foto hero serasa lenyap. Solusinya tiga lapis overlay: dim, scrim berarah, dan glow radial, plus text-shadow berlapis.
TL;DR: Teks di foto hilang karena kontras. Ditambahkan lapis overlay hitam transparan. Lapis itu membuat teks terbaca lagi.
#css#accessibility#wcag - 14.50frontend
Embed YouTube di Hero: Kenapa Muncul Batang Hitam dan Solusinya
Iframe YouTube di hero 1440x420 memunculkan dua batang hitam tebal. Penyebabnya di sisi player; tiga solusinya: backdrop grid, cover-crop, dan atur rasio.
TL;DR: Hero slider di proyek Next.js tidak pas karena rasio video YouTube. Rasio 16:9 tidak bisa dilanggar, hanya bisa diisi atau dipotong. Solusi yang dipilih adalah memotong kelebihannya dengan overflow hidden.
#css#youtube#tailwind-css - 14.19frontend
Filter Chip yang Diam-Diam Membuang Baris
Filter sisi klien di atas endpoint terpaginasi menjatuhkan baris yang tak pernah di-fetch. Limit 500, aria-pressed, dan sort yang sengaja tidak ada.
TL;DR: Filter di halaman daftar organisasi CMS bermasalah. Filter hanya melihat satu halaman dan menghilangkan baris yang tidak terlihat. Batas fetch dinaikkan menjadi 500 baris untuk mengatasi masalah ini.
#javascript#ux#accessibility - 14.15database
Tiga Lapis Kontrak, Satu Typo dari HTTP 500
Validasi aplikasi dan skema openapi menerima tipe baru, kolom ENUM MySQL menolaknya. Error 1265 baru terlihat saat INSERT.
TL;DR: Aplikasi mengalami error 1265 dari MySQL. Error ini disebabkan oleh perbedaan tipe data di tiga lapis yang berbeda. Perlu disinkronkan agar aplikasi berjalan lancar.
#mysql#schema#database-migration - 13.06frontend
Nama Grup Navigasi yang Hanya Masuk Akal bagi Penulis Kodenya
Nama grup navigasi yang mengikuti batas modul hanya masuk akal bagi penulis kodenya. Regroup mengikuti tugas operator.
TL;DR: Sidebar akun operator bidang terlalu panjang dan tercampur. Operator harus memahami cara sistem bekerja untuk menggunakan sidebar dengan efektif. Perancang harus mempertimbangkan mental model pengguna saat merancang sistem.
#ux#information-architecture#navigation - 12.59backend
Formulir staf bidang lain terbuka, padahal role check sudah ada
Role check menjawab siapa boleh mengelola staf, bukan baris mana yang boleh disentuh. Guard kepemilikan bidang menutup celah itu.
TL;DR: Staf bidang lain bisa diedit oleh QA. Role check tidak cukup untuk mengelola staf. Perbaikannya dengan menambahkan guardTargetBidang.
#security#authorization#owasp - 10.49backend
Guard Sebelum Payload: Tulis Persyaratan Dokumen Global-Only
Checklist dokumen lintas modul bisa ditulis siapa pun yang punya izin tulis layanan. Guard kini menolak sebelum payload dibaca, dan penolakannya diam.
TL;DR: Akun uji bisa mengubah dokumen. Guard ditambah untuk cek akses. Bidang-scoped ditolak sebelum validasi.
#go#rbac#api - 10.35frontend
Tautan Mati di Sidebar Admin: Menu yang Selalu 403 Harus Dibuang
Audit nav menemukan dua menu yang selalu berakhir 403 dan tujuh item yang masih berkata baca saja. Keduanya dibuang, dan ketiadaannya ikut diuji.
TL;DR: Sidebar admin error. Menu navigasi tidak berfungsi. Perbaikan dilakukan di frontend.
#rbac#ux#nextjs