OTC medicine

过敏药
Benadryl (学名diphenhydramine, 苯海拉明, ) 第一代抗组织胺(anti-histamine), 因为会作用在中枢神经,所以会嗜睡
新一代的抗组织胺, Claritin (学名loratadine),Zyrtec(学名cetirizine), Allegra (学名fexofenadine)
Walmart有便宜的，包装上多半是直接写学名(就是loratadine/cetirizine)

Diphenhydramine, 苯海拉明，常用于各种普通过敏（酒精、过敏性鼻炎、皮肤过敏），同时也可用于晕动症（常乘车或乘船游玩者必备之一）。
主要用于一般性过敏引起的荨麻疹和皮肤瘙痒症状，还可用于预防晕船、晕车、晕飞机等晕动病。由于服用后的不良症状多为困乏嗜睡，该药品一般归于药房的助眠药物区域。

如果是需要应付繁重的学习任务或工作安排，建议可以选择 Levocetirizine Hydrochoride（左旋西替利嗪）、Desloratadine（地氯雷他定）, 第三代抗组胺

止痛消炎
Ibuprofen (布洛芬)
Acetaminophen (对乙酰氨基酚)
这两种药物都是非类固醇（Nonsteroidal Anti-inflammatory Drug，NSAID）消炎药（不是抗生素Antibiotics），常用于39℃以上的发热（非细菌感染）、止痛（感冒的头痛、生理痛、宿醉后头痛）。

Ibuprofen是一种非类固醇的消炎药，也是世界卫生组织指定的必备药品之一。它主要用于减缓疼痛、炎症或者感冒引起的发热症状，为避免服用后可能会产生胃部不适或者胃灼热，一般推荐与食物同时服用。正常情况下儿童可以服用。推荐品牌：Motrin, Advil

Acetaminophen是非处方药类里一款缓解疼痛和退烧的非消炎药。按照标准剂量服用Acetaminophen是相当安全的，因此，患病婴儿或者儿童都适宜此药。 推荐品牌：Tylenol

另一种相似作用的药物叫做Asprin，阿司匹林，但是更容易诱发胃肠道反应（恶心、腹泻），还可能导致消化道溃疡。

不论是Ibuprofen（布洛芬），还是Acetaminophen、Paracetamol（对乙酰氨基酚），还是Asprin（阿司匹林），本身对胃肠道都会有刺激（只是程度有轻重），消化道溃疡发作时切勿服用。服用时切勿饮酒!

腹泻
Loperaminde，洛哌丁胺，又叫 易蒙停，止泻药，用于控制急性、慢性腹泻的症状。
腹泻，不论急性或慢性，丟失能量和电解质都是常有的事儿，所以不论能否自行判断病因，补充能量和电解质都是首要的。所以家里一定要常备生理盐水（Normal Saline，或自行冲泡糖盐水，以刚好感觉到有味道为宜）补充能量和电解质。

Pepto Bismol（主要成分为：Bismuth Subsalicylate 水杨酸亚铋）所以如果是作为抵抗胃酸过多的情况，Pepto Bismol还是有其道理，但是倘若仅仅是腹泻，似乎有点过了。

与易蒙停有相似用途的有蒙脱石散（Montmorillonite Powder，思密达，服用过量易致便秘）、鞣酸蛋白酵母散（Albumin Tannate and Barm powder，易吸收，但服用过量易致便秘），可以与Loperaminde（洛哌丁胺）联用。

药片和液体形式都适宜儿童服用。推荐品牌：Imodium, Pepto Bismol

感冒
Pseudoephedrine，伪麻黄碱，用于感冒或过敏引起的鼻塞、咳嗽、咳痰不爽。

晕动症
Meclizine，氯苯甲嗪，用于抗晕动症，可参考第2项“与晕动症相关的药物”。推荐品牌：Bonine, Dramamine

胃酸过多
Ranitidine，雷尼替丁，用于缓解胃酸过多所致的胃痛、胃灼热感（烧心）、反酸；用于治疗十二指肠溃疡、反流性食管炎等。Zantac, Priloses, PrevACID, Zegerid
禁忌：8岁以下孩子、孕期妇女、哺乳期妇女禁用。市面上同类用于减轻胃酸或者反胃的药物,还有Prilosec、Prevacid、Zegerid等。其中，Prevacid适合孕期服用，缓解孕妇胃灼热 推荐品牌：Zantac
与之近似用途的药物：Cimetidine, Famotidine, Omeprazole, Zegerid, Lansoprazole, Esomeprazole, Rabeprazole.

皮炎湿疹
Hydrocortisone cream, 氢化可的松乳膏，用于过敏性皮炎、脂溢性皮炎、过敏性湿疹、苔藓样瘙痒症。Cortizone 10, Benadryl cream
它对于治疗由感染或过敏引起的轻微皮肤不适非常有效。患病成人或儿童均宜使用。同类产品还推荐diphenhydramine cream。 推荐品牌：Cortizone

抗菌药膏
Neosporin Ointment，新斯波林软膏，抗菌药膏，可用于各种烧、烫、割、擦伤的局部杀菌.与之近似的药物如：Mupirocin Ointment（莫匹罗星软膏，百多邦）、Erythromycin Ointment（红霉素软膏）。相比较之下，Neosporin（新斯波林）和 Mupirocin（莫匹罗星）都更不容易促使细菌耐药，对于常见的程度较轻的烧、烫、割、擦伤能有很好的抗菌效果.

真菌感染
Clotrimazole，克霉唑，用于真菌感染，常用于皮肤癣病、女性阴道炎（真菌感染）。
与之有近似用途的药物有：Miconazole（咪康唑）、Ketoconazole（酮康唑）、Itraconazole（伊曲康唑）、Fluconazole（氟康唑）、Tebinafine（特比萘芬），其中以Fluconazole（氟康唑）的作用最强，以Terbinafine（特比萘芬）最安全（对肝影响更小）。一般通过局部涂抹来治疗皮肤上的真菌感染，比如癣菌病，尿布疹等。用于治疗女性宫颈感染时，可以选择其栓剂或者膏药形式。 推荐品牌：Lotrimin




Reference link:
http://www.sayweee.com/article/view/04quv
http://www.backchina.com/news/2015/02/15/346577.html
http://www.guokr.com/post/611235/

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

Margin and padding

All inline elements except images lack margins, and will not take margin values.

Given a large enough negative margin applied to a large enough block element, the affected adjacent element can even be overlapped.

Collapsing margins
In cases where two similar and adjacent block elements share margins that are greater than zero, only the larger of the two margins will be applied. Only margins between two adjacent block elements of the same subtype will collapse.

Lists and headings are peculiar among block elements, so their margins will not be collapsed into the margins of the other block elements.

Padding properties behave in exactly the same manner as margin properties, with the following exceptions:

• auto values are functionally useless in references to padding properties.
• Negative padding values are invalid.
• Padding is never collapsed.
• Margin values are not applied to inline elements, but padding values are.

width and height cannot be applied to inline elements except for images, which can be assigned width and height even though they are inline elements.

Inline elements can only contain text or other inline elements.
margin, width, height, and float properties in style sheet rules applicable to these elements (except img and object) are ignored.

Inline elements are: a, em, strong, input, img, span, label, abbr, address, cite

browser navigator language

The navigator object provides information about the browser, as there is no public standard applies to this object, there is quite different implementations for navigator in all major browsers, and so it is the same about browser language exposed in this object.

navigator.language 
returns the language of the browser, but it is not user preference language through browser settings. Different browser has different implementation as of writing, like Chrome always returns browser language, while Firefox returns the first preference language.

navigator.languages
This is new and well supported in Chrome and Firefox, which returns all browser preference languages. The value is an array.
For example, one return value is
Array [ "zh", "pt-BR", "es-AR", "fr", "zh-TW", "en", "pt", "ja", "en-US" ]
which maps to Http header Accept-Language
zh,pt-BR;q=0.9,es-AR;q=0.8,fr;q=0.7,zh-TW;q=0.6,en;q=0.4,pt;q=0.3,ja;q=0.2,en-US;q=0.1

This new property added to navigator object gives javascript developer more power to do i18n for web application. We can quickly know user's preference language for this browser, then show translated version based on the first value appears in languages array.

Internet Explorer has the following three language related properties.
navigator.userLanguageRetrieves the operating system's natural language setting.
 
navigator.systemLanguage
Retrieves the default language used by the operating system.

navigator.browserLanguage
Retrieves the current operating system language.

Note that IE10 or early versions don't provide a navigator.language property like other major browsers. Check MSDN online document for details.
https://msdn.microsoft.com/en-us/library/ms535867(v=vs.85).aspx

No Java runtime present, requesting install.

I recently upgraded my OS X to Yosemite 10.10.5, when I type java from terminal, it prompted me "No Java runtime present, requesting install." message. From the dialog, Click “More Info” to visit the Java Developer Kit download website.”, it took me to Oracle JRE or JDK installation page. I downloaded and installed the jdk-8u60-macosx-x64.dmg and jre-8u60-macosx-x64.dmg, neither worked.

Then I did some google, and found https://support.apple.com/kb/DL1572?locale=en_US support page, which has the download button to get javaforosx.dmg package (Java for OS X 2015-001 installs the legacy Java 6 runtime for OS X 10.11 El Capitan, OS X 10.10 Yosemite, OS X 10.9 Mavericks, OS X 10.8 Mountain Lion, and OS X 10.7 Lion.)

After I installed this compatibility Java runtime (which is version 6), it worked.

Jims-MacBook-Pro:bin jimz$ java -version
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-468-11M4833)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-468, mixed mode)

mainConfigFile in requirejs

Today I got two errors when do requirejs build.

The first error is:
[Error: Error: ENOENT, no such file or directory 'undefinedjquery.js'
    at Error (native)
]

Googled a while and realized I do something like below in main.js while I use mainConfigFile in Gruntfile.js

var options = {}
require.config(options)

The second error is:
[Error: Error: The config in mainConfigFile /Users/jimz/Workshop/boardUI/trunk/moxtra/site/scripts/app/main.js cannot be used because it cannot be evaluated correctly while running in the optimizer. Try only using a config that is also valid JSON, or do not use mainConfigFile and instead copy the config values needed into a build file or command line arguments given to the optimizer.

Source error from parsing: /Users/jimz/Workshop/boardUI/trunk/moxtra/site/scripts/app/main.js: ReferenceError: navigator is not defined

This error is more self-descriptive and it means build environment is different from browser context, so navigator is not defined.

From above 2 errors, we should understand two facts about mainConfigFile option. It is used in build environment instead of browser env, so most JavaScript functions will not work. Let's take further study about this.

Sometimes we want to avoid duplicate path/shim mapping using main.js file as configuration file in requirejs through mainConfigFile setting in requirejs build file. The documentation describes as below to clarify this option.

https://github.com/jrburke/r.js/blob/master/build/example.build.js#L27
//By default all the configuration for optimization happens from the command
//line or by properties in the config file, and configuration that was
//passed to requirejs as part of the app's runtime "main" JS file is *not*
//considered. However, if you prefer the "main" JS file configuration
//to be read for the build so that you do not have to duplicate the values
//in a separate configuration, set this property to the location of that
//main JS file. The first requirejs({}), require({}), requirejs.config({}),
//or require.config({}) call found in that file will be used.
//As of 2.1.10, mainConfigFile can be an array of values, with the last
//value's config take precedence over previous values in the array.
mainConfigFile: '../some/path/to/main.js',

https://github.com/jrburke/r.js/issues/270
It is probably referencing variables that do not work when evaluated outside of a browser context. For instance if you do something like this, it will not work:

requirejs.config({
  baseUrl: location.href
});

Since location is not available in the build environment. Same thing if you use functions to set up part of the config.

You could try leaving out the baseUrl in a first require.config() call in the mainConfigFile, as I believe right now the optimizer will only read the first one. Then do a require.config({ baseUrl: ''}) call after that first config call. So, just two config calls in a row. The config values are merged by requirejs.

The typical configuration in main.js looks like below, first config is static, second config is using dynamic with variables and javascript.

require.config({
  paths: { /*snip*/ },
  shim: { /*snip*/ }
});
require.config({
  baseUrl: $app.configuration.mediaDomain + 'scripts/',
  urlArgs: 'c=' + $app.configuration.version
});

Sass Basic

Variables
Sass uses the $ symbol to make something a variable

Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

Partials (_partials.scss)
A partial is simply a Sass file named with a leading underscore. This is a great way to modularize your CSS and help keep things easier to maintain.

Import
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. Sass partials are used with the @import directive.

Mixins
A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. A good use of a mixin is for vendor prefixes. To create a mixin you use the @mixin directive and give it a name. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to another.

Operators
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %.

Ad Blocking Extensions for Chrome and Firefox

• AdBlock for Chrome 
• AdBlock Plus for Chrome/Firefox
• AdBlock Pro for Chrome
• Adguard for Chrome/Firefox
• AdRemover for Chrome
• Ghostery for Chrome/Firefox
• Simply Block Ads! for Chrome
• SuperBlock AdBlocker for Chrome 
• µ Adblock for Firefox
• µBlock Origin for Chrome/Firefox  

Based on the performance test report from https://www.raymond.cc/blog/10-ad-blocking-extensions-tested-for-best-performance/, they recommend
Firefox:   µBlock origin, µ AdBlock
Chrome:  µBlock Origin, Ghostery and Adguard

Javascript detect Chinese Character

Here is the function to detect Chinese Chracters. However, we need do more research about CJK (Chinese, Japanese, Korean) about the unicode character range.

function isChineseCharacter(str) {

    var re1 = new RegExp("^[\u4E00-\uFA29]*$"); //Chinese character range
    var re2 = new RegExp("^[\uE7C7-\uE7F3]*$"); //non Chinese character range
    str = str.replace(/\s/g, '');

    if (!re1.test(str) || re2.test(str)) {
        console.log("Oops, Please input Chinese character.");
        return false;
    }

    console.log('Chinese character');
    return true;
}

Chrome throws SecurityException when access sessonStorage or localStorage

chrome://settings/content


Under Settings > Privacy > Content settings, change the cookies' settings to "Allow local data to be set" or the second option. Also don't check "Block third-party cookies and site data".


When the option checked, Iframe in Chrome will throw error: Uncaught SecurityError: Failed to read the 'sessionStorage' property from 'Window'.

My understanding is: site data can be sessionStorage or localStorage. Suggest Chrome changes the section title from "Cookies" to "Cookies and site data".:-)


When "Block third-party cookies and site data" is checked, iframe site will be considered third-party.

css floating

THE RULES OF FLOATS

float: left | right | inherit | none

1 - a floated element is “invisible” to its parent
2 - a left/right floated element will try to be as close to the top and left/right of its parent element as possible
3 - previously defined elements will push a floated element down
4 - a previously declared floated element will be given a more preferable position
5 - a position closer to the top of the parent element is preferred to a position closer to the left/right of the parent element
6 - a floated element should not extend outside its parent element
7 - clear/clearfix - the clearing element’s top edge must be below any left floated elements’s bottom edge

Hats off to this blog author for clear explanation and basic review
http://bitsofco.de/2015/how-floating-works/

css specificity

• Elements and pseudo-elements (`a, div , body, :before, :after`) get a score of 1
• Classes and attribute selectors (`.element, [type=”text”]`) get a score of 10
• IDs (`#header`) get a score of 100
• Inline styles get a score of 1000
• `!important` gets a score of NaN (it’s more “specific”/powerful than even inline styles, and can only be overridden by the cascade — writing rules later in the stylesheet)

http://cssspecificity.com/

Baseline for front-end developers

http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
Javascript
Git
Modularity, dependency management, and production builds
In-Browser Developer Tools
The command line
Client-side templating
CSS preprocessors
Testing (Jasmine/Mocha)
Process automation (rake/make/grunt/etc.)
MDN (The fine manual)

http://rmurphey.com/blog/2015/03/23/a-baseline-for-front-end-developers-2015/
Javascript (ES6, BabelJS)
Modules & Build Tools (AMD, requirejs, browserify, systemjs)
Testing (Karma, Intern)
Process Automation (Grunt, Gulp, Yeoman, Broccoli)
Code quality (ESlint, JSCS)
Git
Client-Side Templating
Node (MEAN, express)

Mac OS X get external IP

• curl ifconfig.me
• curl ipecho.net/plain ; echo
• dig +short myip.opendns.com @resolver1.opendns.com

Create an alias is easier

• alias getmyip='dig +short myip.opendns.com @resolver1.opendns.com'

CSS BEM

BEM (Block, Element, Modifier) is a naming convention methodology in CSS. It uess __ (two undercores) for element, and -- (double dashes) for modifier.

/* block component - button */
.btn {}
/* element that depends on the block */
.btn__price {}
/* modifier that changes the state/style of block */
.btn--big {}

In BEM, everything is a class and nothing is nested. That makes CSS specificity very flat and low.

The idea is undoubtedly useful to maintain codes. But personally I don't like -- and __ in class name, probably we can look for some alternatives like using -e- (element) and -m- (modifier). I believe the  consistent naming convention helps understand and maintain css codes.

/* this is a block */
.btn {}
/* price is an element of btn block */
.btn-e-price {}
/* big is a modifier of btn block */
.btn-m-big {}

Javascript coding style

https://github.com/airbnb/javascript

This style from Airbnb is very good except for spacing (I still prefer to set soft tab to 4 spaces for indent). In most editors, I like more spaces for easy code reading.

Here are some excerpts from airbnb

Use Array#push instead of direct assignment to add items to an array.
When you need to copy an array use Array#slice.
To convert an array-like object to an array, use Array#slice
When programmatically building up a string, use Array#join instead of string concatenation.
Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead.
Variable declarations get hoisted to the top of their scope, but their assignment does not.
Anonymous function expressions hoist their variable name, but not the function assignment.
Named function expressions hoist the variable name, not the function name or the function body.
Function declarations hoist their name and the function body.
Use // FIXME: to annotate problems.
Use // TODO: to annotate solutions to problems.
Leave a blank line after blocks and before the next statement
Perform type coercion at the beginning of the statement.
Use parseInt for Numbers and always with a radix for type casting.
Use camelCase when naming objects, functions, and instances.
Use PascalCase when naming constructors or classes.
Use a leading underscore _ when naming private properties.
When saving a reference to this use _this.
Name your functions. This is helpful for stack traces.
Accessor functions for properties are not required.
Assign methods to the prototype object, instead of overwriting the prototype with a new object.
When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value.
Add a method called noConflict() that sets the exported module to the previous version and returns this one.
For DOM queries use Cascading $('.sidebar ul') or parent > child $('.sidebar > ul')
Use find with scoped jQuery object queries.

Ajax to get URL and image metadata

var a = $.get('http://www.msn.com')
Mixed Content: The page at 'https://www.example.com' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.msn.com/'. This request has been blocked; the content must be served over HTTPS.

Limitation 1: https cannot load http (tested on Chrome)

var a = $.get('http://www.msn.com')
var div = document.createElement('div');
div.innerHTML = a.responseText
$(div).find('title')
$(div).find('meta[name="description"]').attr("content")


$.ajax('https://en.wikipedia.org/')
XMLHttpRequest cannot load https://en.wikipedia.org/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.
Limitation 2: Cross origin limit unless target domain supports CORS.

var result = $.ajax({
type: 'HEAD',
async: true,
url: 'https://www.photo.com/images/github.jpg'
}).done(function(data, status, xhr){console.log(status)});

XMLHttpRequest cannot load https://www.photo.com/images/github.jpg. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.example.com' is therefore not allowed access.

Same origin, HTTP HEAD to get metadata, or target domain supports CORS.

var result = $.ajax({
type: 'HEAD',
async: true,
url: 'https://www.example.com/images/test/github.jpg'
}).done(function(data, status, xhr){console.log(status)});

result.getAllResponseHeaders()
"Date: Thu, 09 Jul 2015 00:59:08 GMT
Last-Modified: Mon, 03 Nov 2014 06:06:16 GMT
Server: nginx/1.0.15
Accept-Ranges: bytes
Content-Length: 6804
Content-Type: image/jpeg

result.getResponseHeader('Content-Type')
"image/jpeg"

OCR links

Today ycombination has a discussion about OCR open sources. Here are some links and product names for future reference.

ocrad.js
Tesseract with OpenCV

Torch or Caffe
https://github.com/nyanp/tiny-cnn

https://ocr.a9t9.com/

Abbyy
Omnipage
Finereader engine Abbyy for Linux looks fine
http://ocrsdk.com/plans-and-pricing/

[0] http://docs.opencv.org/3.0-beta/modules/text/doc/erfilter.ht...
[1] https://github.com/Itseez/opencv_contrib/blob/master/modules...
[2] https://github.com/Itseez/opencv_contrib/blob/master/modules...
[3] http://cmp.felk.cvut.cz/~neumalu1/neumann-cvpr2012.pdf

dlib's face detection is the best of the open-source libs, in my experience.
http://blog.dlib.net/2014/02/dlib-186-released-make-your-own...

https://github.com/creatale/node-fv
The accuracy of GOCR is very high and it doesn't require any learning.
http://manpages.ubuntu.com/manpages/dapper/man1/gocr.1.html
https://github.com/tmbdev/ocropy

https://github.com/openalpr/openalpr

http://sourceforge.net/projects/tirg/
http://libccv.org/doc/doc-swt/
https://github.com/tesseract-ocr/tesseract
https://github.com/BVLC/caffe/tree/dev/examples/mnist
https://github.com/pannous/caffe-ocr
https://wiki.apache.org/tika/TikaOCR

bash: express: command not found

After I installed express using npm install express -g

I tried to run to check the installed version
express -V

But I got
bash: express: command not found

http://expressjs.com/guide/migrating-4.html#app-gen
explains starting express v4.0, user needs to install express-generator to get express command line works well.
npm install -g express-generator

upgrade nodejs

There is a very easy way of managing your node version, using the Node binary manager module ‘n’. Another one is 'nvm' node versioning manager.

sudo npm cache clean -f  [this one doesn't work well on my Mac OSX]
sudo npm install -g n [install node binary manager]
sudo n stable [install stable version, or specify version # here like 0.10.28]

With regard to installing node, I prefer to use the homebrew package manager to install node
brew install node

node -v [check node version]
n [to list out all current installed versions, and select node version]

Reference
http://davidwalsh.name/upgrade-nodejs

Javascript code smells

Today I read about javascript code smells from http://elijahmanor.com/talks/js-smells (twitter @elijahmanor), it is really good, so summarize here.


1. Too complex
jshint maxstatements, maxdepth, maxcomplexity

jshint, eslint, jscomplexity, escomplex, jasmine

2. Copy & Paste
jsinspect, JSCPD

3. Use switch statement
Violates open/closed principle (OCP) - open for extension but closed for modification
Use Strategy design pattern

4. Magic strings
Object types, const, symbols
eslint-plugin-smells
eslint-disable

5. This abyss
that, self, me etc
Use alternatives: bind, 2nd parameter of forEach, ES6, functional programming

6. String Concat
Template strings, handlerbar, ES6
no-complex-string-concat

7. Inappropriate intimacy (tight coupled)
Dependency injection, or message broker (pub/sub)

eslint-plugin-backbone
eslint-plugin-react

http://bit.ly/js-smells

Chrome image onerror caused high CPU

We use lazy loading and onerror to handle image loading. However, the onerror fallback for a huge amount of images in DOM will cause Chrome high CPU. After pinpoint this logic, we suspect it is a Chrome rendering bug because same code works well on Firefox. Our solution is to remove the onerror fallback for list view with a lot of images.

Clean up disk spaces on Mac OSX

Except for clear system caches and temp folders, usually iPhoto Library.photolibrary takes lots of spaces. When you connect your iPhone/iPad to Macbook, it will import movies and photos through iPhoto.

I usually delete "Original Files" after creating album, or backing up to my USB drive. However, there are two folders need to clean up too except ~/Pictures/iPhoto Library.photolibrary/Masters

These two folders are:
~/Pictures/iPhoto Library.photolibrary/Previews
~/Pictures/iPhoto Library.photolibrary/Thumbnails

They are mapping to /Masters folder when import photos. If Master was deleted, we should also delete them. If you use iPhoto to delete, it should delete the Previews/Thumbnails too. But if you open Finder to delete Master files, remember to delete Previews/Thumbnails.

Facebook SDK has js error "Error: element not specified"

It might be Facebook SDK bug on Chrome, because same code works well on Firefox. From stackoverflow, others suggest to try display: popup instead of default 'iframe' value for feed dialog. 

http://stackoverflow.com/questions/15438961/fb-ui-returns-error-element-not-specified

The pseudo code looks like below

FB.ui({
    method : 'feed',    
    //display: 'popup',
    link : {link},
    caption : {caption},
    description : {description},
}, function(response) {
        if (response && response.post_id) {
        } else {
        }
    }
}); 

Chrome extension native messaging

https://developer.chrome.com/extensions/nativeMessaging

Recently we built an extension for messaging between web page and native host, and the architecture is as below diagram. Simply put, extension is a bridge which handles two ports to connect web page and native host.

CSS pseudo-class

A pseudo-class is used to define a special state of an element.

The :lang pseudo-class allows you to define special rules for different languages.
The :first-child pseudo-class matches a specified element that is the first child of another element.   

CSS Pseudo Elements like (::after, ::before, ::first-letter, ::first-line etc)
CSS Pseudo Classes like (:active, :enabled, :required, :valid, :focus etc)

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
a:active MUST come after a:hover in the CSS definition in order to be effective!!
Pseudo-class names are not case-sensitive.

Chrome Extension

Installed folder:
Mac OS X:
~/Library/Application Support/Google/Chrome/Default

Windows:
C:\Users[username]\AppData\Local\Google\Chrome\User Data\Default\Extensions

US Tax return

Key Dates:
April 15th (Deadline unless it falls on weekend/holiday)
June 15th (for foreign workers outside of USA)
October 15th (for those filed Extension)

Popular software:
TurboTaxH&R Block
TaxACT

Less known software:
TaxSlayer
eSmart
FreeTaxUSA

California National Parks

Cabrillo National Monument
Death Valley National Park
Joshua Tree National Park
Lassen Volcanic National Park
Lava Beds National Monument
Muir Woods National Monument
Pinnacles National Park
San Francisco Maritime National Historical Park
Sequoia & Kings Canyon National Parks
Whiskeytown National Recreation Area
Yosemite National Park

Set Tomcat encoding to UTF-8

By default, Tomcat uses ISO-8859-1 encoding, but there is a way to completely set tomcat using UTF-8.

-Dfile.encoding=UTF-8
Set JVM default encoding to UTF-8. Charset.defaultCharset() will reflect changes to the file.encoding property.

set JAVA_OPTS=-Djavax.servlet.request.encoding=UTF-8 -Dfile.encoding=UTF-8
or Use a character encoding filter with the default encoding set to UTF-8, for HTTP POST

Set URIEncoding="UTF-8" on your <Connector> in server.xml.
<Connector port="8080" URIEncoding="UTF-8"/> for HTTP GET

For returned response, set
response.setContentType("text/html; charset=UTF-8");
response.setCharacterEncoding("UTF-8");


http://wiki.apache.org/tomcat/FAQ/CharacterEncoding#Q8
http://stackoverflow.com/questions/138948/how-to-get-utf-8-working-in-java-webapps

Upgrade to TurboTax Premier

This year I installed TurboTax Deluxe, but realized it didn't support Stock/ESPP investment during my filing. I had to get a new Premier copy. However, new download Premier copy always show TurboTax Deluxe after open the premier application.

After search and talking to intuit technical support, found TurboTax cached files impacted different versions. It is an obvious bug which Intuit doesn't cover, and it also implies they use configuration or temp files to differentiate Deluxe or Premier edition. If they implement in this way, we might be able to get a free upgrade from Deluxe to Premier or even Business and Home edition. :-)

I did the following which resolved the issue
1. Delete previous installed Deluxe application
2. Delete ~/Library/Application Support/TurboTax 2014 folder
3. Delete ~/Library/Caches/TurboTax 2014 folder
4. Reboot my macbook
5. Reinstall the premier application

Above also implies Mac OSX un-installation actually includes application itself and system caches.

Shell script error: bad interpreter: No such file or directory

It is highly likely that you created this file with a windows editor, which will place a <cr><lf> at the end of each line. This is the standard under dos / windows. However, under Unix / linux, the standard is to just put a <lf> at the end of the line.

Linux is now looking for a file called /bin/bash<cr> to interpret the file, where <cr> is a carriage return character, which is a valid file character under linux. Such a file doesn't exist. Hence the error.

http://stackoverflow.com/questions/2841593/bash-script-bad-interpreter

Sublime Text 2 -> View -> Line Endings -> Unix

Trip parking tips

1. Big Sur - Calla Lily
加州1号公路Big Sur附近有个州立公园 - Garrapata State Park。那里的一条通海的沟中长有很多野生马蹄莲 (Calla Lily)，那个沟不在公园内，所以免费。

Address：26374 Cabrillo Hwy‎， Carmel-by-the-Sea, CA 93923
GPS：36.423139,-121.912419
Garmin GPS找不到上面的地址，只好用google map 定位GPS

Parking: 停在一号公路靠海的一边(免费)

2. California Academy of Sciences
加州科学馆在金门公园内，里面有好几个主题，包括天文馆，水族馆，热带雨林，还有新建的地震体验区。 旧金山居民每个月好像有免费入馆，非旧金山居民每个季度有一天免费入馆。

Address: 55 Music Concourse Dr., Golden Gate Park, San Francisco, CA 94118

Parking: 周末人很多，但路边多转转可以找到免费停车位，而且没有平时最多4小时的限制。不是特别event的情况下没有必要付费停车库。

3. Natural Bridges State Beach
Santa Cruz这个beach是我们最常去的海滩了，因为很近，而且环境不错。每年11月份后面的蝴蝶谷会有蝴蝶。以前有3个桥在海里，目前就一个了，远看有点桂林山水的那个大象图。

Address: 2531 W Cliff Dr, Santa Cruz, CA 95060

Parking: 进入Beach需要收费，不过里面有BBQ和picnic的地方。不进入门的靠beach的那条路的自行车道上可以免费停车，人多走些路还是可以找到不少路边车位。

4. Happy Hollow Park & Zoo
比较适合小小孩，从名字看有玩的也有动物可以看。

Address: 1300 Senter Rd, San Jose, CA 95112

Parking: 在downtown找免费停车位比较困难，不过旁边的日本花园那边的停车场每天$6, 比他们那边的$10便宜不少。日本花园对面的路边有些停车位，不过周末很难停到。回头找找google earth看看附近有没有其他街道可以停。

5. Yosemite National Park
Parking: 进入公园$30, 有效期一个礼拜。Valley里面主要有2个停车场，一个是在Curry Village那边，一个是在Visitor Center那边，然后可以坐valley的shuttle去不同景点，包括Yosemite fall, Sentinel Bridge 等。不是旺季的话，可以自己开车，每个景点有一些路边停车点。

6. Golden Gate Bridge
South bound 是在101没有上桥的地方拐进去，里面有一个很小的停车场，每小时$1，限2小时，但很难找到停车位，运气好的话等几分钟可以等到。免费的估计要停远点，然后hike到桥上。

7. Lombard Street (九曲花街)
把GPS设置到 1070 Lombard Street, San Francisco, CA94109
附近有免费2小时街边停车

8. Pier 39
附近停车都比较贵，但www.pier39.com上可以申请Fun Pack, 里面一般会有免费2小时的停车coupon，但要在39号码头的对面多层停车场停车。 还有一种就是停远点，1mile左右的street parking, 然后走过去。

9. Palace of Fine Arts
那边是免费停车的。前后都有，位置比较充足。

10. Napa valley
Napa的酒庄都是免费停车的，今年Memorial Day (2015)去的3个值得推荐
4089 Silverado Trail
4240 Silverado Trail
1240 Duhig Rd

Upgrade to facebook v2.0 Javascript SDK

Facebook asks every app developer to upgrade to v2.0+ version before April 30, 2015.

Fortunately Facebook has well written document to explain the upgrade and new SDK

https://developers.facebook.com/docs/apps/upgrading
https://developers.facebook.com/docs/javascript/quickstart/v2.2

One main change is about Login API which needs review process if ask for non-default permissions. And the whole upgrade change limits to:
1. Point to new sdk endpoint which supports locale and versioning
https://connect.facebook.net/en_US/sdk.js
2. When init SDK, pass in version, for example

                       FB.init({
                            appId: app.config.global.fb_app_id,
                            status: true,
                            cookie: true,
                            // Disabling XFBML Parsing if we don't use social plugins (but we use feed dialog)
                            xfbml: true,
                            // frictionlessRequests: true,
                            version: 'v2.2'
                        });

We also use feed dialog, but Facebook suggests to change to new Share Dialog, will consider the migration in future release.
https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2

WebStorage fallback

http://caniuse.com/#search=webstorage shows WebStorage is well supported across browsers, but modern browsers support private browsing mode and the implementation is quite different with regarding to WebStorage support. For example, Chrome is doing a very smart logic - support localStorage and sessionStorage, but stores the data in a temp folder. On the other hand, Safari is doing a dumb logic - disable storage APIs in private browsing mode.

Nowadays Web developers don't need to worry about IE6 any more, but need to think of private browsing experience. As to writing, most browsers have private browsing mode though their names are slightly different.

IE: InPrivate browsing
Firefox: New Private window
Safari: New Private window
Chrome: Incognito window

To better support private browsing mode, we need fallback (just like we did for old browsers or new ES6 features). Googled for some time and found cookie is one possible solution to fallback Storage APIs.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
https://gist.github.com/remy/350433
http://stackoverflow.com/questions/4692245/html5-local-storage-fallback-solutions
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

It works in some cases, but cookie has issues:
1. cookie value has size limit
2. cookie is shared across tab/windows
3. cookie has http overhead
4. cookie has security issues
5. cookie value is string instead of JSON

Mac OSX mouse click no response in login screen

Suddenly My macbook air doesn't respond to mouse click on login screen though mouse move works. I didn't meet this issue before, so did some google and found this nice blog.
http://www.justanswer.com/mac-computers/2w49b-mac-frozen-login-screen-mouse-cursor-works-no-response.html

It provides 3 methods, and I tried all of three, but only worked once. Next time, I open Macbook Air, it stops working again. I have to hit shutdown and restart again using command line, and fortunately I saw a bluetooth device connected (something like Apple magic trackpad). After see that image, I realized that the external Magic trackpad took over the mouse click events from built-in trackpad. I went to garage and found the magic trackpad, then use it to login OSX and disconnected the bluetooth trackpad through System -> Preference -> TrackPad.

Reset PRAM and NVRAM
    Shut down your iMac
    Locate thfollowing keys on the keyboard: Command, Option, P, and R.
    Turn on the computer.
    Press and hold the Command-Option-P-R keys. You must press this key combination before the gray screen appears and before the chime sound.
    Hold the keys down until the computer restarts and you hear the startup sound for three times.
    Release the keys.

Restart in SafeMode
Make sure that the computer is shut down. Press the power button. Immediately after you hear the startup tone, press and hold the Shift key. Release the Shift key when you see the gray Apple and progress indicator. Let the Mac bootup...

Run Disk Utility in Single User Mode :
Turn it off. Turn it back on and this time hold down the Command (Apple) key and the S keys at the same time. Then type the following command...

/sbin/fsck -fy (note the space between fsck and -fy)

If you can't run /sbin/fsk - fy then type only fsk - fy
Hit return and the disk utility should run and let it finish. When it finishes and there is no error, then type reboot and hit return. Let the Mac boot up and see if it is still giving you problems.

Read more: http://www.justanswer.com/mac-computers/2w49b-mac-frozen-login-screen-mouse-cursor-works-no-response.html#ixzz3TGuGYDJO

Built in Apache server in Mac OS X

Mac OS X has built-in Apache Web server which can be very useful to quickly test web app.

The Apache configuration file is:
/etc/apache2/httpd.conf
Listen 80
DocumentRoot "/Library/WebServer/Documents"
ErrorLog "/private/var/log/apache2/error_log"

Commands to start/stop Apache server
sudo apachectl start
sudo apachectl stop
sudo apachectl restart

Copy some website for testing
sudo cp -r example-multipage-shim-master/www-built/ /Library/WebServer/Documents/test

Then access testing page using localhost and port 80
http://localhost/test/page1.html

IE user agent

"Windows NT 6.2" indicates the browser is on a computer running Windows 8, whereas "Windows NT 6.1" indicates the computer is running Windows 7.

32-bit Internet Explorer 10 on 32-bit Windows 8:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

32-bit Internet Explorer 10 on 64-bit Windows 8:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)

64-bit Internet Explorer 10 on 64-bit Windows 8:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)

Internet Explorer 10 on Windows RT:
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0)

If this token is present at the end of the UA string, the computer has touch capability, and is running Windows 8 (or later)
Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Touch)

In Javascript, we use below to detect it is 64-bit IE on 64-bit windows. It should be an acceptable solution.
navigator.userAgent.indexOf("Win64") != -1 && navigator.userAgent.indexOf("x64") != -1

Btw, IE11 doesn't use MSIE anymore, we need look for Trident/7.0 rv11 from user agent. With regarding to complicate user agent string detect logic, it might be better to detect using browser supported features.

requirejs throws cannot find module [component/selector/abc] error

The file was there, but requirejs kept saying cannot find module
then I did a http request test to directly point to the javascript file and found it was 403 error permission. It turned out requirejs cannot access the file due to file permission issue.

The solution is to chmod or (On OS X) right click the file and 'Get Info' to change Everyone to READ in "Sharing and permissions" section.

CSS colors

http://sixrevisions.com/css/css-colors/  is an awesome post to explain the basics of CSS colors.

There are six ways to declare CSS colors:

• Hexadecimal notation
• RGB
• RGBA
• HSL (Hue, Saturation and Lightness)
• HSLA
• Color keywords

transparent Color Keyword
The transparent color keyword is simply a way to say that the color has 0% opacity.

currentColor Color Keyword
The currentColor color keyword is a convenience keyword that just means the color being declared is equal to the CSS color property value.

As we write SASS for CSS, I think it is best practice to use variable and hex color definition.

word-wrap vs word-break

word-wrap vs word-break

word-wrap property
word-wrap: normal | break-word
Specifies whether to break words when the content exceeds the boundaries of its container.

1. will wrap long words onto the next line.
2. adjusts different words so that they do not break in the middle.

The spec has changed again with regards to word-wrap. It’s now considered still valid, but is an “alternate name” for overflow-wrap. Browsers are required to continue to support it, so it seems pointless to use overflow-wrap.

word-break property
word-break: normal | break-all | keep-all
Specifies line-breaking behavior within words, particularly where multiple languages appear in the object.

Irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word). It is frequently used for CJK characters.

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

Links for B1/B2 visa

http://www.ustraveldocs.com/cn_zh/cn-niv-visatypeinfo.asp

http://www.ustraveldocs.com/cn_zh/cn-niv-ds160info.asp

https://ceac.state.gov/genniv/default.aspx

http://www.ustraveldocs.com/cn_zh/cn-niv-typeb1b2.asp

http://chinese.usembassy-china.org.cn/niv_howtoapply.htm

http://www.jiansnet.com/topic/24696/Parent-B2-Visa-Question-Answer

http://news.tiandaoedu.com/visa/21694.html