25 авг. 2017 г.

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.

15 авг. 2017 г.

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

7 авг. 2017 г.

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')

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

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"

27 июл. 2017 г.

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:


6 мая 2017 г.

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!' };

13 мар. 2017 г.

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)
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) {

  • 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