Front-end Collection #2
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.
Performance
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.
Metrics, targets
Bundling
Delivery
Single-Page Apps
HTTP/2, HTTP/3
3rd-party, JS bundles
Tooling
TL;DR Checklist
Reference:
https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/
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.
Reference:
https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/
Resources
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.
Reference:
https://www.smashingmagazine.com/2020/12/progressive-web-apps/
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.
Reference:
https://www.industrialempathy.com/posts/image-optimizations/
CORS Visualized
A visual guide on:
Same-Origin Policy
Client-side CORS
Server-side CORS
Preflight Requests
Credentials
Reference:
https://dev.to/lydiahallie/cs-visualized-cors-5b8h
Building a sidenav component
A prototyped Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without Javascript, and works across browsers.
Reference:
https://web.dev/building-a-sidenav-component/
Orbit
“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
Reference:
State of JS 2020 Results
Demographics
Features
Technologies
Other Tools
Resources
Opinions
Awards
Conclusion
Reference:
https://2020.stateofjs.com/en-US/
Did you Know ?
CSS has…variables !!!
Also known as CSS Custom Properties, they are supported in all modern browsers, have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components.
References:
https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/
https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/
INPUTMODE
The `inputmode` attribute is great to give hints to the browser what virtual keyboard to show on mobile:
Reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
JavaScript News
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
References:
https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
https://vercel.com/blog/everything-about-react-server-components
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.
Reference:
https://css-tricks.com/react-suspense-in-practice/
Taiga UI, a new Angular UI Kit
Modular UI components with several layers of abstractions as separate packages.
References:
Responsible JavaScript
It’s a series of 3 articles that perform a deep analysis on the issues that JavaScript may cause to a website, from fall of performance, bad practices, and bundling improvements.
References:
Part 1: https://alistapart.com/article/responsible-javascript-part-1/
Part 2: https://alistapart.com/article/responsible-javascript-part-2/
Part 3: https://alistapart.com/article/responsible-javascript-part-3/
Refactoring optional chaining into a large codebase: lessons learned
Reference:
https://css-tricks.com/react-suspense-in-practice/
That's all for this collection.