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...
When working with Typescript, there are times when we need to assert the type of a value to help the compiler understand our intentions. But understanding what assertions are is not always straightforward since there are many different kinds of what Typescript calls assertions. This post will discuss assertions: What they are, how they work, the different kinds of assertions and how they compare to type guards. What are type assertions? Type assertions in Typescript tell the compiler to treat a value as a specific type. It's a way for the developer to say, "I know more about the type...
What it is The ai-summary element is a zero-dependency, progressive enhancement web component that automatically summarizes a given block of text on a webpage. This component is designed to be as efficient as possible by first attempting to use experimental, built-in browser AI capabilities. If those are not available, it gracefully falls back to a high-quality, in-browser model using the transformers.js library. How It Works The component follows a "native-first" approach to ensure the best performance for your users: Native Browser AI Primary Method: The component first checks if the browser supports the experimental Summarizer API. This new API allows...
Rather than using tools like LangChain and LangChart for machine learning, you can use Chrome's built-in AI capabilities for some cases. This post will explore the Built-in AI features of Chrome, how they work, how to enable them and how to use them with third-party fallbacks for browsers that don't support these features. Enabling Gemini Nano in Chrome Get the Right Chrome Version: The version you need depends the API you want to use: For early access to the core createTextSession API, you'll need Chrome 127+ or +higher. For task-specific APIs like Summarizer and LanguageDetector, you'll need Chrome Stable version...
The CSS @function at-rule allows you to create reusable, static functions, making your code more DRY Don't Repeat Yourself, modular, and maintainable. This post covers the @function syntax as implemented in recent Chrome 139+ and as specified in the CSS Custom Functions and Mixins Module Level 1https://www.w3.org/TR/css-mixins-1/ draft. What It Is The CSS @function at-rule is conceptually similar to the SASS @functionhttps://sass-lang.com/documentation/at-rules/function/ at-rule. css @function --function-name--arg1: default, --arg2 returns { / Function body with logic / result: / some computed value /; } The components of the function are: --function-name: The name you use to call the function, prefixed with...
