frontend

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.

Bentuk kartu perusahaan berubah tiga kali dalam seminggu, tapi kontrak konten bertipe tetap: field opsional plus guard bikin data kosong otomatis singkir.

TL;DR: Penulis bikin kartu perusahaan di Next.js pakai array TS lokal, dan datanya berubah bentuk tiga kali dalam seminggu. Untung field opsional plus guard truthiness bikin data kosong atau placeholder otomatis gak tampil. Nambah kartu ketujuh pun cuma edit file konten, komponennya aman total.

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.

Satu gambar raksasa dinding logo klien saya pecah jadi 113 tile seragam: segmentasi whitespace, kanvas 220 x 130, lalu grid next/image yang stabil.

TL;DR: Halaman homepage tadinya nge-load satu gambar raksasa berisi dinding logo klien. Penulis motong jadi tile pakai scan baris-kolom piksel putih, samain ukuran via ImageOps.pad, terus render pakai next/image dengan lazy loading. HTTP/2 bikin banyak file gak masalah, dan gerbang mutu nyingkirin tile jelek sampai tinggal 113.

React 19 men-flag setiap script tag di komponen, termasuk script anti-FOUC next-themes yang sebenarnya jalan normal. Cara saya membungkamnya di dev saja.

TL;DR: Pas naik ke Next.js 16, next-themes bikin error merah soal script tag di komponen React, padahal dark mode jalan normal. Ternyata cuma false positive, script anti-FOUC-nya tetap jalan, React 19 emang warning semua script inline tanpa mikir konteks SSR. Solusinya gampang, tinggal filter console.error khusus dev buat abaikan pesan itu, kayak trik shadcn/ui.

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.

Migrasi 21 URL WordPress lama ke Next.js di Vercel tanpa bocor SEO: peta redirect 308 di vercel.json agar trafik lama tidak 404 dan sinyal kanonis tetap utuh.

TL;DR: Gue migrasi WordPress ke Vercel tapi 21 URL lama jadi 404 dan bikin link equity bocor. Akhirnya gue bikin 21 redirect permanen 308 di vercel json soalnya diproses di Edge dan nggak bebani aplikasi. Gue juga benerin canonical yang sebelumnya muter balik biar nggak looping dan Google bisa baca kanonisnya dengan jelas.

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.

Dua route handler llms.txt untuk situs bilingual Next.js App Router, konten digenerate dari modul yang sama dengan halaman supaya nggak drift.

TL;DR: Biar situsnya bilingual, gw bikin dua route handler buat serve llms.txt per bahasa, bukan file statis yang cuma bisa satu bahasa. Isinya auto-generate dari data yang sama persis sama halaman, jadi dijamin nggak pernah beda cerita alias zero drift. Search engine sih masih cuek, tapi coding agent dan tool IDE tuh konsumen utamanya.