This month we traditionally have a couple of fresh releases and handbooks discovered. Besides, as long as the accessibility concepts are strengthening and becoming vital for modern web development, a new, yet, a brief section was introduced this month.


New

Announcing TypeScript 4.0

Meet TypeScript 4.0, which has pleased us with the following updates:

  • Variadic tuple types
  • Support for compound logical assignment operators and labels for elements of tuples
  • Type inference for class properties from the constructor
  • Option to specify the unknown type for catch
  • Improved incremental build performance
  • Short-circuiting assignment operators (e.g., a ||= b)

In addition, they have revamped the project site completely!

devblogs.microsoft.com

Electron 10 version released

The popular cross-platform desktop app development framework reaches a significant milestone. Despite this, the current release doesn’t provide a bunch of features - rather, more integrations and improvements: Electron v10 steps up to Chromium 85, Node 12.1.3, and V8 8.5.

electronjs.org

D3 presents improvements in 6.0 release

The popular data-driven document library takes a step forward integrating native collections (Map and Set), along with the iterables, and adopting ES2015 (a.k.a. ES6) internally. Also, it now passes events directly to the listeners.

github.com/d3

Announcing NgRx Version 10

NgRx, a store that provides reactive state management for Angular, introduces new packages for the local component state as a stand-alone library - ComponentStore. A new component package for more reactive components is also on the list.

medium.com/ngrx


Performance

IPv6 is 40% faster than IPv4

This statement was announced at the WWDC 2020 conference by Apple representatives, after conducting a number of studies. The company also encourages developers to use new web technologies such as HTTP / 2 and TLS 1.3, citing improved performance.

According to statistics, the pages opened with Safari and HTTP / 2 loaded 80% faster compared to HTTP / 1.1. Also, 49% of all HTTPS connections from Apple devices use TLS 1.3, and this connection is 30% faster than by using TLS 1.2.

zdnet.com

Bringing Modern JavaScript to Libraries

Gary Chew has published an article about the problems of using transpiled code in modern browsers. He сlaims that, even though the modern browsers represent over 90% of web traffic, many websites still transpile JavaScript to ES5 to support the <10% still stuck on the older browsers like IE 11. This leads to transpiling their code and delivering polyfills, which reimplement functionality already included in modern browsers.

In January 2020, Node.js 13.7.0 introduced support for conditional exports, with which it's possible to specify different assemblies for the different types of environments. Gary suggests adding a new type of environment to the conditional export for the bundles transpiled to ES2017.

dev.to/garylchew

Performant Front-End Architecture

This publication describes obvious and straightforward techniques and pieces of advice to make front-end apps load faster. Despite their simplicity, these principles get neglected pretty often. The article dives into the improvement of initial render and actual app load.

debugbear.com


Accessibility

Making facebook.com accessible to as many people as possible

The Facebook tech blog posted an article on the accessibility approaches that have been used for a new social networking site. These include the usage of the eslint plugin eslint-plugin-jsx-a11y to avoid common accessibility errors, utilization of special components for easier keyboard navigation, conversion of font sizes to rem units for the text readability improvement. 

And for the markup validation, a self-written tool is used that highlights all the elements containing a11y problems with a red overlay.

engineering.fb.com

A11y Coffee - Pick your serving size of web accessibility information

Amberlee Romo's short compendium of accessibility information includes an extensive explanation of what a11y is and how it can be useful for your website, most common web accessibility errors and easy wins, testing strategies and tools. Moreover, the author shares plenty of resources and articles for better topic understanding.

a11y.coffee


CSS

Content visibility: the new CSS property that boosts your rendering performance

Una Kravets and Vladimir Levin go on about the new content-visibility property, launched in Chromium 85, which can be the most impactful new CSS property for improving page load performance. In particular, this feature "tells" a user agent to skip the element's rendering work, including layout and painting, until it gets necessary. This helps to boost the initial load time.

web.dev/content-visibility

Content Visibility


CLS Optimization for Infinite Scrolling Lists

Pagination and buttons like "Load more" aren’t regarded as trendy anymore, and many sites decide to switch to the endless loading of elements. To avoid shifting the layout, Addy Osmani recommends to do the following:

  • reserve space before the loading items;
  • remove the footer or any DOM elements after the list;
  • use prefetch to preload the data outside the browser area.

addyosmani.com

infinite scroll

Security

Towards native security defenses for the web ecosystem

In the Google blog, Arthur Jank and Lucas Weixelbaum discussed new powerful security mechanisms created to protect applications from the web vulnerabilities frequently occurred for the last few years.

Such features and approaches as Trusted Types, Content Security Policy, Fetch Metadata Request Headers and the Cross-Origin Opener Policy let developers significantly improve webs ite protection as well as prevent a lot of possible threats like XSS, CSRF, cross-site leaks, or injection vulnerabilities.

security.googleblog.com


Browsers

Traditional Firefox release - 80 version

Firefox's new version has got a couple of attractive features to offer. In the first place, Firefox can now be installed as a pdf document viewer. They have also added support for the new syntax from ES2021 for named export of the entire module namespace, along with the support for overlay operations in the Web Animations API. 

The developer tools are improved. In the network activity pane, slow requests are marked with a turtle icon. Now you can block requests directly from the console using the: block command and, accordingly, you need to use: unblock to unblock them . Whenever an exception occurs, the error stack trace can be viewed in the tooltip of the problematic source code.

developer.mozilla.org

New in Chrome 85

Google certainly doesn’t pull up the rear and comes up with a new release including the following innovations:

  • The getInstalledRelatedApps () method now supports Windows. It can also be used to check if the user has a PWA installed in the system referring to the site views. This method is used to customize landing pages and disable informational messages on the site with a call to install the application.
  • Added support for the content visibility: auto CSS property to split the page into logical chunks that help speed up page rendering.
  • As a part of the origin trial, support for streaming using fetch was added. It is helpful for streaming generated content to the server.
  • The developer tools now obtain full support for editing properties created with the CSS Object Model API.

developers.google.com


JS

Development of a plugin system in JavaScript

Bryan Braun shows a simple plugin architecture and explains the complexities to consider when developing it. He shows how it is possible to leverage your own plugin creation by simplifying the API, making testing easier and reducing the dependencies of the system, consequently making it more loosely coupled.

css-tricks.com

This or that: handbook for differentiation of look-a-like things

Here is a collection of comparisons of similar approaches and tools in web development. Nguyen Huu Phuoc shares tips and successful practices in this collection, divided into sections of CSS, DOM, HTML, JS, React, and Typescript.

thisthat.dev


web development comparison tools


Internals

[V8 Deep Dives] Understanding Map Internals

Andrey Pechkurov wrote an article about the internal structure of Map in V8. It uses a deterministic hash table for Map, a data structure that ensures that the order in which the stored values are traversed in the order in which they are added to the Map. The author shares his observations on how the data is added to and removed from the Map. Also, he looks into the extraction from the Map and the complexity of all these actions.

itnext.io

The Internet: explained from first principles

This comprehensive article is written not only for the web developers but also for the “non-technical” audience. The basic concepts are explained first, which then flow into the more advanced information and culminate in a "dive" into DNSSEC. The article consists of seven sections:

  • Communication protocol
  • Anomaly detection and handling
  • Network topologies
  • Signal routing
  • Signal relaying with circuit switching or with packet switching
  • Internet layers
  • Internet history

explained-from-first-principles.com


Frameworks

The 10 best Angular tips selected by the community

The article describes tips and tricks collected from June's everyday challenges. These have got the most likes and are explained in more detail.

indepth.dev

4 Best Practices for Large Scale Vue.js Projects

In this article, Chameera Dulanga discusses a couple of best practices that developers can use to organize the large scale Vue.js projects. Some of the recommendations sound evident, like writing unit tests, but some can be quite informative - such as modularizing Vuex stores or a piece of advice on how to manage stores properly.

blog.bitsrc.io

Build a React application with Amazon Web Services 

Why not consider making your next React app powered by AWS? Here’s a descriptive guide on how to do it: where to initialize a local app with the CLI, add authentication, add a GraphQL API and a database, as well as how to update your app to store images, deploy and host through AWS Amplify.

aws.amazon.com


Node

Docker best practices with Node.js

The article includes a comprehensive list of Docker best practices that are exemplified under the realm of Node.js, where each recommendation is followed by the examples and code snippets.

dev.to/nodepractices

Node-Chromium: the package that downloads and provides chromium for your project

There are lots of benefits Chromium has got to offer currently, but the main benefit of using Chromium is that it does not include all the proprietary modifications made by Google. Thus, it is more lightweight and more suitable for the automation purposes. That’s why the package developed by Dmytro Tolstyi node-chromium allows us to easily add Chromium binaries to the Node project and use it for automation, testing, web scraping, or just for fun :)

github.com/dtolstyi


Testing

Vest - declarative validation testing library

Get acquainted with Vest, a validation and testing library for JS applications whose syntax is based on the modern JS unit testing frameworks like Mocha or Jest.

The idea behind Vest is that your validations can be described as a "spec" or a contract that reflects your form or feature structure. Your validations run in production and are framework-agnostic, meaning that Vest works well with React, Angular, Vue, or even without a framework at all.

github.com/ealush