Javascript Weekly Digest #1

Lately we started a new tradition at work, the team gets together once a week to share stuff we’ve learn, interesting posts and go over some of the highlights from the javascript world.
I’ll try to share a summary of the things we covered each week.

And now for the first post..

Yarn

• Replacement for `npm`
• Takes packages from npm and bower registries
• Offline and fast (due to caching, install in parallel)
• `yarn.lock` (more reliable, secure hashes)

Commands

• `yarn add` — similar to `npm install`
• `yarn global add package`
• `yarn init` — initializes the development of a package.
• `yarn` or `yarn install` — installs all the dependencies
• `yarn remove` — removes an unused package from your current package.
• `yarn outdated` — checks for outdated package dependencies.
• `yarn upgrade` — upgrades packages to their latest version based on the specified range.
• `yarn cache [ ls | dir | clear ]`

Full list of commands.
Comparison with npm commands can be found here.

DevTools Debugging Tips

Tips from “14 Must Know Chrome Dev Tools Tricks” by Wes Bos, part of his great JavaScript30.com free course.

• Debug: Break on DOM changes
• Regular: console.log(‘simple text’)
• Interpolated: console.log(‘simple %s text’, stringVariable)
• Interpolated ES6: console.log(`simple ${stringVariable} text`)
• Styled: console.log(‘%c styled text’, ‘font-size: 50px; background: red; text-shadow: 10px 10px 0 blue’)
• Warning: console.warn(‘be ware’)
• Error: console.error(‘oh shit’)
• Info: console.info(‘fun fact’)
• Testing: console.assert(1 === 2, ‘informative error message’)
• Clearing: console.clear()
• Viewing DOM elements: console.log(p) vs console.dir(p)
• Grouping together:

const shows = [ { name: ‘iron-fist’, year: ‘2017’, rating: ‘7.6’ },
{ name: ‘the walking dead’, year: ‘2010’, rating: ‘8.5’ },
{ name: ‘legion’, year: ‘2017’, rating: ‘8.8’ },
{ name: ‘game of thrones’, year: ‘2011’, rating: ‘9.5’ } ]
shows.forEach(show => {
 console.group(show.name); // or console.groupCollapsed(show.name)
 console.log(`Show ‘${show.name}’`);
 console.log(`Started in year: ${show.year}`);
 console.log(`Has rating of: ${show.rating}`);
 console.groupEnd(show.name);
});

• Counting:

console.count('stars'); // stars: 1 
console.count('crows'); // crows: 1
console.count('stars'); // stars: 2
console.count('stars'); // stars: 3
console.count('stars'); // stars: 4
console.count('crows'); // crows: 2

• Timing:

console.time(‘fetching data’);
fetch(‘https://api.github.com/users/avivr')
 .then(response => response.json())
 .then(data => {
   console.timeEnd(‘fetching data’);
   console.log(data);
});

• Table: console.table(shows)

Node Clustering

Demo code from Ben Nadel blog post about ‘Concurrency In Node.js Using The Cluster Module’

Bits

• ReactConf 2017 Videos
• Sketch — Playground for react native — https://sketch.expo.io/
• create-react-native-app CLI
• Copy to clipboard cross-browser https://github.com/callmecavs/gotem
• http://prismjs.com/ — syntax highlighter
• CSS Grid Layout — new in Chrome 57 and FF 52 — Egghead.io course https://egghead.io/courses/master-css-grid-layout
• react-perimeter — https://github.com/aweary/react-perimeter
• react router v4 — https://reacttraining.com/react-router , https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4