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.
↔ Drag the window edge. That's the whole pitch.
Latest12 posts
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.
Core Web Vitals for Architects: Stop Optimizing Wrong
Lab scores lie. Field data tells the truth. A 20-year architect's intro to Core Web Vitals — LCP, CLS, INP, TTFB, FCP — and how to measure before you optimize.
AEM Fragments: When to Use CF vs XF — Real Scenarios
Should you use a Content Fragment or Experience Fragment in AEM? Walk through 5 real scenarios and a 10-second test to always pick the right one.
What I knowPick a thread
- Frontend architecture Semantic 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
- Performance Core Web Vitals as an engineering problem rather than a scorecard. Where the milliseconds actually go, and which ones a user can feel. 3 POSTS
- Accessibility POUR in practice, on real budgets, with real deadlines. What it costs to retrofit versus what it costs to build in, with numbers. 1 POSTS
- Engineering practice Branching, review, release. The habits that separate a team shipping weekly from a team shipping when someone is brave. 3 POSTS
- CMS architecture Adobe 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
- Adobe Experience Manager
- Accessibility
- WCAG 2.2
- TypeScript
- Edge Delivery Services
- Tailwind
- React
- WordPress
- PHP
- Core Web Vitals
- Lighthouse
- Container queries
- Git
- BEM
- Figma
- Adobe Photoshop
- Adobe Illustrator
- Adobe XD
Twenty years means most of this list has been rewritten three times. The judgement is the part that carried over.