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...
I love the way Lea Verou's web site looks, particularly the way the admonitions look on her site. I looked at t he CSS she used for the admonitions and thought it would be fun to create my own version that mimics the style of her admonitions. Along the way I decided to move it to a custom element and to keep the code dry by creating a base admonition and use custom versions to extend it. This way, I have more flexibility on styles and I can easiy create new types of admonitions without having to duplicate code. This...
In From Markdown to PDF: Pandoc/from-markdown-to-pdf-pandoc/, we explored how to use Pandoc to convert Markdown into PDF. While Pandoc is a powerful tool, it has limitations in terms of styling and layout control; it uses LaTeX under the hood, which can be difficult to customize and often locks dependencies into what's available in the TeX ecosystem. > Note: This post does not cover installation or setup of Pandoc, Saxon-HE, or PrinceXML. Please ensure these tools are installed and available in your environment before proceeding. Below is a summary diagram of the pipeline stages and file flow: mermaid graph TD AMarkdown...
When I first thought about automatically geneerating PDF version of my blog posts, I thought it would be easy: Just create a shell script that would run Pandoc to convert each document into its PDF equivalent. First discovery: Pandoc uses LaTeX to do the conversion. Second discovery: LaTeX is very strict on how it wants its input formatted and how it reacts when it isn't. This led to the two scripts that will be discussed in this post. In a later post I will discuss a different alternative using XSLT, CSS and PrinceXML as an alternative PDF generation alternative. Software...
Node.js developers frequently encounter situations where working with the real filesystem creates friction: Testing: Unit tests that manipulate files need cleanup, deal with disk I/O latency, and struggle with isolation. Tests often stub the fs module entirely, losing the ability to test file-system-dependent logic realistically. Development: Building tools like bundlers, code generators, and template engines often need to generate files temporarily. Managing temporary directories becomes boilerplate. Filesystem isolation: Applications sometimes need to isolate filesystem operations by scoping accessible paths so user-provided workflows cannot freely access the host filesystem. In-memory workflows: Dynamic environments like browsers with WebAssembly or serverless platforms may...
