A frontend performance checklist for 2020

#422 — January 8, 2020 Read on the Web Frontend Focus 👋 Hey, it's good to be back in your inbox with the very first Frontend Focus of the new year. After the holiday break, we're back on our regular schedule, so you can expect this digest each and every Wednesday. As it's the new year, here's a little PSA to kick things off: don't forget to update the copyright year in your footer. 😅 If you missed our last issue of 2019, it took a look back at some of the highlights of the past twelve months in all things HTML, CSS and browsers — that roundup is now available on the web, and you can find it here. Finally, I just wanted to extend a thanks once again for reading this newsletter. If you've ever got any comments or links you want to share, just hit reply. — Chris Brandrick Front-End Performance Checklist 2020 — This superb, detailed, front-end performance checklist has been updated once again for 2020 — it’s filled with everything you need to consider for creating fast web experiences. Available as a PDF or as an Apple Pages/MS Word document. Smashing Magazine Firefox 72 — Our First Song of 2020 — Version 72 of Firefox is out now, introducing various DevTools improvements, support for CSS features such as the motion path spec, and a number of JavaScript and WebAPI updates. Chris Mills (Mozilla) New: Our 'Most Loved' JavaScript Course 🧡 Gets Updated — Take your JavaScript to the next level. Gain an understanding of callbacks, higher order functions, closure, asynchronous and object-oriented JavaScript. Frontend Masters sponsor Relearn CSS Layout with 'Every Layout' — A growing resource to help you learn (or relearn) CSS layout, using simple components (primitives) and a compositional approach. More layouts have been added since the last time we posted it. Heydon Pickering & Andy Bell ▶  Why Are There Four Firefoxes? — Jen Simmons runs through the differences between the regular, Beta, Nightly and Developer versions of Mozilla’s browser, and explains how they can offer devs an insight into what features are coming down the line. Mozilla Developer Understanding CSS Grid: Creating A Grid Container — A new series breaking down the CSS Grid Layout spec. This first entry is a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid. Rachel Andrew Microbrowsers Are Everywhere — Gets into the minutia of microbrowsers - the small previews of your site that are pervasive all around the web, search and through social media apps (like a link preview in a messaging app), and how best to treat them. Colin Bendell 💻 Jobs Full-Stack or Front-End Engineer - Rails/React (Remote/NYC) — Got 2+ years experience? Come help build the next iteration of our growing digital recovery platform centered around providing alcohol abuse treatment. Tempest Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers. X-Team Find a Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers. Vettery 📙 Articles, Tutorials & Opinion Raw WebGL: An Illustrated Guide to Starting with WebGL — A well presented tutorial on getting started with WebGL, what key data structures you need, and what each of the main elements (of which there are quite a few when it comes to WebGL!) are and do. Alain Galvan Multi-Line Ellipsis Is Now Possible in CSS — You can now make use of the -webkit-line-clamp property in most browsers. Josh Comeau on Twitter Google Chrome to Hide Notification Spam Starting February — Chrome 80, scheduled for release next month, will block notification popups by default. Catalin Cimpanu Right-to-Left Styling 101 — Over 290 million people worldwide speak Arabic. Here’s an extensive guide on just how you can build your sites to support both left-to-right and right-to-left reading styles in CSS. Ahmad Shadeed First Online Mentored Software Bootcamp w/ Job Guarantee — Get a job or your money back with Springboard's online bootcamp. Extend your knowledge with 1:1 mentorship and career coaching. Springboard (Software Engineering Career Track) sponsor How to Create Printer-Friendly Pages with CSS — We’ve linked to this before, but it’s been updated for 2020 with the latest best practices. Craig Buckler Chrome to Show Error Codes, Similar to Windows BSOD Screens — The codes (currently being tested in Chrome v81) are intended to make debugging crashes easier. Catalin Cimpanu Getting Started with Web Performance — If you’re looking to explore how to go about tightening up your sites performance for the new year, this is a good place to start for grasping the basics. Karolina Szczur beginner Self-Hosting Third-Party Resources: The Good, The Bad and The Ugly Anthony Barré Adding Dynamic And Async Functionality To JAMstack Sites Jason Lengstorf Take the DevEconomics Survey, Share Your Views and Win Amazing Prizes & Gear Developer Economics Survey sponsor Using Easing for More Than Just CSS Transitions Kilian Valkhof Seven Chrome APIs You Should Know Chidume Nnamdi 🔧 Code, Tools and Resources VoxelSpace: A Terrain Rendering Algorithm — A performant, lightweight (less than 20 lines of code) terrain rendering algorithm that fans of 90s flight sim Comanche will no doubt get a kick out of. Demo here. Sebastian Macke A-Frame 1.0 Released: Framework for Building VR Experiences — A-Frame handles the 3D and WebVR boilerplate required to get running across numerous platforms quickly. Version 1 boasts full WebXR support. A-Frame Team Optimizilla: Online Image Сompressor — This tool claims to be the “ultimate image optimizer” for compressing JPEG and PNG images down to their minimum possible size. Optimizilla CSS Diner — This is a neat little browser based game that teaches you what you need to know about CSS Selectors. Luke Pacholski

by via Frontend Focus