Here we go with the last digest of 2020, which is meant to cover the major updates and the most interesting news, articles, and tutorials from the JS world published in December. We hope that you have enjoyed this year despite how hard it has been.
December was rich with performance articles, so we can start a new 2021 with fast and efficient results!
Firefox 84 released
This time, the release is small, but with useful improvements:
- Firefox 84 introduces native support for Apple processors, which results in a twice as fast run of Firefox’s native assembly.
- The CSS pseudo-class: not () now supports complex selectors.
- Support for the Paint Timing API has been added to get detailed information about the time taken to create a page, which can be useful for analyzing and monitoring performance.
- All resources loaded from the localhost, regardless of their URL, are considered loaded in a secure context.
Kontra OWASP: 10 interactive exercises
Kontra has created a series of interactive exercises to help explore top web application security threats as well as identify and mitigate security vulnerabilities. For developers, it is definitely worth checking. Impressive UI will make the experience flawless.
100+ frontend microservices migration experience of Lyft
Here, you can learn how Lyft engineers after rapid team expansion and system extension to more than 100 front-end services, found themselves bogged down troubleshooting cryptic build errors and generally having the system productivity sapped by support requests.
The article describes the problems the team wanted to solve, the reasons why they weren't happy with the old infrastructure, and what bottlenecks they faced during the migration.
From callback hell to callback heaven
This is a handy article about the well-known issue of callback hells with a fresh view on how it could be transformed and refactored. A little spoiler: it is possible not only with async/await but with a custom solution of flattened utility, written by Eugene Ghanizadeh in the blogpost.
Inertia - a new way of building single-page apps without building an API
Even though the developers would argue that it’s not really a framework, it is put into this section because of the approach introduced in it and the practical usage.
Inertia.js takes a new approach to web development by linking the classic back end (routing, controllers, permissions checking, and the like) to React, Vue, or Svelte. As a result, you will get a SPA-like UX without the inherent complexities of SPA.
Zero-Bundle-Size React server components
React developers have introduced a new feature - a non-interactive React component with a .server.js extension. It runs entirely on the server-side, allowing it to query a database or read a file from the server's file system inside of the component code. Another important feature of server components is that their code is not included in the client application bundle.
So far, server components are an experimental feature under active development, but you can already experience it and share your feedback in the RFC.
Ryan Carniato, the author of the Solid.js library, has compared the performance of popular JS frameworks and libraries.
He has divided all the frameworks into four groups and got some intriguing results:
- In the group with a slight emphasis on performance, Alpine, Marko, and React have taken the highest places on average ranking.
- Riot, Preact, and LitElement have ranked first in the group with a strong focus on performance.
- In the group with a very high emphasis on performance, HyperApp, Svelte, Elm have shown the best results.
- In the group with the highest emphasis on performance, Solid.js has won with a narrow gap, followed by Inferno.
Instead of a conclusion, it would be most appropriate to note that Virtual DOMs are not guaranteed to be slow, and compilers aren’t guaranteed to produce the smallest bundles. Hence, it all depends on your solution.
Headless browser tools: speed comparison
Checkly team decided to run their own benchmarks to compare Puppeteer, Playwright, and WebDriverIO by using Selenium and the DevTools automation protocols. In particular, the results are presented for both a demo website and a real-life web application. Should you be willing to know who's the winner - check out the article!
Snowpack - a frontend build tool for the modern web
Snowpack is a front-end builder for modern browsers that requires virtually no configuration and is an alternative to heavier and more complex bundlers like Webpack or Parcel in your development workflow.
The mentioned capabilities:
- a fast build and caching of its results
- HMR and Fast Refresh support for better development
- support for JSX, TypeScript, CSS modules, JSON, images (SVG / JPG / PNG / etc) and WASM out of the box
- optimization for the production build
- extensibility through plugins (you can connect Babel, Sass, and others)
- routing setup for the development server
- JS API for the programmatic launch of the bundler
David Heinemeyer Hansson, an author of the Ruby on Rails web framework, introduced Hotwire, an alternative approach for creating SPA-like applications used to create the hey.com email client.
That's quite an interesting experiment worth trying out.
Bold on hover without the layout shift
Because of the bold text which is often larger and takes up more space, sometimes it makes a difference whether the layout remains the same, e.g. in horizontal rows. Here is a small but useful tip from Chris Coyier for making good UI.
UX improvement with correct font CSS settings
Matt Hobbs talks about the nuances of using the font-display CSS property for performance and UX.
The article attempts to answer the question, how to use the font-display property to improve the user experience. From the point of view of content rendering speed, the values swap, fallback, optional are the most beneficial and have their particular advantages in different conditions, described in the post.
Matt writes that the UK government website he was working on uses font-display: fallback to prevent users from experiencing a sudden shift in content.
CSS filter editor
A useful tool for editing images using CSS has been discovered. It is available for use with both ready-made presets and manually adjusted ones. You can update the filters by moving the desired sliders. After that, simply copy the result code and paste it into your project.
The article explains in detail how to deliver different versions of bundles for modern and older browsers using Webpack and Rollup along with tips on how to publish npm packages with modern syntax. In addition to this, a new service EStimator.dev was announced, with the help of which you can evaluate the increase in site performance from switching to modern syntax.
What makes the web slow
There is an article about analyzing the performance of a million sites
based on various factors, like the version of HTTP used, the number of requests per page, the libraries, etc.
It may be inquiring that over the most common libraries, jQuery still comes first to be used. Besides, it ranks in the top libraries influencing TTI the most.
Why Google Cloud Console always takes much time
CSS-in-JS: how it affects performance and ways of improvement
Dominic Tobias wrote an article on approaches to improve CSS-in-JS performance. Previously, a study was published on Planet Performance with disappointing results: popular CSS-in-JS libraries that inject styles (Styled Components, Emotion) on the page at runtime affect the performance of complex pages.
To improve performance, the author suggests using CSS-in-JS libraries that can extract styles from JS at compile-time. Also, he advises using CSS variables for theming and recommends abandoning dynamics in styles if possible.
The import-on-interaction pattern or why to lazy load resources
Addy Osmani wrote an article on improving website responsiveness using the import-on-interaction pattern. To improve the overall performance, you can load the minimum required code, e.g. to load third-party widgets only after the user scrolls down to them or interacts with them. You can load the pieces of the main application in the same way, and the article demonstrates how to do this with React or Vue.
AWS Lambda now has container image support
AWS Lambda is a serverless platform where you upload code, and then it can be executed on the "pay as you go" basis. The container's support might feel better to many developers wary of Lambda’s usual “upload a ZIP file” approach. The article contains pretty detailed instructions on how to go with Lambda and Docker images using Node.
Node application deploy to AWS Fargate with auto-scaling
There is one more useful article about Node and AWS stack. If you feel that AWS Lambda isn’t for you, maybe AWS Fargate could get you running "serverlessly" without a huge paradigm shift.
AWS Fargate is a serverless compute engine for containers that removes the need to provision and manage servers. In addition, it improves security through application isolation by design. In the publication, Matthew Kindzerskehelps helps you figure out how to deepen fast.