#149

[Robin]: The best thing I saw this week in the world of front-end development was this bonafide CSS/HTML trick from Brad Frost and Dave Rupert on reducing motion with the picture element. Those two wondered if they could use the picture element to load an animated GIF or, if the user had opted to reduce motion in system preferences, to load a static image instead.

The code looks like this:

<picture>
  <!-- This image will be loaded if the media query is true  -->
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source>

  <!-- Otherwise, load this gif -->
  <img srcset="animated.gif" alt="brick wall"/>
</picture>

And it works! But I think the nifty thing about all this is that because these elements (like the picture element, srcset, passing a media query into source and the prefers-reduced-motion CSS property) were designed as little building blocks that they could so easily be snapped together in this entirely new way.

The example above is about more than accessibility (making sure that users who have opted out of animated interfaces don’t get them – although yes, that’s important too!). It’s bigger than that. What the code above proves is that the standards process – and all these different working groups that made this possible – is a dang wonderful thing.

Incidentally, I wonder if combining that with the idea of serving video files instead of GIFs, like we covered here, would be a good idea. Building blocks indeed.

It reminds me of videogames like Spelunky or Zelda where the designers have built a series of independent systems (such as the weather, combat, physics and damage) that can then interact with one another in truly unpredictable and oftentimes funny or peculiar ways.

So amidst all the news of the web getting slower and worse or being overrun with shady, corporate interests – this one example is in stark contrast to all those harbingers of bad news.

That makes me thoroughly excited for the future of the web!

📝 From the Blog

Code as Documentation: New Strategies with CSS Grid

Sally McGrath explores how we can better document our code and she takes a deep dive into how she’s working with CSS Grid. I particularly like what she has to say here:

With CSS Grid, there’s no excuse to move around HTML in service to the layout. Your content can always flow logically while changes in layout happen in CSS.

That’s super exciting! And I especially wonder how much more powerful CSS Grid is about to get, what with Firefox Nightly shipping subgrid the other day.


Khari McMillian talks about the various ways you can implement “private” variables in JavaScript.


Netlify Functions for Sending Emails

Chris looks into how you can send emails from your site, even if your setup is on the JAMstack (so that means you want all the benefits of having a backend, but without the backend languages). That’s where Netlify functions come in!

This post is also a nice reminder that Chris’s talk about the All Powerful Front End Developer is worth checking out if you haven’t already. In that talk, he digs into why tools like Netlify Functions gives front-end developers new superpowers.


Salomone Baquis talks about a practical use case for Vue render functions.


Tabs: It’s Complicated™

Tabs are pretty tricky to get right and, in this post, Chris explains how and why. The tricky part is accessibility, as we always need to make sure that folks can use the keyboard to navigate through each item:

Here’s the kicker:

There is plenty of talk about JavaScript frameworks being a scourge across the web because they seem to be ushering in an era of worst-in-class accessibility. But what if your muscle memory for building tabs was reaching for a pre-built tabs UI that brings along all the right functionality and left styling largely to you?

This relates to what Susan Robertson wrote the other day about her work on a design system that’s used for many different sites, and one with components that need to be styled and themed in a ton of different ways:

I think most components in a large system that has to function for multiple networks/designs/sites should be minimally styled, the absolute bare minimum they need. And in some cases they should be without style and allow for the markup to change if at all possible.

I can hear you in my head right now, you’re sitting there reading this and thinking, “but wait, how can it be a design system if things aren’t styled, where is the design part?” And to be honest, a few months ago I would’ve said the same thing if I read what I just wrote above.

But if that component is going to do its job well, it needs to be as flexible as possible. And in the case of a component that may be used for a local news site, or a site about real estate, or a site about national news, it’s fairly hard to make it flexible if it’s heavily styled right from the get go.

This might already exist, but I wonder if there’s a need for something like Bootstrap or another similar framework but one that doesn’t have any styles with it whatsoever. Design-agnostic, so to speak. That way we could pull things in from that library and style them in any way we see fit, whether that’s for a giant design systems with hundreds of engineers using your components or a tiny personal project where you might want to make things a bit flashier.

Not only that, but by focusing solely on markup and accessibility, this framework wouldn’t have to worry about a build process or whether your team prefers Sass or styled components. It could allow for that flexibility across teams whilst sticking to the rigorous needs of making accessible markup.

That sounds like a library that everyone needs!


SPONSOR

WordPress.com

WordPress powers 31% of the internet. Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tool.

Get Started →


Lentie Ward talks about creating interactive SVG maps in WordPress.