Skip to main content

Front-end Collection #2

Sakura at Daigo-ji Temple, Kyoto, Japan. Photo by Xiaojun Deng

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:

https://orbit.kiwi/

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:

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:

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:

Refactoring optional chaining into a large codebase: lessons learned

Reference:

https://css-tricks.com/react-suspense-in-practice/

That's all for this collection.


Sincerely,

Marcello