Model Context Protocols MCPs are an interesting adjacent technology to large language models LLMs and AI agents. They provide a standardized way for AI models to interact with external data sources, tools, and systems, enabling them to access real-time information and perform complex tasks that go beyond their initial training data. This post explores what MCPs are, how they work, and how they can be used to enhance the capabilities of AI agents. What Are Model Context Protocols? Model Context Protocols have emerged as a pivotal technology for enhancing the capabilities of AI agents. At its core, an MCP is...
I've always struggled with how to integrate AI into web applications. It wasn't until I learned about Transformers.js and the Chrome native AI APIs that I realized how powerful these tools could be. The first AI component I created was a summarizer that used Chrome's Native AI capabilities and a fallback based on Transformers.js. This allowed to provide an AI-powered summary feature for all browsers. This post will discuss the creation of a translation custom element that uses AI to translate text content. The component will use Chrome's Native AI capabilities when available and fall back to Transformers.js and a...
When I first conceived the idea of creating a custom element for text to speech TTS, I envisioned a simple web component that could leverage existing web technologies and AI, packaged as a web component so it could be easily integrated into any web page. The result was interesting, to say the least, and ended as something completely different from my initial idea. This post will walk through the process of building the custom element, the challenges faced, and the lessons learned in the process. The Initial Idea The goal was to create a component that could speak the text...
While modern CSS has adopted several powerful features that were once exclusive to preprocessors like SASS, a number of key SASS functionalities are still not natively available. For some of these, clever workarounds exist in pure CSS but, for others, there are no direct equivalents. This guide explores the features that both platforms now share, followed by the features that remain unique to SASS and their workarounds. Features Available in Both SASS and CSS The gap between SASS and CSS has narrowed as native CSS has adopted features pioneered by preprocessors. What's important to note is that even though the...
The WebCodecs APIhttps://developer.mozilla.org/en-US/docs/Web/API/WebCodecsAPI gives web developers unprecedented, low-level access to the browser's built-in media codecs the encoders and decoders that process video and audio. This unlocks a wide range of powerful, high-performance applications that previously required cumbersome WebAssembly libraries, server-side processing, or were simply not feasible in a browser. Imagine building applications like real-time video editors with transitions and effects, ultra-low-latency cloud gaming clients, or video conferencing tools that apply virtual backgrounds and noise suppression directly on the user's device. This post introduces the core concepts of the WebCodecs API, walks through a basic video encoding and decoding workflow, and...
CSS has come a long way since its inception, evolving from a simple styling language to a powerful tool for creating complex layouts and animations. I love playing with CSS and exploring its capabilities to create web pages that emulate magazine layouts while maintaining responsiveness and accessibility. There are still some features that I believe would greatly enhance the capabilities of CSS and make it even more versatile for developers. This post explores some of the features I think are missing in CSS and how they could enhance layout design, responsiveness, and overall user experience. Replacement for Regions CSS Regionshttps://www.w3.org/TR/css-regions-1/...
When working with custom fonts, especially variable fonts, it can be tedious to manually extract font metrics and generate the necessary CSS @font-face rules. A script that automates this process can save time and reduce errors. Rather than manually inspecting font files to extract their metrics and generate the appropriate CSS @font-face rules, we can automate this process with a Node.js script. This post will cover one such possible implementation using the opentype.jshttps://www.npmjs.com/package/opentype.js?activeTab=readme to read font files and extract their properties and the wawoff2https://www.npmjs.com/package/wawoff2 to handle WOFF2 decompression to work around a limitation in opentype.js. Why Create a Font Inspector?...
In modern web design, we treat fonts as a cornerstone of user experience. They convey brand identity, improve readability, and define a site's aesthetic. However, the methods we use to load these critical assets can dramatically impact performance. As web performance expert Jono Alderson has highlighted, many common font-loading practices actively harm site speed and user perception. This article explores the evolution of web fonts, dives deep into a complete strategy for mastering the @font-face rule, and looks toward the future of this essential technology. The Evolution from "Bulletproof" to WOFF2 The ability to use custom fonts on the web...
The interpolate-size property has been added to CSS to enable smooth animations when transitioning an element's size to or from intrinsic sizing keywords like auto. This post will cover what interpolate-size is, how it works, its limitations, and provide practical examples of how to use it in your web projects. What is interpolate-size? interpolate-size is a CSS property designed to solve a long-standing challenge in web animation: smoothly transitioning an element's dimensions to an intrinsic, content-based size like height: auto. For years, developers have struggled with creating fluid opening and closing effects for components with dynamic content, such as accordion...
Until now generating random values to use in CSS required Javascript to generate the random values and apply them to CSS rules. The CSS Working Group has created two different ways to generate and use random values in CSS independent of Javascript: the @random at-rule currently available in Safari Technical Preview and the proposed random function not currently available. This post covers what the @random rule is, how it differs from the proposed random function, its current limited browser support, and how you can experiment with it today. What is the @random At-Rule The CSS @random at-rule is an experimental...
