Xah's Web Dev Blog

Tutorial on {HTML, CSS, JavaScript, …} + gossip on {Google, Internet, SEO, Spam, …}.

Google Chrome still doesn't support CSS animation. What year is this? CSS: Animation Tutorial

Facebook Scam

Google Chrome browser is the worst in supporting Unicode, since 2010. See bug 361986 https://code.google.com/p/chromium/issues/detail?id=361986

CSS: Media Query

Complete. This list of DOM methods: JavaScript: Most Frequently Used DOM Methods, is pretty much all you need, that covers practically 90% of what you use DOM for.

JavaScript: Event and Event Handler (updated)

JavaScript: Detecting Browser; Browser Sniffing (updated)

JavaScript: Create & Insert HTML Element (updated)

JavaScript: Stopwatch

JavaScript Tutorial: Clock (modernized)

CSS: What font-size is xx-large, x-large, small, …? (updated)

CSS: OverFlow, Scrolling Box (updated)

JavaScript Floating Box Following Scroll (updated)

JavaScript: Fade a Element Using CSS Transition (updated)

JavaScript: Fade a Element (updated)

JavaScript: Changing HTML Content Example (updated)

JavaScript: Set a Element's Attribute (updated)

JavaScript: Get a Element's Attribute Value (updated)

JavaScript: Changing a Element's Style (updated)

emoticon cat faces Twitter 2014-04-08

Emoticons on Social Network: Facebook, Twitter, Sina Weibo (updated)

Case Sensitivity in {HTML5, XML, CSS, JavaScript} (minor update)

HTML: Specify More Than One Class Attribute for HTML Element (minor update)

JavaScript: Array vs NodeList vs HTMLCollection (minor update)

JavaScript: Get Elements by ID, Tag, Name, Class, CSS Selector (updated)

JavaScript: Get a Element's Type, Tag Name, Text Value (updated)

JavaScript: Most Frequently Used DOM Methods (minor update)

JavaScript Execution Order; HTML5 Asynchronous JavaScript (minor update)

news. Just today, Twitter started to show emoticons as images.

emoticon smiley twitter 2014-04-02
emoticon on Twitter as of

updated at Emoticons on Social Network: Facebook, Twitter, Sina Weibo

Internet Usage Day Cycle, with simple JavaScript image cycle script. Todo: extract the JavaScript into a image library.

HTML5 Page Structure Tags Example (updated)

emoticon thumb facebook
emoticon images on Facebook.

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:

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

HTML5 “time” Tag (updated)

Firefox now supports meter & progress tags. HTML5 {meter, progress} Tags (updated)

CSS 「position:relative」 Example (minor update. thanks to Jean-Philippe Paradis for a correction.)

HTML5 Tags (updated. added the main tag. Thanks to Jean-Philippe Paradis)

JavaScript: Object Extensible and Prevent Modification (updated)

CSS: 3 Columns Page Layout Tutorial (minor update)

The greats have fallen on this. JavaScript: What's the value of 「this」 Keyword? (updated)

HTML Table Examples with thead, tbody, tfoot (minor update)

JavaScript: What's Constructor? What Does Keyword “new” Do? (minor update)

JavaScript how to pre-cache Images

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

see JavaScript: Image Rollover Example

JavaScript: Call Any Function as Method (added links to ECMAScript reference)

CSS Tutorial: the Basics (updated)

Pure CSS Table (updated)

CSS Linear Gradient Tutorial (updated)

JavaScript Tutorial: Understanding Prototype & Inheritance (updated)

now you can buy my JavaScript tutorial. go to Xah's JavaScript Tutorial, use the paypal button at top.

sometimes in past 7 months, Google Chrome browser now supports CSS animation. See: CSS: Animation Tutorial (updated)

CSS Radial Gradient Tutorial (updated)

CSS Tag Matching Beginner Tutorial (updated)

CSS Selector Syntax (updated)

HTML/XML Entities List (updated)

JavaScript Encode URL, Escape String (updated)

Xah's Web Dev Blog Archive 2013-09

JavaScript: What's Default Charset, Encoding? How to Escape Unicode Character? (updated with correction)

JavaScript: Converting Unicode Character to/from Codepoint (updated)

thinking of writing a Firefox extension. Here's the official doc. https://developer.mozilla.org/en-US/Add-ons

JavaScript Property's Attributes: Writable, Enumerable, Configurable (minor update)

What's Object in JavaScript? (minor update)

JavaScript: Variable & Function Declaration Order: Name Hoisting (minor update)

JavaScript Variable Scope: Function Level vs Block Level (updated)

JavaScript: Web Storage Tutorial: localStorage, sessionStorage

HTML5 Video Example (minor update)

HTML: Character Sets and Encoding (old but useful. minor update.)

JavaScript spec, reformatted one page per chapter. ECMAScript Language Specification - ECMA-262 Edition 5.1

JavaScript: Checking, Getting, Setting, Cookies (minor update)

Google updated their Google Analytics tracker code. Go to your Google Analytics admin page to update. If you want to see the JavaScript code they've used, see Google Analytics Asynchronous Tracking Code

ECMAScript Language Specification - ECMA-262 Edition 5.1. The style sheet modified.

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


should've been


probably lots others. Am correcting them as i go.

Web Design: Problem of Header Linking to Table of Contents

Unicode Character Equivalence Support in Web Browsers (oldie but goodie)

Node.js Documentation Problems

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

new discovery. Mustache (template system)

https://segment.io/ a analytics service company. Not sure exactly what it does, but seems similar to Google Analytics, which i've been using for years.

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

Industrial Tech: Twilio, SendGrid, Google Cloud Messaging, Apple Push Notification Service

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.

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.

JavaScript Tutorial: Getter & Setter Properties (updated)

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

JavaScript Name Hoisting and One-Liner Functional Style (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 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: Box Shadow Examples (updated)

JavaScript: Changing a Element's Style (updated)

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

CSS Layout & Layers (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. @ 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.


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)

Past Articles by Date