Blog

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.

Mengganti [PLACEHOLDER] dengan fakta yang bisa diverifikasi, dan kenapa teks generik justru dekat dengan sinyal spam Google.

TL;DR: Isi kartu profil masih placeholder, jadi gw sempat pengen generate teks marketing generik biar kelihatan penuh. Ternyata itu berbahaya, karena Google nganggep konten generik massal sebagai scaled content abuse alias spam. Solusinya mending riset fakta nyata tiap perusahaan, walau singkat, soalnya data valid jauh lebih bernilai daripada teks kosong yang nempel.

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.

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.