AVIF has Landed!
Big news this week: a wild new image format appears! And, as Jake Archibald writes, it’s called AVIF and it just launched in Chrome, so you can use it today with the help of the picture element:
Why would you want to use this new format though? Well, that’s because AVIF is remarkably tiny. In Jake’s post he shows how AVIF can be under half the size of a WebP image, which is about half the size of the common JPEG. However! As with all things when it comes to images on the web, there are a few caveats that are worth reading about.
[Chris]: I love seeing innovation here. HTML and browsers are ready for new technology like this and give us the tools to take advantage of resonsibly. But be extra careful! This isn’t necessarily an “if support, then use it” technology. I’ve seen AVIF images that are double the size of the original, there are situations where it’s lossless encoding doesn’t look great, and other cases where WebP is smaller. So this really complicates image equations and provides a lot of opportunity for image CDNs to step in and help us make better choices without every image being a manual job.
Source Order Viewer
When we write CSS, the source order of the markup can sometimes be different than what we see visually on the page. For example, a screen reader might read one element but, unbeknownst to you, that element is visually at the bottom of the screen. This is what prompted Adrian Roselli to make a suggestion not so long ago for a way to open up DevTools and see the source order when you highlight an element.
Edge 86 just introduced that very feature:
See how those numbers are shown in the top left of each element? That means 11 will be read before 12, etc. Pretty neat!
Using the brightness() Filter to Highlight Content
Okay, so when I read this I gasped aloud because Rick Strahl suggests using the CSS brightness() filter to generically add hover or focus states to clickable elements like this:
As Rick suggests here, I think this could also be extremely useful for reducing the number of color variables you need for dark/light mode interfaces:
I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients and opacity to effectively ‘highlight’ a control. All that works of course, but the problem with most of these approaches is that one way or the other you’re hard coding a color value, image or gradient. Which means every type of button needs it’s own highlight configuration and if you’re doing any sort of theming the buttons need to be overridden for each theme to work typically.
(I am definitely going to steal this idea for every project from now on.)
How to Make oooOooo Handwriting Animations
Trapti Rahangdale wrote this great piece about how to make a word look as if it is being slowly written by animating irregular SVG strokes like this:
Heck. Yes. This looks like that classic CSS trick where you animate the SVG properties stroke-dasharray and stroke-dashoffset but it’s also using a handdrawn mask that Trapti creates in Adobe Illustrator which sits on top of the letters. So really, it’s the mask that’s animated.
This is pretty darn smart and I wish I’d thought of this a few weeks ago when I was working on a project that could’ve used this technique. Bookmarking this for later.
How CSS Perspective Works
The other week I moaned about not seeing enough interfaces on the web that play with perspective and so it appears that Amit Sheen heard this enormous moan and decided to do something about it because here’s a great rundown of how perspective works in CSS:
As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D effects all by itself (since basic shapes can’t have depth), you can use the transform property to move and rotate objects in a 3D space (with the X, Y, and Z axes), then use perspective to control depth.
Amit then walks us through how to create this charming 3D cube with nothing but HTML and a bit of CSS.
Using the Ant Design System with Nuxt
Sarah Drasner shows us how to set up the Ant Design System with Nuxt and why we’d want to do that in the first place. Sarah writes:
I don’t typically work with UI libraries because they can be cumbersome and hard to override, which can contribute to a bloated. However, Ant Design has recently gained some some of my affection because it’s easy to use, has extensible defaults, and features a delicate design.
If you’re starting a new project with Vue, this seems like a great place to get started, especially if you don’t want to build a whole bunch of components yourself. Should we build another datepicker from scratch for the ten millionth time? Mmmmm maybe not. Ant Design to the rescue, then!
Thinking about it for a bit, it’s sort of interesting watching all these UI libraries/frameworks grow over time. I especially like these “go go go” sort of frameworks where the whole idea, as Sarah shows in this post, is that they let you focus on the variables in your stylesheets so you don’t have to worry too much about modifying the functionality of the components themselves. This is great for building UIs quickly.
But as wonderful and as useful as these frameworks are, I think I’d prefer a UI framework with no default styles at all. I often find myself wanting the accessibility and the markup baked into the components more so than I want the styles themselves. Mostly this is because whenever I’m working on a project, designers tend to make big (and useful) changes to the component to fix a very specific problem. But in terms of accessibility? All datepickers/forms/whatever should probably be the same under the hood.
That, at least for me, is always the thing I want from a UI framework. Making things accessible is the hardest part of building a website; not so much the styling aspect. But there’s also no right or wrong answer here! To be honest, I don’t think we should force people to learn CSS if they want to build a website. I know that might be sacrilegious but the web is meant for everyone, not just for folks that know how to use CSS grid and understand the finest details of HTML.
Sarah’s post also reminds me that websites are extremely complex beasts and each website feels like an entirely separate project. Take the other day when I built a tiny website for a pal of mine — I didn’t use a single line of JavaScript, and I didn’t have a complex build system like Grunt or Gulp or what have you. What we did instead was write all of the code in CodePen and then export it once we were finished. To deploy the site, we simply drag-and-dropped it into Netlify. We didn’t even need Git!
I guess that’s what I find remarkable about these UI frameworks: each one shows me another approach to building a website, and none of them are wrong.
Sponsor
Grow your email list with Jetpack’s new Creative Mail integration
Creative Mail is this new email marketing plugin for WordPress, brought to you by the Constant Contact team. It’s designed to pull WordPress content into emails, with plans to offer triggered and automated messages for your WooCommerce store as well.
Jetpack’s new Creative Mail integration lets you add a newsletter sign-up form anywhere on your WordPress site — and is as easy dropping a block right into the page editor. Together, Jetpack, WooCommerce and Creative Mail form a powerful trifecta of e-commerce awesomeness, growing your business and making it easier than ever to engage with customers!
[Chris]: Last year I rounded up some options for self-hosted analytics. I just saw another that looks nice: Umami.
A lot of these are in this special category of analytics that is purposefully limited. Chances are, with generic website analytics, what you want to know is what your most popular content is and what kind of traffic you’re getting. So that’s what they deliver. They aren’t intended to track things like how many PRO users clicked the “Embed” button after vs. before Tuesday’s tagged release. I can see both being useful, but I always lean toward analytic data that is informed by a question that you ask rather than data that just appears by default. That’s my point in The Analytics That Matter.