javascript
Catatan teknis seputar web development, DevOps, dan integrasi AI.
8 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 - 00.05frontend
Tanggal di Form Mundur Satu Hari: Payload Ikut Jenis Datanya
Input date mengirim string, payload lama membawa instan UTC. Begini satu hari hilang begitu saja dan kontrak yang menahannya.
TL;DR: Tanggal input mundur satu hari gara-gara toISOString ngubah midnight WIB jadi UTC, jadi 20 Desember nyasar jadi 19 di payload. Salahnya bukan backend, tapi cara lama yang bungkus string input jadi objek Date lokal dulu. Fixnya simpel: tempel T00:00:00Z eksplisit ke string input biar tanggalnya utuh pas round-trip.
#javascript#golang#api - 20.57frontend
Satu Baris Catch yang Menghapus Sesi Admin
Kegagalan API dan sesi kedaluwarsa diperlakukan sama oleh satu catch, sampai server restart meng logout semua admin sekaligus.
TL;DR: Bug satu baris bikin semua admin terlempar ke login tiap server restart, gara-gara satu catch nganggep outage sama kayak token kedaluwarsa. Solusinya simpel: purge token cuma kalau responsnya 401, sisanya ditahan pakai banner retry. Lima unit test ngunci klasifikasinya, jadi logout otomatis nggak kejadian cuma karena server sempat down.
#javascript#http#error-handling - 02.37frontend
Komponen React Dijadikan Web Component Biasa
Section group-network dipisah dari about-teaser, terus kepikiran buat portabel: dibangun ulang jadi custom element shadow DOM yang bisa ditempel di mana saja.
TL;DR: Jadi penulis refaktor komponen group-network dari React jadi web component native. Ternyata JSX nggak bisa langsung nempel di HTML biasa, butuh build step dan React runtime. Solusinya bikin custom element pakai HTMLElement, Shadow DOM, sama template, jadi komponennya portable dan bisa dipakai tim lain tanpa React.
#web-components#javascript#react - 11.33frontend
Locale Switcher Next.js yang Nggak Bikin Visitor Tersesat
Bikin locale switcher Next.js App Router yang preserve current path pakai usePathname dan regex swap, plus active state accessible dengan aria-current.
TL;DR: Locale switcher yang cuma link ke homepage bikin visitor kehilangan konten pas ganti bahasa. Solusinya pakai usePathname plus regex buat swap prefix locale, jadi /en/about tetep nyampe ke /id/about. Jangan lupa aria-current buat active state, dan kalo project makin ribet, pindah aja ke next-intl.
#nextjs#i18n#accessibility - 17.16devops
Tiga Fix untuk Dashboard Monitoring Server yang Noise
Dashboard monitoring server jadi noise saat item perhatian puluhan tanpa organisasi. Tiga fix kecil mengubah grid datar jadi workflow yang bisa dipakai.
TL;DR: Dashboard monitoring punya terlalu banyak item perhatian di satu grid datar, jadi yang kritis susah ketemu. Penulis bikin tiga fitur: search dengan debounce di API, tombol filter severity, dan grouping item per server yang bisa di-collapse berdasarkan severity terburuk. Ketiganya bikin workflow jadi cepat, langsung keliatan masalah kritis tanpa scroll panjang.
#monitoring#ux#devops - 02.40frontend
DOM Chat AI Cuma Nyimpen Setengah Jawaban
Scraping jawaban chat AI dari DOM cuma dapat setengah karena virtualisasi. Jalur utuhnya: klik Copy, baca clipboard, plus kontrak output ke model.
TL;DR: Chat modern pakai virtualisasi, jadi DOM cuma snapshot yang terus berubah dan scraping innerText selalu kepotong. Solusinya klik tombol Copy lalu baca clipboard, dilapis accessibility tree dan innerText, dengan polling di tab baru biar stabil. Paling murah, kasih kontrak ke model: bungkus jawaban dalam blok kode ditutup sentinel ===SELESAI===.
#automation#playwright#llm - 23.59frontend
Code Block Tampil Dua Kali: Kenapan Regex JavaScript Bisa Race
Bug code block dobel di blog: regex /g di level module punya lastIndex yang saling ditimpa antar panggilan async paralel. Solusi delapan baris.
#javascript#regex#shiki