Friday Front-End - Issue #290: Comparing the new Space Jam site to the old. Plus, gap for flexbox, vaccine site performance issues, and more!

Then along came CSS Grid, and grids could have not-margin not-trickeried minimum gaps between grid cells, thanks to grid-gap. Flexboxes did not have gaps. Now they can, thanks to the growing support of gap, the grid-gap successor that isn’t confined to grids. With gap, you can gap your grids, your flexboxes, and even your multiple columns. It’s gaptastic!

Hurdles in performance and accessibility are a special burden for many who need the vaccine the most. Low-income communities of color, which have been hit particularly hard by the pandemic, tend to have lower levels of digital access and computer literacy. The elderly and people with disabilities, despite being first in line for the vaccine, are also some of the most likely to struggle through a complex sign-up process. And as vaccine eligibility expands and more people look for appointments, the problems will only compound. 

When someone says ‘SVG animation’, what do you picture? From conversations at my workshops I’ve noticed that most people think of illustrative animation. But SVG can come in handy for so much more than jazzy graphics. When you stop looking at SVG purely as a format for illustrations and icons, it’s like a lightbulb goes on and a whole world of UI styling opens up. One of my favourite use-cases recently is to use SVG to make responsive animated image grids.

How do leading front-end teams keep up? What’s their testing strategy, and what methods do they use? I researched ten teams from the Storybook community to learn what works — Twilio, Adobe, Peloton, Shopify and more. This post highlights UI testing techniques used by scaled engineering teams. That way, you can create a pragmatic testing strategy that balances coverage, setup, and maintenance. Along the way, we’ll point out pitfalls to avoid.