Xah Web Dev Blog Archive 2016-01

Closure (minor update)

Web Design of Popular Sites: Serif or Sans Serif, Fixed Layout or Flow?

Meaning of Font Size

best way to JS: Get Current Script Element

Clone, Deep Copy Object/Array. new tip.

DOM, List Attributes

in DOM, there's a strange attributes property, which return a list of attributes of a element.

use it like this

var hh = document.getElementsByTagName("a")[0];

var aa = hh.attributes;

// number of attributes
aa.length

// first attribute
aa[0]

result object can be indexed by number (e.g. result[2]) or attribute name (e.g. result["src"]).

https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes

the returned object is a strange NamedNodeMap object. https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap

each element of NamedNodeMap is a strange Attr object. This Attr object went thru major DOM changes. https://developer.mozilla.org/en-US/docs/Web/API/Attr

I think if you really want a list of all attributes of a node, then there is no other way, use node.attributes. But otherwise, you can use

by the way, i said they are strange, because they are strange to me, and probably rarely used. I need to read the DOM spec. Now with whatwg's spec, it should be much easier to read.

[see JS: DOM Methods]

Disable Google Chrome Smooth Scrolling

latest Google Chrome v49 now has smooth scrolling. to disable it, goto chrome://flags/#disable-smooth-scrolling

JavaScript “undefined” trap

// JavaScript trap
var u = "2";
var o = {};
o[u.id] = 4;
console.log ( o[u.id]); // works!!

lesson: JavaScript returns undefined in many situations, with no warning. (var with no init, non-existent property, out of bound array access, function with no return value, etc.) [see undefined]

so, here, the u.id implicitly becomes "undefined", and now you basically have o = {"undefined":4};

see also Property Key

WebSocket Tutorial

WebSocket is now mature, supported by all browsers.

Buy JavaScript in Depth. New version is out.

update sent to previous buyers. If you changed your email, let me know. email to xah@xahlee.org

Visual CSS. Now, there's side panel for easy navigation, for all pages.

JavaScript in Depth. Now each page has a side-panel, for easy navigation.

The Story of XML

ECMAScript 2015 Set Object's Parent

JS: Object.setPrototypeOf

DOM: Live Object (major update)

Event Delegation (updated. new code example, functional programing style)

JS: Add/Remove Event Handler (updated)

updated JS: Load Order, defer, async, module

Regex Functions.
Major update. Examples are on a page of their own.

the one html tag that summarize just how fk'd the web standards and fashions in past decade is: iframe