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 […]
Tag Archives: link
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 […]
CSS Vocabulary
If you’re unfamiliar with some of the CSS terms like Selector, Attribute Selector, Expression, Declaration, etc. then CSS Vocabulary will come in handy. It’s a page containing a CSS code snippet. You can click on each part of the code (or in the sidebar) to see which part is what. CSS Vocabulary →
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 […]
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 […]
Go Make Things: Service Workers
Chris Ferdinandi has been writing an excellent post series on Service Workers. After first explaining what Service Workers are and how to create one, he — as per usual on Go Make Things — also provides us with practical scenarios such as making pages available offline, caching web fonts to improve rendering, etc. Go Make […]
Understanding Git: Dispelling the magic of git merge
If you’ve ever wondered how Git internally manages commits and merges, Zvonimir Spajic (@konrad_126) has got you covered: Creating branches in git is blazingly fast and having a bunch of them is pretty cheap. This means we get to merge them quite often. But how is a branch represented internally and what does it mean […]
Making Facebook.com accessible to as many people as possible
With the new Facebook coming soon to all users, the developers saw an opportunity to build a11y in from the start: To make the new site more accessible, we were able to introduce guardrails right from the beginning, integrate focus management into the core infrastructure, support features that weren’t available when we built the original […]