Category · 44 articles

Html Css

• React 19 Performance Secrets, Concurrent Rendering, Suspense & Real Tips

  I've been shipping React apps for over a decade. I've led teams through slow UIs, fought with render waterfalls, and learned most of these lessons the har...

  15 Nov 2025

• Lazy Loading in HTML and CSS: Enhancing Performance and User Experience

  I once profiled a landing page that loaded 40 images on first paint. The hero image fought for bandwidth with a carousel image sitting 3000 pixels below t...

  28 Dec 2024

• Edge Rendering with Next.js and Cloudflare Workers

  Traditional server-side rendering runs on a single origin server. A user in Sydney requesting a page rendered in Virginia adds 200ms+ of latency just from...

  27 Dec 2024

• Rolling Out an Internal UI Component Library

  Why internal component libraries get adopted or quietly abandoned, and a practical playbook for rolling one out that teams actually use, from both sides.

  19 Sept 2024

• What is a Design System According to Atlassian?

  What a design system really is, using Atlassian's as the model, and why most internal ones fail while a few succeed, from someone who has built several.

  8 Sept 2024

• CSS Houdini: New Possibilities for Your CSS

  CSS Houdini gives you access to the browser's CSS engine. Instead of waiting for the CSS spec to add what you need, you can extend CSS yourself — custom p...

  7 Sept 2024

• Building a Scalable Web Application with Single-SPA and Microfrontends

  At a certain scale, a monolithic frontend becomes a bottleneck. Teams step on each other. Deployments are all-or-nothing. One team's broken code blocks ev...

  11 Aug 2024

• Next.js 15 Release Candidate: New Features and Enhancements

  Next.js 15 RC shipped with a few changes that actually matter for how I build apps. Here's what stood out.

  26 May 2024

• Magic of WebP: Making Your Website Faster and Prettier

  I converted a project's image assets from PNG to WebP. The total image payload dropped from 12MB to 3MB. Same visual quality. Four times less bandwidth. T...

  13 May 2024

• Optimizing Script Loading in Web Development: Strategies and Techniques

  A single badly-placed <script> tag can block your entire page from rendering. I've seen landing pages that took 6 seconds to show content because a third-...

  8 May 2024

• CSS Positioning: position: sticky

  I spent an embarrassing amount of time debugging a sticky header that wouldn't stick. The fix was one line of CSS. The problem was an ancestor with overfl...

  5 May 2024

• Reviewing Inset, Popover, and :has() in CSS - New Features

  Three CSS features I keep reaching for: inset, popover, and :has(). Each one eliminates a pattern that used to require either verbose CSS or JavaScript. H...

  5 May 2024

• CSS Grid: A Journey Through Interactive Learning

  I learned CSS Grid by playing games. Seriously.

  4 May 2024

• Reviewing CSS Container Queries

  Media queries respond to the viewport. Container queries respond to the parent element. That distinction changes everything about how you build responsive...

  3 May 2024

• Writing Storybook Stories for Button Components

  A button is the simplest component in any design system. It's also the one most likely to have 15 variants, 4 sizes, 3 states, and a dozen edge cases nobo...

  29 Apr 2024

• Unveiling React 19: A Sneak Peek into Beta Features

  React 19 is the release where React stops asking you to do the framework's job. The theme is clear: less boilerplate, more automation.

  29 Apr 2024

• Reviewing React 18 Features: A TypeScript Guide

  React 18 was the release that fundamentally changed how React handles rendering. Not incremental improvements -- a new mental model. Here are the features...

  29 Apr 2024

• React Focus Trap in a TypeScript React Application

  I shipped a modal once without a focus trap. A screen reader user reported that pressing Tab sent them behind the modal into the page content. They couldn...

  24 Apr 2024

• How do you implement a React infinite scroll in a React application?

  Pagination buttons work. But they break flow. Every click reloads the page or swaps content, and the user has to re-orient. Infinite scroll removes that f...

  24 Apr 2024

• React Error Boundary in a TypeScript React Application

  A component throws an error during render. Without an error boundary, the entire app crashes. The user sees a white screen. No feedback. No recovery option.

  24 Apr 2024

• React Refs and Callback Refs

  React gives you two ways to grab a reference to a DOM element: object refs (via useRef) and callback refs. They both give you access to the underlying DOM...

  24 Apr 2024

• Contrast between React Lazy Load and React Code Splitting

  Your users don't need your entire app on first load. They need the page they're looking at. Everything else can wait.

  24 Apr 2024

• How Do You Implement a React Portal in a React Application?

  I once spent two hours debugging a modal that was invisible. Turns out a parent had overflow: hidden and the modal was clipped. The React tree said the mo...

  24 Apr 2024

• Understanding Why React useState Doesn't Update in Window Events

  This bug bites everyone at least once. You register a window event listener inside useEffect. Inside that listener, you read state. The state value never ...

  13 Apr 2024

• How to test react hooks

  Testing custom hooks is one of those things that feels hard until you see the pattern. Then it's straightforward.

  12 Apr 2024

• Optimizing Remix.js Performance: A Cache-Driven Approach

  My Remix.js site had a Largest Contentful Paint (LCP) of 5.68 seconds. For a content site, that's terrible. The culprit was obvious: every page load trigg...

  26 Dec 2023

• Optimizing Web Development: A Seamless Blend of Remix and Vite

  Remix switched to Vite as its build tool, and that's a big deal. The old Remix compiler worked, but Vite brings a developer experience that's hard to go b...

  23 Dec 2023

• Journey into RemixJS: A Comparative Exploration with NextJS

  This website you're reading was originally built with NextJS 13.5, then upgraded to 14. Then I rebuilt the whole thing in RemixJS. Same components. Same f...

  17 Dec 2023

• Coding Wonderland: Remix, NextJS, and the Magic of Programming

  I gave a talk called "Do You Believe in Magic? Time to Move to Remix" at the MelbJS and React Melbourne meetup on December 13th, 2023. The core question: ...

  16 Dec 2023

• Cracking the Code Magic: Next.js and Remix Unveiled!

  Every developer has a moment where code works and they have no idea why. We trust the framework. We trust the library. We move on.

  10 Dec 2023

• EpicStack by Gaz

  Kent C. Dodds published his Epic Stack — his opinionated set of tools for starting a new project. It's excellent. Go read it.

  15 Oct 2023

• Elevate Your Frontend Skills with the Latest Techniques and Features in CSS, July 2023

  CSS has shipped more meaningful features in the last two years than in the previous decade. Container queries, style queries, nesting, layers — these aren...

  15 Oct 2023

• Web Direction Code: Micro FrontEnd at Scale by Mecca

  Shabnam and I presented at WebDirection Code about micro frontends at Mecca. It was a chance to share what our engineering team built over the past few ye...

  15 Oct 2023

• Exploring the Role of Rust in Frontend Development: Leveraging WebAssembly and Beyond

  Rust keeps showing up in frontend tooling. SWC replaced Babel. Turbopack is written in Rust. Lightning CSS compiles styles faster than PostCSS. Even if yo...

  15 Oct 2023

• How to Improve/Measure Performance in FrontEnd 2023

  You get a ticket: "Make the website faster." No specific metric. No target. Just "faster."

  15 Oct 2023

• Svelte vs React in Details

  I decided to learn Svelte by building something with it. Not reading docs first. Not watching tutorials. Just cloning examples and seeing what happens. He...

  15 Oct 2023

• Optimizing React Components

  Most React performance problems aren't React problems. They're component design problems. You don't need a profiler to know that re-rendering 500 componen...

  14 Oct 2023

• Best Tutorial for 11 React Hooks

  React hooks changed how I write components. Before hooks, any component that needed state or lifecycle methods had to be a class. Now, functions handle ev...

  14 Oct 2023

• 11 Refactoring Methods

  Refactoring is one of those skills that separates good developers from great ones. I've shipped messy code. I've also inherited messy code. Both hurt. The...

  14 Oct 2023

• Digit Recogniser Machine Learning Tensorflow Javascript And React

  I wanted to build a digit recognizer that runs entirely in the browser. No server-side ML. No Python. Just TensorFlow.js and React.

  14 Oct 2023

• NextJs Server Rendered React App

  My colleague Lewis Freiberg introduced me to Next.js during one of our weekly front-end meet-ups. I'd heard of it before, but hadn't taken it seriously. I...

  14 Oct 2023

• Preact vs React

  Preact is a 3KB alternative to React. Same API. Same component model. A fraction of the size. Jason Miller built it to prove you don't need 40KB of JavaSc...

  14 Oct 2023

• React-Virtualized for efficiency rendering

  I came across react-virtualized on Twitter and didn't understand what it did until I read one line from their docs:

  13 Oct 2023

• Browser FingerPrint JavaScript

  I needed to identify unique users without cookies. That led me to browser fingerprinting — a technique that identifies browsers by collecting device and b...

  13 Oct 2023