--- title: "An updated performance checklist for 2021" publication: "Frontend Focus" issue: 473 published_at: "2021-01-13" canonical_url: "https://frontendfoc.us/issues/473" --- ...plus an investigation into Google's plans for third party cookies. | Frontend![](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)Focus #473 — January 13, 2021 | [Read on the web](https://frontendfoc.us/issues/473) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1610536781/na9nl5x2epmxtvxfbptv.png)](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/) [Front-End Performance Checklist 2021](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/) — This annual front-end performance checklist (_available as PDF, Apple Pages, MS Word_) returns, updated with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques. Smashing Magazine [Web History: Web Design](https://css-tricks.com/chapter-6-web-design/) — Another excellent entry in Jay Hoffman’s series on web history, this time looking at the design side of things in the early days of the web. “_Interest in the early web required tenacity and personal drive, so it sometimes came from unusual places_”. CSS-Tricks [![\](https://copm.s3.amazonaws.com/a68138cc.png)](https://www.outsystems.com/events/tech-talks/artificial-intelligence/?utm_source=cooper-press-frontend-focus&utm_medium=email-paid&utm_campaign=gl-wb-2021-01-27-ai-across-sdlc&utm_term=camp-gl&utm_content=demo-series-trending) [How to Accelerate Development with Artificial Intelligence](https://www.outsystems.com/events/tech-talks/artificial-intelligence/?utm_source=cooper-press-frontend-focus&utm_medium=email-paid&utm_campaign=gl-wb-2021-01-27-ai-across-sdlc&utm_term=camp-gl&utm_content=demo-series-trending) — Join us to learn about the benefits of AI in application development and see how you can utilize AI-assisted development to deliver modern apps quickly and efficiently. OutSystems sponsor [A Developer's Perspective: The Problem with Screen Reader Testing](https://jaketracey.com/a-developers-perspective-the-problem-with-screen-reader-testing/) — Jake asks what the baseline in terms of testing for screen readers should be, and what browser and screen reader combinations are the most important to cover in order to achieve the greatest level of WCAG compliance? Jake Tracey [CMA to Investigate Google’s ‘Privacy Sandbox’ Browser Changes](https://www.gov.uk/government/news/cma-to-investigate-google-s-privacy-sandbox-browser-changes) — The UK governments Competition and Markets Authority (CMA) has opened an investigation into Google’s proposals to remove third party cookies and other functionalities from its Chrome browser. GOV.UK **⚡️ Quick bits:** - AVIF support is being [enabled by default](https://bugzilla.mozilla.org/show_bug.cgi?id=1682995) in Firefox 86+. - [This website will estimate the carbon footprint of your web page](https://www.websitecarbon.com) and offer up ideas on how to reduce it. - The results from the fourth annual State of JS survey [are now out](https://2020.stateofjs.com/). 📙 **Tutorials, Articles & Opinion** [Are These The Most Interesting Frontend Tools for 2021?](https://www.impressivewebs.com/most-interesting-front-end-developer-tools-2021/) — A roundup of the 60 most-clicked tools from the past year in [Louis Lazaris’ newsletter](https://webtoolsweekly.com/), which might give some insight into the kinds of things devs are interested in for 2021. Louis Lazaris [Frontend Predictions for 2021 and Beyond](https://www.browserlondon.com/blog/2021/01/04/front-end-predictions-2021/) — Where is front-end development heading in 2021? Jay Freestone examines trends and technologies that will shape web development this year. Browser London [Can Gaming Save Itself from Its Content Moderation Problems?](https://uxdesign.cc/can-gaming-can-fix-its-content-moderation-problems-83dcfc8f7e83/?utm_medium=promoted&utm_source=frontend_focus) — Twitch, Playstation, Xbox and other big players in the gaming industry face a treacherous future — but there is room for optimism. Stream sponsor [Give your Eleventy Site Superpowers with Environment Variables](https://css-tricks.com/give-your-eleventy-site-superpowers-with-environment-variables/) — Leveraging the Node dotenv library within Eleventy for some standard and creative uses for environment variables. Andy Bell [You Want `overflow: auto`, Not `overflow: scroll`](https://kilianvalkhof.com/2021/css-html/you-want-overflow-auto-not-overflow-scroll/?ref=heydesigner) — A quick explainer on the overflow property, and why using `auto` is the way to go as it lets a browser automatically determine if a scroll bar is needed — or not. Kilian Valkhof [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1610536201/bqu7duqv7y3pfugg8xdq.png)](https://tobireif.com/posts/ensuring_the_correct_vertical_position_of_large_text/) [Ensuring The Correct Vertical Position of Large Text](https://tobireif.com/posts/ensuring_the_correct_vertical_position_of_large_text/) — In some cases, browsers display large text at different vertical positions across operating systems. Here’s a solution. Tobi Reif [Styling `console.log()` Output Formatting with CSS](https://www.bennadel.com/blog/3941-styling-console-log-output-formatting-with-css.htm#blog-post) — Like most of us, probably, Ben often forgets `console.log` output can be styled with CSS, so he sat down to write out a bunch of increasingly elaborate examples. Ben Nadel [The `navigator.clipboard` API](https://davidwalsh.name/navigator-clipboard-api) — Async read and write methods for managing clipboard data. David Walsh [Custom Properties as State?](https://css-tricks.com/custom-properties-as-state/) — Thoughts about using CSS and custom properties as a sort of basic data API. Chris Coyier [What’s Wrong with Web Assembly? Does WASM Have Any Future in Web Dev?](https://blog.bitsrc.io/whats-wrong-with-web-assembly-3b9abb671ec2) Fernando Doglio [How to Deploy a Front End Application with Netlify](https://www.freecodecamp.org/news/how-to-deploy-your-front-end-app/) Idris Olubisi [Using Sass with CSS Modules in Next.js](https://www.freecodecamp.org/news/how-to-use-sass-with-css-modules-in-next-js/) Colby Fayock [Create Animated, 'Apple Music' Style Cards with WebGL and Three.js](https://t.co/uKomt26cJ4?amp=1) Johnny Simpson 💻 **Jobs** [Senior JavaScript Engineer - UX and Design Systems (Berlin, DE)](https://jobs.lever.co/researchgate/57fdc20b-5ce7-4ca9-be7f-239c65b26c46?lever-origin=applied&lever-source%5B%5D=Frontend%20Focus%20) — Help us shape the future of ResearchGate’s UX through our cross-platform design system and optimal dev-design-collaboration. ResearchGate [Find Your Next Job Through Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🧑‍💻 _Looking to share your job listing in Frontend Focus? [There's more info here](https://booking.cooperpress.com/jobs)_. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1610535384/yhp8lfzrqak0cwpj8nt5.png)](https://hypercolor.dev/#gradients) [Hypercolor: A Tailwind CSS Gradient Palette Collection](https://hypercolor.dev/#gradients) — This curated collection of beautiful premade gradients use the default colors from the Tailwind palette along with a selection of custom gradients. jordi hales & mark mead [JSitor: Another JavaScript, HTML and CSS Online Editor/Sandbox](https://jsitor.com/) — I’m a big fan of tools like [JSBin](https://jsbin.com/?html,output) and [CodePen](https://codepen.io/) for throwing together [quick experiments](https://codepen.io/peterc/pen/joWdEB) or testing out a bit of code. This is a new alternative which has numerous layouts and iOS and Android apps too. JSitor [Improve Your PageSpeed Insights Score for Images. Try These Techniques](https://imagekit.io/blog/improve-google-pagespeed-insights-score-for-images/?utm_source=Newsletter&utm_medium=email&utm_campaign=Frontendfocus_cooperpress&utm_content=briefLink_PageSpeedInsights) ImageKit.io sponsor [![\](https://res.cloudinary.com/cpress/image/upload/v1610537326/bmoi8iogttbbbvnebthb.png)](https://andrewfulrich.gitlab.io/panelle/) [Panelle: A Free Comic Book Layout Maker](https://andrewfulrich.gitlab.io/panelle/) — This interactive tool lets you build SVG-based comic-book style graphics. You can create and resize the panels, drop images inside them, then download the completed SVG. andrew fulrich [Glyphs: A Fully Editable & Open Source Design System](https://glyphs.fyi/) — Includes thousands of editable icons designed in Figma, web components, a CLI to download the SVGs from Figma, all categorized and tagged for search. Glyphs [Compiled: Build Time Atomic CSS-in-JS](https://compiledcssinjs.com/) — Write your styles in JavaScript with the full power of CSS then have them compiled ahead of time. [GitHub repo.](https://github.com/atlassian-labs/compiled) Atlassian [Weather Icons: 200+ Weather Themed Icons](https://erikflowers.github.io/weather-icons/) — These are CSS-based, so you just need to drop in the styles and add the appropriate HTML classes. Definitely not for every project, but a nice unique departure from the norm. Erik Flowers 📬 **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|*)