Check out the latest JS updates, news and releases from the most recent JavaScript digest:

Webpack 4 released

  • Webpack 4, is FAST (up to 98% faster)
  • WebAssembly Support
  • Development/Production modes
  • entry defaults to ./src
  • output.path defaults to ./dist
  • Node.js 4 Support Dropped
  • Zero Config Module Bundler

More info here.

Npm v5.7.0 released

  • The new npm ci command installs from your lock-file ONLY. If your package.json and your lock-file are out of sync then it will report an error.It works by throwing away your node_modules and recreating it from scratch.
  • Beyond guaranteeing you that you’ll only get what is in your lock-file it’s also much faster (2x-10x!) than npm install when you don’t start with a node_modules.
  • As you may take from the name, it is expected it to be a big boon to continuous integration environments. It is also expected that folks who do production deploys from git tags will see major gains.

More info here.

Please stop using console.log(), it’s broken…

So… what's wrong with them?

  1. Missing contextual information
  2. Too much information
  3. Untrustworthy information
  4. Altered code behavior

Any solutions?

how do you debug your aplications survey results

More info here.

Last minute node debugging

  • Finding the node process id
$ ps | grep nodemon | grep -v grep 
4359 ttys001 0:00.49 node /…/bin/nodemon
18357 ttys002 0:01.40 node /…/bin/nodemon --ignore public -i views
  • Turning on the debugger on a running node process
$ node -e 'process._debugProcess(67827)'
  • Connecting from Chrome DevTools
node-debug-icon

More info here.

You can build a neural network in JavaScript even if you don’t really understand neural networks

Here’s a general outline of what we’ll be doing:

  1. Create your starter files
  2. Decide what you want your neural network to do
  3. Set up Brain.js and figure out how to process training data & user input
  4. Gather some training data
  5. Run the neural network
  6. Profit?
a neural network in JavaScript without understanding

More info here.

5 Practical Ways To Share Code

Ways To Share Code
  1. NPM with / without Lerna
  2. Lerna
  3. Bit (with Git and with / without NPM)
  4. Shared and common libraries
  5. Git sub-modules
  6. Copy-pasting code

More info here.

Don't Use Index For Keys in React

  • Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
  • The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.
  • When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort.

The Solution

The solution is to generate static, unique ids for each element.

runkit+npm:react-key-index

More info here.

Speed Scorecard by Google

Given the importance of speed as a metric, Google at Mobile World Congress is introducing new tools to help mobile sites improve their end-user experiences. The first is a comparison tool, while the second helps calculate the monetary impact of speed.

Google notes that slow mobile sites often serve as a hindrance to the user experience: “In fact, 53% of visits are abandoned if a mobile site takes more than three seconds to load, according to Google data from 2016.”

gif_speed-scorecard_-english

More info here.

Impact Calculator

Meanwhile, Google has an Impact Calculator that quantifies the likely monetary impact of having a slow site.

It works by estimating the revenue that could be generated by improving the speed of your site. A slider allows users to adjust the speed gains, with the tool only requiring that users input several site stats.

Impact Calculator

More info here.

Unblocking Clipboard Access

At the same time, the permissions put in place around document.execCommand for clipboard interaction are loosely defined and vary between browsers. So, what might a dedicated clipboard API look like if we wanted to address blocking and permissions problems?

That's the new Async Clipboard API, the text-focused portion of which we're shipping in Chrome 66. It's a replacement for execCommand-based copy & paste that has a well-defined permissions model and doesn't block the page.

This new API also Promises (see what I did there?) to simplify clipboard events and align them with the Drag & Drop API.

async-clipboard-demo

More info here.

A cryptocurrency miner hidden in a favicon.ico - welcome to 2018!

A cryptocurrency miner hidden in a favicon.ico
A cryptocurrency miner hidden in a favicon.ico

More info here.

Awaity.js

  • Functional utility library for async / await Think lodash for promises.
  • Bluebird's powerful collections methods, built with native promises
  • Use functions like map, reduce, filter & some to iterate over promises in an intuitive way.
  • Fine-grained Concurrency control
  • Resolve all promises at once or in series of 3? the choice is yours.
  • Built to support Tree Shaking from the ground up
  • Take what you need and leave the rest.
  • Two flavors: Regular & FP style
  • Similar to lodash/fp, Awaity.js comes with additional flavor to support functional composition.

More info here.

Workly

  • Moving a function to a worker is really simple.
  • The above examples only work when the class/function is not dependent on the containing scope, i.e. other libraries or global objects.
  • In the worker, you can expose your object/function/class using workly.expose method.
  • In this example, the function depends on moment.js – – ( , ); ( ) { (value).
function busyAdd(a, b) {
        let st = Date.now();
        while (true) {
          if ((Date.now() - st) > 2000) break;
        }
        return a + b;
      }
      
      (async () => {
        let workerAdd = workly.proxy(busyAdd);
        console.log(await workerAdd(23, 16)); // 39
      })();

More info here.

date2json

Easy and fast library for converting date toJSON object.

const date2json = require("date2json");
      
      const currentTime = date2json();
      console.log(currentTime);
      // Local time in string JSON format
      // {
      //   "year": "YYYY",
      //   "month": "MM",
      //   "day": "DD",
      //   "hour": "HH",
      //   "minute": "mm",
      //   "second": "SS"
      // }

More info here.

Dom-to-image

dom-to-image

How it works?

  • Clone the original DOM node recursively.
  • Compute the style for the node and each sub-node and copy it to corresponding clone and don't forget to recreate pseudo-elements, as they are not cloned in any way.
  • Embed web fonts
  • Serialize the cloned node to XML.
  • Wrap XML into the <foreignObject> tag, then into the SVG, then make it a data URL.
  • Optionally, to get PNG content or raw pixel data as a Uint8Array, create an Image element with the SVG as a source, and render it on an off-screen canvas, that you have also created, then read the content from the canvas.

More info here.

That’s it for now. Stay tuned and and subscribe to our newsletter not to miss next month JS digest!