frontend
Catatan teknis seputar web development, DevOps, dan integrasi AI.
46 artikel
- 22.34frontend
Pas Restyle Sidebar, Chip Tag Malah Goyang 1 Pixel
Ganti state chip dari border ke background bikin baris goyang 1px. Solusinya: ring inset, karena box-shadow tidak pernah memengaruhi layout.
#tailwind#css#frontend - 18.30frontend
MessageCircle Bukan WhatsApp, Klien yang Ngasih Tahu
Tombol WhatsApp pakai ikon chat generik lucide bikin pengunjung ragu. Solusinya inline SVG brand plus perbaikan kontras tombol.
#react#frontend#seo - 18.16frontend
Grid Dua Kolom di Mobile, Satu Keputusan yang Gue Tarik Balik
Grid 4 kolom dipecah 2 di layar kecil bikin kartu mepet. Solusinya: carousel embla di mobile, grid tetap di desktop, dan DOM jadi dobel.
#nextjs#react#frontend - 16.28frontend
Pindah ke Grid, Pola Show More, dan Satu Trade-off SEO
Refactor halaman services: kolom panjang jadi grid 3 kolom dengan pola Show More. Ada trade-off SEO yang baru disadari setelah cek view source.
#nextjs#react#frontend - 16.22frontend
Badge Sertifikasi Tanpa Gambar Bikin next/image Crash
Field image dijadikan optional, tapi komponen langsung render next/image tanpa ngecek. Halaman About crash dengan error src missing. Ini fallback UI yang bener.
#nextjs#typescript#frontend - 02.36frontend
Tipe TypeScript Nggak Ikut ke JSON, Makanya Ada Kontrak Test
Interface TypeScript ilang saat runtime, jadi JSON konten butuh contract test. Cerita dari commit egperkasa-website: optional property, type erasure, dan it.each Vitest.
#typescript#testing#frontend - 14.21devops
Cloudflare Blokir User-Agent Python-urllib (403 meski key benar)
Cloudflare memblokir User-Agent default Python-urllib dengan 403, padahal API key benar. Set UA kustom di tiap request agen untuk lolos.
#seo#frontend#automation - 14.14frontend
Membedumkan Pipeline Embed Artikel Buatan Agen
Pipeline embed artikel kini render token di dalam <pre>/<code> sebagai kode literal, degradasi ke fallback saat payload rusak, dan re-highlight blok Quarto/Pandoc.
#shiki#nextjs#frontend - 01.38frontend
Kontrak Code Block Shiki dan Short Lang ID
Saya kunci kontrak code block biar artikel tidak merusak render: lang id pendek, alias Shiki jelas, dan blok yang salah bentuk ditolak sebelum publish.
#shiki#nextjs#frontend