Frontend  Focus

#484 — March 31, 2021 | Read on the web

Developing For Imperfect: Future Proofing CSS Styles — How can we plan future-proof styles in a world with an infinite degree of device and user ability variance? This post explores how things break and how modern CSS provides solutions.

Stephanie Eckles

Who Has The Fastest F1 Site in 2021? — Jake did a performance review of F1 sites back in 2019, and he’s back with a bigger look over the sites of the various F1 teams to see how they’ve changed in the intervening years. A love for Formula 1 isn’t necessary, as this is an interesting, and detailed bit of performance spelunking in its own right.

Jake Archibald

What If a Headless CMS and Google Docs Had a Baby… — …And what if that baby really cared about workflow? And what if it was beautiful, and FAST, and structured, and… yeah… it would be a pretty cool baby, but imagine what it might become when it grew up.

GatherContent sponsor

Tools for Auditing CSS — What it means to ‘audit’ your CSS files, and what tools (both online and CLI) you should have handy for when it comes to do it.

Silvestar Bistrovi?

? Tutorials, Articles & Opinion

How GitHub Actions Renders Large-Scale Logs in The Browser — Rendering logs in a web UI might seem simple: they are just lines of plain text. At scale, though, it’s not quite so simple. GitHub ran some experiments and ended up writing its own library to render and manage a subset of logs at a time.

GitHub

A Complete Guide to SVG Generators — From SVG shapes and cropping tools to SVG filters, color matrix mixers and SVG to JSX generators.

Iris Lješnjanin

‘Font Size Is Useless; Let’s Fix It’ — What happens when you set fontSize: 32 in your favorite editor or even 32px on the Web? It’s complicated and a lot of variables go into it, whether on desktop or the Web.

Nikita Prokopov

The CSS File Size and Count Report for Bundesliga sites — A smaller but similar sort of endeavour to Jake’s F1 analysis (shared above) with a look at the CSS file sizes of various sites in the Bundesliga football league. Ivan did a report for the English Premier League too.

Ivan Smokrovi?

Learn How Pipeline Automation Helps PagerDuty Run 500+ Builds Daily — With their Buildkite pipelines, Pagerduty is able to go from new repo to service running in production in a few minutes.

Buildkite sponsor

:where() Has A Cool Specificity Trick, Too — There’s been a a lot of chatter around the :is() pseudo-selector of late, but the :where() pseudo-selector is worth knowing for when you want to go the other way with specificity and lower it instead.

Chris Coyier

Handling Text Over Images in CSS — A look at how to handle placing text over images in CSS with accessibility in mind.

Ahmad Shadeed

prefers-reduced-motion: Taking A No-Motion-first Approach to Animations — Use the prefers-reduced-motion media query to help guide your animation principles

Tatiana Mac

Animating ‘Real’ Underlines with CSS

Michelle Barker

How to Animate on Scroll With Vanilla JavaScript

Jemima Abu

CSS Is, In Fact, Awesome

Jim Nielsen

A Guide To Free Font Alternatives

Erik D. Kennedy

? Jobs

Senior Front End Engineer — Help us catching the next 10 million users by joining our Web team and shaping Fishbrain’s presence on the web.

Fishbrain

Find Frontend Engineering Jobs with Hired — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now.

Hired

? Code, Tools and Resources

CSS Suez Canal Boat — Ok, the boat may be free now, but I couldn’t resist sharing this neat, whimsical 3D CSS recreation.

Jhey Tompkins codepen

Responsively: A Native Responsive Design Testing Tool for Windows, Mac, and Linux — A dev-tool that aids faster and precise responsive web development.

Responsively

Free Chat & Activity Feed APIs for Qualifying Teams

Stream sponsor

Turbo CSS: A Utility-First CSS Framework As A Programming Language — Similar to Tailwind but purports to be an improvement, with features said to make it more scalable and easier to set up, with utility classes closer to ‘real’ CSS. Read up on the differences and features here.

tibor halter

Parvus: An Accessible, Open-Source Image Lightbox with No Dependencies — Includes a number of features via a simple API, or just use the defaults with no config needed. There’s a simple demo to try here.

Benjamin de Oostfreese

Tailwind UI Kit: Tailwind CSS Templates & Components — The free version includes a decent set of 65 components for use on any project.

Tailwind UI Kit

JParticles: Efficient Canvas Library for Building ‘Cool Particle Effects’

Barrior