JavaScript news in December 2017 edition: + Kill Internet Explorer + Google Chrome 63 Released + How to Cancel Your Promise + Parcel + Turbo + Average Page Load Times for 2018 + Vulnerable JavaScript Libraries + New theming API in Firefox + Bower is dead + Extension Tree Style Tab: Reborn + React v16.2.0 + WebStorm 2017.3.1 + The Best JavaScript and CSS Libraries for 2017

1. JS Digest
December 2017
By Dmytro Mysak,
Software Developer

2. www.eliftech.com
▪ Kill Internet Explorer
▪ Google Chrome 63 Released
▪ How to Cancel Your Promise
▪ Parcel
▪ Turbo
▪ Average Page Load Times for
2018
▪ Vulnerable JavaScript
Libraries
▪ New theming API in Firefox
▪ Bower is dead
▪ Extension Tree Style Tab:
Reborn
▪ React v16.2.0
▪ WebStorm 2017.3.1
▪ The Best JavaScript and CSS
Libraries for 2017
In December 2017 edition:

3. www.eliftech.com
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 :(
For more details click here.

4. www.eliftech.com
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 of more here

5. www.eliftech.com
How to Cancel Your Promise ?
You need to build a workaround. To see code realization click here.
On that site, we have examples for:
▪ Bluebird
▪ Pure Promises
▪ generators

6. www.eliftech.com
Parcel
Parcel - blazing fast, zero configuration web application bundler.
Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a
2016 MacBook Pro with 4 physical CPUs.

7. www.eliftech.com
Parcel
▪ 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.

8. www.eliftech.com
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 ⚡️

9. www.eliftech.com
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.
For more details click
here.

10. www.eliftech.com

11. www.eliftech.com
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?

12. www.eliftech.com
What is the average load time?

13. www.eliftech.com
What is the average webpage size?

14. www.eliftech.com
What is the average number of resources?

15. www.eliftech.com
What is the average server delay?

16. www.eliftech.com
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.

17. www.eliftech.com
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.
More information here.

18. www.eliftech.com
The Top
LIBRARY NUMBER OF TIMES FOUND
VULNERABLE
% OF ALL INSTANCES OF THIS LIB
DETECTED
jQuery 318,786 92.5%
jQuery UI 74,486 89.7%
Moment.js 10,245 73.0%
AngularJS 7,609 84.8%
Handlebars 3,129 60.7%
Mustache 1,925 51.0%
YUI 3 559 40.3%
jQuery Mobile 413 3.7%
Knockout 407 19.6%
React 181 10.2%

19. www.eliftech.com
The Top
LIBRARY OLDEST VERSION WITH NO KNOWN
VULNERABILITIES
RELEASE DATE
jQuery 3.0.0 June, 2016
jQuery UI 1.10.0 January, 2013
Moment.js 2.15.2 October, 2016
AngularJS 1.6.1 December, 2016
Handlebars 4.0.0 September, 2015
Mustache 2.2.1 December, 2015
YUI 3 3.10.3 June, 2016
jQuery Mobile 1.2.0 October, 2012
Knockout 3.0.0 October, 2013
React 0.14.0 October, 2015

20. www.eliftech.com
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 within Firefox. Now that Firefox Quantum (57) has
launched with many performance improvements and a sparkling new interface, we want to
bridge the gap with a new theming API that allows you to go beyond basic lightweight
themes.

21. www.eliftech.com
Dynamic themes
Read more here.

22. www.eliftech.com
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.

23. www.eliftech.com
A Classic Extension Reborn: Tree Style Tab
For more information click here.

24. www.eliftech.com
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:

25. www.eliftech.com
React v16.2.0
For more info click here.
Prior to version 16HTML text React 16.0
Fragment component JSX Fragment Syntax

26. www.eliftech.com
WebStorm 2017.3.1 is now available
▪ Support for Fragments in React 16.2;
▪ Configurable code completion for JSX attributes (WebStorm automatically adds ={} or
="" after the attribute name);

27. www.eliftech.com
WebStorm 2017.3.1
▪ Adding interpolation inside template strings;
For more details press here.

28. www.eliftech.com
The Best JavaScript and CSS Libraries for 2017
For top 20 libraries for JSand CSS click here.

29. www.eliftech.com
Thank you for reading!
Find us at eliftech.com
Have a question? Contact us:
info@eliftech.com