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...
When we use web fonts, we often specify a font using the font-family at-rule. This allows us to specify a list of fonts that the browser should try to use, in order of preference. If the first font isn't available, the browser will try the next one, and so on, until it finds a font that is available on the user's system. However, when we specify a font override in a child element, it can break the fallback mechanism of the font-family property. This post will explore how font family fallback works in CSS, and how to avoid common pitfalls...
As CSS evolves, the CSS Working Group continues to introduce features that replace older, brittle patterns. Many teams, however, still rely on legacy techniques and characterize newer approaches as "over-engineering." Kevin Powell's presentation at CSS Day 2024 captures this tension by reframing "over-engineering" as a practical path to mastering modern CSS. This article examines that argument and extends it by showing how complex internals can still expose a simple, maintainable interface for day-to-day development. Kevin's Presentation Kevin Powell’s presentation at CSS Day 2024 advocates for "over-engineering" as a primary method for mastering modern CSS and discovering robust, future-proof patterns. He...
AI-Generated UI Is Inaccessible by Defaulthttps://frontendmasters.com/blog/ai-generated-ui-is-inaccessible-by-default/ presents a bleak picture of the current state of accessibility in AI-generated user interfaces. The article highlights that AI-generated UIs often lack proper semantic structure, ARIA attributes, and keyboard navigation support, making them inaccessible to users with disabilities. It also provides examples of how to incorporate accessibility into AI-generated designs. I agree with the critique, but I think it doesn't go far enough in addressing the root cause of the issue: the lack of specificity in AI prompts when it comes to accessibility. This post will explore the challenges of AI-generated UIs and offer...
A production-ready web component feels invisible to the developer using it. It should behave exactly like a native HTML element, such as an or a tag. Achieving this requires meticulous API design. This guide explores how to build predictable APIs for your custom elements and how to architect them so that simple tasks remain effortless while complex integrations remain possible. Predictable API Design When developers use your component, they bring expectations based on years of interacting with the standard Document Object Model DOM. Breaking these expectations creates friction and bugs. Synchronize Properties and Attributes HTML attributes like and JavaScript properties...
