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...
For 13 years, I relied on WordPress to run my blog. While it was a great tool, it was also a pain to maintain and update. Security issues, plugin conflicts, and performance problems were common. I also had to pay for hosting and domain registration. In 2020, I switched to a static site generator. WordPress’s migration to a React-based block architecture felt too complex and inflexible for my needs. I chose Eleventyhttps://www.11ty.dev/ because it was simple, fast, and easy to use. I also liked that it was built on Node.js, which I already knew. There is no single best solution...
The rise of AI has sparked a new wave of copyright battles, with publishers suing AI companies for using their content without permission. An unexpected casualty in this war is the Internet Archive's Wayback Machine, which has been systematically blocked by 241 news sites across nine countries since late 2025.^1 This means that when a news article is edited after publication, there is no way to document those changes, erasing accountability and the historical record. This post explores the implications of this development, why it matters, and what it reveals about the AI copyright debate. The Internet Archive and the...
