Documentations
Dokumentasi pribadi tentang cara aku membangun: catatan belajar tech stack, bedah fitur yang benar-benar dirilis, dan komponen UI — selalu dengan source code asli, contoh live, dan link preview.
Semua source code terbuka di GitHub ↗
· 2 menit baca
Bukan tutorial React generik: urutan belajar yang bekerja, anti-pola state yang dulu sering kutulis, pola yang terbukti di project klien, dan kapan justru tidak memakai React.
· 3 menit baca
Tutorial TypeScript gaya mentoring: instalasi + tsconfig yang benar, tipe dasar yang menutup 90% kebutuhan, generics dengan contoh nyata dari situs ini, dan migrasi bertahap dari JavaScript.
· 3 menit baca
Tutorial Vue 3 dari nol: scaffold dengan create-vue, anatomi Single File Component, ref/computed, v-model, dan aturan emas props turun–event naik — dengan contoh toko sederhana.
· 3 menit baca
Tutorial Astro dari instalasi: halaman .astro, komponen + scoped style, islands architecture (client:load vs client:visible), dan content collections untuk blog markdown.
· 3 menit baca
Tutorial Tailwind v4 dari praktik nyata situs ini: instalasi Vite/CLI, model mental utility-first, responsive mobile-first, design token @theme, dan kapan (tidak) memakai @apply.
· 2 menit baca
Tutorial Bootstrap 5: pasang via CDN atau npm, grid 12 kolom mobile-first, komponen interaktif lewat data-bs-* tanpa JavaScript, dan cara kustomisasi yang benar lewat variabel Sass.
· 2 menit baca
Tutorial Laravel dari nol: instalasi via Composer, route + Blade, migration + Eloquent, validasi server, dan alur kerja artisan harian — sampai CRUD produk pertamamu jalan.
· 2 menit baca
Tutorial Livewire 3: instalasi satu perintah, komponen counter pertama, pencarian live dengan wire:model.live, dan validasi tanpa reload — filosofi yang sama dengan HTMX di situs ini.
· 3 menit baca
Tutorial Claude API dengan SDK resmi TypeScript: setup API key, panggilan pertama, system prompt untuk chatbot CS, percakapan multi-giliran, streaming, dan cara memilih model.
· 3 menit baca
Tutorial Gemini API dengan SDK @google/genai: API key gratis dari AI Studio, generateContent, system instruction, kirim gambar (multimodal), streaming, dan memilih model flash vs pro.
· 3 menit baca
Tutorial GPT API dengan SDK openai: setup billing + API key, Responses API, instruksi & percakapan, streaming, dan output JSON terstruktur untuk pipeline ekstraksi data.
· 3 menit baca
Dokumentasi lengkap form kontak tanpa SPA: HTMX partial swap, validasi server dengan Hono JSX, input tidak hilang saat error, dan progressive enhancement — dengan source code dari situs ini.
· 3 menit baca
Cara situs ini melayani Bahasa Indonesia di root dan English di /en dengan Intlayer: dictionary per halaman, routing ganda, hreflang — plus jebakan crash 'reading locales' di Workers dan solusinya.
· 2 menit baca
Autentikasi panel admin tanpa database session dan tanpa library: token HMAC-SHA256 di cookie, verifikasi password PBKDF2 via Web Crypto, dan perbandingan constant-time — source code lengkap.
· 3 menit baca
Bedah blog situs ini: render markdown sekali saat simpan (bukan per request), prepared statement D1, stempel publish COALESCE yang menjaga urutan RSS, dan seed draft dari file markdown.
· 3 menit baca
Cara editor blog situs ini meng-upload gambar ke R2: allowlist ekstensi, batas ukuran, nama file slug + suffix acak, streaming tanpa buffer, dan penyajian dengan Cache-Control immutable.
· 3 menit baca
Lima lapisan supaya situs ditemukan Google DAN mesin AI generatif: hreflang resiprokal dwibahasa, sitemap yang digenerate dari router, FAQPage JSON-LD dari data tampilan, robots.txt ramah bot AI, dan llms.txt.
· 3 menit baca
Fitur dasar website e-commerce dibedah: format Rupiah dengan Intl.NumberFormat, anatomi kartu produk yang menjual, dan keranjang localStorage dengan badge — lengkap dengan preview live.
· 3 menit baca
Alur pembayaran Midtrans dari ujung ke ujung: buat transaksi Snap di server (Server Key aman), popup snap.pay di browser, dan webhook dengan verifikasi signature SHA-512 sebagai satu-satunya sumber kebenaran.
· 3 menit baca
Tombol order WhatsApp yang benar: format nomor wa.me, builder pesan ter-encode berisi produk/harga/link, dan tips menaikkan konversinya — dengan tombol live yang bisa dicoba di preview.
· 3 menit baca
Empat section company profile yang menggerakkan angka: hero dengan proposisi 5 detik, strip kepercayaan berbasis angka, testimoni yang kredibel, dan form lead tiga field — semua dengan kode + preview live.
· 3 menit baca
Dokumentasi yang mendokumentasikan dirinya: markdown sebagai text module, satu registry untuk sidebar/sitemap/hreflang, ToC via injeksi anchor regex, dan contoh live dari komponen asli — tanpa Docusaurus.
· 2 menit baca
Kode lengkap kartu produk toko online: rating bintang dua lapis tanpa gambar, aspect-ratio yang mencegah layout shift, line-clamp, dan state habis stok — editor + preview live berdampingan.
· 2 menit baca
Stepper jumlah yang benar: batas dijaga lewat disabled (bukan alert), satu fungsi render sebagai sumber kebenaran subtotal & sisa stok, plus aria-label dan aria-live — bisa dicoba langsung di preview.
· 2 menit baca
Accordion FAQ memakai elemen <details> bawaan browser (tetap terindeks Google saat tertutup) dan kartu testimoni dengan avatar inisial + semantik figure/blockquote — kode dan preview berdampingan.
· 2 menit baca
Grid tim dengan garis pemisah dari gap 1px (tanpa border ganda), timeline dari satu pseudo-element, avatar inisial dengan place-items, dan responsif tanpa media query — editor + preview live.
· 3 menit baca
Tiga komponen server-first yang dipakai di seluruh situs ini — mockup browser, diagram arsitektur dari tag, dan angka count-up — dirender live di halaman ini, lengkap dengan source code-nya.