frontend
Catatan teknis seputar web development, DevOps, dan integrasi AI.
117 artikel
- 00.58frontend
Pas Warna Accent Cakep di Dark Mode Tapi Pudar di Light
Accent oranye cakep di dark mode tapi pudar di light. Ganti ke mint CodeRabbit dengan emerald-600 untuk light mode agar lolos uji kontras WCAG.
#tailwind#css#frontend - 00.46frontend
Pas Saya Bosen Sama Chip Tag Abu-abu di Sidebar Sendiri
Chip tag abu flat di sidebar semua semelek bobot. Ganti ke tint primary 10% plus hairline ring inset bikin tag terasa hidup dan bisa diklik.
#tailwind#css#frontend - 00.37frontend
Waktu Saya Benerin Heading Sidebar yang Kayak Bisik-bisik
Heading sidebar 11px uppercase warna redup ternyata paling susah dibaca. Ganti ke 13px bold normal-case plus ikon, kontrasnya naik sesuai WCAG.
#tailwind#css#frontend - 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