Writing, since 2010.
Long essays on craft. The ones I'd want to read.
Generative tile fallbacks
Empty image slots looked sad. Real photos weren't ready. So I built a deterministic Canvas2D engine that fills every missing tile with art derived from the slot's slug, plus a playground.
Margin collapse, again
Every few years a junior dev rediscovers margin collapse and writes a thread about it. This is mine, except I'm trying to make peace with the rule, not abolish it.
I Built Yet Another Planning Poker App and I Don't Care
There are 200 planning poker tools. I built one anyway — because I liked some card illustrations, wanted to play with WebSockets, and needed an excuse to ship something fun with Claude Code.
Command palettes are an interaction primitive, not a feature
Why ⌘K deserves a seat at the table next to the menu bar and the URL bar, and how to build one that feels instant.
I Had 130 Claude Code Skills and Couldn't Find Any of Them
How to organize Claude Code skills, commands, and plugins across projects. Global vs local, vendor skills, per-project profiles, and a bootstrap script for new machines.
useEffect is a fire alarm
Treat every useEffect call like a fire alarm, loud, disruptive, and only acceptable when something is genuinely on fire. Most of what we use it for is a kettle boiling.
I'm Building a CSS-Only Component Library (For Fun)
In an era where AI spits out Tailwind for everything, I decided to build a CSS-only component library from scratch. Here's why and how.
INP, but for humans
Interaction-to-Next-Paint replaced FID as the responsiveness metric, and the change matters more than the acronym suggests. Here's the version I wish someone had given me.
React Performance: When One Slow Component Freezes Everything
When that one slow component holds your entire app hostage, here's how to negotiate its release without touching its terrible code.
Claude Code: Part 11 - Troubleshooting and Recovery
Master Claude Code troubleshooting with systematic approaches to common issues: installation problems, CLAUDE.md conflicts, performance optimization, custom commands, MCP servers, hooks, and emergency recovery...
Claude Code: Part 10 - Common Issues and Quick Fixes
Solve the most common Claude Code problems: context overflow, conflicting rules, token optimization, and broken custom commands. Quick troubleshooting for experienced users.
Claude Code: Part 9 - Complete Development Workflows
Learn how to combine all Claude Code features into complete development workflows. From feature planning to deployment, see how CLAUDE.md, slash commands, MCP servers, subagents, IDE integration, and hooks work...
Claude Code: Part 8 - Hooks for Automated Quality Checks
Stop manually running the same quality checks after every Claude Code change. Learn how to use hooks to automatically run tests, linting, type checking, and custom validation whenever Claude modifies your code.
Claude Code: Part 7 - IDE Integration with VS Code and JetBrains
Eliminate context switching between your IDE and Claude Code. Learn how to use VS Code and JetBrains integration features to share context automatically and maintain development flow.
Claude Code: Part 6 - Subagents and Task Delegation
Learn how to delegate complex, multi-step analysis and implementation tasks to autonomous subagents. Let specialized AI agents handle comprehensive codebase analysis, feature planning, and systematic problem-solving...
Claude Code: Part 5 - MCP Servers and Tool Integration
Stop switching between Claude Code, GitHub, Sentry, and other development tools. Learn how MCP (Model Context Protocol) servers create seamless workflows by connecting all your tools directly within Claude Code.
Claude Code: Part 4 - Slash Commands and Custom Commands
Stop repeating the same instructions every day. Learn to use built-in slash commands and create custom commands that automate your most common Claude Code workflows and development tasks.
Claude Code: Part 3 - Conversation Management and Context
Move beyond basic Claude Code usage to advanced features like conversation management, multi-step workflows, context optimization, and preview mode. Transform from casual user to power user.
Claude Code: Part 2 - CLAUDE.md Configuration Files
Learn how to use CLAUDE.md files to guide Claude Code's behavior, set project rules, and create consistent development patterns. Includes memory hierarchy, multi-AI tool sharing, and team collaboration strategies.
Claude Code: Part 1 - Getting Started and Installation
Meet Claude Code, your brilliant but overeager AI teammate. Learn how to set up and start working with Claude Code for software development, from installation to your first productive coding session.
Understand the Acronym Spaghetti: Part 3 - SOLID Principles
Master the SOLID principles for clean architecture in React and Node.js. Learn Single Responsibility, Open/Closed, Liskov Substitution, Interface Segregation, and Dependency Inversion with practical examples.
Understand the Acronym Spaghetti: Part 4 - CQRS and Hexagonal Architecture
Apply CQRS and Hexagonal Architecture in React and Node.js. Learn when to separate queries from commands and how to structure frontend applications for maintainability.
Understand the Acronym Spaghetti: Part 5 - Advanced Principles
Master the final set of programming principles: Law of Demeter, Composition over Inheritance, Tell Don't Ask, Convention over Configuration, and Principle of Least Astonishment. Advanced patterns for React and...
Understand the Acronym Spaghetti: Part 2 - The Quality Principles
Level up your code quality with principles like Pure Functions, Immutability, and Principle of Least Surprise. The second part of our programming principles series.
Understand the Acronym Spaghetti: From WTF to SOLID Code
A developer's guide to programming principles and acronyms that matter - from core concepts like DRY and KISS to architectural patterns like SOLID. Stop drowning in alphabet soup and start writing better code.
Building a CLI to Automate Etsy Listings with AI and Fetch Hacks
I built an AI-powered CLI to help my girlfriend publish 80+ handmade tattoo artworks on Etsy, skipping the forms, API delays, and automation traps.
Building photoroom-cli with Claude Code: From API to NPM in 3 Days
How I built photoroom-cli using Claude Code as my pair programmer. Lessons about AI-assisted development, balancing speed with quality, and the art of guided coding.
At-Least-Once vs. Exactly-Once - Understanding Message Delivery Guarantees
Learn about message delivery guarantees in distributed systems. Understand why most production systems implement at-least-once delivery with idempotency rather than attempting exactly-once delivery.
How Idempotency Saves Your API from Chaos
Learn how to implement idempotency in your APIs to prevent duplicate actions and ensure data consistency. Includes practical examples with Supabase and Node.js.
Vibe Coding ‑ Notes from the First Try
Quick lessons from spinning up a new blog with an AI pair‑programmer and Cursor.
20 Years in Front-End – Lessons on Simplicity and Accessibility
Timeless lessons from two decades building for the web – why simplicity, accessibility, and good UX still matter most.
The Meta-Framework Showdown – Angular, React, Vue in the New Era
A comparison of Angular, React, and Vue in 2025, exploring how each evolved and what they offer today.
Next-Gen Build Tools – Turbopacks and Beyond
A look at Turbopack and the future of JavaScript build tooling in 2025.
Reflecting on Front-End Trends – What a Decade!
A retrospective on 10 years of front-end evolution, from jQuery dominance to AI-assisted coding.
WebGPU – Graphics Programming in the Browser
A first look at WebGPU and how it opens new doors for high-performance graphics and computation in web applications.
AI-Assisted Development – One Year with GitHub Copilot
Reflections on one year of using GitHub Copilot, its benefits, limitations, and practical tips for front-end developers.
The Rise of Signals – Solid, Qwik, and React’s New RFC
A look into how signals are changing state management in modern frameworks like Solid, Qwik, and even React.
Is React Still King? – State of JS/React 2023 Insights
React remains dominant, but new frameworks and patterns are gaining attention. What should you focus on next?
Low-Code and No-Code – Threat or Boon for Developers?
A balanced take on the rise of no-code/low-code tools and what they mean for front-end developers.
Modern CSS – Container Queries and :has() in Action
A look at how container queries and the :has() selector open new doors for responsive and contextual styling in CSS.
SolidJS and Signals – A Different Reactivity
Exploring SolidJS's fine-grained reactivity model and how it differs from virtual DOM frameworks.
Bun 1.0 – Testing a Turbo-Fast JS Runtime
Exploring Bun 1.0 – a fast JavaScript runtime, bundler, and test runner built in Zig.
Bringing AI to the Front-End – Integrating GPT APIs
A tutorial on integrating GPT APIs into front-end applications with a simple chatbot example.
React Server Components and the New Next.js App Router
A deep dive into React Server Components and the App Router introduced in Next.js 13, showing how to structure and optimize React apps for performance and scalability.
Monorepos and PNPM – Managing Multiple Apps Efficiently
Learn how to set up a front-end monorepo using PNPM workspaces to manage multiple apps and shared packages efficiently.
Qwik – The Quest for Instant-Load Web Apps
Exploring Qwik's resumability model and how it challenges traditional hydration to deliver near-instant web app interactions.
What's New in React 18 – Concurrent Features
A practical guide to React 18’s new concurrent features like automatic batching, startTransition, and Suspense improvements.
Astro and Island Architecture – Faster Websites by Doing Less
Learn how Astro and island architecture help build faster websites by reducing JavaScript.
Goodbye, Webpack? Hello, Vite!
A deep dive into Vite, the fast and modern alternative to Webpack for frontend development.
End of an Era – Internet Explorer Bows Out
Marking the official retirement of Internet Explorer and what it means for developers.
Headless CMS – Building a Blog with Contentful
Learn how to use a headless CMS to build a blog by integrating Contentful with a modern front-end.
Mastering CSS Grid + Flexbox Combo
Learn how to combine CSS Grid and Flexbox for powerful, responsive layouts with practical patterns.
Core Web Vitals – Optimizing for Google’s UX Metrics
Learn how to improve user experience and SEO by focusing on Google's Core Web Vitals LCP, FID, and CLS.
Svelte & SvelteKit – Exploring a Different UI Paradigm
A walkthrough of building a project with SvelteKit, highlighting its simplicity and performance through compile-time optimizations.
Deno vs Node – A Secure Runtime Showdown
A hands-on comparison between Deno and Node.js showing how common tasks differ, their tooling, and the trade-offs.
Next.js for Production – Hybrid Rendering and Incremental Static Regeneration
Exploring how Next.js combines SSR, SSG, and ISR for high-performance production apps.
Tailwind CSS – Utility-First CSS in Action
How Tailwind CSS changed the way we style components with utility-first classes.
Web Accessibility Checklist – Building Inclusive Web Apps
A practical accessibility guide covering key areas like semantic HTML, ARIA roles, keyboard navigation, and testing tools.
Working from Home as a Developer – Tips and Tools
Practical advice for developers adjusting to remote work – setup, tools, and staying productive.
Deno 1.0 – First Impressions of Node’s New Rival
Exploring Deno 1.0, a new JavaScript and TypeScript runtime with modern features and strong security.
Next.js for Beginners – Static and Server Rendering
A beginner guide to Next.js with examples of static generation and server-side rendering using getStaticProps.
Svelte 3 – A Radical New Approach to UI
An introduction to Svelte 3 and how it compiles UI components at build time for performance and simplicity.
Design Systems 2.0 – Atomic Design in Practice
Applying Atomic Design principles to build scalable and consistent design systems using reusable components.
Micro-Frontends – Scaling Your Front-End Architecture
Learn what micro-frontends are, why they matter, and how to apply them to large-scale applications.
Going Serverless Part 2 – Building a REST API with No Servers
A tutorial on using serverless functions to build a simple REST API without managing backend infrastructure.
Building a Component Library – Our Design System Journey
How we created a shared UI library to improve consistency, speed up development, and collaborate better with design.
Adopting TypeScript – Tips from Our Transition
Lessons learned while migrating a JavaScript project to TypeScript, with practical tips for a smoother transition.
WebAssembly in Practice – Speeding Up Image Processing
A practical demo using WebAssembly to handle CPU-heavy image tasks faster than JavaScript.
The JAMstack Revolution – Building with Hugo and Headless CMS
A walkthrough of building a fast static site using Hugo and content pulled from a headless CMS via API, using the JAMstack model.
Using React Hooks – A New Way to Write Components
How to use React Hooks like useState and useEffect to write simpler functional components instead of class-based ones.
Going Serverless – Front-End Meets AWS Lambda
Learn how to use AWS Lambda to handle backend logic without setting up a full server, perfect for simple tasks from your frontend app.
Building a Design System – How We Standardized Our UI
A guide on how we created a shared component library to improve consistency, reuse, and communication across our frontend team.
Moving from REST to GraphQL – A Case Study
A practical look at replacing REST with GraphQL in a real frontend project using Apollo Client and query-based data fetching.
WebAssembly 101 – High-Performance Web Apps
A beginner-friendly overview of WebAssembly and how it enables fast, low-level code to run in the browser alongside JavaScript.
JAMstack in Action – Building a Static Site with Gatsby
Learn how to build a fast, secure static site using Gatsby and the JAMstack approach.
TypeScript for JavaScript Developers – Getting Started
Add static types to JavaScript for safer, maintainable code and better tooling.
GraphQL Basics – Querying APIs the Modern Way
Learn how GraphQL lets clients ask for just the data they need and avoid over‑fetching common with REST.
Async/Await – Simplifying Asynchronous JavaScript
Refactor promise chains into clean async functions with try/catch error handling.
Embracing Mobile‑First Design
Start layouts on small screens, then enhance upward for speed, usability, and Google’s mobile‑first index.
Inside React 16 (Fiber) – What’s Changing?
High‑level look at React’s new Fiber engine, error boundaries, and other practical improvements.
Layouts Reinvented – CSS Grid Tutorial
Build responsive, two‑dimensional layouts with the new CSS Grid module.
Vue.js for Beginners – Building Your First Component
Create a simple to‑do list in Vue 2 and learn its template syntax and reactivity model.
Progressive Web Apps – Installable & Offline Web Experiences
Make a site work offline, show an install prompt, and feel like a native app.
Going Mobile with React Native (Basics)
Use familiar React skills to build your first native mobile app.
From Gulp to Webpack – Evolving Build Tools
Move from code‑driven task runners to config‑driven bundling with Webpack, plus a task‑by‑task cheat sheet.
Introduction to Vue.js 2.0
First look at Vue 2 a lightweight, flexible alternative to heavier frameworks.
State Management with Redux – Managing App State Made Easier
Learn Redux core ideas and wire it into a small React app.
Dealing with JavaScript Fatigue
Strategies to stay productive when new frameworks and tools appear every month.
TypeScript and Angular 2 – A New Era of Front‑End
TypeScript becomes the language of choice for Angular 2, bringing static typing and better tooling to the framework.
Goodbye IE, Hello Edge – What the End of Internet Explorer Means
Microsoft moves from Internet Explorer to the new Edge browser, easing life for web developers.
Babel 6 – First Look at the New Transpiler
Babel 6 just landed. See what changed and how to upgrade.
Flexible Layouts Made Easy with CSS Flexbox
Build responsive navbars, columns, and centered blocks with the Flexbox module.
Flexible Layouts Made Easy with CSS Flexbox
Learn core Flexbox properties and build navbars, columns, and centered elements without floats.
Module Bundling 101 with Webpack
Learn why bundling matters and set up Webpack 1 for a small ES6 app with hot‑reload.
Writing Future‑Proof Code with Babel
Use Babel to compile ES6+ JavaScript into browser‑friendly ES5.
Building UIs with React.js – A Beginner’s Tutorial
Learn the core ideas of React 0.13 and build a small interactive UI.
Exploring ECMAScript 2015 (ES6) Features
Deep dive into every ES6 feature with concise examples.