Limit download speed on Mac OSX

1. Use command line:

Create a pipe "1" limited to 500KBytes/s via
sudo ipfw pipe 1 config bw 500KByte/s
If you want to set higher traffic barriers, you can use MByte/s

Guide all network traffic of port 80 through pipe "1" using

sudo ipfw add 1 pipe 1 src-port 80

When you don't need the pipe anymore, remove it from the port using
sudo ipfw delete 1

2. Use GUI tool - Entonnoir

Entonnoir is a free tool which would help you to do the same that above manual method did for you. Once you download and install this free Mac app, things are completely simplified. - See more at: http://pcsplace.com/apple/how-to-limit-download-and-upload-speed-on-mac/#sthash.O7GAZo9q.dpuf

Reference:
http://apple.stackexchange.com/questions/44130/how-can-i-limit-my-download-bandwidth
http://pcsplace.com/apple/how-to-limit-download-and-upload-speed-on-mac/

3. Example:
sudo ipfw pipe 1 config bw 5KByte/s
sudo ipfw add 1 pipe 1 src-port 80
sudo ipfw add 2 pipe 1 src-port 433
sudo ipfw delete 1

requirejs throws TypeError

Meet this issue today when using requirejs optimizer r.js:

Tracing dependencies for: myapp
[Error: Error: Parse error using esprima for file: /Users/jimz/Workshop/test.js
TypeError: Cannot read property 'type' of null
    at /Users/jimz/Workshop/test/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23452:47
]

After jshint, found in define([xxxx]) module, there is a duplicate comma something like
define(['a', 'b', , 'c'], function(a1, b1, c1) {})

Revisit requirejs 2.1.x

1. baseUrl
The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page

baseUrl can be set manually via the RequireJS config. If there is no explicit config and data-main is not used, then the default baseUrl is the directory that contains the HTML page running RequireJS.

2. path
paths config is relative to the baseUrl, and never includes a ".js" extension since the paths config could be for a directory.

if you use a tool like volo, it will stamp the package.json with the version information but keep the file on disk as "jquery.js".

3. module ID
If a module ID has one of the following characteristics, the ID will not be passed through the "baseUrl + paths" configuration, and just be treated like a regular URL that is relative to the document:

Ends in ".js".
Starts with a "/".
Contains an URL protocol, like "http:" or "https:".

that is, indicated by a dependency string starting with a slash, has a protocol, or ends in .js

For require("./relative/name") calls that can happen inside a define() function call, be sure to ask for "require" as a dependency, so that the relative name is resolved correctly:

4. shim
use the shim config for some traditional/legacy "browser globals" scripts that do not express their dependencies via define()

For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies. e.g. 'jquery.scroll': ['jquery']

You should use the mainConfigFile build option to specify the file where to find the shim config. The other option is to duplicate the shim config in the build profile.

If you are using uglifyjs to minify the code, do not set the uglify option toplevel to true.

5. data-main
use a data-main script to set configuration options and then load the first application module.
If you want to to do require() calls in the HTML page, then it is best to not use data-main. data-main is only intended for use when the page just has one main entry point, the data-main script.

Be aware that the data-main script is loaded asynchronously.

6. require
module dependency injection via require() call

Normally you should not need to use require() to fetch a module, but instead rely on the module being passed in to the function as an argument.

7. define
defines a well-scoped object that avoids polluting the global namespace. since global variables are not created, it makes it possible to load multiple versions of a module in a page.

There should only be one module definition per file on disk. The modules can be grouped into optimized bundles by the optimization tool.

Types of module through define() call
a. Simple Name/Value Pairs
b. Definition Functions
c. Definition Functions with Dependencies
    The function will be called to define the module once all dependencies have loaded. The function should return an object that defines the module. Also, the order of the function arguments should match the order of the dependencies.
d. Define a Module as a Function
    Modules do not have to return objects. Any valid return value from a function is allowed.
e. Define a Module with a Name
    It is normally best to avoid coding in a name for the module and just let the optimization tool burn in the module names.

8. Config
data-main entry point js file,
you can define the config object as the global variable require before require.js is loaded

There is a common need to pass configuration info to a module. Modules can then read that info by asking for the special dependency module ID called "module" and calling module.config().

paths config
path mapping could be for a directory

paths config fallbacks
paths fallbacks only work for exact module ID matches. This is different from normal paths config which can apply to any part of a module ID prefix segment.

map config
This feature only works well for scripts that are real AMD modules that call define() and register as anonymous modules. Also, only use absolute module IDs for map config. Relative IDs (like '../some/thing') do not work.

bundle config
allows configuring multiple module IDs to be found in another script

Supported configuration options:
    baseUrl: the root path to use for all module lookups.
    paths: path mappings for module names not found directly under baseUrl.
    bundles: Introduced in RequireJS 2.1.10: allows configuring multiple module IDs to be found in another script.

Bootstrap progressbar caused high CPU

We met this issue twice from different engineers. Usually front-end performance is mainly about javascript esp. loop to do IO operations (like network, localstorage etc), however, rendering is also a big impact like css animation, UI reflow.

The solution to progressbar is to remove it from DOM after done. Don't keep it in DOM.
Avoid UI reflow by using createDocumentFragment

Email address

Email address has two parts, namely local-part and domain part, usually in  local-part "@" domain format.

The local-part of the e-mail address may use any of these ASCII characters:

• Uppercase and lowercase English letters (a-z, A-Z)
• Digits 0 to 9
• Characters ! # $ % & ' * + - / = ? ^ _ ` { | } ~
• Character . (dot, period, full stop) provided that it is not the first or last character, and provided also that it does not appear two or more times consecutively.

The domain part is defined as follows:

The Internet standards (Request for Comments) for protocols mandate that component hostname labels may contain only the ASCII letters a through z (in a case-insensitive manner), the digits 0 through 9, and the hyphen (-). The original specification of hostnames in RFC 952, mandated that labels could not start with a digit or with a hyphen, and must not end with a hyphen. However, a subsequent specification (RFC 1123) permitted hostname labels to start with digits. No other symbols, punctuation characters, or blank spaces are permitted.

The format of email addresses is local-part@domain where the local-part may be up to 64 characters long and the domain name may have a maximum of 253 characters – but the maximum of 256-character length of a forward or reverse path restricts the entire email address to be no more than 254 characters long.

One Javascript Example:
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

Backbone validation Example:
email: /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i,

For more info, check out the following links:
http://en.wikipedia.org/wiki/Email_address
http://stackoverflow.com/questions/2049502/what-characters-are-allowed-in-email-address

BaaS (Backend-as-a-Service)

Parse was acquired by Facebook 2013, which means BaaS is a hot concept. Using a Backend-as-a-Service (BaaS) can reduce development cost and time-to-market. It’s a simple way of getting a highly scalable backend solution without significant upfront investment.

There are a bunch of players in this field with similar offerings and pricing. When you select a vendor, pricing, performance, developer-friendly etc factors might need your considerations. I have not tried them out yet, but list here for future reference.

ACS (Appcelerator's)
Applicasa
Buddy
CloudMine
Deployd
mobDB
Parse
sencha.io
Helios
backendless.com

Check out http://en.wikipedia.org/wiki/Mobile_Backend_as_a_service for more info.

encodeURI vs encodeURIComponent

Javascript provides some very similar APIs (functions) like
encodeURI vs encodeURIComponent
decodeURI vs decodeURIComponent
substr vs substring

Here are some testings to help understand the difference

encodeURI('http://www.google.com')
"http://www.google.com"
encodeURIComponent('http://www.google.com')
"http%3A%2F%2Fwww.google.com"

encodeURIComponent(";,/?:@&=+$#-_.!~*'()")
"%3B%2C%2F%3F%3A%40%26%3D%2B%24%23-_.!~*'()"
encodeURI(";,/?:@&=+$#-_.!~*'()")
";,/?:@&=+$#-_.!~*'()"

encodeURI("中文")
"%E4%B8%AD%E6%96%87"
encodeURIComponent("中文")
"%E4%B8%AD%E6%96%87"

The substring() method returns a subset of a string between one index and another, or through the end of the string.
str.substring(indexA[, indexB])

The substr() method returns the characters in a string beginning at the specified location through the specified number of characters, or the end of the string.
str.substr(start[, length])

Video

A video file usually contains video track, audio tracks. Individual track can have meta data (video aspect ratio, audio language etc), and containers can also have metadata (video title, poster, episode numbers etc)

Video container formats define how to store things, not what kind of data is stored. There are lost of video container formats, some most popular formats are MPEG-4 (.mp4, m4v), Ogg (.ogv, Ogg Theora), WebM (.webm), Flash Video (.flv), Audio Video Interleave (.avi).

When we watch a video, video player (e.g. VLC) usually does several things at once:

1. Interpret the container format to find out video and audio tracks, and how they are stored within the file for decoding process
2. Decode the video stream and display a series of images (frames) on the screen
3. Decode the audio stream and send the sound to speakers

Video codec (a combination of words coder and decoder) is an algorithm to encode video stream. Video player decodes the video stream according to video codec. There are lossy and lossless video codecs. There are many video codecs (like video containers), and most popular are H.264 (patent encumbered), Theora (royalty-free and not patent-encumbered), and VP8 (royalty-free not encumbered by any patents).

As to audio codecs, MP3 (patent encumbered), AAC (Advanced Audio Coding, patent-encumbered) and Vorbis (not patent encumbered) are most popular for Web audio.

Tools:
Firefogg for encoding Ogg video, ffmpeg2theora for batch encoding Ogg videos
HandBrake for encoding H.264 video
ffmpeg for encoding WebM video
LAME project is the free encoder for MP3
FAAC library is the open source (mencoder and ffmpeg)
OggConvert, ffmpege, aoTuV and libvorbis (QuickTime component on Mac, DirectShow filter on Windows)

CSS performance tools

https://speakerdeck.com/addyosmani/css-performance-tooling


https://github.com/JohnCashmore/grunt-cssshrink
CSS minifier

https://github.com/addyosmani/grunt-uncss
A grunt task for removing unused CSS from your projects with UnCSS. Works across multiple files and supports dynamically injected CSS via PhantomJS.

https://github.com/katiefenn/parker
Parker is a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity.

http://www.stylestats.org/
StyleStats is a Node.js library to collect CSS statistics!

Upgrade grunt

sudo npm uninstall -g grunt-cli
sudo npm install -g grunt-cli@0.1.13

update package.json for grunt version, then execute
sudo npm update grunt

Background check online

https://www.instantcheckmate.com (monthly fee $22.99)

Maintainable Javascript

Key takeaways from Maintainable Javascript.

1. Borrow the book is better than buy the book. I finally finished reading this book in past 3 weeks' limited spare time.
2. Programs are meant to be read by humans and only incidentally for computers to execute. - Donald Knuth
3. Need consistent Javascript code styles for Basic formatting, comments, statements and expressions, variables, functions and operators.
4. Need good programming practices
1. Loose coupling of UI layers (MVC)
2. Avoid globals
3. Throw your own errors (throw new Error('name is required'))
4. Don't modify objects you don't own
5. Documentation - JSDoc tooltik
6. Automated Testing - Jasmine, PhantomJS, Selenium
7. Continous Integration (CI system) -  Jenkins, Continuum, BuildBot, Cruise Control, Gradle

Chrome browser side 404 and 408 error

1. When network disconnected, Chrome browser might throw 404 error itself after detecting network disconnected.
2. Chrome browser might get 408 timeout error (like from HAProxy server) due to its pre-connect implementation for client side performance.
http://blog.haproxy.com/2014/05/26/haproxy-and-http-errors-408-in-chrome/

Learning AngularJS

http://www.ng-newsletter.com/posts/how-to-learn-angular.html
http://modernweb.com/2014/04/21/mean-stack-a-quick-start-guide

JSONP and jQuery

JSONP (JSON with Padding) provides a method to request data from a server with different domain. Typical web browser prohibit cross domain request due to same origin policy. We can do it without jQuery, but jQuery provides the interface to wrap the underneath details.

There are 3 settings in $.ajax about JSONP
1. dataType: 'jsonp',
Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback. Disables caching by appending a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option is set to true.

2. jsonp:
Use this setting to change the default callback name ({jsonp}=xxx)

3. jsonpCallback:
Use this setting to define the callback function name (callback={jsonpCallback})

Sample codes:
$.getJSON('http://example.com/get?jsonp=?', function(data) {
  $("#jsondata").text(JSON.stringify(data));
  console.log(data);
});

$.ajax({
    dataType: 'jsonp',
    url: "http://example.com/get",
    success: function (data) {
        // do stuff with data
    }
});

The code to inject information into the DOM still occurs, as does the creation of a callback function. What jQuery does is it adds script tag to the DOM only until the callback (success function) is done executing. The tag is added to the header. It also adds a function to the window object which is called on return. The URL jQuery constructs looks like http://example.com/get?callback=jsonp123456789.

Security
1. We should avoid serving any sensitive data like password, credit card etc personal data from server side jsonp code.
2. We should also avoid any update logic in jsonp server side code.

Reference
http://api.jquery.com/jQuery.ajax/   
http://infoheap.com/jquery-jsonp-cross-domain-ajax/
http://scottseely.com/2010/09/04/how-jsonp-works-and-some-bits-about-implementing-it-in-wcf/

window and document

Information from w3cschool.com
Window object represents an open window in a browser. each frame (iframe) has one additional window. It has properties and methods. Usually the global scope in javascript means this window object.

When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes: (element nodes, text nodes, attribute nodes, and comment nodes). Document object inherits all properties and methods from the Node object, so many properties and methods make no sense on document object.

The contentWindow property returns the Window object generated by an iframe element.

contentDocument = contentWindow.document
From the DOM iframe element, scripts can get access to the window object of the included HTML page via the contentWindow property. The contentDocument property refers to the document element inside the iframe (this is equivalent to contentWindow.document), but is not supported by Internet Explorer versions before IE8.

DocumentFragment
The createDocumentFragment() method is usefull when you want to extract parts of your document, change, add, or delete, some of the content, and insert it back to your document.

Information from stackoverflow.com discussion
Window is the main JavaScript object root, also can be treated as the root of the document object model. You can access it as window in most of the cases (in the browser);

window.screen is a small information object about physical screen dimension.

window.document or just document is the main object of the visible document object model/DOM.

First look at webfont

A webfont is a specially tuned font for use on websites using the CSS @font-face declaration. A webfont comes in four flavors. A TrueType (TTF) file, a WOFF (Web Open Font Format) file, an EOT (Embedded OpenType) file and an SVG (Scalable Vector Graphics) file. Each one is designed to target different browsers. You will need all four when using webfonts to build a website.

Web designers and programmers use @font-face CSS declaration that web  to specify a font. This is well supported across 5 main browsers (IE, Chrome, Firefox, Safari, Opera).

Web fonts are fonts that have been licensed specifically for web-use. Besides Google Webfonts, there are other font sites that offer free (and legal) fonts for use on the web like Font Squirrel (free), and Typekit (mostly a paid service).

For IE 6–8 you can only use TTF fonts wrapped up as EOT or EOT “Lite” (uncompressed). For Firefox, Opera, Chrome, and Safari, you can deliver TTF or OTF files either “raw” or, in some cases, wrapped up as WOFF files or as data URI’s inside a stylesheet. SVG will surely be a major font format going forward but its main virtue today is support in Mobile Safari for the iPhone and iPad.

Check out the details from below links:
http://alistapart.com/article/fonts-at-the-crossing
http://www.fontsquirrel.com/tools/webfont-generator
https://www.google.com/fonts
http://stackoverflow.com/questions/15501319/how-to-transform-google-web-fonts-to-a-combined-css

Markdown

Markdown is a plain text formatting syntax designed so that it can optionally be converted to HTML using a tool by the same name. Markdown is popularly used as format for readme files.
- from wikipedia

Markdown syntax is very straightforward using few characters (# = - * `) to format plain text files. It supports headers, links, images, blockquotes, lists, paragraphs, italics and bold etc formats.

To make a phrase italic in Markdown, you can surround words with an underscore
To make a phrase bold in Markdown, you can surround words with two asterisks
To make headers in Markdown, you preface the phrase with a hash mark (#), up to 6 # for h1 to h6
To create a block quote, all you have to do is preface a line with the "greater than" caret (>).
Use new line for a hard break; and use two spaces for a soft break.

There are many “extended” implementations of Markdown that support formats like tables, definition lists, footnotes, and more. However, they’re non-standard, so they’re not essential to learning the basics

For learning markdown,  http://markdowntutorial.com/ is a very good online tutorial to learn the basics.

There are two online tools very useful to write markdown
http://www.markdownviewer.com/
http://hashify.me/

Favicon - adding badge

Adding notification count (badge) to favicon is a user-friendly design to show indicator of activities, allowing user to easily see if attention is required. There are quite a few open source implementations from github, after looking at following three libraries, I decide to use Tinycon which supports fallback (with page title update) and AMD usage. Its two sentences description is exactly what I am looking for. However, other two (favico and notify-better are great too).

http://lab.ejci.net/favico.js/
Make a use of your favicon with badges, images or videos. Animate your favicon with animated badges. You can customize type of animation, position, background color and text color. You need initialize it, e.g. var favico = new Favico()

http://blog.tommoor.com/tinycon/
Tinycon (object in global namespace) allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers (IE and Safari) that don't support canvas or dynamic favicons.

https://github.com/peachananr/notify-better
An all in one jQuery plugin that let you change your favicon, browser's title and more to reflect new notifications. It has ajax option support.

This is the first step to make browser tab active. Next, I will work on Web Notification (HTML5) and Push notification (Maverick/Safari already supports it as of today).

Favicon - Small icon big brand

What is favicon?
A favicon (favorite icon) is a small icon (usually 16x16 pixels) for website use. Most browsers display this icon in tab, bookmark, address bar. This icon is usually for branding purpose, and frequently it is created from company logo. For instance, www.google.com/favicon.ico.

How to use favicon?
Favicon is well supported across browsers. It can be ICO, PNG, JPEG, GIF or even animated GIF format. The list of HTML codes in head section usually look like below

<link rel="shortcut icon" href="http://example.com/myicon.ico" />
<link rel="icon" href="http://example.com/image.ico" />
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
<link rel="icon" type="image/png" href="http://example.com/image.png" />
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico"/>
How to use the Animated FavIcon Gif?
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Reference
http://en.wikipedia.org/wiki/Favicon
http://lab.ejci.net/favico.js/
http://www.animatedfavicon.com/
https://gist.github.com/mathiasbynens/428626
http://stackoverflow.com/questions/5982282/my-animated-favicon-does-not-show-animation

WYSIWYG editor

A WYSIWYG editor uses clever Javascript to replace the textarea input field, on the fly, with an interactive editor interface that allows users to create and format their posts the same way you would in a typical word processor. No scary HTML required! Even HTML savvy types will find that good WYSIWYG editors offer a fast and convenient alternative to formatting HTML by hand.

The top two editors are TinyMCE and CKEditor
http://www.tinymce.com/tryit/full.php
http://ckeditor.com/demo#full

From Google trend CKEditor is surpassing TinyMCE. I am using TinyMCE now, but its documentation is too simple to say it is documented.

There are a couple of other editors:
fckeditor (CKeditor's parent, and performance is not good)
kindeditor
xheditor
aloha-editor

There is a blog http://www.1stwebdesigner.com/design/10-best-wysiwyg-text-and-html-editors-for-your-next-project/ lists out 10 WYSIWYG editors, and the standout two are still TinyMCE and CKEditor.

Emoji

Recently we are discussing how to display iOS or Android Emoji on the web as Twitter can display Emoji since April 2014

Did a bit research, and the key part is still about standards. If we need display Emoji, we need a mapping table between unicode and emoji, then do text replace with corresponding emoji icons.

Here are some useful links:
http://www.iamcal.com/emoji-in-web-apps/
http://apps.timwhitlock.info/emoji/tables/unicode
https://github.com/Genshin/PhantomOpenEmoji
https://github.com/github/gemoji
http://unicode.org/~scherer/emoji4unicode/snapshot/utc.html
http://en.wikipedia.org/wiki/Mapping_of_Unicode_characters

Private browsing will cause QUOTA_EXCEEDED_ERR

If your web site uses local storage, and when user does private browsing your website, it might break. The reason is local storage will not be able to store anything if phone is using private browsing.

Suggest to use Modernizr or below script to do detect. (Try-catch might also work?)

if (!!window.localStorage)
{
    localStorage.setItem(key, val);
};

SVN trunk, branches and tags

- A trunk in SVN is main development area, where major development happens.
- A branch in SVN is sub development area where parallel development on different functionalities happens. After completion of a functionality, a branch is usually merged back into trunk.
- A tag in SVN is read only copy of source code from branch or tag at any point of time. tag is mostly used to create a copy of released source code for restore and backup.

Read more: http://javarevisited.blogspot.com/2013/04/difference-between-trunk-tags-and-branch-svn-cvs-git-scm-subversion.html

The practice we are using in daily work is
1. Work on trunk and commit for main release
2. Branch out from released tag for EP/SP
3. Tag for each main release

base href needs forward slash at the end

HTML document or iframe head section can  have this tag to specify a default URL and a default target for all links on a page:

<base href="URL" />
<base href="http://www.w3schools.com/images/" target="_blank" />

href for relative paths
target for click link behavior

The URL needs forward slash (/) at the end, otherwise it will not work as expected.

http://www.w3schools.com/tags/tag_base.asp

Device browsers

iOS browsers:
http://lifehacker.com/5927910/five-best-ios-web-browsers/all

Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D167 Safari/9537.53
Atomic Browser
Chrome
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) CriOS/33.0.1750.21 Mobile/11D167 Safari/9537.53
Dolphin Browser
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/6.0 Mobile/10A523 Safari/8536.25
iCab

Android browsers:
http://lifehacker.com/5925969/five-best-android-web-browsers/all
Firefox
Chrome
Dolphin Browser
Boat Browser
Opera Mobile

Convert Excel to CSV using UTF-8 encoding

On my mac OS X, Excel itself cannot directly save file as UTF-8 encoding. Here are the steps we can workaround.

• Save file to UTF-16 text file
  Excel - Save as ... select "UTF-16 Unicode Text (.txt)"
• Convert .txt file to UTF-8 format
  Sublime Text -> Save with Encoding -> Select UTF-8
• Replace Tab with comma
  Sublime Text -> Replace using regular expression (\t to replace ,)
• Rename file from .txt to .csv extension

CSS ellipsis

.ellipsis-2line{
  overflow : hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: block;
  // fallack for firefox which doesn't support ellipsis-2line
  max-height: 3em;
}

.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space:nowrap;
  display: block;
}

Realtime frameworks, APIs and services

Right now we have SailsJS, SocketStream, Meteor (a full platform) and DerbyJS
API infrastructure provides such as 3Scale, Apigee, Layer7 Technologies, Mashape andMashery
Services like DataSift, Firebase, PubNub, Pusher and Superfeedr are in a great position. 
http://www.html5rocks.com/en/tutorials/webrtc/datachannels/ 

Bower 101

Bower is a package management tool for web. Here I list the key commands for bower and git. Bower uses semver to manage dependencies.

http://bower.io/

npm install -g bower
.bowerrc
bower.json
bower init
bower install <name>=<package>#<version>
bower list
bower search [<name>]
bower uninstall <package-name>
bower cache list
bower cache clean
bower register <my-package-name> <git-endpoint>

For local package (but seems not work, it might result from my local git repo setup)
bower install file:///path-to-the-module/.git/ --save

git init
git init newrepo
git add filename
git add ..
git commit -m "Adding files"
git commit -m "change some files" file1 file2
git commit -a -m "Changed some files"
git status
git rm file
git branch test
git checkout test
git checkout master
git merge test
git branch -d test
http://classic.scottr.org/presentations/git-in-5-minutes/

http://semver.org/

10 Web design trends

http://thenextweb.com/dd/2012/12/30/10-new-web-design-trends-you-can-expect-to-see-in-2013/

1. More responsive design, please.
2. Typography will take center stage.
3. Buh-bye Flash. Hello just about anything else.
4. Skeuomorphism will show its age.
5. Large images used for large impact visuals.
6. Give me (more) white space!
7. More sharing on social networks.
8. Calmer color schemes to reappear.
9. Mobile apps will start to replace mobile browsing.
10. King content will keep its crown.

http://thenextweb.com/dd/2013/12/29/10-web-design-trends-can-expect-see-2014/

1. Non-boring typography
2. Flat design
3. Large hero areas quickly killing sliders
4. Heavier focus on mobile
5. Videos in place of text
6. Long scrolling sites
7. Simple color schemes
8. Simplified content
9. Dropping the sidebar
10. Manipulated imagery

Javascript IDEs

http://www.jetbrains.com/webstorm/
http://www.aptana.com/
https://netbeans.org/
http://www.visualstudio.com/
http://www.sublimetext.com/
http://macromates.com/

Switch to Box from Dropbox

Couple of reasons:
1. Box sync works grea
2. Box has free 50GB storage
3. Box has new state-of-the-art preview UI
4. Box new iOS app is just awesome

Dropbox looks lightweight and ease of use, but after using Box for a while, it also meets my basic daily use requirements. I can share, collaborate files with my friends and family from anywhere and any device.

Two boxes, similar features, but one choice for me.

ES5 compatibility table

http://kangax.github.io/es5-compat-table/

We should start to use strict mode, Object, Array, and getter/setter etc new features with browser native support.

Strict mode

Object.create
Object.defineProperty
Object.defineProperties
Object.getPrototypeOf
Object.keys
Object.seal
Object.freeze
Object.preventExtensions
Object.isSealed
Object.isFrozen
Object.isExtensible
Object.getOwnPropertyDescriptor
Object.getOwnPropertyNames

Array.isArray
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight        

Getter in property initializer
Setter in property initializer

Date.prototype.toISOString
Date.now
JSON
Function.prototype.bind
String.prototype.trim