The introduction of the Web Model Context Protocol WebMCP and its deplyment in Chromium browsers reignites a longstanding debate over browser capabilities. At the heart of this discussion is a fundamental tension between empowering developers with rich web technologies and protecting users through restricted, highly secure browser sandboxes. This post presents my analysis and opinion on the WebMCP conversation and ancillary information that may help developers and researchers understand its implications. The Capability vs. Security Divide While Google argues these APIs are necessary for the web to compete with native mobile apps, both Apple and Mozilla maintain that the web's...
Modern web applications require robust localization to serve global audiences effectively. Historically, developers relied heavily on large third-party libraries to handle everything from date formatting to pluralization. However, modern browsers now ship with the powerful, native Intl API. Because it leverages the browser's built-in ICU International Components for Unicode database, utilizing the Intl API requires zero additional bundle size while delivering native execution performance. This post explores how to leverage the Intl API to handle complex localization challenges natively. Core API Architecture and Language Tags The foundation of the Intl API relies on BCP 47 language tags to identify the...
Creating fully interactive, browser-based coding playgrounds is a common requirement for technical blogs, documentation, and tutorials. Sandpackhttps://sandpack.codesandbox.io/ is a popular solution for embedding live code editors and previews directly in the browser. This post details how to build a fully interactive, browser-based coding environment using Sandpack, and how to seamlessly integrate it into an Astro project. Problem Statement and Assumptions Sandpack relies heavily on browser-specific APIs and ships a significant payload often 2MB+ including CodeSandbox logic, Prettier, and Babel, it serves as an excellent stress test for Islands Architecture. The goal in both frameworks is to prevent server-side rendering crashes...
When I first moved away from WordPress, I chose Eleventy for one reason: control. It is flexible and does not force a framework or folder structure. Over time, though, I started encountering tradeoffs. Some were platform constraints, and some reflected gaps in my own mental model of Eleventy. That led me to evaluate Astro more closely. This post compares Astro and Eleventy in three layers: architecture, content modeling, and a real-world hydration scenario. Key Differences Between Astro and Eleventy Astro and Eleventy both generate static HTML, CSS, and JavaScript, but they diverge in component architecture, hydration controls, and build ergonomics....
In this post, we'll explore the new CSS @function at-rule. It gives us a native way to package repeated value logic directly in CSS, without reaching for a preprocessor first. For years, tools like Sass and LESS were the default way to create reusable function-like patterns. They're still useful, but they require a build step. The CSS Working Group is bringing similar ideas into the platform itself, which makes some workflows simpler and more direct. The @function at-rule is experimental. Support is currently limited and can change quickly, so we should verify compatibility for our target browsers and always include...
In the rapidly evolving landscape of AI, ensuring that automated agents represent your company accurately is paramount. As organizations move from simple chat interfaces to complex autonomous systems, the need for strict, scalable guardrails grows. Understanding how to create these guardrails, often referred to as "Brand Constitutions," is essential for anyone looking to deploy AI at scale without risking off-brand or harmful outputs. This post covers everything from drafting your first set of rules to architecting dynamic, multi-tenant AI systems. Part 1: Strategy, Drafting, and Out-of-the-Box Tools Bringing a new AI tool into your workflow is a lot like hiring...
A growing claim says that AI tools will make coding skills obsolete. As tools such as GitHub Copilot, Gemini, and agentic systems improve, some people conclude that traditional programming knowledge is becoming optional. I am less worried about AI replacing programmers than I am about confusing code generation with software engineering. The key question is not whether AI can produce code. The question is whether we still need humans who can reason about correctness, safety, and architecture in an AI-heavy workflow. This post explores whether coding skills remain relevant or if we are moving toward a future of purely natural-language...
Over the last few years, the way we style web applications has shifted dramatically. One of the most significant forces behind this change is Tailwind CSShttps://tailwindcss.com/. Often described as a utility-first CSS framework, Tailwind has sparked intense debates. Some developers swear by its speed and consistency, while others criticize it for cluttering HTML and moving away from semantic stylesheets. I've resisted using and writing about Tailwind for a long time, but for specific types of projects, it's a powerful tool that can significantly boost development speed and maintain design consistency. In this tutorial, you'll learn how Tailwind CSS works, how...
I grew up with search. From the early days of Yahoo—built as a directory of links—to the modern algorithmic engines we have spent our careers optimizing for, search has been our compass. Today, we are witnessing a rapid transition from this classic "index-and-referral" model to an "all-in-one answer engine." That shift is not merely a software update; it is a structural realignment of the web’s economic and cultural foundation. The web is reaching a critical inflection point. Generative AI is being embedded directly into browser interfaces and search products, changing not only how people find information but also how websites...
Eventhough CSS provides a set of filters like blur, brightness, and drop-shadow, SVG filters offer a much more powerful and flexible way to create complex visual effects. By defining custom filters using SVG, you can achieve unique looks that are not possible with standard CSS filters. This post will cover how to define SVG filters and use them in CSS to enhance the web experience. It will not cover the individual filter primitives in detail, but will focus on how to set up and apply filters in a web context. Defining the filters There are two ways to define SVG...
