Frontend  Focus

#483 — March 24, 2021 | Read on the web

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, position: sticky, aspect-ratio, and CSS transforms. Here’s Microsoft’s blog post on this.

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 :has CSS Selector? — Robin thinks that has: could have a big impact on the way we write CSS in future, although it’s not supported in any browser yet. Why? Because it twists around the direction CSS selectors commonly work in.

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

? Code, Tools and Resources

Conic.css: A Gallery of Simple CSS Conic Gradients — A gallery of CSS gradients made using the conic-gradient() syntax. Just click a gradient to copy the code to your clipboard, then paste into your stylesheet.

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