artemdemo

Creating an executable NPM package and using it

This short guide explains how to create an NPM package that can be called as a script from another project. For clarity: The package to execute will be called: Module The place where you use it: Application

1. Build your module

Create a standard module ignore command line parsing

artemdemo

%reset-Button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;

    background: transparent;

    /* inherit font & color from ancestor */

artemdemo

$ npm install --save babel-cli babel-preset-es2015
$ npm install --save-dev jasmine

.babelrc:

{
 "presets": ["es2015"]

artemdemo

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

artemdemo

    var objectToQueryString = function (a) {
        var prefix, s, add, name, r20, output;
        s = [];
        r20 = /%20/g;
        add = function (key, value) {
            // If value is a function, invoke it and return its value
            value = ( typeof value == 'function' ) ? value() : ( value == null ? "" : value );
            s[ s.length ] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
        };
        if (a instanceof Array) {