The latest midpoint of Summer’17 collection of news from JavaScript universe. Browser news: Chrome 59 update Chrome 60 Beta Safari Technology Preview 32 WebKit Support for WebAssembly Firefox 54 Misc: Building the Web of Things Node.js Will Overtake Java Within a Year: Analysis New releases: React v15.6.0 New libs: Data-Pixels Moon vx SmartPhoto Embedo Microtip Prettier Tinytime Moon.js Birdview.js Timeline.js

1. JS digest
Mid-Summer 2017
by Vasyl Khrystiuk & Vitalii Kulyk
Software Developers at ElifTech

2. www.eliftech.com
Agenda
New libs:
▪ Data-Pixels
▪ Moon
▪ vx
▪ SmartPhoto
▪ Embedo
▪ Microtip
▪ Prettier
▪ Tinytime
▪ Moon.js
▪ Birdview.js
▪ Timeline.js
New releases:
▪ React v15.6.0
Browser news:
▪ Chrome 59 update
▪ Chrome 60 Beta
▪ Safari Technology Preview 32
▪ WebKit Support for WebAssembly
▪ Firefox 54
Misc:
▪ Building the Web of Things
▪ Node.js Will Overtake Java Within a Year:
Analysis

3. www.eliftech.com
Chrome 59 update
New:
● Headless Chrome
● Notifications on macOS
● Image capture API
DevTools changes:
● CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.
● Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to
the bottom.
● Block requests. Manually disable individual requests in the Network panel.
● Step over async await. Step through async functions predictably.
● Unified Command Menu. Execute commands and open files from the newly-unified
Command Menu.
Read more about these here and here

4. www.eliftech.com
CSS and JS code coverage in Chrome DevTools
How it looks likeRead more about it here

5. www.eliftech.com
Up until now, trying to step
through code like the snippet
below was a headache. You'd be in
the middle of test(), stepping over
a line, and then you'd get
interrupted by the setInterval()
code. Now, when you step through
async code like test(), DevTools
steps from the first to last line with
consistency.
Step over async await in Chrome DevTools
function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
}
// do some work in background.
setInterval(() => 42, 200);
async function test() {
debugger;
const hello = "world";
const response = await fetch('index.html');
const tmp = await wait(1000);
console.log(tmp);
return hello;
}
async function runTest() {
let result = await test();
console.log(result);
}
Read more about it here

6. www.eliftech.com
Chrome 60 Beta
New:
▪ Paint Timing API
▪ CSS font-display
▪ Credential Management API improvements
▪ Payment Request API on desktop versions, sites can now collect payments
▪ Object rest & spread properties are now supported
▪ The new Web Budget API for Push Notification
▪ Paint performance improvements
▪ VP9 codec support
Read more about it here

7. www.eliftech.com
Safari Technology Preview 32
New:
▪ WebRTC and Media Capture. Safari now supports peer-to-peer video conferencing
through webRTC.
▪ WebAssembly. WebAssembly is a low-level binary format for executable code on the
web. It is a standards-based supplement to JavaScript. It is secure, portable, and
designed to be fast and efficient.
▪ Auto-Play Improvements. Safari prevents auto-play of media with sound on most
websites.
Read more about it here

8. www.eliftech.com
What is WebAssembly
WebAssembly or wasm is a new portable, size- and load-time-efficient low-level bytecode
format for in-browser client-side scripting for compilation to the web that is more efficient
than JavaScript, from which it evolved. Its initial aim is to support compilation from C and
C++.
Read more about it here

9. www.eliftech.com
Firefox 54 released
Here might be a long list of bugfixes.
TL;DR:
The browser is better now.
Read more about it here

10. www.eliftech.com
Building the Web of Things
Mozilla is working to create a Web of Things framework of software and services that can
bridge the communication gap between connected devices. By providing these devices
with web URLs and a standardized data model and API, we are moving towards a more
decentralized Internet of Things that is safe, open and interoperable.
Read more about it here

11. www.eliftech.com
Practice: Object rest and spread properties
ES2015 array rest and spread elements:
Read more about it here

12. www.eliftech.com
Practice: Object rest and spread properties
ES.next: object rest and spread properties:
Read more about it here

13. www.eliftech.com
Practice: Object rest and spread properties
Spread properties offer a more elegant alternative to Object.assign() in many situations:
Read more about it here

14. www.eliftech.com
Analysis: Node.js Will Overtake Java Within a Year
Programming language
popularity according to
the TIOBE index*.
* TIOBE programming
community index is a measure of
popularity of programming
languages, created and
maintained by the TIOBE
Company based in Eindhoven
Read more about it here

15. www.eliftech.com
Analysis: Node.js Will Overtake Java Within a Year
HackerNews has a “who is hiring” section and a tracking system for jobs. In the picture below
you can see a comparison of Node js (blue) and Java (black) from August 2011 to June 2017.
Read more about it here

16. www.eliftech.com
React v15.6.0
Improvements:
React:
▪ Better input
▪ Less Noisy Deprecation Warnings
React DOM:
▪ Add support for CSS variables in style attribute.
▪ Add support for CSS Grid style properties.
React Addons fixes:
▪ Fix AMD support for addons depending on react.
▪ Fix isMounted() to return true in componentWillUnmount.
▪ Fix react-addons-update to not depend on native Object.assign.
▪ Remove broken Google Closure Compiler annotation from create-react-class.
▪ Remove unnecessary dependency from react-linked-input.
▪ Point react-addons-(css-)transition-group to the new package.
Read more about it here

17. www.eliftech.com
Cool libs

18. www.eliftech.com
Data-Pixels
Create Pixel Art Programmatically
Read about it here

19. www.eliftech.com
vx is collection of reusable low-level visualization components. vx combines the power of d3 to
generate your visualization with the benefits of react for updating the DOM.
VX
Read about it here

20. www.eliftech.com
SmartPhoto
The most easy to use responsive image viewer especially for mobile devices
Read about it here

21. www.eliftech.com
Embedo
A simple, lightweight and standalone social media content embed plugin for web
Read about it here

22. www.eliftech.com
Moon.js
A minimal, blazing fast user interface library
Read about it here

23. www.eliftech.com
Microtip
Modern, minimal css tooltip library
Read about it here

24. www.eliftech.com
Prettier
Prettier takes your code and reprints it from scratch by taking the line length into account.
For example, take the following code:
foo(arg1, arg2, arg3, arg4);
It fits in a single line so it's going to stay as is. However, we've all run into this situation:
foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(),
isThereSeriouslyAnotherOne());
Suddenly our previous format for calling function breaks down because this is too long. Prettier is
going to do the painstaking work of reprinting it like that for you:
foo(
reallyLongArg(),
omgSoManyParameters(),
IShouldRefactorThis(),
isThereSeriouslyAnotherOne()
);
Read about it here, watch video here

25. www.eliftech.com
Timeline.js
Read about it here

26. www.eliftech.com
tinytime
tinytime exports a single function that returns a template object. This object has a single
method, render, which takes a Date and returns a string with the rendered data.
const template = tinytime('The time is {h}:{mm}:{ss}{a}.');
template.render(new Date()); // The time is 11:10:20PM.
Birdview.js
Read about it here
Read about it here

27. www.eliftech.com
Sources:
https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html
http://webassembly.org/
https://www.sitepoint.com/results-ultimate-css-survey-2017/

28. www.eliftech.com
Thank you for attention!
Stay tuned for next edition of JS digest
Find us at eliftech.com
Have a question? Contact us:
info@eliftech.com