New year is just around the corner and it’s time to take a look at the latest JavaScript news and updates of the outgoing 2021. This time you will learn about key takeaways from the Web Almanac 2021 report, new attack vector of the Log4j vulnerability, promising tool for detecting memory leaks in web apps, novelties in DHTMLX Diagram, and much more. Traditionally, I’ll finish with a pack of helpful JavaScript tips.

Let's get to it!

News and Updates

Web Almanac 2021: New Insights into the State of the Web

For the third consecutive year, the HTTP Archive team and the web community joined forces to conduct comprehensive research on the current state of the web. It is based on the analysis of numerous metrics from approximately 8.2 million websites that resulted in the Web Almanac 2021 report. This Web Almanac edition comes with a wide range of interesting findings related to various aspects of the web divided into 24 chapters.

Let us have a closer look at the chapter dedicated to JavaScript.The report says that compared to 2019, the amount of loaded JavaScript per page has increased this year on desktops (by 18.4%) as well as on mobile devices (by 18.9%). But at the same time, it is claimed that a significant part of JS code goes unused. On mobile devices, for instance, about 36,2% of the total loaded JavaScript turns out to be unnecessary. It can be explained by the extensive use of large libraries or frameworks. Speaking of which, most of the analyzed websites rely on jQuery (84%), while much-hyped React is adopted by only 8%. It is also interesting to point out that almost 64% of assessed mobile pages are based on a JS library or framework with a known security vulnerability. If you want to learn more details on the practical usage of JavaScript and other web technologies, check out the full report.

JavaScript WebSocket: New Attack Vector for Log4j Vulnerability

Early this month, the whole programming world has been arguing about potential threats of a zero-day vulnerability discovered in the Log4j logging utility. Here comes a new twist in the story. Blumira, the US-based company specialized in cyber security, has announced the discovery of a new attack vector for this bothersome vulnerability that relies on a JavaScript WebSocket connection. The finding expands the attack surface of this vulnerability, as it can affect services operating as localhosts without any network. Learn more about this attack vector and how to minimize potential risks on the Blumira blog.

Anticipating React 18

When talking about popular front-end technologies used by developers for building modern apps, it is next to impossible not to mention React. For years, this framework has been one of the most widely used technologies for accelerating the development process. And it is not surprising that the development community always looks forward to new updates from the React team. The nearest one is the release of React 18. We still don't know when exactly it will happen, but you can estimate its feature set and learn how to try React 18 RC by getting acquainted with the React Conf 2021 recap.

New Instrument for Detecting Memory Leaks in Web Apps

Keeping track of memory leaks in a web app is one of the least favorite things to do for developers. But it is also a big mistake to neglect this kind of issue, as it may lead to poor performance. One more problem is to find an effective and easy-to-use tool for detecting memory leaks. That is why Nolan Lawson, a web developer who works for Salesforce, created Fuite - a simple CLI tool based on the Puppeteer library. It is designed for automatically searching memory leaks SPAs and MPAs. It also allows creating your own testing scenarios. You can find more details about this tool in Nolan's blog and learn to work with it by watching this video tutorial.

What’s New in DHTMLX Diagram 4.1

Building a good-looking JavaScript diagram can be a time-consuming task, if you don’t have a reliable diagramming tool in your stack. DHTMLX Diagram can be a good choice for achieving various data visualization goals faster. Moreover, this JavaScript library has been recently updated to version 4.1, including a lot of new capabilities.

From now on, you can add more than one partner node in tree diagrams such as family trees and complement org charts with assistant cards. That is also not going to be a problem to quickly rearrange org charts or mind maps, as the position of parent nodes can be changed simultaneously with their children using drag-and-drop. In addition, it has become possible to add text to arrows, making it much easier to clarify complex processes. The performance of the library’s Diagram Editor was optimized to improve your diagramming experience with large data sets. Visit the DHTMLX blog to get full information about this release.

Deno Teams Up with TC39 to Promote JavaScript Standards

Deno, a new JavaScript runtime environment, has been generating a lot of buzz during recent years. This month, the company behind Deno has drawn the attention of the dev community by joining ECMA International. In collaboration with other members of the TC39 working group, experts from Deno will take part in the further improvement of JavaScript and the adoption of new features. It seems like a reasonable step for Deno, as this technology was initially intended for modern JavaScript. Learn more about this initiative in the blog post.

Vercel Takes Over Turborepo to Make Web Development Faster

With the growing complexity of web development processes, many dev teams frequently face a lot of difficulties when building, testing, and deploying their code. With this in mind, Vercel, a popular front-end development platform, has recently acquired a performant build system named Turborepo. The main goal of this deal is to provide developers with a more effective and convenient way for building front-end codebases. With Turborepo, programmers who utilize Vercel are expected to significantly improve build time performance and their workflows. If you are curious to know more about the possible implications of this takeover, check out this article.

Useful Tips and Articles

Creating Deep Copies of JS Values with StructuredClone Method

Previously, it was necessary to utilize various libraries or hacks to make a deep copy of a JS value. The most common way was to use the JSON hack, but it does not support objects containing circular references. Fortunately, there is a new structuredClone() method for creating a deep clone of a given value without the shortcomings of the JSON approach. It is based on the structured clone algorithm. The author of this article provides more details on the subject.

Importing JSON Files into an ES Module

It has become a common practice to keep the configuration of your web application in a JSON file. Thus, it may be very convenient to be able to directly import it into an ES module. Until recently, you would have to make use of the CommonJS module format to do it. But there is a new solution for this problem called JSON modules, providing a new way of importing JSON files to JS modules to easily import JSON data files. Very soon this feature can become a part of the ECMAScript specification. Read this article to find out how it works in practice.

Exploring Event Propagation in JavaScript

JavaScript events play a crucial role when it comes to user interaction with a web page. For those who want to use events efficiently, it is important to understand such a phenomenon as event propagation. This term is used to describe the way events travel through the DOM tree. In modern browsers the propagation process includes two stages: capturing and bubbling. The main goal of event propagation is to help in dealing with the situations when several elements in the DOM hierarchy come with event handlers for the same event. Learn more about the concept of event propagation in this tutorial.

Impact of JS Errors on Web Performance

Performance is a key metric that largely determines a user satisfaction level with any web app. Therefore, it is important for programmers to explore possible causes of performance deterioration. In this regard, JavaScript errors deserve special attention. Amit Singh has been working on the subject for a couple of years and shares his findings in this article.

Wish you a Happy and Prosperous New Year! In 2022, I’ll continue sharing with you the most notable news and events from the JavaScript world.