Seri One Day One Code.

Ada banyak ide kecil yang terlalu sayang untuk dilupakan tapi terlalu kecil untuk jadi project besar: bisa nggak ya bikin 100.000 jerami di browser? Seberapa jauh landing page bisa terasa mewah tanpa satu pun foto?

Daripada ide-ide itu cuma lewat, aku kumpulkan dalam satu seri: One Day One Code.

Apa Itu One Day One Code?

Konsepnya sesuai namanya: satu hari, satu project. Setiap project adalah eksperimen web kecil yang fokus ke satu ide — sebuah game, sebuah landing page, atau sebuah media belajar.

Semuanya aku kumpulkan di satu repo, FannyDevz/one-day-one-code , lengkap dengan index.html di root yang berfungsi sebagai katalog visual: ada screenshot tiap project, filter kategori dan tag, pencarian, tampilan grid atau list, sampai modal untuk membaca README masing-masing project.

Project-project-nya aku kelompokkan jadi tiga kategori:

• 🎮 Game — game dan mainan interaktif, dari 3D/WebGL sampai puzzle iseng.
• 🎬 Landing Page — halaman presentasi dengan animasi dan estetika tertentu.
• 🎓 Education — lab dan game pembelajaran interaktif.

Aturan Mainnya

Supaya “satu hari” tetap realistis, aku pasang beberapa aturan:

1. Satu folder, satu project, berdiri sendiri. Nggak ada dependensi antar project, nggak ada monorepo tooling. Foldernya diberi nomor urut: 01. haystack-hunt, 02. itachi-landing-page, dan seterusnya.
2. Tanpa build step. Semuanya HTML, CSS, dan JavaScript statis yang bisa langsung dibuka di browser. Kalau butuh library, ambil dari CDN — seperti Three.js di Haystack Hunt.
3. Wajib ada README.md dan preview.png. README menjelaskan fitur, kontrol, dan cara menjalankan. Screenshot-nya diambil otomatis dengan Puppeteer supaya ukurannya seragam.
4. Didaftarkan di katalog. Tiap project baru masuk ke array PROJECTS di index.html root dan ke tabel di README utama.

Aturan “tanpa build step” ini ternyata yang paling berpengaruh. Tanpa framework, tanpa bundler, aku terpaksa menulis sendiri hal-hal yang biasanya tinggal npm install — dan justru di situ bagian reinventing the wheel-nya.

Daftar Build

Diurutkan berdasarkan tanggal di halaman project masing-masing.

Juni 2026 — Mulai dari Game dan Animasi

• Haystack Hunt — game 3D mencari jarum di tumpukan jerami, digali helai demi helai, dengan Three.js.
• Uchiha Itachi Landing Page — landing page sinematik yang memutar urutan frame berdasarkan posisi scroll, lengkap dengan efek WebGL dan suara petir buatan Web Audio API.
• Jangan Lupa Titik Koma — puzzle mencari satu baris kode yang lupa titik koma di antara ribuan baris lainnya.

Juli 2026 — Tiga Karya Sayembara

• Lab Coding Blok — lab block-coding visual: susun blok Maju, Ulangi, Jika jadi program, lalu jalankan. 5 level, 17 tantangan.
• Gizi Seimbang — game drag-and-drop menyusun piring bergizi seimbang dengan perhitungan kalori dan makro secara langsung, berbasis data TKPI.
• Pasar Saham Virtual — simulasi investasi dengan modal virtual Rp 10 juta melewati 5 ronde berita ekonomi, dikemas sebagai SCORM 1.2 dan PWA.

Ketiga build ini awalnya dibuat untuk sayembara konten pembelajaran interaktif pendidikan kesetaraan dari Direktorat PNFI, dan dua di antaranya — Lab Coding Blok dan Pasar Saham Virtual — terpilih sebagai pemenang. 🏆 Ceritanya aku tulis lengkap di Konten Digital Pendidikan Kesetaraan . Setelah sayembaranya selesai, ketiganya aku rapikan dan masukkan ke koleksi ini.

Agustus 2026 — Musim Landing Page

• Foliage Coffee — landing page hangat bergaya editorial untuk kedai kopi fiktif, dengan hero cangkir melayang dan animasi saat scroll.
• Luminary Studio — landing page gelap dan berani untuk agensi kreatif, dengan hero gradien dan angka statistik yang menghitung naik.
• VELOURA — landing page rumah mode fiktif ala majalah; semua visualnya dibuat dari CSS dan SVG, tanpa foto.
• Aurum — landing page restoran fine dining bernuansa hitam-emas, lengkap dengan tasting menu dan form reservasi.

September 2026 — Makin Beragam

• IRONFORGE Gym — landing page gym yang “berisik”: tipografi besar, sudut-sudut miring, paket harga, dan jadwal kelas.
• Axion AI — landing page SaaS untuk asisten AI fiktif, dengan mockup dashboard yang dibuat murni dari HTML dan CSS.
• Check Khodam — mainan web iseng dari meme “cek khodam”: ketik nama, dapat khodam acak, dan riwayatnya tersimpan di localStorage.
• Watch Store — toko jam tangan online dengan Laravel, Inertia , dan React, dari katalog sampai checkout dan pembayaran Midtrans. Yang ini sengaja keluar dari zona “satu file statis” — satu-satunya yang butuh server.

Pelajaran Favorit

Dari semua build di atas, beberapa pelajaran yang paling nempel:

• Instancing menyelamatkan performa. Di Haystack Hunt, tumpukan jeraminya bisa berisi sampai 100.000 helai. Membuat satu mesh per helai jelas nggak mungkin, jadi aku belajar instanced rendering di Three.js — plus trik seeded random supaya scene sebesar itu bisa disimpan dan dipulihkan dengan data yang sangat sedikit.
• Scroll adalah timeline. Itachi Landing Page mengajarkan cara memetakan posisi scroll ke urutan frame dengan mulus, menulis shader asap sendiri, dan membuat suara petir dari noise yang difilter — tanpa library animasi.
• Keterbatasan bikin kreatif. Di VELOURA dan Axion AI, aku sengaja nggak pakai gambar sama sekali. Ternyata tipografi, spasi, SVG, dan CSS sudah cukup untuk membangun suasana — bahkan mockup dashboard lengkap dengan grafiknya.
• Menahan diri itu skill. Foliage Coffee dan Aurum sama-sama mengajarkan hal yang sama: kesan premium datang dari spasi, skala tipografi, dan palet yang disiplin, bukan dari efek sebanyak-banyaknya.
• Detail kecil memberi kesan polish. Angka statistik yang menghitung naik dan elemen yang muncul pelan saat di-scroll — hal kecil yang membuat halaman statis terasa hidup.
• Humor developer itu universal. Jangan Lupa Titik Koma cuma memelintir sedikit rasa frustrasi yang semua programmer pernah alami, dan itu sudah cukup jadi game.

Selanjutnya

Seri ini belum selesai. Beberapa hal yang ingin aku lanjutkan:

• Tetap menambah build baru, dengan aturan yang sama: satu folder, satu ide, langsung jalan di browser.
• Lebih banyak variasi kategori. Watch Store membuktikan seri ini juga bisa jadi tempat latihan aplikasi yang lebih utuh, bukan hanya halaman statis.
• Merapikan katalog supaya setiap build punya halaman project sendiri di sini — termasuk Check Khodam yang belum punya.

Kalau penasaran, semua project-nya bisa dilihat di halaman Projects atau langsung di repo GitHub-nya .