This post feature the latest news and resources from last January 2021 from the Front-end Development community that, in my personal opinion, are remarkable to be saved and shared.
Front-End Performance Checklist 2021
An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.
3rd-party, JS bundles
How We Improved Smashing Magazine Performance
a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics.
With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.
How To Optimize Progressive Web Apps: Going Beyond The Basics
Progressive web applications are proven to raise user engagement and keep the costs down effectively. Building a modern PWA requires more than just the core setup to keep up with the user’s expectations.
Let’s take a first-hand look at adding contemporary characteristics to PWAs, from functioning offline to user-friendly permission requests.
Maximally optimizing image loading for the web in 2021
Outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
A visual guide on:
Building a sidenav component
“Open source design system for your next travel project”
Orbit, an open source design system for travel-related projects with responsive components in Figma, React, Swift, Kotlin and corresponding docs
State of JS 2020 Results
Did you Know ?
CSS has…variables !!!
The `inputmode` attribute is great to give hints to the browser what virtual keyboard to show on mobile:
React Server Components
still in research and development!
Improve the trade-off between performance, maintainability, effort
-29% Bundle size!
Opt-In: client-side React is still there
React Suspense in Practice
How Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React.
Taiga UI, a new Angular UI Kit
Modular UI components with several layers of abstractions as separate packages.
Refactoring optional chaining into a large codebase: lessons learned
That's all for this collection.