Bagaimana laman ini dibuat
ArteyuLabs jual buku kerja Excel yang betul-betul jalan, jadi laman ini dibuat macam satu buku kerja juga. Ini nota reka bentuknya, termasuk bahagian yang gagal.
Konsep
Laman ini ialah buku kerja: setiap halaman satu sheet, setiap angka satu sel hidup, dan setiap kenyataan boleh disemak sampai ke failnya.
Versi lama hanya merujuk Excel — sebuah bar formula di sini, tab sheet di sana — di atas susun atur pemasaran biasa. Versi ini cuba menjadi Excel itu sendiri. Perbezaannya paling jelas di dua tempat: sel putih dalam hero yang memang boleh ditaip, dan senarai inventori yang menggantikan dinding 48 kad.
Warna
Setiap pasangan warna di bawah kami ukur pada latar sebenar, selepas semua lapisan telus diambil kira — bukan dianggar. Jika nisbah jatuh bawah 4.5:1 untuk teks kecil, ia tak dihantar.
Satu perangkap dah kami catat dari awal: emas pekat di atas krim hanya 2.4:1. Ia tetap terlepas masuk ke satu meterai kecil — audit automatik yang menangkapnya, bukan mata kami.
Huruf
Dua muka taip sahaja. Plus Jakarta Sans untuk suara, JetBrains Mono untuk data. Peraturannya ringkas: jika ia ayat atau perasaan, Jakarta; jika ia fakta atau nombor, mono. Pandang sekilas pun anda patut dapat kenal bahagian mana yang data.
Audit mendapati dua belas daripada tiga belas halaman menggunakan h1 32px yang sama rata. Kini setiap halaman bermula pada 49.6px; halaman utama sahaja mendapat 66.4px.
Gerakan
Enam gerakan, setiap satu bernama. Jika sesuatu animasi tak dapat dinamakan sebagai salah satu daripadanya, ia tak dibenarkan. Nama Melayu ini bukan hiasan — ia memaksa setiap gerakan menerangkan sebab kewujudannya.
Peraturan paling ketat: teks tak pernah dipaparkan separuh telus. Itu terpakai pada keadaan rehat dan pada setiap bingkai setiap animasi.
Peraturan itu datang dari satu bug sebenar. Reka bentuk lama menahan baris senarai langkah pada kelegapan 0.25 sementara menunggu skrol, jadi teks badan jatuh ke kira-kira 1.35:1. Itu gagal ujian kontras, dan itulah sebab skor kebolehcapaian tersangkut pada 96.
Telefon
Dulu versi telefon cuma versi desktop yang disempitkan jadi satu column. Kami ukur pada skrin 320px: dashboard yang boleh ditaip itu jatuh terus ke bawah skrin pertama, label di dalamnya mengecil sampai 8.3px, dan menu utama duduk di penjuru atas kanan — tempat paling susah dicapai ibu jari.
Sekarang telefon ikut apa yang Excel dalam telefon buat. Tab sheet turun ke bawah, dalam capaian ibu jari. Setiap bab bawa name box yang melekat di atas, jadi anda sentiasa tahu bahagian mana yang anda baca. Baris tajuk lejar beku macam freeze panes — desktop pun tak ada itu. Dashboard naik ke atas: anda tengok mesin itu bekerja sebelum perlu scroll.
Prestasi
Dua dependency sahaja: react dan react-dom. Tiada Tailwind, tiada library animasi, tiada WebGL. Semua itu teknik yang elok. Cuma pembeli di sini guna telefon Android pertengahan atas 4G, dan sesiapa pun boleh nampak hebat kalau ada GPU dan 800KB JavaScript.
Peningkatan terbesar bukan datang daripada JavaScript. Halaman utama tersekat pada susun atur, bukan pada skrip: 1,225ms untuk gaya dan susun atur berbanding 259ms untuk skrip. Menukar grid 48 kad kepada senarai inventori memendekkan halaman daripada 10,646px kepada bawah 6,500px, dan Speed Index turun daripada 4.5s kepada 3.1s.
Semua angka ini kami ukur pada 11 Ogos 2026, guna Lighthouse mudah alih atas binaan sebenar.
Yang kami buang
Panduan yang mendakwa semuanya berjalan lancar tak berguna. Ini yang gagal, dan sebabnya.
Rel nombor baris di tepi telefon
Column ruler A·B·C·D memang tak sesuai di telefon, jadi kami rancang nak ganti dengan nombor baris di tepi kiri. Atas kertas pun rancangan itu dah jadi dua benda buat satu kerja: name box yang melekat itu dah beritahu anda di mana. Lagi satu, nombor baris atas perenggan bukan nombor sebenar — ia rekaan, dan itu benda yang kami tak buat. Jadi rel itu tak pernah ditulis, dan name box kekal.
Baris KPI yang diswipe dalam hero
Rancangan asal: tiga sel KPI jadi satu baris yang boleh diswipe ke tepi, macam anda scroll column dalam Excel telefon. Sebelum sempat ditulis, kami perasan ia akan rosakkan satu-satunya benda yang hero ini nak tunjuk — anda taip dalam Jualan, dan Untung berubah. Atas rel swipe, Untung akan berada di luar skrin tepat pada saat ia berubah. Jadi KPI jadi satu column sel ke bawah. Telefon memang satu column; itu bacaan yang lebih tepat, dan itu yang jalan.
Tab sheet yang boleh ditekan dalam hero
Tab STOK dan INVOIS sepatutnya menukar panel kecil. Untuk itu kami memerlukan baris data contoh daripada sheet berkenaan, dan fail data dalam projek ini tak menyimpannya. Mereka-reka baris sendiri pula melanggar peraturan kami sendiri. Jadi tab itu kami lukis semula: hanya DASHBOARD kelihatan sebagai tab, dan selebihnya rata supaya jelas ia cuma label.
Lapisan WebGL untuk kesan hebat
Brief benarkan untuk peranti yang mampu, tapi kami tak guna. Detik besar di laman ini semuanya idea, bukan grafik: sel mengira sendiri, senarai terisi baris demi baris, angka tunjuk fail sumbernya. Tiada satu pun perlukan GPU. Kami ada baki bajet dan kami biarkan ia tak terpakai, sebab menambah kesan berat semata-mata untuk tunjuk kami mampu cuma jadi hiasan.
Peralihan halaman — hampir terlepas
BUKA tercatat namanya dalam dokumen reka bentuk dan ditanda siap dalam senarai semak, tapi sebenarnya tak pernah dibuat. Pusingan kritik ketiga yang menangkapnya. Kosnya sepuluh baris CSS dan sifar JavaScript.
Apa yang masih belum siap
- Ujian import telefon untuk fail Excel belum kami jalankan. Perkara ini kami nyatakan pada setiap halaman produk, bukan disembunyikan.
- Dua puluh satu daripada 25 siri printable setakat kulit sahaja. Halaman Studio menyusunnya mengikut status sebenar, bukan mengikut mana yang cantik.
- Sembilan belas daripada 20 sistem belum dibuka untuk jualan. Tiada satu pun boleh dibeli sebelum ia betul-betul boleh dihantar.