A persistent CSS quirk often baffles developers: when styling inline <code> elements inside a heading, the monospace text appears significantly smaller than the surrounding text. Inspecting the element confirms that the font size inherits perfectly, yet the browser stubbornly renders the monospace text smaller than the rest of the heading. This discrepancy does not originate in the CSS itself. It stems from a longstanding behavior known as the user agent fixed-width font size quirk. Modern browsers maintain distinct default font sizes for standard text and fixed-width text. This post explores why this discrepancy occurs, how the font-family: monospace, monospace; declaration...
I've maintained a public Hombrew tap for several years, initially to distribute custom builds of packages that were not available in the main Hombrew repositories. Over time the tap evolved to include a mix of my custom tools and scripts and my own builds of tools I wanted to customize. But the build process and infrastructure have changed significantly since I first set it up, and I recently migrated the tap to use GitHub Actions and GitHub Packages for building and distributing bottles. Distributing your custom Homebrew formulas with pre-compiled binaries bottles ensures fast, frictionless installations for your users. If...
Code splitting is the practice of breaking JavaScript code into small chunks that the browser can load on demand. This technique optimizes load times and improves user experience by only loading the code necessary for the current page or route. Vendoring often called vendor chunking is the practice of extracting third-party dependencies—such as React, Lodash, or utility libraries—from the main application code and bundling them into separate files. Instead of serving a single, massive bundle.js file to users, you serve the application code app.js and the dependencies vendor.js separately. This strategy optimizes browser caching because third-party libraries change much less...
The web has evolved significantly since its creation, and with it, the technologies that power it. Chief among them is CSS, which has undergone significant changes since it was first introduced in 1996. As developers look to the future of web development, it is important to look back and understand the history of CSS, how it has evolved, and what lessons the industry can learn from its past. This post explores the history of CSS, from its early days to its current state, and how developers can use that knowledge to improve future web development practices. It also examines tools...
The Dublin Core Metadata Initiative DCMI provides a robust vocabulary for describing digital resources. While understanding the theory behind DCMI is helpful, applying it correctly ensures your content is discoverable and interoperable across the web. This guide provides practical examples of how to use Dublin Core metadata and explores the technical history behind its dual namespaces. The history and evolution of Dublin Core To understand how to apply Dublin Core today, it helps to understand why it was created. In 1995, during the OCLC/NCSA Metadata Workshop in Dublin, Ohio, the World Wide Web was experiencing explosive growth. Finding specific information...
While exploring features like CSS grid lanes/experimental-native-css-grid-masonry/, a critical question arises: If the visual order of items differs from the Document Object Model DOM order, does it break accessibility for users who rely on assistive technologies? The answer requires understanding the difference between document order the sequence of elements in the HTML and visual order the sequence in which items display on the screen. When these two orders diverge, it can severely impact users with different kinds of disabilities. This post explores document order, visual order, and how to balance complex CSS layouts with strict accessibility requirements. Defining the problem...
Cross-origin isolation is a security feature that allows web applications to securely use powerful features like SharedArrayBuffer and high-resolution timers performance.now. To protect user data from side-channel attacks like Spectre, browsers disable these features by default. By enabling cross-origin isolation, you prove to the browser that your application safely manages cross-origin resources, granting you access to these advanced APIs. This guide explores what cross-origin isolation headers are, how they function, the impact of misconfiguration, and how to safely implement and test them. Why is Cross-Origin Isolation Necessary? Modern browsers load resources from multiple origins into the same process. While convenient,...
Standard YouTube embeds are notoriously heavy. A single iframe can download over 1MB of JavaScript and block the main thread, significantly hurting the Largest Contentful Paint LCP. Furthermore, if dimensions are not strictly reserved, the embed causes Cumulative Layout Shift CLS as it loads. This post documents the process of building a production-grade embed component that solves these issues using Web Components and React. The core problems Developers must address three primary issues with the standard YouTube embed: Cumulative Layout Shift CLS : When an iframe loads, it often starts with zero height and then "pops" open to its full...
Until now, creating masonry layouts on the web has required either CSS hacks or JavaScript libraries. While functional, this approach introduces additional dependencies and potential performance issues. In 2025, the CSS Working Group began discussing native support for masonry. Following contentious debates over multiple proposals, the grid-lanes syntax reached consensus in early 2026 and is currently being prototyped in browsers. This post covers grid lanes, how they function, and how to integrate them with traditional grids and subgrids for complex layouts. The problem: The "gap" in CSS grid CSS Grid is two-dimensional; it aligns items to both rows and columns....
Standard YouTube embeds are notoriously heavy. A single can download over 1MB of JavaScript and block the main thread, significantly hurting the Largest Contentful Paint LCP. Furthermore, if dimensions are not strictly reserved, the embed causes Cumulative Layout Shift CLS as it loads. This post documents the process of building a production-grade embed component that solves these issues using Web Components and React. The core problems Developers must address three primary issues with the standard YouTube embed: Cumulative Layout Shift CLS : When an iframe loads, it often starts with zero height and then "pops" open to its full size,...
