css

CSS max-width bikin hint sizes next/image menjanjikan slot vw yang salah. Perbaiki pakai nilai piksel biar srcset memilih kandidat yang pas.

TL;DR: Ganti ukuran gambar pakai CSS doang ternyata nggak cukup, browser masih ngunduh file gede gara-gara hint sizes masih janji 40vw. Solusinya jujur aja tulis nilai piksel langsung di sizes biar sinkron sama clamp-nya. Sekarang tiap utak-atik gambar, cek tab Network udah jadi langkah wajib.

Peta kantor glowing plus garis ngalir tanpa Mapbox: satu SVG overlay viewBox 0-100, preserveAspectRatio none, animasi CSS yang aman buat reduced-motion.

TL;DR: Daripada pasang Mapbox buat peta dekoratif, cukup tumpukin SVG overlay di atas next/image pakai viewBox "0 0 100 100" dan preserveAspectRatio="none", jadi koordinat titiknya persen dan ikut meregang pas resize. Garis alir sama denyut titik murni CSS, nol JavaScript. Kalau nanti butuh akurasi beneran, baru ganti ke library peta.

Metadata tak terverifikasi dibuang; yang tersisa nama, sektor, deskripsi, plus tiga detail teknis yang menjaga kartu tetap aksesibel.

TL;DR: Artikel ini cerita soal memangkas kartu perusahaan di halaman about: metadata yang nggak bisa diverifikasi dihapus biar nggak jadi utang editorial. Pembagi antar-kartu dibuat pakai pseudo-element CSS, jadi DOM tetap bersih. Ikon Lucide disembunyikan dari screen reader lewat aria-hidden, dan efek hover dinolkan buat pengguna yang aktifkan prefers-reduced-motion.

Satu daftar kartu, dua baris: baris kedua keluar container pakai w-screen dan margin calc, tanpa memicu scrollbar horizontal.

TL;DR: Pasang w-screen buat full bleed tuh sering muncul scrollbar horizontal, soalnya 100vw dihitung sebelum scrollbar, jadi kelebihan beberapa piksel. Solusinya pakai ml-[calc(50%-50vw)] plus overflow-hidden di section pembungkusnya, bukan di body biar sticky header nggak mati; overflow: clip lebih aman lagi. Markup kartu cukup sekali lewat renderCard IIFE, slicing doang per barisnya.

Foto latar hero plus overlay saya ganti satu div CSS: gradient diagonal dari token warna, drift 28 detik, dan tetap statis untuk pengguna reduced-motion.

TL;DR: Dia hapus foto hero di situs Next.js dan ganti pola garis diagonal murni CSS pakai linear-gradient plus color-mix, tanpa gambar atau library animasi. Animasinya cuma transform translate3d di compositor, jadi tetap mulus di HP biasa. Ada prefers-reduced-motion juga biar yang sensitif gerakan tetap lihat versi statisnya.

Grid 113 logo klien bikin homepage panjang tiada ujung. Saya rombak jadi marquee CSS murni dua baris: loop -50 persen, gerbang reduced-motion.

TL;DR: Homepage penuh 113 logo klien bikin konten penting kebawa jauh ke bawah. Daripada pasang library JS yang overkill, ganti pake marquee CSS murni: dua track diduplikasi, dianimasikan pake translate3d, dan jebakan margin di tile terakhir diganti padding biar loop mulus. Bonusnya performa ngebut plus aksesibilitas aman lewat aria-hidden dan prefers-reduced-motion.

Header navy gelap terasa berat di light mode. Solusinya: taruh 92% alpha di dalam token --color-header, biar backdrop-blur bekerja tanpa override per komponen.

TL;DR: Awalnya gue coba fix header light mode lewat bg-white/60 per komponen, malah ribet karena semua elemen harus di-override. Solusinya ternyata lewat token: bikin --color-header dengan nilai alpha di tokens.css, ditambah backdrop-blur-md buat efek kaca buram. Sekali ubah token, light sama dark mode langsung konsisten semua, cuma konsekuencinya navbar nggak ikut berubah kalau --background diganti total.

Satu baris import CSS yang tertinggal saat root layout pindah ke app/[locale] bikin semua halaman tanpa styling sama sekali — dan build tetap hijau.

TL;DR: Habis mindahin layout ke folder [locale] buat i18n, tampilan web jadi berantakan kayak HTML polosan. Ternyata penyebabnya sepele, lupa mindahin import globals css yang isinya @import tailwindcss jadi stylenya nggak keload sama sekali. Build tetap lolos tanpa error jadi ngecoh, padahal cukup cek grep globals css sebelum commit biar nggak buang waktu debugging.

Sidebar sticky yang gagal tanpa satu baris error: stretch flexbox makan ruang scroll, offset top ketutup header, dan ancestor ber-overflow.

TL;DR: Sticky sidebar gue nggak jalan gara-gara tiga hal: flexbox stretch bikin parent sedinggi viewport, top-0 nyangkut di balik header fixed, dan ada ancestor overflow-hidden yang motong. Fix-nya cuma items-start plus offset 55px yang disesuaikan tinggi header. Sekarang tiap pasang sticky, gue selalu cek inset, ruang scroll parent, dan rantai ancestor-nya.