Have a look at a fresh set of JavaScript related releases, updates, news, tips and secrets in February 2018 JS Digest.

Making WebAssembly even faster: Firefox’s new streaming and tiering compiler  

Firefox 58 also includes a new 2-tiered compiler. The new baseline compiler compiles code 10–15 times faster than the optimizing compiler.    Combined, these two changes mean we compile code faster than it comes in from the network.

compile WebAssembly faster than it downloads

With WebAssembly, there’s less work to start with. Decoding WebAssembly is much simpler and faster than parsing JavaScript. And this decoding and the compilation can be split across multiple threads.    This means multiple threads will be doing the baseline compilation, which makes it faster. Once it’s done, the baseline compiled code can start executing on the main thread. It won’t have to pause for compilation, like the JS does.

Making WebAssembly even faster

For more details click here.

Mozilla Preventing data leaks by stripping   path information in HTTP Referrers  

Mozilla Preventing data leaks by stripping  path information in HTTP Referrers

This leaks user data to websites, telling websites the exact page you were looking at when you clicked the link. To make things worse, browsers also send a referrer value when requesting sub-resources, like ads, or other social media snippets integrated in a modern web site. In other words, embedded content also knows exactly what page you are visitingMost sites log this data for operational and statistical purposes. Many sites also log this data to collect as much information about their users as possible.  They can then use that data for a variety of purposes, or even sell that data – e.g., for re-targeting.

For more details click here.

New in Chrome 64

Chrome logo

More here.

Google Chrome’s new ad blocker

Google have announced that their Google Chrome web browser will block every ad on websites that are not compliant with the Better Ads Standards by default. Google admits that they’re taking action against the types of web advertisements that annoy people the most in an order to halt the rise in ad blockers that block all forms of advertisements on all websites.The Better Ads Standards are a set of rules, one set for desktop and one for mobile, that define unacceptably intrusive, distracting, and annoying advertisement formats. The standards ban ad formats like auto-playing video ads, large ads that stick to the screen when you scroll, and interstitial ads.

Google Chrome’s new ad blocker

More info here.

Crypto Miner in YouTube Ads

YouTube was recently caught displaying ads that covertly leach off visitors' CPUs and electricity to generate digital currency on behalf of anonymous attackers, it was widely reported.Word of the abusive ads started no later than January 24, as people took to social media sites to complain their antivirus programs were detecting cryptocurrency mining code when they visited YouTube. The warnings came even when people changed the browser they were using, and the warnings seemed to be limited to times when users were on YouTube.

Crypto Miner in YouTube Ads

More here.

Bootstrap 4.0.0 stable

Bootstrap 4.0.0
  1. Basic Grid
  2. Automatic Layout
  3. Column Wrapping
  4. Responsive Grid
  5. Column Height
  6. Horizontal Alignment
  7. Vertical Alignment
  8. Reordering Columns.
Bootstrap 4-auto-layout

More info here.

Introducing npx: an npm package runner

Those of you upgrading npm to its latest version, npm@5.2.0, might notice that it installs a new binary alongside the usual npm: npx.

npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI tools and other executables hosted on the registry. It greatly simplifies a number of things that, until now, required a bit of ceremony to do with plain npm.

npx an npm package runner

More here.

What’s new in React 16.3(.0-alpha)

  • New context API
  • StrictMode
  • New life-cycle methods

                   The functions that will be in time considered deprecation are:

  1. componentWillMount — please use componentDidMount instead
  2. componentWillUpdate — please use componentDidUpdate instead
  3. componentWillReceiveProps — a new function, static getDerivedStateFromProps is introduced
  • New version of React Developer Tools
React-16_3_New version of React Developer Tools

More info here.

What’s new in ES2018?


More info here.

The building blocks of Web Workerscases when you should use them

Good use cases for Web Workers:

  • Ray tracing: ray tracing is a rendering technique for generating an image by tracing the path of light as pixels. Ray tracing uses very CPU-intensive mathematical computations in order to simulate the path of light.
  • Encryption: end-to-end encryption is getting more and more popular due to the increasing rigorousness of regulations on personal and sensitive data.
  • Prefetching data: in order to optimize your website or web application and improve data loading time.
  • Progressive Web Apps: they have to load quickly even when the network connection is shaky.
  • Spell checking: user can just type words and sentences without any blocking of the UI, while the worker performs all the searching and providing of suggestions.

Learn more here.

Progressive Web Apps — The Next Step in Web App Development

Simply put, a Progressive Web App is a mixture of a mobile and web app!A Progressive Web App is an app that can provide additional features based on what the device supports, providing offline capability, push notifications, an almost native app look and speed, and local caching of resources.

Progressive Web Apps
  • PWAs are Progressive — These apps work for every user, regardless of the browser that you are using or even where you are situated in the world!
  • Responsive — ProgressiveWeb Apps will fit any device! Be it a desktop, a mobile, a tablet, or even something that hasn’t been created yet!
  • Web Apps that don’t depend on connectivity — With the help of service workers, Progressive Web Apps can even work on low-quality networks, or even offline!
  • App-like feel — Progressive Web Apps feel just like an app. They have app-style interactions and navigation.
  • Fresh — Thanks to service workers, your Progressive Web App will always be up-to-date with the latest updates!
  • Safe — Progressive Web Apps are always served via HTTPS, ensuring that no-one without proper authorization can tamper with your app.
  • Discoverable — According to the W3C manifest, Progressive Web Apps are classed as apps. It easier to find a Progressive Web App thanks to service worker registration scope that allows search engines to easily find them.
  • User Engagement — PWA features like Push Notifications make user engagement very easy!
  • Installation — Users can “keep” the most useful PWAs on their home screen without the hassle of app stores.
  • Linkable — PWAs can be easily shared via URL and do not require complex installation.
Progressive Web Apps

Full article here.

face-verify.js: Monitoring who is physically looking at a website for additional security


Face Verify

  • Uses the webcam to ensure only authorized people are looking at the website
  • Automatically hides sensitive information
  • Hides information if multiple people are looking at the screen

More on GitHub.

Secrets of spread operator

  • String to array

var str="hello";

var chars=[...str];
  • Using with Math

var arr=[2, 4, 8, 6, 0];

var max=Math.max(...arr);
  • Getting unique array

var myArray=[‘a’, 1, ‘a’, 2, ‘1’];

let unique=[...new Set(myArray)];
  • Copying arrays

var arr = ['a', 'b', 'c'];

var arr2 = arr;
  • Inserting array into array

var mid = [3, 4];

var arr = [1, 2, mid, 5, 6];
  • ES2018 feature for objects

let {x,y,...z}={x:1,y:2,a:3,b:4};

x; // 1

y; // 2

z; // { a:3, b:4}

More here.

That’s it for now. Stay tuned for the next edition of JS digest!