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 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 |
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 |
Tatiana Mac |
Animating 'Real' Underlines with CSS
|
CSS Is, In Fact, Awesome
|
A Guide To Free Font Alternatives
|
💻 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 |
🧑💻 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 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 |