Langsung ke konten
AFM Studio
  • Halaman

    AFM Studio
  • Karya
  • Lab
  • Tentang
  • CV
  • Kontak
  • Proyek

    AksaraPerpustakaan pengetahuan Otorita IKN yang bisa dicari, dengan server memeriksa akses setiap pembaca di tiga tingkat
  • Daily TaqwaSistem presensi salat anti-manipulasi untuk ~2.000 pegawai OIKN di Masjid Negara IKN
  • Lantara v2Mesin perizinan Otorita IKN tempat administrator menambah jenis izin baru dari layar, tanpa developer
  • eKiosk IKNDua ruang kendali untuk Nusantara: konten kios dan pelacakan bus live dengan estimasi kedatangan yang menilai dirinya sendiri
  • E-Monev IKNPlatform pemantauan pembangunan Nusantara selama 23 tahun, melacak progres triwulan setiap unit terhadap 24 KPI
  • JDIH OIKNPortal dokumen hukum publik OIKN, dengan alur penerbitan terkendali dan ringkasan AI yang tidak pernah keluar dari server
  • Jejak PenanamanAplikasi absen acara penanaman pohon IKN yang membuktikan peserta hadir di lokasi lewat selfie ber-geofence
  • Dashboard SAKTIPipeline malam dan dashboard yang menggantikan unduhan anggaran manual di keenam satker OIKN
  • DoseRxKalkulator dosis untuk 127 obat yang membulatkan dosis ke tablet dan sirup yang dijual apotek Indonesia
  • CubiqPelatih speedcubing dengan timer setara kompetisi dan solver buatan sendiri untuk 8 puzzle utama
  • ScimotionPerpustakaan sains interaktif berisi 86 artikel, masing-masing dijelaskan bersama animasi yang bisa dikendalikan pembaca
  • WA Daily Scrum BotBot WhatsApp yang menagih laporan standup tim 14 orang dan menandai tugas yang macet berhari-hari

↑ ↓ untuk berpindah · Enter untuk membuka · Esc untuk menutup

Periodic Lens

Tabel periodik interaktif yang menyusun bentuknya sendiri di layar dan memetakan porsi Indonesia di produksi mineral dunia

Tangkapan layar
unsur, sifatnya lengkap dengan sumber
118
mineral Indonesia dengan porsi produksi dunia
7
komoditas dicek untuk membedakan nol dari tak diketahui
77
Di halaman ini

Masalahnya

Siswa mengenal tabel periodik sebagai bagan untuk dihafal. Versi yang bisa diklik dengan detail unsur sudah banyak, dan ptable.com mengerjakannya dengan baik. Hampir tidak ada yang menjelaskan bentuk tabelnya: kenapa baris pertama hanya berisi dua unsur, kenapa lantanida ditaruh di catatan kaki, kenapa blok-bloknya selebar 2, 6, 10, dan 14 kolom. Jawabannya ada pada urutan elektron mengisi orbital.

Ada celah kedua. Belum ada tabel periodik yang menunjukkan unsur apa saja yang diproduksi Indonesia dan berapa porsinya di produksi dunia, padahal nikel, timah, tembaga, dan emas adalah cerita nasional yang sering didengar siswa di berita.

Saya membuat Periodic Lens untuk siswa dan pembaca yang penasaran dengan kimia. Bahasa utamanya Inggris dengan terjemahan Indonesia yang lengkap, karena kosakata kimia bersifat internasional.

Yang saya bangun

Tabelnya menyusun diri dari aturan pengisian

Halaman build menyebutkan aturan pengisian orbital, menghitungnya di layar, lalu menganimasikan tabel yang tersusun dari aturan itu. Setelah itu halaman menyorot sekitar 20 unsur, seperti kromium, tembaga, dan emas, yang susunan elektronnya meleset dari tebakan aturan. Tebakan aturan ditampilkan di samping nilai yang dipublikasikan. Sebuah sakelar mengganti urutan pengisian dengan urutan naif, dan panjang baris berubah dari 2, 8, 8, 18, 18, 32, 32 menjadi bentuk yang salah. Selisih itulah alasan aturannya penting.

Data yang dipublikasikan saya simpan, aturannya saya pakai untuk mengujinya

Susunan elektron diambil dari data yang dipublikasikan dan tidak pernah dihasilkan dari aturan. Aturannya hanya saya pakai untuk animasi dan untuk memeriksa data. Tes memastikan aturan berbeda dari nilai yang dipublikasikan tepat pada daftar pengecualian yang terdokumentasi, dari dua arah. Risiko terbesarnya adalah data yang diam-diam dihasilkan dari aturan, karena aturan justru gagal di unsur-unsur yang paling menarik. Karena itu, pengecualian inilah yang pertama kali saya uji.

Nilai yang tidak diketahui terlihat tidak diketahui

Banyak sifat unsur superberat belum diketahui. Saya membuat sifat tidak bisa disimpan sebagai angka polos: setiap nilai diketahui, lengkap dengan satuan dan sumbernya, atau ditandai tidak diketahui. Nilai yang hilang tidak bisa diam-diam tampil sebagai ujung bawah skala warna. Nilai tidak diketahui punya satu tampilan, yaitu pola arsir, dan satu lensa khusus memetakan batas pengetahuan manusia.

Satu lensa sekali waktu, dengan warna yang lolos tes

Banyak tabel periodik yang mencolok menumpuk lima pengodean di 118 sel. Di sini warna hanya menampilkan satu sifat sekali waktu, dari sebelas lensa, dan pergantian lensa mewarnai ulang semua sel sekaligus. Saya menyusun palet dari target kecerahan. Tes memastikan skala warna naik secara konsisten, kategori tetap bisa dibedakan dalam skala abu-abu dan oleh pembaca buta warna, dan teks tetap punya kontras yang terbaca.

Setiap angka membawa sumbernya

Setiap sifat berasal dari file sumber dengan sitasi per kolom. Validator memeriksa lisensi, sitasi, tahun edisi survei, dan kelengkapan, dan sifat tanpa sumber tidak ikut dirilis. Angka produksi Indonesia berasal dari US Geological Survey, dicocokkan dengan 77 komoditas yang dipantau supaya "tidak berproduksi" dan "tidak diketahui" tidak pernah tertukar. Setiap angka membawa tahun edisinya dan apakah yang dihitung hasil tambang atau hasil olahan. Tidak berproduksi dibedakan dari berproduksi dalam jumlah kecil, dan tidak ada komentar kebijakan ke arah mana pun.

Hasilnya

Periodic Lens sudah live dan terbuka untuk umum dalam bahasa Inggris dan Indonesia. Situs ini mencakup 118 unsur, 11 lensa, tiga tata letak tabel dengan sel yang berpindah posisi, dan tiga tampilan, termasuk relief yang menampilkan sifat unsur sebagai ketinggian. Lensa Indonesia mencakup nikel, timah, kobalt, bauksit, tembaga, emas, dan perak.

Saya melakukan perbaikan aksesibilitas tersendiri setelah fiturnya selesai: satu tab stop dengan navigasi tombol panah, ditambah tabel teks yang bisa diurutkan dengan data yang sama. Di ponsel, tabel digulir ke samping dengan ukuran penuh, karena bentuknya adalah pokok bahasannya. Situs tidak membuat permintaan jaringan setelah halaman dimuat. Saya membangun versi pertamanya dalam tujuh hari pada Agustus 2026, lalu terus mengerjakannya sampai akhir September untuk navigasi mobile, pemilih tata letak, dan grafik utama halaman Indonesia.

Di balik layarDetail teknis untuk engineer
  • Semua perhitungan kimia ada di pustaka murni (lib/elements/) yang jalan di Node biasa; komponen hanya merender.
  • Nilai sifat bertipe {known, value, unit, source} atau {unknown}. Pola arsir didefinisikan sekali di lib/elements/unknown.ts.
  • lib/elements/aufbau.ts menggerakkan animasi dan asersi pengecualian dua arah. Anomali adalah hal pertama yang diuji (bf818d2).
  • Palet disusun sebagai target luminans di lib/design/palette.ts. Tes memastikan skala kontinu monoton, nilai kategori berjarak minimal 0,03 luminans, dan kontras AA terhadap teks di atasnya.
  • Pipeline: sumber TSV dengan sitasi per kolom, validasi, penggabungan dan penandaan nilai kosong, lalu satu JSON hasil generate. Zod memvalidasi skemanya. Validator dan keempat suite tes menjadi gerbang setiap deploy.
  • Pemindai teks melarang komentar kebijakan dan saran keselamatan di teks yang dirilis dalam dua bahasa. Awalnya pemindai menandai file tesnya sendiri, lalu cakupannya dibatasi ke kode yang dirilis (4c1090c).
  • Tata letak: standar, Janet left-step, dan spiral Benfey. Tampilan: grid, relief topografi, dan linimasa penemuan. Lensa "belum terukur" dan sakelar kontrafaktual tumbuh melampaui PRD.
  • Enam belas perbaikan aksesibilitas berturut-turut: semantik list bawaan menggantikan ARIA grid yang tidak valid, satu tab stop, cincin fokus dua warna, metrik huruf berbasis rem, nama landmark sesuai bahasa, pengumuman pembaca layar saat lensa berganti.
  • Build identik byte demi byte untuk dataset yang sama, termasuk pembuatan gambar OG saat build.
  • Static export Next.js 14 di GitHub Pages. Empat dependensi runtime (next, react, react-dom, zod). Tanpa pustaka grafik, kimia, animasi, atau komponen.
  • Tabel, animasi build, tiga tata letak, tiga tampilan, halaman Indonesia, dan halaman metode semuanya sudah dibangun dan live dalam dua bahasa. Spektrum emisi dari data NIST dipotong (04458f4).
  • Pembaruan belakangan menambahkan gaya huruf serif untuk display, yang sebelumnya cuma satu keluarga sans-serif, ditambah satu warna aksen dan permukaan yang lebih lembut.
  • 183 tes di 6 file. Sekitar 7.522 baris TypeScript dan TSX di folder app, components, dan lib. 93 commit antara 20 Agustus dan 29 September 2026.

Tangkapan layar

Explore - Category
Explore - Origin
Explore - Melting
Shape of the Table
Indonesian Production
Other Layout

Sedang merekrut, atau membangun hal serupa?

Saya terbuka untuk posisi full-time dan proyek freelance tertentu.