Frontend Focus
#483 — March 24, 2021 | Read on the web |
Image via: Smashing Magazine
A Complete Guide To Accessible Front-End Components — This is a comprehensive look into reliable accessible components: from tabs and tables to toggles and tooltips. A detailed resource worth bookmarking, with lots of links to great resources. Smashing Magazine |
Compat2021: A Drive to Eliminate Five Top Browser Compatibility Pain Points — A look at how Google is working with other browser vendors to fix what they’ve defined as the ‘top five browser compatibility pain points’: Flexbox, CSS Grid, Robert Nyman and Philip Jägenstedt |
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 |
Accessible Text Labels For All — This post is an accompanying piece to a recent talk Sara gave, looking specifically at how to create more descriptive button (and/or link) text labels, improving the experience for screen reader users, whilst making sure those buttons don’t fail WCAG success criteria. Sara Soueidan |
The End of AMP? — Google has confirmed that AMP pages will stop receiving special treatment in search results. So, does this lack of ranking boost spell the end of the framework? Dwayne Lafleur |
|
📙 Tutorials, Articles & Opinion |
How to Improve CSS Performance — Looks at what kinds of performance/speed issues CSS can cause and the best practices to avoid them — crafting CSS that doesn’t get in people’s way. Milica Mihajlija |
Making The Slowest 'Fast' Page — Is it possible to get a perfect Lighthouse score of 100, despite having a poorly performing site? This is an interesting bit of experimentation. Barry Pollard |
Did You Know About the Robin Rendle |
How to Create a Screen Reader Accessible Graph Like Apple's with D3.js — A neat use of the popular JavaScript library D3.js (used to create data visualizations) to recreate the activity rings as seen on the Apple Watch. This is a detailed tutorial with lots of code and CodePen examples to dive into. Sarah L. Fossheim |
Why Skip-Links Are Important for Accessibility — Skip-links play an important role in making a website accessible for everybody. Here Bas points out why and how you can implement them consistently. De Voorhoede |
Tropical Particles Rain Animation with Three.js — A WebGL particle rain animation resulting in an interesting image effect made with Three.js. Here’s the demo. Yuriy Artyukh |
How to Protect Your CI/CD Pipelines From…. Yourself? — We’re all human. We all make mistakes. Let’s build pipelines that protect us from bad actors and butterfingers alike. Buildkite sponsor |
How the Web Audio API Gets Used for Browser Fingerprinting — Different browsers have different ways of applying effects to audio and this is used by certain tools to identify browsers even if other mechanisms aren’t available. FingerprintJS |
There's No Such Thing as a Website or Web App That Doesn't Need to Be Accessible Chris Ferdinandi |
How to Use Mobile Emulation Mode in Chrome Craig Buckler |
💻 Jobs |
Senior Software Engineer — Remote Senior Software Engineer for a software consultancy company based in NYC. Def Method |
Front-End Senior Software Engineer (Remote) — Help power a platform meaningfully changing how journalists, PR pros, and marketers around the world work. Muck Rack |
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 |
Conic.css: A Gallery of Simple CSS Conic Gradients — A gallery of CSS gradients made using the Adam Argyle |
Lite YouTube Embed: A Faster Youtube Embed — Faster than the official one, at least. There’s a live demo here and you can really feel it. Paul Irish |
Dasha AI: Add Human-Like Voice Conversational Capabilities to Your Website Dasha sponsor |
Aladino: A Tiny WebGL Library to Enhance Your Site with Shader Effects — Lots of cool examples on the demo page but some of these can likely be accomplished with more optimal code. Luigi De Rosa |
Fontshare: A Free Fonts Service Launched by The Indian Type Foundry — Home to a growing collection of professional grade fonts that are free for both personal and commercial use. ITF |
🍪 Just for Fun... |
Cookie Consent Speed Run — This will probably stress you out a little…. Test your GDPR skills whilst trying to maintain privacy in this speed run cookie consent banner browser ‘game’ of sorts. Fred Wordie |