Find out the latest JavaScript libraries updates, news, and releases in our fresh JS Digest, September 2018 edition.

Browsers news

Ways to synchronize browser tabs

  • Local Storage
localStorage.setItem('key', 'value');
      


window.addEventListener('storage', function(event) {
          console.log(event.key);
      });
      
  • Post Message
window.addEventListener('message', function(event) {
        if (event.origin != 'http://javascript.ru') {
          return;
        }
      
        console.log(event.data);
      });
      
  • Broadcast Channel API
const bc = new BroadcastChannel('test_channel');
      


bc.postMessage('This is a test message.'); 
      


bc.addEventListener('message', function (e) { console.log(e); })
      
  • Web Workers
self.addEventListener('message', function(e){
          const data = e.data;
          const tabId = e.source.id 
      
          self.syncTabState(data, tabId);
      });
      


self.sendTabState = function(client, data){
          client.postMessage(data);
      }
      

Ways to synchronize browser tabs. Browsers comparison

Learn more on habr.com (article in Russian).

What's New In DevTools (Chrome 70)

  • Live Expressions in the Console

Live Expressions in the Console

  • Highlight DOM nodes during Eager Evaluation

Highlight DOM nodes during Eager Evaluation

  • Debug Node.js apps with ndb

Find out more on developers.google.com.

Picture in Picture Mode in Google Chrome

Picture in picture mode (often abbreviated to PiP) is a feature that allows you to watch online video in a floating, resizable window outside of a web page or a dedicated video app.

As the PiP window is always on top of other windows or apps it provides a handy way to watch a video clip while it plays but also be free to go about your business, browse other websites, and use other software.

Now, Google is bringing picture in picture mode to Chrome on the desktop.

Check omgubuntu.co.uk for more.

OffscreenCanvas — Speed up Your Canvas Operations with a Web Worker

Until now, canvas drawing capabilities were tied to the <canvas> element, which meant it was directly depending on the DOM. OffscreenCanvas, as the name implies, decouples the DOM and the Canvas API by moving it off-screen.

Thanks to this decoupling, rendering of OffscreenCanvas is fully detached from the DOM and therefore offers some speed improvements over the regular canvas as there is no synchronization between the two. What is more, though, is that it can be used in a Web Worker, even though there is no DOM available. This enables all kinds of interesting use cases.

const offscreen = document.querySelector('canvas').transferControlToOffscreen();
      const worker = new Worker('myworkerurl.js');
      worker.postMessage({ canvas: offscreen }, [offscreen]);
      


Read more on developers.google.com.

Intercepting the installation of Firefox and Chrome in Windows 10

When you try to install the Firefox or Chrome web browser on a recent Windows 10 version 1809 Insider build, you may notice that the installation gets interrupted by the operating system.

The intermediary screen that interrupts the installation states that Edge is installed on the device and that it is safer and faster than the browser that the user was about to install on the device.

Options provided are to open Microsoft Edge or install the other browser anyway. There is also an option to disable the warning type in the future but that leads to the Apps listing of the Settings application and no option to do anything about that.

Intercepting the installation of Firefox and Chrome in Windows 10

Learn more on ghacks.net.

Front-end

CSS Shape Editors

Firefox 62 shipped out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari.

Chrome supports shape-outside as well, but there is no native DevTools helper for working with them. Thankfully, Razvan Caliman has a Chrome Plugin that does a great job.

Check css-tricks.com for more.

A Native Lazy Load for the Web

A new Chrome feature dubbed "Blink LazyLoad" is designed to dramatically improve performance by deferring the load of below-the-fold images and third-party <iframe>s.

The goals of this bold experiment are to improve the overall render speed of content that appears within a user’s viewport (also known as above-the-fold), as well as, reduce network data and memory usage. 

<iframe src="ads.html" lazyload="on"></iframe>
      

There are three options:

  • on - Indicates a strong preference to defer fetching until the content can be viewed.
  • off - Fetch this resource immediately, regardless of view-ability.
  • auto - Let the browser decide (has the same effect as not using the lazyload attribute at all).

Find out more on css-tricks.com.

CSS-Based Web Attack to Safary

Security researcher Sabri Haddouche discovered a new CSS-based web attack to crash iOS. According to his findings, simply clicking on a website with a particular 15 line code could trigger respring or restart in case of iOS. Whereas, for Mac users, the code could result in crashing the browser. He shared the Proof-of-Concept in a tweet.

The attack uses a weakness in the -webkit-backdrop-filter CSS property. By using nested divs with that property, we can quickly consume all graphic resources and crash or freeze the OS. The attack does not require Javascript to be enabled therefore it also works in Mail. On macOS, the UI freeze. On iOS, the device restart.

Learn more on latesthackingnews.com.

Node.js/Java Script

Celebrating 10 years of V8

This month marks the 10-year anniversary of shipping not just Google Chrome, but also the V8 project. This post gives an overview of major milestones for the V8 project in the past 10 years as well as the years before, when the project was still secret.

Chrome’s V8 Bench score from 2008 to 2018

Chrome’s Speedometer 1 score from 2013 to 2018

More info on v8.dev.

JavaScript MutationObserver API

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

On each keypress we can see what the prior string of text was. We don’t have to store off the existing value to a variable or worry about listening to keyup events, it’s just there in the mutation MutationRecord that gets provided with each Mutation.

The MutationObserver API seems to provide a very clean way to deal with DOM changes outside of the more usual input/form element handlers. Support is excellent and the API is mercifully simple and, for me at least, very logical.

const container = document.querySelector(".container");
      const previous = document.querySelector(".previous");
      
      const mutationConfig = { attributes: true, childList: true, subtree: true, characterData: true,
        characterDataOldValue: true };
      
      var onMutate = function(mutationsList) {
        mutationsList.forEach(mutation => {
          previous.textContent = mutation.oldValue;
        });
      };
      
      var observer = new MutationObserver(onMutate);
      observer.observe(container, mutationConfig);
      

Read more on benfrain.com.

Node.js without node_modules

Last week, developers Yarn (package manager for Javascript) announced a new feature - Plug'n'Play installation. This feature allows you to run Node.js projects without using the node_modules folder, which normally establishes the project dependencies before starting. The feature description declares that node_modules will no longer be needed - the modules will be loaded from the general cache of the package manager.

Read more on github.com.

Funny things in node_modules directory 

  • Express - “yummy” dependency with “like-tweet.js” file
var http = require(“http”)
      http.request({
       method: “POST”,
       hostname: “api.twitter.com”,
       path: “/hotpockets/status/501511389320470528”,
      })
      

like-tweet.js

  • Ember - “glimmer” dependency with “brittanica” dependency  — a module using up 93KB (or 93%) of Glimmer’s code size, suffixed with a letter of the english alphabet(26 in total)
├─┬ glimmer@1.1.5
      │ ├─┬ brittanica@13.0.2
      │ │ ├── brittanica-a@0.0.1
      │ │ ├── brittanica-b@0.1.2
      │ │ ├── brittanica-c@0.0.3
      │ │ ...
      


module.exports = function help() {
          var descriptino = require("brittanica-g").glimmer;
          console.log("glimmer (n). " + descriptino);
          console.log("");
          console.log("Copyright (c) 2016 Tilde Inc");
          console.log("");
          ...
      }
      
  • Babel - one of the biggest offenders, a package called “babel-core” was suspiciously large, coming in at 13 megabytes on its own. I opened up babel-core in vim, then turned off my computer because Ctrl-C wasn’t exiting, then opened babel-core in Sublime Text 2. Each installation of Babel includes a picture of Guy Fieri, and there is nothing you can do about it.

Funny things in node_modules directory. Babel

For more check medium.com/@jdan.

State of JS 2018

A survey about the state of JavaScript in 2018 was opened. Tell us about your experience, preferences, interests and plans. The results will be published approximately in mid-November