Bower install returns "Error: ENOTEMPTY, rename xxx" error

I added jquery-mousewheel to bower.json, then ran

bower install jquery-mousewheel

But got  below error

bower jquery-mousewheel#*    ENOTEMPTY ENOTEMPTY, rename '/Users/jimz/.cache/bower/packages/c1d6f178dc1d8767625f6e478b014cf2/3.1.13'

Stack trace:
Error: ENOTEMPTY, rename '/Users/jimz/.cache/bower/packages/c1d6f178dc1d8767625f6e478b014cf2/3.1.13'
    at Error (native)

Console trace:
Trace
    at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:74:17)
    at Logger.<anonymous> (/usr/local/lib/node_modules/bower/bin/bower:109:18)
    at Logger.emit (events.js:107:17)
    at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)
    at /usr/local/lib/node_modules/bower/lib/commands/install.js:27:16
    at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:808:24)
    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:834:30
    at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1079:31)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:752:41)
    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:574:44

Tried some ways, but didn't work. As the error path was .cache, so I did

bower cache clean
bower update jquery-mousewheel

Which fixed the issue.

Shim and Polyfill

Shim:
Shim intercepts API calls and creates an abstract layer between the caller and the target. It is more like an adapter. e.g. es5-shim provides Date.now() API which adapts to old new Date().getTime() API.

Polyfill:
Polyfilling is really just a specialized version of shimming. Polyfill is about implementing missing features in an API. e.g. location.origin which is not available on IE 10.

ES6 (ECMAScript 6) 101

Many companies start to use ES6 to write Javascript codes and use transpilation tool to transform ES6 codes to well-supported ES5 codes.

Here are some concepts (new stuff) in ES6

• Variables (let, const)
• Arrow Functions (map, set, =>)
• Strings (startsWith, endsWith, includes, repeat)
• TEMPLATE LITERAL (${name})
• Arrays (Array.from, Array.of, find, findIndex, fill)
• Math (Math.sign, Math.trunc, Math.cbrt)
• Spread Operator (...)
• Destructuring (let [x, y] = [1, 2];)
• Parameters (function(defaultX = 1), REST PARAMETERS ...remaining)
• Modules (export function/var, import from, export default)
• Classes (class, constructor, extends, new)
• Symbols (getOwnPropertySymbols)
• Transpilation (Babel, Traceur, TypeScript, ScratchJS)

https://kangax.github.io/compat-table/es6/ has the complete list and cross browser support status, and some other concepts are not covered above like

• Proxy
• Promise
• Reflect
• RegExp y and u flags

Z-index 101

Z-index 101
1. z-index only applies to positioned elements (relative, absolute, fixed)
2. Sets the stacking level to the integer and establishes a new stacking context if gives an integer value to z-index property
3. There are two concepts: stacking level and stacking context

There are seven possible levels on each stacking context, which are listed below.
1. Background and borders — of the element forming the stacking context. The lowest level in the stack.
2. Negative Z-Index — the stacking contexts of descendants elements with negative z-index.
3. Block Level Boxes — in-flow non-inline-level non-positioned descendants.
4. Floated Boxes — non-positioned floats
5. Inline Boxes — in-flow inline-level non-positioned descendants.
6. Z-index: 0 — positioned elements. These form new stacking contexts.
7. Positive Z-index — positioned elements. The highest level in the stack.

See the image for better understanding of 7 stacking level

Stacking context can be explained by the following rules.
1. The default stacking context is the root element
2. Establish a new stacking context with the z-index property
3. Child elements cannot be stacked above (or below) the parent element’s stacking level

References
http://bitsofco.de/2015/how-z-index-works
http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892

Html5 Video and Audio

Only MP4, WebM, and Ogg video are supported by the newest HTML5 standard.

1. MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube.
2. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.
3. Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.

Only MP3, WAV, and Ogg audio are supported by the newest HTML5 standard.

1. MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
2. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.
3. Developed by the Xiph.Org Foundation. Supported by HTML5.

For cross browser support, suggest to use MP4 video and MP3 audio.

Html5 style guides

Use Correct Document Type
Use Lower Case Element Names
Close All HTML Elements
Close Empty HTML Elements
Use Lower Case Attribute Names
Quote Attribute Values
No Spaces around Equal Signs
Avoid Long Code Lines
Blank Lines and Indentation
No Omitting <html> and <body>
The <title> element is required in HTML5. Make the title as meaningful as possible.
Use simple syntax for linking style sheets (type attribute is not necessary)
Use Lower Case File Names
Image Attributes (Always use the alt attribute with images. Always define image size.)