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"