Chrome 59 update

New:

  • Headless Chrome
  • Notifications on macOS
  • Image capture API

DevTools changes:

Read more about these here and here

CSS and JS code coverage in Chrome DevTools

How it looks like:

Read more about it here

Step over async await in Chrome DevTools

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.


      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

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

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

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

Firefox 54 released

Here might be a long list of bugfixes.

TL;DR:

The browser is better now.

Read more about it here

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

Practice: Object rest and spread properties

ES2015 array rest and spread elements:


      // Rest elements for array destructuring assignment:
      const primes = [2, 3, 5, 7, 11];
      const [first, second, ...rest] = primes;
      console.log(first); // 2
      console.log(second); // 3
      console.log(rest); // [5, 7, 11]
      
      // Spread elements for array literals:
      const primesCopy = [first, second, ...rest];
      console.log(primesCopy); // [2, 3, 5, 7, 11]

ES.next: object rest and spread properties:

      // Rest properties for object destructuring assignment:
      const person = {
          firstName: 'Sebastian',
          lastName: 'Markbåge',
          country: 'USA',
          state: 'CA',
      };
      const { firstName, lastName, ...rest } = person;
      
      console.log(firstName); // Sebastian
      console.log(lastName); // Markbåge
      console.log(rest); // { country: 'USA', state: 'CA' }
      
      
      // Spread properties for object literals:
      const personCopy = { firstName, lastName, ...rest };
      console.log(personCopy);
      // { firstName: 'Sebastian', lastName: 'Markbåge', country: 'USA', state: 'CA' }

Spread properties offer a more elegant alternative to Object.assign() in many situations:

      // Shallow-clone an object:
      const data = { x: 42, y: 27, label: 'Treasure' };
      // The old way:
      const clone1 = Object.assign({}, data);
      // The new way:
      const clone2 = { ...data };
      // Either results in:
      // { x: 42, y: 27, label: 'Treasure' }
      
      // Merge two objects:
      const defaultSettings = { logWarnings: false, logErrors: false };
      
      const userSettings = { logErrors: true };
      // The old way:
      const settings1 = Object.assign({}, defaultSettings, userSettings);
      // The new way:
      const settings2 = { ...defaultSettings, ...userSettings };
      // Either results in:
      // { logWarnings: false, logErrors: true }
      

Read more about it here

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

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

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

Cool libs

Data-Pixels

Create Pixel Art Programmatically

Read about it here

VX

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.

Read about it here

SmartPhoto

The most easy to use responsive image viewer especially for mobile devices

Read about it here

Embedo

A simple, lightweight and standalone social media content embed plugin for web

Read about it here

Moon.js

A minimal, blazing fast user interface library

HTML


        <div id='app'>
          <h1>{{msg}}</h1>
          <input type='text' m-model='msg'/>
        </div>
      

Read about it here

Microtip

Modern, minimal css tooltip library

Read about it here

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

Timeline.js

Read about it here

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.
      

Read about it here

Birdview.js

Read about it here

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/