JavaScript news in the latest JS digest:

Petition: Kill Internet Explorer Once and For All

Web developers have had enough! Internet Explorer has very little compatibility, yet we are still required to write code to accommodate this archaic browser. We want to use ES6 :(

Kill-Internet-Explorer.jpg

For more details click here.

Google Chrome 63 Released

  • Google has redesigned
  • the chrome://flags section.
  • Chrome now lets you mute sites forever.
  • FTP links are now marked as insecure.
  • Chrome now shows warnings against MitM attacks.
  • Chrome now uses better site isolation.
  • Chrome now comes with a Device Memory API that lets developers better understand how Chrome and websites use a PC's memory.
  • Chrome can now load JavaScript modules based on runtime conditions. It previously supported only static JavaScript module loading.

And a lot more here.

Google-Chrome-63.jpg

How to Cancel Your Promise?

You need to build a workaround. To see code realization click here.

Following the link above, you can find examples for:

  • Bluebird
  • Pure Promises
  • Generators.

Parcel

Parcel - blazing fast, zero configuration web application bundler.

parcel.jpg

Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a 2016 MacBook Pro with 4 physical CPUs.

  • Blazing fast bundle times - Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds even after a restart.
  • Bundle all your assets - Parcel has out of the box support for JS, CSS, HTML, file assets, and more - no plugins needed.
  • Automatic transforms - Code is automatically transformed using Babel, PostCSS, and PostHTML when needed - even node_modules.
  • Zero config code splitting - Using the dynamic import() syntax, Parcel splits your output bundles so you only load what is needed on initial load.
  • Hot module replacement - Parcel automatically updates modules in the browser as you make changes during development, no configuration needed.
  • Friendly error logging - Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem.

More information here.

Turbo: 5x faster than Yarn & NPM, and runs natively in-browser

Turbo is a blazing fast NPM client originally built for StackBlitz that:

  • Installs packages ≥5x faster than Yarn & NPM
  • Reduces the size of node_modules up to two orders of magnitude
  • Has multiple layers of redundancy for production grade reliability
  • Works entirely within your web browser, enabling lightning fast dev environments
turbbo.gif

Why?

Instead of downloading entire tarballs, Turbo is smart and only retrieves the files that are directly required from the main, typings and other relevant fields.

turbo2.jpg

For more details click here.

turbo3.jpg

Average Page Load Times for 2018

  • What are the new average page load times?
  • What’s the typical size of a webpage you should aim to be under?
  • How many resources does the standard page load?
  • What’s the average server delay, measure in time to first byte?
Average-Page-Load-Times-for-2018_1.jpg
Average-Page-Load-Times-for-2018_2.jpg
Average-Page-Load-Times-for-2018_3.jpg
Average-Page-Load-Times-for-2018_4.jpg

How to compare with your site load time/size/resources?

There are a few great simple site speed tools out there:

  1. WebPageTest: The industry standard for measuring site performance – results are collected from real browsers running common operating systems.
  2. Pingdom: a simple tool which makes makes the same measurements, yet method of testing is undocumented.
  3. GTmetrix: gives you actionable insights about the best way to optimize your webpage speed.

For more information click here.

77% of 433,000 Sites Use Vulnerable JavaScript Libraries

State of Open Source Security discoveries the report mentions is that an analysis of around 433,000 sites found that 77% of them use at least one front-end JavaScript library with a known security vulnerability.

Vulnerable-JavaScript-Libraries_1.jpg
Vulnerable-JavaScript-Libraries_2.jpg

More information here.

Using the new theming API in Firefox

From powerful extensions like Stratiform or FT Deep Dark to simple lightweight themes, theming has been quite popular withinFirefox. Now that Firefox Quantum (57) has launched with many performance improvements and a sparkling new interface, wewant to bridge the gap with a new theming API that allows you to go beyond basic lightweight themes.

theming API in Firefox1.gif
theming-API-in-Firefox2.jpg
theming-API-in-Firefox3.jpg
theming API in Firefox4.gif

Read more here.

Bower is dead

Bower is no longer the dependency manager of choice for front-end projects. While the open source project is still maintained,its creators decided to deprecate it, and advise how to migrate to other solutions—namely Yarn and webpack.

Six reasons to stop using Bower and switch to a new workflow:

  1. Bower has been deprecated by its creators
  2. Bower offered a flat dependency graph, which you can now get with NPM and Yarn
  3. Bower adds complexity and is redundant because it requires NPM
  4. Bower has a separate package ecosystem
  5. Bower put the burden of dependency management on the user
  6. Bower doesn’t support different versions of the same package on the same page

For more info click here.

A Classic Extension Reborn: Tree Style Tab

Tree Style Tab.gif

For more information click here.

React v16.2.0

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. this feature call fragments:


      render() {
        return (
          <>
            <ChildA />
            <ChildB />
            <ChildB />
          </>
        );
      }

HTML text


      Some text.
      <h2>A heading</h2>
      More text.
      <h2>Another heading</h2>
      Even more text.

Prior to version 16


      render() {
        return ( 
          // Extraneous div element :(
          <div>
            Some text.
            <h2>A heading</h2>
            More text.
            <h2>Another heading</h2>
            Even more text. 
          </div>
        );
      }

React 16.0


      render() {
        return [
          "Some text.",
          <h2 key="heading-1">A heading</h2>,
          "More text.",
          <h2 key="heading-2">Another heading</h2>,
          "Even more text."
        ];
      }

Fragment component


      render() {
        return (
          <Fragment>
            Some text.
            <h2>A heading</h2>
            More text.
            <h2>Another heading</h2>
            Even more text.
          </Fragment>
        );
      }

JSX Fragment Syntax


      render() {
        return (
          <>
            Some text.
            <h2>A heading</h2>
            More text.
            <h2>Another heading</h2>
            Even more text.
          </>
        );
      }

For more info click here.

WebStorm 2017.3.1 is now available

  • Support for Fragments in React 16.2;
    WebStorm-2017_1.jpg
  • Configurable code completion for JSX attributes (WebStorm automatically adds ={} or =""  after the attribute name);
  • Adding interpolation inside template strings;
WebStorm 2017_2.gif

For more details press here.

The Best JavaScript and CSS Libraries for 2017

For top 20 libraries for JSand CSS click here.

The Best JavaScript and CSS Libraries for 2017.jpg

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