Documentations
Personal documentation of how I build: tech-stack learning logs, teardowns of features that actually shipped, and UI components — always with real source code, live examples, and preview links.
All source code is open on GitHub ↗
· 2 min read
Not a generic React tutorial: the learning order that worked, the state anti-patterns I used to write, patterns proven on client projects, and when not to use React at all.
· 3 min read
A mentoring-style TypeScript tutorial: installation + a correct tsconfig, the basic types that cover 90% of needs, generics with real examples from this site, and gradual migration from JavaScript.
· 3 min read
Vue 3 from scratch: scaffolding with create-vue, Single File Component anatomy, ref/computed, v-model, and the golden props-down-events-up rule — with a simple shop example.
· 3 min read
Astro from installation: .astro pages, components + scoped styles, islands architecture (client:load vs client:visible), and content collections for markdown blogs.
· 3 min read
Tailwind v4 from this site's real practice: Vite/CLI install, the utility-first mental model, mobile-first responsive, @theme design tokens, and when (not) to use @apply.
· 3 min read
Bootstrap 5 tutorial: CDN or npm install, the mobile-first 12-column grid, interactive components via data-bs-* with no JavaScript, and the right way to customize via Sass variables.
· 2 min read
Laravel from scratch: Composer install, routes + Blade, migrations + Eloquent, server validation, and the daily artisan workflow — until your first product CRUD runs.
· 3 min read
Livewire 3 tutorial: one-command install, your first counter component, live search with wire:model.live, and no-reload validation — the same philosophy as this site's HTMX.
· 3 min read
The Claude API with the official TypeScript SDK: API-key setup, first call, system prompts for CS chatbots, multi-turn conversations, streaming, and choosing a model.
· 3 min read
The Gemini API with the @google/genai SDK: a free AI Studio key, generateContent, system instructions, sending images (multimodal), streaming, and choosing flash vs pro.
· 3 min read
The GPT API with the openai SDK: billing + API-key setup, the Responses API, instructions & conversations, streaming, and structured JSON output for data-extraction pipelines.
· 3 min read
Full documentation of a no-SPA contact form: HTMX partial swaps, server validation with Hono JSX, input preserved on errors, and progressive enhancement — with this site's source code.
· 3 min read
How this site serves Indonesian at the root and English under /en with Intlayer: per-page dictionaries, dual routing, hreflang — plus the 'reading locales' Workers crash and its fix.
· 3 min read
Admin-panel auth with no session database and no library: an HMAC-SHA256 cookie token, PBKDF2 password verification via Web Crypto, and constant-time comparison — full source code.
· 3 min read
Teardown of this site's blog: markdown rendered once at save time (not per request), D1 prepared statements, the COALESCE publish stamp that protects RSS ordering, and draft seeding from markdown files.
· 3 min read
How this site's blog editor uploads images to R2: an extension allowlist, size limits, slug + random-suffix filenames, bufferless streaming, and serving with immutable Cache-Control.
· 3 min read
Five layers so a site is found by Google AND generative AI engines: reciprocal bilingual hreflang, a sitemap generated from the router, FAQPage JSON-LD from display data, an AI-bot-friendly robots.txt, and llms.txt.
· 3 min read
Core e-commerce website features, taken apart: Rupiah formatting with Intl.NumberFormat, the anatomy of a product card that sells, and a localStorage cart with a badge — with a live preview.
· 3 min read
The Midtrans payment flow end to end: creating the Snap transaction server-side (Server Key stays safe), the snap.pay popup in the browser, and a SHA-512 signature-verified webhook as the single source of truth.
· 3 min read
A WhatsApp order button done right: wa.me number formatting, an encoded message builder carrying product/price/link, and conversion tips — with a live, clickable button in the preview.
· 3 min read
The four company-profile sections that move numbers: a 5-second-proposition hero, a numbers-based trust strip, credible testimonials, and a three-field lead form — all with code + a live preview.
· 3 min read
Documentation documenting itself: markdown as text modules, one registry driving sidebar/sitemap/hreflang, a ToC via regex anchor injection, and live examples from real components — no Docusaurus.
· 2 min read
The complete code for an online-store product card: a two-layer star rating with no images, aspect-ratio that prevents layout shift, line-clamp, and a sold-out state — editor + live preview side by side.
· 3 min read
A quantity stepper done right: bounds enforced with disabled (not alerts), one render function as the source of truth for subtotal & remaining stock, plus aria-label and aria-live — try it in the preview.
· 2 min read
A FAQ accordion using the browser's built-in <details> element (still indexed by Google while collapsed) and a testimonial card with initial avatars + figure/blockquote semantics — code and preview side by side.
· 3 min read
A team grid with dividers from a 1px gap (no doubled borders), a timeline from one pseudo-element, initial avatars with place-items, and responsiveness without media queries — editor + live preview.
· 3 min read
Three server-first components used across this site — a browser mockup, a tag-based architecture diagram, and a count-up number — rendered live on this page, with full source code.