The iconic 1996 “Space Jam” website was recently relaunched to promote the new movie. Thankfully, the developers still kept the old site around to preserve its intergalactic legacy.
It’s not often that a website stays up mostly unchanged for 25 years. So out of curiosity, I ran a quick check on both sites.
Unsurprisingly, the new site is a lot heavier than the original: with 4.673KB vs. 120KB, the new site is about 39 times the size of the old one. That’s because the new site has a trailer video, high-res images and a lot more Javascript.
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.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.