March 24, 2021 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 MagazineCompat2021: 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 sponsorAccessible 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 SoueidanThe 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?? Quick bits:Starting in version 90, Chrome’s address bar will use https:// by default (but will fall back to insecure HTTP if necessary)...and Firefox 87 is trimming certain data from HTTP referrers by default to protect user privacy.Version 87 of Firefox also introduces new a ‘SmartBlock’ privacy-protection feature.? 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 MihajlijaMaking 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 PollardDid 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. FossheimWhy 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 VoorhoedeTropical 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 ArtyukhHow 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 sponsorHow 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.FingerprintJSThere’s No Such Thing as a Website or Web App That Doesn’t Need to Be AccessibleChris FerdinandiHow to Use Mobile Emulation Mode in ChromeCraig Buckler? JobsSenior Software Engineer — Remote Senior Software Engineer for a software consultancy company based in NYC.Def MethodFront-End Senior Software Engineer (Remote) — Help power a platform meaningfully changing how journalists, PR pros, and marketers around the world work.Muck RackFind 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 conic-gradient() syntax. Just click a gradient to copy the code to your clipboard, then paste into your stylesheet.Adam ArgyleLite 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 IrishDasha AI: Add Human-Like Voice Conversational Capabilities to Your WebsiteDasha sponsorAladino: 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 RosaFontshare: 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 Source link