Xah's Web Dev Blog

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

Buy Xah JavaScript Tutorial.

Intro to Chinese Encoding; What Character Encoding Does Chinese Sites Use? (minor update)

JavaScript: the Property Named “constructor”

minor update. Never use the “constructor” property.

Xah SVG Tutorial (much rework in the past weeks)

SVG: Text Element Tutorial (first version)

JavaScript: Convert Between String & Number (minor update)

The W3C, is now hip, due to competition with WHATWG. W3C now has github, with HTML, tutorial style!

http://w3c.github.io/html-reference/figure.html#figure

by the way, if you didn't know already, the w3c and WHATWG split few years ago. NOT amicably. 〔➤ WHATWG vs W3C Split

web design: 3 more websites with unreadable gray on white

gray on white chrome devtools website 2015-08-05
Web Design: Say No to Grey Text on White Background

JavaScript: Throw Try Catch Finally (new)

JavaScript Syntax Complexity: Lookahead

JavaScript expression statement complexity 2015-08-13
JavaScript Syntax Complexity: Lookahead. ECMAScript 5.1 §12#sec-12.4

good DOM tutorial book

my JavaScript tutorial, on JavaScript the language, i consider to be the best on the web. Especially, the style i cover it. 〔➤ Xah JavaScript Tutorial by Example

my dom tutorial 〔➤ JavaScript+DOM Tutorial〕, is only a introduction.

if you want comprehensive dom tutorial, i can recommend 2 books:

JavaScript Operators (updated)

JavaScript: Navigate DOM Tree (updated)

JavaScript: DOM Whitespace Nodes (on its own page)

JavaScript: Get Element's Type, Tag Name, Content (updated)

JavaScript Array Methods (updated. Examples separated into own pages)

CSS Linear Gradient Tutorial (updated)

JavaScript quiz variable in array 2015-08-09
JavaScript quiz variable in array

New version of my JavaScript tutorial is out. See: Buy Xah JavaScript Tutorial

Buy it. Thanks.

JavaScript: Random Array Element, Randomize Array (on its own page)

JavaScript: Format Number (new code added)

js constructor quiz 2015-08-05
do you understand every line here? JavaScript: the Property Named “constructor” (updated)

JavaScript: the Bad Parts (added a new item about looping thru properties)

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

Understanding JavaScript Object System (more refinement)

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

google plus failed news 2015-08-03
google plus failed news

The Google Plus Song (humor)

Firefox: Set Mouse Wheel Scroll Speed, Autoscroll (updated)

Firefox: Set Backspace Key to Go Back To Previous Page

Web Design, Minimal Window Width of Popular Sites (repost)

Google Chrome. Hover mouse over a link. It should show the URL. But, Google Chrome had a bug since about 2014-07

JavaScript: Keyword “this” (major update. Added a section on the purpose)

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.

compare:

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

https://github.com/xahlee/xah-unicode-search

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

WHATWG vs W3C Split

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; }
f(g());

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