As usual, there have been minor browser releases at the beginning of the summer. However, Safari beta mentioned along with Typescript and Angular a big update for a quite major release. In addition to the coverage of these updates, the following digest includes a separate section with the articles related to the architecture aspect of software development.

New

Bootstrap 5’s very first alpha has arrived! 

https://blog.getbootstrap.com

Bootstrap 5 is no longer dependent on jQuery and does not support Internet Explorer. Now it uses custom properties and has an updated look. In Mark Otto’s article, you can learn more about these and other changes to the alpha version of the major update. 

Announcing TypeScript 4.0 Beta

https://devblogs.microsoft.com

Daniel Rosenwasser goes about key changes in the major update: labels for tuples, tuples with a variable number of elements, improved type determination by the flow of execution, assembly acceleration, custom JSX factories, and others.

Ecma International General Assembly Approved ECMA262 Specifications

https://tc39.es/ecma

June has passed, and this means that the new 11th edition of ECMA-262 standard is defining the ECMAScript and, thus, JavaScript language will be out shortly. It obtains the following new features: String.prototype.matchAll, BigInt, Promise.allSettled, globalThis, for-in mechanics, optional chaining, nullish coalescing operator and dynamic imports.

Version 10 of Angular Now Available

https://blog.angular.io

This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. It is smaller than typically - only four months have passed since version 9.0 of Angular has been released.

Support for IE9, IE10 and IE Mobile has been deprecated and will be removed in the future version. Also, dependencies have been updated: TypeScript updated to version 3.9, TSLib to version 2.0, TSLint to version 6.

Puppeteer v4.0.0 Released: The Node API for Chrome

https://github.com

 The popular way to remotely control a headless Chrome instance gets a major version bump. Its main breaking change is that Puppeteer no longer uses Node’s EventEmitter library in order to make it more environment-agnostic. It’s also now “much better at killing lingering browser processes.”


Browsers

A new stable Firefox version is rolling out

https://hacks.mozilla.org

Version 77 comes with a few new features for the web developers: improvements in JS debugging, overflow settings for Network and Debugger, network data preview improvements. Now, the debugger will respect the currently selected stack when stepping. Also, this new version goes with the web platform updates like replaceAll() and accessibility improvements.

Deep dive into lazy loading images

https://dev.to

Carles Nunez looks at the source code of Chromium and shares his observations as for when to use native lazy loading.

Safari 14 Beta Release Notes

https://developer.apple.com

Get acquainted with the following Safari 14 novelties in upcoming macOS and iOS releases: WebP, web extensions, HTTP / 3, abandonment of Flash, BigInt, logical assignment and public class fields, custom EventTarget, advanced image-set in CSS, pseudo-selectors: is () and: where (), image-orientation, performance and security updates.


CSS

Background Patterns, Simplified by Conic Gradients

https://css-tricks.com

Simplify background patterns with conical gradients. Ana Tudor shows how to create interesting geometric patterns using conic-gradient ().

Global and Component Style Settings with CSS Variables

https://www.sarasoueidan.com

Sarah Suidan shares her way of organizing and using styles through CSS variables. Heads up: using scoped CSS variables has also performance benefits because setting and modifying variables defined on a global scope can be expensive & have performance pitfalls due to the large amounts of style recalculations.

Opportunities review of CSS Houdini

https://iamvdo.me

Here, Vincent De Oliveira shares his overview of both opportunities and challenges that the Houdini project solves. Be aware of its limitations and growth points.

CSS Houdini

CSS Trigger Table Guide

https://csstriggers.com

Here is Table with CSS properties along with information on how they affect the performance of browser engines. 

Multi-colored stripes are showing the following indicators:

  • Layout: recalculation of the layout
  • Paint: drawing a layout
  • Composite: composition of the layout


Architecture-ish

Is micro frontends architecture a silver bullet?

https://increment.com

Luca Mezzalira opens up about when and why developers should take a closer look at the new application architecture for the front-end. Here, you will find some helpful pieces of advice, covering lots of points - from abstraction to implementation.

Everything you ever wanted to know about side effects

https://sgom.es

Sergio Gomez talks about how to help bundlers resolve dependencies between modules and make an effective use of tree shaking.

Let your PWA act like a native application

https://web.dev

Thomas Steiner shows APIs that reduce the distance between native capabilities and web platform capabilities, providing the Apple Podcasts application as an example. 


Security

Google Chrome’s upcoming major security update with a redesigned section and a bunch of new tools

https://blog.google

Google has announced the release of Chrome's largest browser security update during the recent years. It brings about new tools as well as a redesigned Chrome privacy and security settings section aimed to help with better security control.

React security vulnerabilities you should never ignore

https://www.simform.com

That’s Prayaag Kasundra’s extensive article on vulnerabilities and issues which can affect almost each React application from a security perspective: attacks, authentication leaks, OWASP non-compliance. In brief, the author explains the ways to fix Reactjs Security Vulnerabilities that minimize the chances of security flaws accumulating over time in the web application.

Fighting external link vulnerability

https://www.manjuladube.dev

Do you use target = "_ blank" in external links? Sounds innocent, but did you happen to know that the page that the user accesses this way gains partial control over the linking page? Through this link, attackers can carry out a phishing attack using window.opener. In the provided article, the author shares a quick tip on how to prevent interception.

An interactive Cross-Site Request Forgery (CSRF) demo

https://victorzhou.com

How the CSRF attack works and how to prevent it: a hands-on beginner's guide in the form of an interactive demonstration of vulnerability from Victor Zhu. You will learn what types of CSRF attacks exist and how to prevent them. 


Frameworks

Complete React form validation solutions overview

https://blog.logrocket.com

Here, you can find the overview of the most popular solutions for the form management and validation in React. Supported with the basic usage examples, exhibiting pros and cons, it allows you to compare and select the most appropriate tool for your practice.

Exploring the state of reactivity patterns in 2020

https://indepth.dev

Ryan Carniato reflects on the reactivity of modern libraries. As an analogy, he turns to React, Vue, Svelte and Solid, based on a fine-grained reactivity pattern.

Awesome Vue 3 - A curated selection of Vue 3 resources

https://github.com

What can be better than the repository which includes a set of articles, useful packages and video links? Here you can find it. On top of that, the content is being continuously supplemented.

Svelte basic tutorial notes by a Svelte beginner

https://sung.codes

In case you decided to give this framework a try, this quick introduction to basic constructions and patterns in Svelte, followed by examples, may come in handy.

Solid - a promising declarative JavaScript library for creating user interfaces

https://github.com

Solid is a lightweight and fast React analogue that does not use a virtual DOM and compiles to direct DOM instructions like Svelte. The GitHub project description includes a wide range of ready project examples where you can check the possibilities and key features of the library yourself. 


Performance

Event listeners and garbage collection

https://jakearchibald.com

It is useful to get yourself acquainted with a couple of examples of memory leaks when working with asynchronous functions. Besides, you can learn here how to leverage the garbage collector to solve race conditions. 

Which extensions slow down your Chrome?

https://www.debugbear.com

 DebugBear has analyzed 1000 popular browser extensions and made conclusions based on the following markers:

  • Main thread lock time
  • Delayed page rendering
  • Processing time in the background
  • The amount of memory consumed by the browser

 If there are no extensions, the nominal site will load in 40 ms. If you install Evernote or Grammarly, the download time will jump to 500 ms. But before you begin to massively eradicate extensions (or even ad blockers), take a look at their article. 

chrome extensions

Prefetching? At This Age?

https://timkadlec.com

Tim Kadlec figured out the reasons for the strange behavior of prefetch on Netlify and opened up about his findings in the article. 

The author connected the Instant.Page library, which helps to load pages in the background using prefetch, tracking the mouse hover over the links and user taps. And if the site was hosted on Netlify, the loaded pages were not taken from the cache after clicking on the links. Instead, they initiated reload. The article explains this behaviour for the popular browsers.


Node

Fixing performance issues in the Node.js web framework Hapi - a performance deep-dive

https://www.nearform.com

Mathias Buus covers the full cycle of finding and fixing performance problems with the help of benchmarks, changes in the plugin initialization logic and other stages. After applying all the fixes, Hapi's performance has improved by 30%.

Serverless Express: Easy APIs on AWS Lambda and AWS HTTP API 

https://www.serverless.com

A component of Serverless Framework focused on deploying Node Express.js APIs to AWS Lambda., serving them up via API Gateway’s new HTTP API approach. Great news to the developers who prefer to focus more on apps rather than infrastructure complexity.


Useful tools

How to Track Your AWS Spending

https://github.com

The AWS-billing-to-Slack tool now can send daily expense reports to AWS in any of the Slack channels. The accounts are categorized, and notifications setup is as simple as possible.

Why you would like to switch from yarn to pnpm

https://www.takeshape.io

Apart from npm and yarn, there is another little-known package manager called pnpm. Andrew Sprouse wrote an article where he clarified the reasons they chose pnpm for their project.

Having a number of problems with phantom dependencies and given the complication of checks in the CI system, the team compared yarn 2, lerna and pnpm and decided to stick with the latter option.


Final Thoughts

Going through the news for this month, you are going to discover once again how cool Javascript is. No wonder that SpaceX software engineers chose Chromium and JS for Crew Dragon's displays on-orbit during a Reddit AMA