It was fun watching a bunch of back and forth blogging between a bunch of smart people quoting a bunch of smart people last week. If you missed it, you might wanna start at the end and work backward. It started with some broad and interesting classifications for design systems and sorta branched out a little bit from there, while not losing that core idea.
Here’s a CSS generator called Neuomorphism.io for creating “Soft-UI” but what really amounts to changing the shape, border-radius, and box-shadow of an element. It’s pretty nifty because I tend to find it difficult to get the box-shadow just right in the browser alone and so this should help get some visual design juices going.
The conversation around a new “version” of CSS is still cooking. What should we call it? CSS2020? CSS4? What goes in it? A bunch of stuff or just a handful of things? Who is this message coming from, the CSSWG or a ragtag band of authors?
Amber Wilson wrote about ARIA labels and how best to use them. One thing that stuck out to me here that I didn’t know about was that if we have two nav elements on a page then it’s necessary to use the aria-label to make them unique:
<nav aria-label="Main navigation">…</nav>
<nav aria-label="Social links">…</nav>However! Things get tricky if we want translation systems to be able to look into these attributes and so this won’t quite do the trick. Instead, we have to use a heading and the aria-labelledby attribute like this:
<nav aria-labelledby="secondary-navigation">
<h2 id="secondary-navigation">
Text describing the purpose this navigation
</h2>
</nav>Chris wrote about how to fetch and parse RSS feeds in JavaScript and, although that’s cool in and of itself, Dave Rupert then riffed on this idea to put it to good use: he made his list of favorites in his RSS reader public and then created a page on his blog that fetches them all like this:
I think that’s super neat! Although, as Chris mentions in his post, it might be a good idea for a production website to cache these responses instead, just for safe-keeping.
Here’s a tip: if you pop open Firefox DevTools it will show which elements on a page have scrollable overflow which can be especially helpful if you’re trying to figure out which part of a page has broken and is causing things to act strangely.
Links and buttons can quickly get confusing. Styling issues like links that look like buttons and buttons that look like links, as well as all the accessibility concerns with both elements can become daunting.
That’s why we just published our complete guide to links to buttons that ought to help on this front. I think it’s very much worth reading this post since links and buttons are the foundations of what we do as web designers and developers and we break down everything you need to know.
Here’s an outstanding post where Aggelos Arvanitakis investigates the unseen performance costs of modern CSS-in-JS libraries. Each step of the way Aggelos explains what’s happening in the browser as everything’s being styled and rendered. He writes:
Investigate whether a zero-runtime CSS-in-JS library can work for your project. Sometimes we tend to prefer writing CSS in JS for the DX (developer experience) it offers, without a need to have access to an extended JS API. If you app doesn’t need support for theming and doesn’t make heavy and complex use of the
cssprop, then a zero-runtime CSS-in-JS library might be a good candidate
“Zero-runtime” here means that your setup will still create a CSS file and so the user doesn’t have to pay the performance cost of this stuff. I think that’s almost always the way to go because our developer experience shouldn’t win against the user’s. And they shouldn’t have to pay for our nice developer environment really.
Brian Kardell has written this fabulous piece about container queries and the standards process for shipping new CSS features into browsers. There’s a hint of something coming down the line in the future which sure is interesting…
Sponsor
Netlify
High fives and a fist bump to Netlify for sponsoring this week’s newsletter! We love Netlify for so many reasons, it would take an entire post to cover — and we just so happened to do that. Netlify is probably the easiest way to run an SSG, and makes HTTPS a breeze because that’s what it is by default. We’re big fans and think you will be too when you give Netlify a try for yourself.
Sponsor
Motion
Motion is an animated SVG icon editor! Perfect for web designers and developers who want to take their projects to the next level. Free for Windows and macOS, it’s time to start shipping beautiful animations to production!
Ooooo hey pretty nice that <img loading="lazy"> will be hitting Firefox soon.