Frontend · Mumbai · Since 2005
I write about the frontend — and build the demo so you can break it.
Twenty years shipping the web. Every post ships with something you can drag, resize, or take apart.
A new piece every other Tuesday. No newsletter about the newsletter.
Acharya Kōdo: Drag the window edge, Kai. Watch the needle find each breakpoint.
It knows my width!
↔ Drag the window edge. That's the whole pitch.
Latest4 posts

Part 1.2: Image LCP: fetchpriority, Preload & Format Decisions
The highest-ROI line in image performance is one attribute most codebases still don't use: fetchpriority="high". Here's the image LCP fix list, ordered by actual impact — priority, preload, responsive sizing, and formats — and why teams work it in exactly the wrong order.

Part 1.1: The Four Phases of LCP: Where Your Time Actually Goes
Every slow LCP is slow in one of four places — and most teams expertly optimize the phase that was never the problem. One retail site had a backlog full of image-compression tickets when the real fix recovered 1.8 seconds and recompressed nothing. Here's how to read the four phases in five minutes.
How to Optimize LCP for Images (Interactive Lab)
Image LCP comes down to two questions: how many bytes and how soon. Optimization answers the first; preload, fetchpriority, and eager loading answer the second; decoding and reserved dimensions keep the paint and the layout clean. Tune those on your real hero image in the lab above, ship the best-practice markup, and watch your Core Web Vitals move into the green.
Part 1: What Is the LCP Element? How the Browser Picks It
You can't fix your Largest Contentful Paint until you know which element the browser actually picked — and it's often not the hero image you've been optimizing. Here's how the browser really chooses your LCP element, the surprising exclusions that trip teams up, and how to find yours in the field.The castMeet the team
Every post is an episode set in Domlok, a realm where every page is a kingdom. A bug attacks, Kai tries the obvious fix, and the team shows how it really works.
Browse the episodes →Mentor · that’s me
Acharya Kōdo
The old architect. Guarding Domlok since the Age of jQuery.
All five · Pancha MahabhutaApprentice
Kai
Asks what you’re thinking. Breaks it first, so you don’t have to.
Element unknown, for nowHTML & architecture
Vishwa
After Vishwakarma, the divine architect. Builds foundations, hates div soup.
Earth · PrithviCSS, layout & CMS
Kitsu
A shape-shifting fox. One piece of content, a hundred layouts.
Fire · AgniJavaScript
Raiden
After Raijin, god of thunder. Fast, loud, and lives on events.
Lightning · VidyutAccessibility
Sanjaya
The Mahabharata’s narrator. Describes the world for those who can’t see it.
Ether · AkashaPerformance
Vayu
God of the wind. Light, quick, and weighs every kilobyte.
Air · VayuState & version control
Chitragupta
Keeper of every record. Every commit, every action, written down.
Water · Jal
What I knowPick a thread
With VishwaFrontendSemantic HTML, intrinsic CSS layout, design systems that survive a second team touching them. The part that decides whether the next three years are pleasant.3 POSTS
With VayuPerformanceCore Web Vitals as an engineering problem rather than a scorecard. Where the milliseconds actually go, and which ones a user can feel.5 POSTS
With SanjayaAccessibilityPOUR in practice, on real budgets, with real deadlines. What it costs to retrofit versus what it costs to build in, with numbers.1 POST
With ChitraguptaPracticeBranching, review, release. The habits that separate a team shipping weekly from a team shipping when someone is brave.3 POSTS
With KitsuCMSAdobe Experience Manager and WordPress underneath most of what I've shipped — CMS-driven web apps and eCommerce builds on one end, enterprise content architecture on the other.2 POSTS
- Semantic HTML
- CSS Grid
- Container queries
- TypeScript
- WordPress
- PHP
- Core Web Vitals
- Lighthouse
- WCAG 2.2
- Git
- Vite
- Figma
Twenty years means most of this list has been rewritten three times. The judgement is the part that carried over.