--- title: "🚀 What's ARIA for?" publication: "Frontend Focus" issue: 466 published_at: "2020-11-11" canonical_url: "https://frontendfoc.us/issues/466" --- ..and a primer on flex, and why now may be the time to drop IE11. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #466 — November 11, 2020 | [Read on the web](https://frontendfoc.us/issues/466) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/u9azsjfcqrxpv1cucfwe.jpg)](https://briefs.video/#pilot) ▶[What Is ARIA Even For?](https://briefs.video/#pilot) — 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.](https://every-layout.dev/) Webbed Briefs [Understanding `flex-grow`, `flex-shrink`, and `flex-basis`](https://css-tricks.com/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 [![\](https://copm.s3.amazonaws.com/e3ca3c7d.png)](https://blog.newrelic.com/product-news/aws-lambda-extensions-integrations/?utm_campaign=FY21-Q3-DEV-OBSV-AMER-FEF-NL-None-B_LE&utm_medium=NL&utm_source=FEF&utm_content=B_LE&fiscal_year=FY21&quarter=Q3>m=DEV&program=OBSV&ad_type=None&geo=AMER) [Achieving Observability with AWS Lambda Extensions](https://blog.newrelic.com/product-news/aws-lambda-extensions-integrations/?utm_campaign=FY21-Q3-DEV-OBSV-AMER-FEF-NL-None-B_LE&utm_medium=NL&utm_source=FEF&utm_content=B_LE&fiscal_year=FY21&quarter=Q3>m=DEV&program=OBSV&ad_type=None&geo=AMER) — 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](https://blog.carlmjohnson.net/post/2020/time-to-kill-ie11/) — 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](https://www.smashingmagazine.com/2020/11/internationalization-localization-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 [ChromeOS.dev](https://chromeos.dev/) at Google using 11ty. Sam Richard **⚡️ Quick bits:** - Just how widespread is CSS-in-JS? Turns out (via the HTTP Archive) that [only around 2% of sites](https://twitter.com/LeaVerou/status/1324021897324072965) use it. - [This working draft from the CSS Working Group](https://www.w3.org/TR/2020/WD-css-highlight-api-1-20201022/) outlines how to use the Custom Highlight API to style a section of text in a programmatic way. - You can now [create custom keyboard shortcuts for any DevTools action](https://twitter.com/EdgeDevTools/status/1324766942230507520) in Edge 87 which could be a real efficiency boon. 💻 **Jobs** [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/senior-web-developer) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Find Your Next Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 📙 **Tutorials, Articles & Opinion** ▶[Web Animation Gotchas](https://www.youtube.com/watch?v=9-6CKCz58A8&feature=emb_logo) — 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](https://www.bram.us/2020/11/04/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](https://markentier.tech/posts/2020/10/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](https://snyk.co/ucSQm) — A checklist to help you and your team find and fix security issues in your React applications. Snyk sponsor [Back to Basics: Event Delegation](https://christianheilmann.com/2020/11/01/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?](https://whatsmissingfromcss.com/) — 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](https://davidwalsh.name/detect-sticky) — …thanks to the IntersectionObserver API. David Walsh [Low Hanging Fruits in Frontend Performance Optimization](https://pawelurbanek.com/frontend-performance-optimization) Paweł Urbanek ▶[Create Tic Tac Toe with HTML, CSS, and JavaScript](https://www.youtube.com/watch?v=E621N5GBKv8) James Q Quick [How We Made Our SaaS Homepage Cookie-Free](https://blog.leavemealone.app/no-more-cookies/) James Ivings 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/r3hsosuhjqev3aoo7afx.jpg)](https://github.com/cruip/tailwind-landing-page-template) [Simple Light: A Free Landing Page Template Built With Tailwind and React](https://github.com/cruip/tailwind-landing-page-template) — Fans of [Tailwind CSS](https://tailwindcss.com) will delight in this landing page template built with it. The [live demo](https://simple.cruip.com) is impressive and has a very strong SaaS homepage vibe. Cruip [Checka11y.css: A Stylesheet to Quickly Highlight Accessibility Concerns](https://checka11y.jackdomleo.dev/) — 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](https://yqnn.github.io/svg-path-editor/) — 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](https://squareup.com/t/f_online/d_newsletter/p_frontendfocus/l_us/dt_alldevice/pr_ecommerce_api/?route=docs/terminal-api/overview&site=developer.squareup.com) Square sponsor [imagemaps: Create Annotated Interactive Images](https://www.imagemaps.net/) — Sometimes I forget that HTML image maps are still a [supported web feature](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map). This tool lets you add an image and interactively build such a map from which you can export the required HTML. imagemaps.net [Microsoft Edge Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools#edgetools) — 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 ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1605104265/fdzgkhy0gj3hxjsv9gqh.gif) [Seasonal.css: A Seasonal Colour Scheme Based On The Day of The Year](https://seasonal-css.incoherency.co.uk/) — 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 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)