Xah Web Dev Blog Archive 2014-01

saucelabs.com A service that automatically run your testing on combination of browsers/OS.

Backbone Tutorial (draft)

learned a new thing today. JavaScript Promises. looking to see what it is now.

looks like Google Search killed blog and discussions search, about 3 days ago.

JS: Getter/Setter Properties (updated)

JS: the keyword 「new」 Demystified (major update)

JS: Should You Move Variables to the Top? (on its own page)

HTML5 Custom Data Attribute

made a site-wide change of format. This:

<s class="deadurl" title="accessed:2006-01-05; defunct:2011-06-12">http://example.com/index.html</s>

is now this:

<s data-accessed="2006-01-05" data-defunct-date="2011-06-12">http://example.com/index.html</s>

this is a better format, using HTML5 Custom Data Attribute. However, now the user can't see the date accessed. Before, reader can see it when mouse hovers over. So, it's a hard decision to make.

JS: never use 「delete」 to remove element in array

Note: splice is the general way to add/remove elements. You should never use delete to remove elements in a array, because that creates a sparse array.

// example of how delete creates a sparse array
var aa = ["a", "b", "c"];
delete aa[1];
console.log(aa);                // [ 'a', , 'c' ]
console.log(aa.length);         // 3

see JS: Array.prototype

CSS: Box Shadow (updated)

JS: Change CSS (updated)

CSS: Progress Bar Example and HTML5 {meter, progress} Tags (updated)

CSS Layout Tutorial (minor update)

CSS: What Size Exactly Are Predefined 「font-size」?

am starting to phase out the use of CSS font-size with values of {xx-large, x-large, large, medium, small, x-small, xx-small}. Note that these are abosulet sizes, not relative.

Instead, i'll use percentage, such as font-size: 200%

in order to do this, i need to know what's the browser's predefined percentage for these values.

Here's the answer. CSS: What Size Exactly Are Predefined Font-Size?

Where is Socket.IO Client Library At?

Web Design Idiocy: Non-Copyable Text

one of the idiocy of web design is this: a piece of text that you cannot copy. Usually the title. Here's a prime example: [• Introducing WebSockets: Bringing Sockets to the Web By Malte Ubl, Eiji Kitamura. At www.html5rocks.com… , Accessed on 2014-01-04 ] (must use Firefox.)

Websocket + JavaScript + Node.js = Future

websocket is the future. I think, in a couple of years, vast majority of websites will be using websocket. Meaning, with server push. Meaning, to the user, a site will have dynamic info, auto updated (most social sites, are already this, e.g. g+, fb, twitter, and any stock sites or sites with dynamic news. Also Google Analytics's graph is also a example. Basically any sites that has graph).

also, i predict JavaScript and Node.js will overtake backend.

Node.js is very young, but there are incredible amount of stuff and force going on. Agile is the word.

Node.js server monitor/auto-restart

to install a monitor for your server written in Node.js, you can use nodemon. It'll watch your server process, and auto restart it if it crashed. It can also restart when source code change. Very handy for dev.


npm install -g nodemon

to start your process, do: nodemon your_node_script

type nodemon -h for help.

another popular one is npm install supervisor -g. https://github.com/isaacs/node-supervisor

and yet another popular one is https://github.com/nodejitsu/forever

here's a list of generic server monitor tools. (i haven't checked them out)