How to embed AV1 Image File Format (AVIF) images

New in Chromium 85 is support for the AV1 Image File Format (AVIF), which is pretty impressive: AVIF offers significant file size reduction for images compared with JPEG or WebP; ~50% savings compared to JPEG, and ~20% savings compared to WebP. 🦊 Using Firefox and can’t wait to use AVIF images? Set the image.avif.enabled flag […]

The difference between aria-label and aria-labelledby

LΓ©onie Watson (@LeonieWatson) explains the difference between aria-label and aria-labelledby: The aria-label and aria-labelledby attributes are both used to give an element it’s accessible name. The difference between aria-label and aria-labelledby is where they get that piece of text, and the clue is in the name. The aria-label attribute gives an element its label; an […]

Serverless functions with Vercel

Have a static site but looking to add backendy stuff β€” such as subscribing to a newsletter β€” to it? Geoffrey Dhuyvetters from madewithlove walks us trough setting up a serverless function with Vercel (formerly known as Zeit): In this article I’ll walk you through the steps to create serverless functions with Vercel. These functions […]

What’s new / coming to Google Cloud Run?

At Google Cloud Next ’20, Cloud Run Product Manager Steren Giannini (@steren) walked us through some of the new things that are coming to Google Cloud Run. Some highlights: VPC Peering Gradual Rollouts (with custom URLs per tagged release) New Load-Balancing Features (Multi Region, Cloud CDN, IAP) Easy Continuous Deployment Min instances (no cold starts) […]

Stealing Local Files using the Web Share API (in Safari)

One of the features of the Web Share API is that it allows you to share files along with your share intent: if (navigator.canShare && navigator.canShare({ files: filesArray })) { navigator.share({ files: filesArray, title: 'Vacation Pictures', text: 'Photos from September 27 to October 14.', }) .then(() => console.log('Share was successful.')) .catch((error) => console.log('Sharing failed', error)); […]

Semantically Identify a Heading Subtitle with ARIA role="doc-subtitle"

Over at CSS-Tricks, Chris takes a look at how to mark up a β€œDouble Heading”, a common pattern where you have a big heading with a little one preceding/succeeding it (as pictured above). After going over a few options, the answer comes from a tweet by Steve Faulkner: use role="doc-subtitle" for the secondary heading. As […]

Make <input type="number"> respond to arrow keys with modifier keys

By default <input type="number"> elements will increment/decrement by its step attribute value when pressing the up/down arrows. Kilian Valkhof provides us with some JavaScript to have these elements also respond to up/down keypresses while holding modifier keys. When someone uses the arrow keys in the input field, we want the following to happen: If they […]