Blog
Catatan teknis seputar web development, DevOps, dan integrasi AI.
508 artikel
- 13.04frontend
Teks Gradient Berubah Jadi Kotak Warna, Shorthand yang Me-Reset
Override light mode pakai shorthand background diam-diam me-reset background-clip:text dari base rule, jadi teks gradient tampil sebagai kotak warna.
TL;DR: Bug gradient text berubah jadi kotak warna muncul karena shorthand background me-reset background-clip:text dari base rule, padahal gradient-nya valid dan tidak ada error. Fix-nya cukup ganti ke longhand background-image supaya properti pemotong tetap hidup. Pelajarannya: pakai background-image untuk override tema, dan jadikan screengrab per tema langkah wajib sebelum push.
#css#frontend#tailwind - 12.44frontend
Ikon Footer yang Hilang Karena Kartunya Jadi Putih
Ikon GitHub dan badge Next.js putih hardcode lenyap begitu kartu footer light mode diubah jadi putih solid. Solusinya var(--foreground).
TL;DR: Commit d6b73b2 bikin kartu footer putih solid, dan ikon SVG yang hardcode putih ikut invisible karena white-on-white. Perbaikannya simpel: semua hex di Footer.tsx diganti var(--foreground), plus varian light gradient neon pakai palet GitHub yang lebih pekat biar kontras di light mode. Pelajarannya: warna yang mengikuti tema wajib pakai variabel, karena hex literal di komponen theme-aware cuma bom waktu.
#css#frontend#tailwind - 12.25frontend
Kartu Transparan yang Menghilang di Light Mode
Kartu bg-card/20 sampai /90 nyaris tak terlihat di light mode karena opacity modifier Tailwind v4 mengkompilasi warna jadi color-mix dengan var token.
TL;DR: Kartu portofolio pakai bg-card dengan opacity modifier Tailwind yang dikompilasi jadi color-mix terhadap variabel --card, jadi hasilnya tergantung tema. Saat latar light mode dibuat terang, campuran putih transparan menyatu dengan latar dan kartu jadi tak terlihat, padahal dark mode aman karena kontrasnya beda. Solusinya override CSS spesifik light mode yang memaksa background solid plus bayangan tipis.
#css#tailwind#frontend - 11.26frontend
Carousel Blog Saya Salah Pola, Daftar Vertikal Menang
Lima artikel tersembunyi di dalam carousel harus di geser satu per satu. Untuk navigasi blog, daftar vertikal terbukti lebih jujur.
TL;DR: Carousel di halaman Blog bikin artikel sulit ditemukan, padahal pola sama berhasil di halaman layanan. Bedanya ada di jenis konten: carousel cocok untuk showcase visual terbatas, tapi daftar artikel butuh navigasi yang bisa dipindai cepat. Solusinya simpel: daftar vertikal lima artikel terbaru, dua puluh baris kode dihapus, masalah selesai.
#ux#mobile#frontend - 11.06ai
OpenHands 2026: Dari CLI Menjadi Platform Agent Canvas
CLI OpenHands resmi deprecated pada 2026. Kenali penerusnya Agent Canvas, cara memakainya dengan benar, dan pola integrasinya dengan Hermes Agent.
TL;DR: Paket pip install openhands sudah deprecated; OpenHands berubah jadi platform Agent Canvas yang kini jadi antarmuka utamanya. Instalasi sekarang lewat npm global atau Docker, dengan mode Docker sebagai sandbox sejati karena akses agent dikunci ke folder PROJECTS_PATH. OpenHands berposisi sebagai outer loop untuk tugas berat berujung pull request, jadi pelengkap Hermes Agent, bukan pesaingnya.
#openhands#agent-canvas#hermes - 10.59frontend
Carousel Mobile Pakai CSS Scroll Snap, Tanpa JavaScript
Lima kartu layanan vertikal di HP kepanjangan. Carousel manual dengan CSS scroll snap jadi jalan tengahnya, tanpa satu baris JavaScript.
TL;DR: Bagian Projects and Services dengan lima kartu vertikal kepanjangan di layar HP, bikin pengunjung berhenti di kartu pertama. Penulis sempat anti-carousel karena riset soal auto-rotate, tapi sadar masalah sebenarnya cuma panjang section di mobile. Solusinya carousel manual pakai CSS scroll snap tanpa JavaScript, dengan kartu berikutnya mengintip di tepi layar sebagai sinyal ada lanjutan.
#css#ux#mobile - 10.46frontend
Lima Capability Cards untuk Halaman Layanan Portfolio
Grid lima kartu layanan tinggal beberapa baris CSS. Yang berat justru menulis deskripsi pendek yang tidak terpotong dan menjaga shadow tetap konsisten.
TL;DR: Halaman layanan saya rombak dari daftar nama proyek jadi lima capability cards. Grid-nya gampang berkat resep CSS auto-fill dari MDN; yang makan waktu justru nulis copy pendek tanpa memotong teks, plus hover dan shadow konsisten sebagai penanda klik. Pelajarannya: tulis isinya dulu, layout menyusul.
#css#ux#frontend - 12.24backend
Invalidasi Cache Redis: Naikkan Versi, Jangan Hapus Key
Ganti cara invalidasi cache jawaban chat AI: bump versi namespace dengan INCR supaya key lama unreachable, bukan dihapus satu-satu.
TL;DR: Jawaban chat AI yang di-cache di Redis jadi basi tiap artikel berubah, dan masalah utamanya bukan SCAN yang blocking melainkan fan-out invalidasi yang rumit. Solusinya versioned key: tiap mutasi nge-bump counter versi via INCR, key lama jadi unreachable dan mati sendiri lewat TTL 24 jam. Bonusnya ada lookup mundur ke versi sebelumnya dan fallback persona saat LLM down.
#redis#caching#cache-invalidation - 11.30tooling
Login DeepSeek Hilang? Pindahkan Sesi, Jangan Rebuild Profil
Profil Camofox kehilangan login DeepSeek? Saya pindahkan cookies HttpOnly dan userToken localStorage ke profil yang sama, tanpa rebuild.
TL;DR: Sesi login DeepSeek di profil Camofox hilang karena ternyata ada dua lapis yang harus dipulihkan sekaligus: cookie HttpOnly di storage-state.json dan userToken di localStorage. Solusinya migrasi, bukan rebuild: ekspor cookies, dedupe by pasangan name-domain, injeksikan token via tiga skrip, plus keepalive polling tiap lima menit. Ingat, storage state itu kredensial plaintext—jaga seperti password dan regenerasi berkala.
#automation#playwright#deepseek