Xah's Web Dev Blog

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

Buy Xah JavaScript Tutorial.

JavaScript: What's the Value of Keyword “this”? (major update. Added a section on the purpose)

So, Google Plus is now officially flopped, after 4 years of ado.

here's The wildly popular Google Plus Song, 2011 The Google Plus Song (humor)

JavaScript: Array Compare Equality

JavaScript: Range Function for Array

JavaScript: Timing JavaScript Code

China ISP Ad Injection

Google gmail's spam box is now deciding what you should see. This from Linux Torvalds. https://plus.google.com/+LinusTorvalds/posts/DiG9qANf5PA

Google Gmail Blocks Mozilla Thunderbird

JavaScript Execution Order; Asynchronous JavaScript (minor update)

JavaScript Fun with new, null, null char, …

new;    // syntax error. keyword “new” must be followed by a expression
x[new] = 22; // syntax error. keyword “new” must be followed by a expression

x."new" = 11; // syntax error. dot notation can't start with quote
x.new = 7;    // valid. new is converted to a string

"\x00" // valid. a string with a null char.

var x = { null: 3 }; // valid. null is converted to string here
var x = { new: 2 };  // valid. new is converted to string here

var x = { "\x00": 4}; // valid. string with a null char, as property name

var x = { "p": null }; // valid. property value can be any value.

Asynchronous JavaScript: Using JavaScript to Insert JavaScript (minor update)

Google's PageSpeed Insights Fails Its Own Site

why JavaScript object hierarchy is confusing
why JavaScript object hierarchy is confusing

JavaScript: Understanding Prototype & Inheritance

find nesting depth of a element

// find nesting depth of a element
function getDepth (ele) {
    var dp = 0;
    while ( ele.parentNode !== null ) {
        ele = ele.parentNode;
        dp++; }
    return dp;

JavaScript: ECMAScript 2015 Features. First draft.

ECMAScript 2015 Language Specification – ECMA-262 6th Edition Now with collapsible table of contents.

Brendan Eich, inventor of JavaScript, turns out, is not a good presenter, nor is he a good blogger.

node.js size bloat
node.js size bloat

JavaScript, in ES6, the term “host object” is gone.

JavaScript, in ES6, the term “native object” is now called “standard” object.


JavaScript object tree
JavaScript: Understanding Prototype & Inheritance

JavaScript: How to Convert Array-Like Object to Array? (major update)

// js quiz. what does it return
 "toString" in {p:3}

answer: JavaScript: Accessing & Listing Properties

JavaScript: Reading & Writing to Property and Prototype Chain (new. on its own page)

JavaScript: Create & Delete Property (new. on its own page)

JavaScript: Property Overview (new)

JavaScript quiz: property name with space

var x={"a b": 8};
x["a b"];
x[a b];
x."a b";

JavaScript: Dot Notation vs Bracket Notation for Accessing Properties

JavaScript: Understanding Prototype & Inheritance (major update. Added standard object inheritance hierarchy. A picture is coming.)

JavaScript: the Bad Parts

JavaScript object's __proto__ property for getting parent is now officially blessed by ES 6. JavaScript: How to Find Object's Prototype/Parent?

in ECMAScript 6, the confusing terminology “internal property”, is now called “internal slot”.

see ECMAScript Data Types and Values#sec-object-internal-methods-and-internal-slots

syntax coloring of JavaScript compared. Syntax Coloring in Editors

ES6 added several new math functions, among which, is Math.hypot(…) that computes the length of a vector! See updated: JavaScript Math Object & Methods

If you haven't heard, ES6 is officially released.

JavaScript: Semicolon

xah-unicode-search now on github


SVG Path Tutorial (updated)

JavaScript: Set Element's Attribute Value (minor update)

JavaScript: How to Use Browser's JS Console (on its own page)

HTML “ruby” Annotation Example Firefox now supports ruby annotation.

JavaScript: AppendChild Example (appenChild actually moves the child.)

JavaScript: Creating Nodes, Functional Programing Style


CSS: Flowing List (updated)

CSS: Animation Tutorial (minor update)

JavaScript quiz #85753

// js quiz. what does this return.
var f = function () { return 3; }
var g = function () { f = function () { return 7; }; return 4; }

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

evolution of the web. “permalink”, “tag cloud”

evolution of the web. The term “permalink” is now dead. as well as “tag cloud”. “cloud” itself probably will die in a few years.

Run windows 95 in browser. http://win95.ajf.me/

What's the Difference Between jQuery Selector and DOM querySelectorAll()? (minor update)

Internet Users World Map

HTML5 Video Tutorial (more update)

HTML5 “contenteditable”

In HTML5 any element can be editable.

<div contenteditable="true">yay yay</div>


JavaScript: Most Frequently Used DOM Methods (major update. Added “hasAttribute”, “removeAttribute”, listing attributes, and much more)

JavaScript: Set Element's Attribute Value (minor update)

JavaScript: Get Element's Attribute Value (minor update)

Web Design: Say No to Grey Text on White Background (repost)

“I have a 20″ screen, but my software forces it to 2″ screen.”. User Interface Design: Peepshow Windows (repost)

computer language char distribution 2015-04-18
Computer Languages Characters Frequency (now you can enter your own source code and get punctuation usage statistics)

SVG Coordinates, Viewport, viewBox (minor improvement)

JavaScript books definitive guide vs good parts
JavaScript Definitive Guide amazon vs JavaScript: the Good Parts amazon 〔photo by J L Hamilton, . Used with permission. Source

JavaScript & Ruby Books by David Flanagan, and the Man-made Complexity in Computer Language

HTML5 Tutorial: figure, figcaption (rewrite)

JavaScript Date Object (new. Tutorial + Complete Reference)

New version of JavaScript tutorial is out. Buy. Thanks. JavaScript Tutorial: Understand JavaScript in Depth.

svg clock
JavaScript: Analog Clock with SVG

JavaScript Math Object & Methods (new. complete.)

CSS3 HSL (Hue, Saturation, Lightness) Color Samples (major update)

SVG: Coordinate Transformation (updated with combined transformation)

the controversy of html5 「figcaption」 tag

What's good design? HTML5 has figure and figcaption. By spec, the figcaption must be first or last child of figure element.

〔➤ HTML5 Tutorial: figure, figcaption

now, controversy! see https://www.w3.org/Bugs/Public/show_bug.cgi?id=12835

Google Chrome still doesn't support CSS animation, in the year of our load 2015 CSS: Animation Tutorial

SVG Tutorial: Basic Examples (minor update)

CSS: Understanding CSS Units (major update)

CSS: Text Shadow, Glow/Outline Effects (minor update)

CSS: Tag Matching (Selector) Tutorial. updated, for CSS beginner.

CSS: Round Corners: border-radius (major update)

Urban Legend Debunker Site Snopes Runs Spam Services to Spread Urban Legends?

Cleaned up index page: Xah Web Dev Tutorials

HTML5 Canvas vs SVG (repost)

JavaScript: Array vs NodeList vs HTMLCollection (minor update)

JavaScript: What's the difference between textContent, innerHTML, innerText, nodeValue? (added examples. On its own page.)

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

JavaScript: Web Storage Tutorial: localStorage, sessionStorage (minor update)

JavaScript: Add & Remove Event Handler (minor update)

JavaScript+DOM: What Does Live Object Mean? (minor update)

JavaScript: List/Add/Remove Element's Class Attribute (new)

JavaScript: Navigate DOM Tree (major rewrite)

JavaScript: How to Create Tooltip (better JavaScript code)

JavaScript: Format Number

Now, JavaScript tutorial and DOM scripting tutorial have separate index pages.

JavaScript: How to Change Element's Content (updated)

JavaScript: Stopwatch (complete rewrite)

JavaScript: What Are Allowed Characters in Identifiers (Variable & Function Names)? Unicode? (minor update)

JavaScript: How to Remove HTML Element (added a functional programing technique to eliminate variables.)

JavaScript: Create & Insert HTML Element (minor update)

JavaScript: How to Change CSS (minor update)

JavaScript: Fade a Element (minor update)

JavaScript: Digital Clock (minor update)

JavaScript: Pop-up New Window (minor update)

JavaScript: Image Rollover (minor update)

JavaScript: Class Attribute: Determine the Kind of Object (updated)

this showcase all the complexities of JavaScript. JavaScript: How to Convert Array-Like Object to Array? (updated)

JavaScript what's the max array index? 2^32-1 ? wrong❕ JavaScript: Understanding JavaScript Array

JavaScript: The non-standard __proto__ property seems to be in ES6, and is here to stay. Updated: JavaScript: How to Find Object's Prototype/Parent?

Understanding JavaScript Object System (updated)

JavaScript Tutorial: Object Basics (major update)

JavaScript Tutorial by Example (minor update)

JavaScript Tutorial: Array Basics (minor update)

JavaScript Example: map, forEach (minor update)

How to Run JavaScript (new. on its own page)

Douglas Crockford on JavaScript using this 2015-02-05
Douglas Crockford on using JavaScript this.

webm video format is getting popular. HTML5 Video Tutorial (updated)

What Language Does Google Facebook Twitter Paypal Wikipedia … Use? (minor update)

Google Chrome Browser Special URL

Firefox still doesn't support ruby annotation. HTML “ruby” Annotation Example

How to Delete Flash Cookies (minor update)

The Words Synchronous & Asynchronous Should be Ban'd