Creating a Font Inspector
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...
A Deep Dive into Modern Fonts
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...
New CSS Property - interpolate-size
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...
Type Assertions in Typescript
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...
AI Sumarizer Custom Element
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...
Chrome built-in AI
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...
CSS @function
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...
Who are we writing for in the web?
As we write for the web, we face a dual challenge: catering to human readers while also considering how machines will interpret our content. These audiences have very different needs. For humans,...
Langgraph and Langchain on the web
One of the most inspiring visions for personal computing was Apple's 1987 "Knowledge Navigator" concept video. It depicted a user interacting seamlessly with a digital assistant that could...
Digging Deeper into WebGPU
WebGPU is a new, modern API that exposes the capabilities of graphics hardware for the web. It is the successor to WebGL and is designed from the ground up to provide better performance, more...