March 31, 2021 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 EcklesWho 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 sponsorTools 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??? Quick bits:WebAIM conducted a survey of web accessibility practitioners earlier this year, and the results are out now.Orion is an in-development browser that uses the WebKit rendering engine, but also supports Firefox and Chrome extensions.We’re helping out with this ‘State of Software Development’ survey that’s seeking responses from developers on things like your tech stack, performance, etc.? Tutorials, Articles & OpinionHow 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.GitHubA 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 ProkopovThe 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 CoyierHandling Text Over Images in CSS — A look at how to handle placing text over images in CSS with accessibility in mind.Ahmad Shadeedprefers-reduced-motion: Taking A No-Motion-first Approach to Animations — Use the prefers-reduced-motion media query to help guide your animation principlesTatiana MacAnimating ‘Real’ Underlines with CSS Michelle BarkerHow to Animate on Scroll With Vanilla JavaScript Jemima AbuCSS Is, In Fact, Awesome Jim NielsenA Guide To Free Font Alternatives Erik D. Kennedy? JobsSenior Front End Engineer — Help us catching the next 10 million users by joining our Web team and shaping Fishbrain’s presence on the web.FishbrainFind 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??? Got a job listing to share? Here’s how.? 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 codepenResponsively: A Native Responsive Design Testing Tool for Windows, Mac, and Linux — A dev-tool that aids faster and precise responsive web development.ResponsivelyFree Chat & Activity Feed APIs for Qualifying TeamsStream sponsorTurbo 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 OostfreeseTailwind UI Kit: Tailwind CSS Templates & Components — The free version includes a decent set of 65 components for use on any project.Tailwind UI KitJParticles: Efficient Canvas Library for Building ‘Cool Particle Effects’Barrior Source link