SVG filters are among the most powerful graphics features available in modern browsers, yet they remain notoriously challenging to master. While CSS provides convenient shortcuts like blur and drop-shadow, SVG filters expose the full image-processing pipeline behind those effects. If you require precise control over composition, masking, and texture, SVG filters provide the necessary architecture. If you understand CSS filters and want to build visual effects beyond a single function, SVG filters are your next step. They allow you to branch, merge, and layer effects in ways CSS alone cannot match. This post covers: The SVG filter mental model Data...
This post started as an addendum to my article about responsive images and the sizes="auto" attribute, but I realized it deserved its own post. When you use the element for format fallbacks, adopting a modern format stack is crucial for performance. Like with video, the browser will select the first format it supports from the list of elements. Therefore, you should list the most efficient formats first, followed by older formats as fallbacks and finally a baseline format in the img tag for legacy support. However, the issue is not as simple as "use AVIF and WebP." You still need...
The Ideal Viewport Doesn't Existhttps://viewports.fyi/ made me think about the CSS I write and how much it has changed since I started. CSS has evolved from a simple styling language into a powerful system that adapts to devices and user preferences. Developers once controlled nearly every detail of layout and presentation, but now we can delegate much of that work to the browser and let it make smarter decisions based on the user's context. This post explores what it means to "trust the browser" and how to use its built-in capabilities to create better web experiences. Be the Browser's Mentor,...
Reactive programming is a declarative paradigm centered around data streams and the automatic propagation of change. Instead of writing imperative code that explicitly updates the user interface UI or recalculates variables when data shifts, a reactive system binds the UI directly to the state. When the state updates, the system pushes those changes to all interested subscribers. There are different models of reactivity, each with its own trade-offs. Knowing the differences between hooks, observables, and signals is crucial for choosing the right tools for your application. In this post, we will explore the history of reactivity in web development, the...
How we interact with the web has evolved significantly. The days of a single mouse pointer on a desktop monitor are long gone. Today, users expect seamless interactions across a wide range of devices: touchscreens, styluses, trackpads, and even emerging input methods like voice and gesture control. To handle this range of inputs, developers had to write complex, separate event listeners for MouseEvent and TouchEvent interfaces. This led to bloated codebases, fragile abstractions, and complex edge cases. The Pointer Events API, initially championed by Microsoft in Internet Explorer 10 and eventually standardized by the W3C, solves this fragmentation. It provides...
Responsive images have significantly improved web performance by saving users from downloading unnecessary bytes. However, implementing them effectively has long been a source of frustration for developers. The new sizes="auto" feature changes the way you write image markup, significantly reducing developer overhead. This article explores the evolution of responsive images, explains the mechanics of srcset and , and details how sizes="auto" simplifies the process. The evolution of responsive images Before responsive image standards existed, developers used a single src attribute. This forced all users—regardless of device size or network connection—to download a single, often enormous, image file. As mobile web...
One of the things that concerns me about the current state of AI in instructional design is that it often feels like a rehash of every technology hype cycle we've seen before. We get excited about the potential of a technology, we see some early successes, but then we hit a wall where the technology can't quite deliver on the promises. I worry that we might be in for a long period of disillusionment before we see any real breakthroughs. This post is not meant to be a critique of AI in instructional design, but rather a reflection on the...
This guide covers how to capture Core Web Vitals locally using pure ES Modules without a bundler or import maps and route that data to an analytics platform so you can monitor real user performance. Local Setup & Implementation To avoid third-party dependencies and build steps, host the library locally and use native browser modules. Download the Library Download the self-contained ES Module version of the web-vitals library directly from a CDN. 1. Navigate to in your browser. 2. Save the contents of that page to your project directory at /js/web-vitals.js. Create the Tracking Logic Create a file named /js/vitals.js....
When we build interfaces or components, we must decide how to organize our code. Do we group files by type e.g., all CSS in one folder, all JavaScript in another or by feature e.g., all files related to a specific component together, or do we bundle everything into a single module? This decision can impact the maintainability and scalability of our codebase. As I've researched this topic, I've come across several resources that discuss different approaches to organizing code and related concepts. This post explores how to build components by analyzing different approaches to code organization and the concepts of...
Responsive web design has always meant breakpoints. You pick a handful of viewport widths—375px, 768px, 1024px, 1280px—and write media queries to reshape your layout at each one. For most of the history of responsive design, that was the entire toolkit. But two developments have opened up a different conversation. First, CSS container queries finally shipped in all major browsers, giving us a way to respond to container size rather than viewport size. Second, a growing body of design and engineering work argues that breakpoints are often applied too bluntly—switching layouts too early and too abruptly, leaving a lot of perfectly...
