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


3 мар. 2017 г.

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".

17 нояб. 2016 г.

Windows + Node + IRHydra2

1. Create somewhere in %PATH% cmd file node-irhydra.cmd with
node --trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces --redirect-code-traces-to=code.asm --print-opt-code --trace_hydrogen_file=hydrogen.cfg %*
2. Run node-irhydra.cmd yourFile.js
3. Go to http://mrale.ph/irhydra/2/ and upload files

15 апр. 2016 г.

How to handle big repositories with git

Shallow clone

Clone a repository keeping only the latest n commits of history. You can properly pull and push to repositories even from a shallow clone.

git clone --depth 1 remote-url


Clone only one branch

You can also limit the amount of history you clone by cloning a single branch

git clone URL --branch branch_name --single-branch [folder]


Sparse checkout

Original StackOverflow answer

mkdir <repo>
cd <repo>
git init
git remote add -f origin <url>
git config core.sparsecheckout true
echo "some/dir/" >> .git/info/sparse-checkout
echo "another/sub/tree" >> .git/info/sparse-checkout
git pull origin master

Another way:

git clone
git config core.sparsecheckout true
echo src/ > .git/info/sparse-checkout
git read-tree -m -u HEAD


Sparse checkout + shallow clone

Original StackOverflow answer

git init <repo>
cd <repo>
git remote add origin <url>
git config core.sparsecheckout true
echo "src/*" >> .git/info/sparse-checkout
git pull --depth=1 origin master


Disable delta compression for binary files

Original discussion

Configure a .gitattributes file as such:

*.jpg  binary -delta
*.png  binary -delta
*.psd  binary -delta

... and so on