The WebCodecs API
The WebCodecs API 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...
CSS - what we are missing
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...
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...
Generating Random Values in CSS
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...
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...