JavaScript is the only language developers don't learn to use before using it

You Don't Know JS

Emulate slow network connection on Mac OS X with Network Link Conditioner

1. Open https://developer.apple.com/download/more/ (Downloads For Apple Developers)
2. Find and download Additional Tools for Xcode 8.2 (or other Xcode version you use). Note that there is no need to download/install Xcode itself.
3. Open Additional Tools - Hardware - double-click on Network Link Conditioner
4. Agree to install it to Preferences

Available Network Profiles:

• 100% Loss - drops all incoming and outgoing packets 
• High Latency DNS - adds 3000 ms DNS delay 
• Very Bad Network - 1 Mbps 500ms delay downlink, 1 Mbps 500 ms delay uplink, and 10% of incoming and outgoing packets are dropped
• Edge - 240 Kpbs 400 ms delay downlink, 200 Kbps 440 ms delay uplink
• 3G - 780 Kpbs 100 ms delay downlink, 330 Kbps 100 ms delay uplink
• DSL - 2 Mbps 5ms delay downlink, 256 Kbps 5 ms delay uplink
• LTE - 50 Mbps 50ms delay downlink, 10 Mbps 65 ms delay uplink
• Wi-Fi - 40 Mbps 1ms delay downlink, 33 Mbps 1 ms delay uplink
• Wi-Fi 802.11ac - 250 Mbps 1ms delay downlink, 100 Mbps 1 ms delay uplink

Also there is an option to create custom profiles.

EcmaScript support in Node

Interestingly enough, even 9.0.0 nightlies don't support ES2015 fully: it's missing tail call optimization, Array.prototype.values, and RegExp.prototype.flags.
http://node.green/ - ES2015 ES2016 ES2017 compatibility tables for Node.

List all the in progress features available on your Node release:
node --v8-options | grep "in progress"

List all dependencies and respective versions that ship with a specific Node binary:
node -p process.versions.v8
https://nodejs.org/en/docs/es6/

Get Pseudo-Element Properties with JavaScript

Assume your CSS looks like:

.element:before {

    content: 'NEW';

    color: rgb(255, 0, 0);

}

To retrieve the color property of the .element:before, you could use the following JavaScript:

var color = window

    .getComputedStyle(document.querySelector('.element'), ':before')

    .getPropertyValue('color')

Passing the pseudo-element as the second argument to window.getComputedStyle allows access to said pseudo-element styles

Original post

MDN

Mouse and keyboard support in Midnight Commander for Mac OS X

Somehow I broke mouse support in Midnight Commander while setting up a fresh Mac OS X. It took me the whole week to find the root cause and enable mouse in MC again. Here is the checklist:

• Check that Mouse Reporting is enabled
  Terminal - Menu - View or Cmd+R hotkey
• Find the value of TERM env variable
  echo $TERM in terminal or open Terminal Settings (Cmd+,), go to Profiles - look for Terminfo; it was set to xterm-256color in my case
• Quit all Midnight Commander instances, if any
• Edit ~/.config/mc/ini file, find corresponding terminal section, e.g. [xterm-256color] for my terminal, and remove all its entries
• Start Midnight Commander

Keyboard support: to make Shift+Up and Shift+Down keys work in Midnight Commander, do the following:

• Open Terminal Settings - Keyboard tab
• Add Shift+Up - send text "\033[1;2A" (copy from Shift+Left and edit text)
• Add Shift+Down - send text "\033[1;2B"

All your comparators are belong to us :)

Some implementation details of third-party code could be determined by fingerprinting how that code calls handlers/callbacks we supply to it:

https://habrahabr.ru/post/303748/
https://siri0n.github.io/array_sort_fingerprint/

How to properly define propTypes for React component

Wrong way

// Wrong! propTypes should be either static property or static property getter
class TextWrongES6 extends Component {
    static propTypes() {
        return { children: PropTypes.string };
    }

    static defaultProps() {
        return { children: 'Hello World!' };
    }

    render() {
        return <p>{this.props.children}</p>;
    }
}

Right ways

// The ES5 way
var TextES5Way = React.createClass({
    propTypes: { children: PropTypes.string },

    getDefaultProps: function() {
        return { children: 'Hello World!' };
    },

    render: function() {
        return <p>{this.props.children}</p>;
    }
});

// The ES6 way - ES6 class + class properties
class TextES6Way1 extends Component {
    render() {
        return <p>{this.props.children}</p>;
    }
}
TextES6Way1.propTypes = { children: PropTypes.string };
TextES6Way1.defaultProps = { children: 'Hello World!' };

// The ES6 way - ES6 class + ES5 getters
class TextES6Way2 extends Component {
    static get propTypes() {
        return { children: PropTypes.string };
    }

    static get defaultProps() {
        return { children: 'Hello World!' };
    }

    render() {
        return <p>{this.props.children}</p>;
    }
}

// The ES7 way - static property initializers (experimental feature)
class TextES7Way extends Component {
    static propTypes = { children: PropTypes.string };
    static defaultProps = { children: 'Hello World!' };

    render() {
        return <p>{this.props.children}</p>;
    }
}

// The Stateless Functional Component way
const Text = (props) => <p>{props.children}</p>;
Text.propTypes = { children: PropTypes.string };
Text.defaultProps = { children: 'Hello World!' };

Simple run-time caching service worker with sw-toolbox

• Install sw-toolbox
  npm i --save-dev sw-toolbox

• Make installed file node_modules\sw-toolbox\sw-toolbox.js accessible on production site
• Create Service Worker file service-worker-runtime-cache.js somewhere above the resources you want to cache (i.e. if you want to cache /app/assets/*.css, then Service Worker should be placed in /app/assets or /app or even / folder)

importScripts('path/to/node_modules/sw-toolbox/sw-toolbox.js');
toolbox.options.debug = true;
toolbox.router.get(/\.(css|woff2|png)\?/, toolbox.fastest);
toolbox.router.get(/(main|bundle|ckeditor).js/, toolbox.fastest);

• Add initialization code to your JavaScript application

if (navigator.serviceWorker && navigator.serviceWorker.register) {
    navigator.serviceWorker.register('/app/service-worker-runtime-cache.js');
}

• Frequent problem: When DevTools are open, Service Worker does not work. Reason: if "Disable cache" in Network tab is checked, requests will go directly to the network.

More info:

1. A collection of service worker tools: https://googlechrome.github.io/sw-toolbox/
2. Predefined request handlers: https://googlechrome.github.io/sw-toolbox/api.html#handlers
3. https://medium.com/dev-channel/progressive-web-app-libraries-in-production-b52cad37d34
4. Debugging Service Workers: https://www.chromium.org/blink/serviceworker/service-worker-faq

Babel could create non-optimizable code

Babel transpiles default parameter value into code, that could not be optimized in V8:

 {  
   findAll(src, accumulatedItems = []) {  
     // code  
   }  
 }  

is transpiled to

 {  
   findAll: function(src) {  
     var t = this, accumulatedItems = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : [];  
     // code  
   }  
 }  

with warning "Not optimized: Bad value context for arguments value".

Run-time assertions for JSDoc @param and @type tags in Babel

1. Annotate types and functions/methods with JSDoc
2. Closure Compiler syntax is also accepted
3. Use plugin for Babel: https://github.com/azu/babel-plugin-jsdoc-to-assert