Xah's Web Dev Blog

Emoticon: Facebook vs Sina Weibo

html5 「time」 tag changes

Sometimes in the past 3 years, the time tag of HTML5 have changed significantly. Now it supports these convenient date/time formats:

• <time>2014</time> (just year)
• <time>2014-03</time> (year and month)
• <time>11:35</time> (time only)

major update: HTML5 “time” Tag (refresh page). (2014-03-21 thanks to Manuel Strehl for correction.)

JavaScript how to pre-cache Images

(new Image()).src = "cats.gif";

see JavaScript: Image Rollover Example

even the the JavaScript standard ECMAScript Language Specification - ECMA-262 Edition 5.1 makes HTML mistakes.

⁖

"<code>

should've been

<code>"

probably lots others. Am correcting them as i go.

another template system. http://jinja.pocoo.org/docs/

new discovery. Mustache (template system)

Python Web Servers: Tornado, CherryPy

Tornado (web server)

Tornado is a scalable, non-blocking web server and web application framework written in Python. It was developed for use by FriendFeed; the company was acquired by Facebook in 2009 and Tornado was open-sourced soon after.

CherryPy

CherryPy is an object-oriented web application framework using the Python programming language. It is designed for rapid development of web applications by wrapping the HTTP protocol but stays at a low level and does not offer much more than what is defined in RFC 2616.

CherryPy can be a web server itself or one can launch it via any WSGI compatible environment (including Apache 2). It does not deal with tasks such as templating for output rendering, backend access or authentication protocols. The framework is extensible with filters, simple interfaces made of seven functions. These are called at defined points in the request/response processing.

Apple Laptop, 2-Fingers Double-Tab UI

Apple, the forever cool company, with Mac laptop + Safari, you can double tab with 2 fingers to magnify the page to just the right size. However, it doesn't work with Google Chrome browser and Firefox.

and also, if you have a standardish 5-buttons mouse, it works in Windows and Linux, without needing drivers. Not in Mac. Of course, money is behind it. Cool company wants you to own cool stuff. Not just any cool stuff, but cool stuff they sell.

also, the Google Chrome term is getting very confusing. Isn't Google naming lots things as Chrome?

comment at https://plus.google.com/+XahLee/posts/U5tiYS1L1xn

• Best Input Devices (Jog/Shuttle, Touchpad, Cyborg Mouse, Pen Tablet)

Phantomjs Tutorial (draft)

Selenium Tutorial (draft)

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

Require.js http://requirejs.org/. It's a JavaScript lib that lets JavaScript to have module/namespace system.

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 hoovers over. So, it's a hard decision to make.

JavaScript: 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 JavaScript Array Methods

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?

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 2010-10-20 By Malte Ubl, Eiji Kitamura. @ www.html5rocks.com…〕 (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.

https://github.com/remy/nodemon

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)

• Monit → http://mmonit.com/monit/
• Upstart → http://upstart.ubuntu.com/
• Daemontools → http://cr.yp.to/daemontools.html
• Launchtool → http://people.debian.org/~enrico/launchtool.html