frontend
Catatan teknis seputar web development, DevOps, dan integrasi AI.
134 artikel
- 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 - 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 - 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 - 03.43frontend
Sidebar Empat Grup: Navigasi Ikut Izin, Bukan Jenis Konten
Sidebar admin KotaPortal dipecah jadi empat grup berdasarkan izin: milik sendiri untuk tulis, lintas bidang untuk baca, grup sementara untuk backend belum siap.
TL;DR: Panel admin KotaPortal kini memecah sidebar jadi empat grup yang nunjukkin izin baca atau tulis tiap bidang, tanpa ubah logika auth. Item dikelompokin otomatis dari satu peta kemampuan, plus pill bidang dan banner yang sebut pemilik konten. Navigasi cuma petunjuk, gerbangnya tetap di server, dan semua lolos uji.
#rbac#nextjs#ux - 23.44frontend
Limit 100 Diam-diam Jadi 20, Daftarnya 54
Kontrak limit lebih penting daripada angka yang dikirim klien. Ketika limit 100 diam-diam menjadi 20, daftar 54 kartu hanya menampilkan 20 di layar.
TL;DR: Ada 54 organisasi olahraga. Tapi di layar hanya muncul 20. Perbaikannya adalah mengambil data per halaman penuh.
#react#nextjs#typescript - 22.46frontend
Tiga Halaman 7 Baris, Satu Komponen 471 Baris
Modul Kelembagaan di admin CMS: tiga route server 7-14 baris, satu editor klien 471 baris, dan guard id yang melempar 404 sebelum fetch.
TL;DR: Halaman 404 muncul karena id organisasi tidak valid. Validasi id dilakukan di route sunting sebelum komponen dimuat. Komponen klien melakukan validasi tambahan untuk kenyamanan pengguna.
#nextjs#react#typescript - 20.28frontend
Server yang Menulis Judul, Klien yang Mengisi Daftar
Cangkang halaman, metadata, dan judul datang dari server; daftar, tab, dan pencarian debounce 350 ms hidup di satu island klien.
TL;DR: Halaman informasi olahraga baru dibuat. Server hanya menulis metadata dan judul, isi daftarnya diambil di browser. Judul dan metadata dihasilkan di server untuk mesin telusur.
#nextjs#react#seo - 19.06security
Roster Publik Tanpa Bocor PII: Topeng di API, Bukan di Layar
Menyembunyikan kolom sensitif di UI bukan perlindungan. Topeng yang benar ada di lapisan API, dibuktikan asersi negatif E2E.
TL;DR: Sering banget kolom sensitif disembunyiin di layar tapi API tetap kirim semua data, nah itu bocor bahkan ada namanya di OWASP. Solusinya masking di lapisan API pakai DTO yang cuma isinya data publik, sesuai UU PDP soal pengumpulan yang terbatas. Terus diuji pakai asersi negatif biar kebukti data pribadi nggak pernah nyampe ke browser.
#privacy#security#playwright - 23.52backend
Kontrak Tanggal Polos Bukan Instant pada Form Agenda KotaPortal
event_date pernah meninggalkan browser sebagai instant T00:00:00Z. Kontraknya kini YYYY-MM-DD polos, dan helper klien yang dulu memperbaikinya dihapus.
TL;DR: Field tanggal acara tadinya dikirim sebagai instant UTC tengah malam, jadi tanggalnya bisa geser sehari gara-gara zona waktu. Fix-nya: ubah kontrak API jadi format date polos YYYY-MM-DD, validasi di service, dan tipe Go diganti *string biar decoder nggak protes. Klien lama yang masih kirim instant bakal gagal keras, tapi itu lebih sehat daripada salah simpen diam-diam.
#api#openapi#go