Frontend  Focus

#466 — November 11, 2020 | Read on the web

▶  What Is ARIA Even For? — This is a great explainer (and the first in a series) on understanding semantic HTML and Accessible Rich Internet Applications (ARIA) - delivered in an amusing and informative way. Comes from Heydon Pickering, the same chap behind the ever useful Every Layout.

Webbed Briefs

Understanding flex-grow, flex-shrink, and flex-basis — A solid primer on the ways in which the flex properties interact and how they work under the hood.

Robin Rendle

Achieving Observability with AWS Lambda Extensions — Amazon Web Services recently announced AWS Lambda Extensions, a new way to run code in parallel without being bound by the Lambda lifecycle. Learn how New Relic integrates with the Extensions API to make monitoring your AWS functions even easier.

New Relic sponsor

Dropping Support For IE11 Is Progressive Enhancement — Carl argues “if you have to choose, you should prioritize users with no JavaScript over users with old JavaScript” and that transpiling JavaScript into ES5 for the benefit of IE is a practice well past its 'sell by' date.

Carl Johnson

Internationalization and Localization For Static Sites — An outstanding and detailed look at the considerations, planning and development of a localized Jamstack site based upon the experiences of the team that developed at Google using 11ty.

Sam Richard

⚡️ Quick bits:

💻 Jobs

Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.


Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.


Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.


🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

📙 Tutorials, Articles & Opinion

▶  Web Animation Gotchas — Fading something in, and fading something out sounds simple, but when it comes to animating the web there are a few gotchas to be aware of. Jake & Surma talk through them, and how to work around them.

Google Chrome Developers

HTML Forms: Preventing Double Form Submissions — When double clicking a form’s submit button your form will be sent twice. With a tad of JavaScript this can be prevented from happening.

Bram Van Damme

How I Wrote JavaScript to Avoid JavaScript — Explains how by writing a little more JavaScript in the backend they could completely eliminate JavaScript from the frontend.

Christoph Grabo

10 React Security Best Practices — A checklist to help you and your team find and fix security issues in your React applications.

Snyk sponsor

Back to Basics: Event Delegation — Events don’t just occur on the element you apply them to. Instead they go all the way down the DOM tree to the event and back up again. Christian demonstrates where this can help you out.

Christian Heilmann

What's Missing From CSS? — Off the back of the State of CSS survey (and before the full results are published) is this “completely unfiltered look at people’s hopes and desires for CSS”. Hit the reload button to see a new comment.

Sacha Greif and Raphaël Benitte

How to Detect When a Sticky Element Gets Pinned — …thanks to the IntersectionObserver API.

David Walsh

Low Hanging Fruits in Frontend Performance Optimization
Paweł Urbanek

▶  Create Tic Tac Toe with HTML, CSS, and JavaScript
James Q Quick

How We Made Our SaaS Homepage Cookie-Free
James Ivings

🔧 Code, Tools and Resources

Simple Light: A Free Landing Page Template Built With Tailwind and React — Fans of Tailwind CSS will delight in this landing page template built with it. The live demo is impressive and has a very strong SaaS homepage vibe.


Checka11y.css: A Stylesheet to Quickly Highlight Accessibility Concerns — Add the stylesheet and any accessibility errors or warnings will be indicated (e.g. missing alt attribute, improperly nested elements, etc) via red/yellow highlighting.

Jack Domleo

SVGPathEditor: Edit and Save SVG Path Data — Lets you adjust all sorts of configuration and path settings while interactively adjusting the path via nodes in the preview.

Yann Armelin

Simplify Contactless & Chip Card Payments with Terminal API

Square sponsor

imagemaps: Create Annotated Interactive Images — Sometimes I forget that HTML image maps are still a supported web feature. This tool lets you add an image and interactively build such a map from which you can export the required HTML.

Microsoft Edge Tools for VS Code — Use the Microsoft Edge Tools from within VS Code to see your site’s runtime HTML structure, alter its layout, fix styling issues as well as see your site’s network requests.

Visual Studio Marketplace

Seasonal.css: A Seasonal Colour Scheme Based On The Day of The Year — This is very cool! Using a combo of JS and CSS variables, this stylesheet will change a site’s color scheme based on the current day (1 of 365). You can test a specific day by appending ?day=123 to the URL, or just use the on-page slider. Cute, but remember there are two hemispheres! 😁

James Stanley