? Links from around the web
Amelia Wattenberger has written this wonderfully interactive piece about React Hooks and how they can clean up our code and remove all those troubling lifecycle events:
Here’s a great post by Karolina Szczur on how to automatically compress images on pull requests. This is all possible with a GitHub action called image-actions where it will run through every image in your repo and optimize them as you commit. And that’s neat because it’s constantly reminding us about the performance cost of things, too:
I’m super excited about GitHub Actions because I reckon they can take a bunch of complexity out of build steps or Gulp/Grunt setups and offset that complexity onto GitHub itself. If you’d like to learn more, Sarah Drasner wrote up a great introduction about them all a while back.
Adrian Roselli wrote about how to make tables with expando rows but how to do so with accessibility in mind. Here’s an example of that:
This just came up in a discussion the other day and so I’m super grateful that Adrian has done all the hard work looking into this.
? Notes from the blog
A Proof of Concept for Making Sass Faster
Sebastian Webb has a few ideas for making Sass compile times as fast as Microthemer, a WordPress CSS editor that does a lot of neat performance tricks, like this:
In order to feed the Sass compiler less code, Microthemer maintains an understanding of Sass entities used throughout the code base, like variables and mixins. When a selector is edited, Microthemer only compiles that single selector, plus any related selectors. Selectors are related if they make use of the same variables for instance, or one selector extends another. With this system, Sass compilation remains as fast with 3000 selectors as it does with a handful.
That’s neat! Sebastian then breaks down how Microthemer has this rather startling performance boost and makes a call for the Sass community to try and integrate some of their ideas.
Web Development Merit Badges
Chris came up with a bunch of merit badges for us web developers to earn when we do something to be proud of:
These would make for some really cute pins, too!
A Glassy (and Classy) Text Effect
This is a super cool effect made with backdrop-filter and clip-path that makes the text this sort of have this glass background. Apple has been using it a lot lately in their marketing material and even in their operating systems. Chris made a demo that looks something like this:
If you’re unfamiliar with the backdrop-filter CSS property then we wrote about that a while back and showed a couple of ways that it might be used in our UIs. Like in this demo, where we showed all the different options that are available and how they effect the background of an element:
It’s not available in all browsers just yet but it’s easy enough to make fallbacks that work for everyone. I’m still pumped about them though as it feels like they significantly push forward what we can do with graphics on the web. It’s exciting stuff!
All-in-one visual testing and reviews
Automate manual QA to catch visual UI bugs and get continuous visual coverage.
With Percy’s all-in-one visual testing and review platform, it’s easy to test your UI across browsers and screens on every pull request.
Were you aware there is a thing called the Web Share API? It’s the kind of thing I consider the web platform at it’s best. The browsers and standards bodies-that-be know that people build buttons to share to social platforms and put them on sites. Like wildfire, really. Most sites have them than don’t, it feels like. So why not build that functionality into browsers in an extensible, standardized way. That’s exactly what it is – and it is friendly with the sharing mechanisms that mobile operating systems have as well, so it’s not competing with that.
Ollie Williams has dug in with all the UX considerations of Web Sharing and he’s got some great thoughts.
Jetpack
Jetpack brings a whole range of features to your self-hosted WordPress site. From real-time backups that keep your site safe (and easy to move) to improved search results — it’s a no-brainer plugin for people serious about making their sites better. Heck, it even does a lot of heavy lifting for CSS-Tricks and we couldn’t be happier with it.
Browser support for display: flow-root; is getting very close to very good and I suspect a lot more of us will jump on using it for clearing them floats!
