Xah Web Dev Blog 2018-05

hideous colors, spurious animation

[utc is enough for everyone right By Zach Holman. At https://zachholman.com/talk/utc-is-enough-for-everyone-right ]

Hideous colors, spurious animation. And, it crashes old browsers even with js off.

Timing JavaScript Code (minor update)

the Map Object Tutorial (minor update)

WebSocket Tutorial (minor update)

Web Design Index (new index on web design, UI design, articles)

Date Constructor (updated)

JavaScript: Floating Box Following Scroll

Digital Clock (updated to ES2015)

stupid firefox, utf8 still not default

firefox utf8 not default 2018 05 21
stupid firefox, utf8 still not default

See also: HTML: Character Sets and Encoding

skeleton screen

Web Design: Skeleton Screen

UI design, pie menu

[Pie Menus: A 30 Year Retrospective By Don Hopkins, Ground Up Software. At https://medium.com/@donhopkins/pie-menus-936fed383ff1 ]

am fond of pie menu. in Second Life, which i lived in from 2007 to 2012, uses pie menu. It's simpler, easier, faster to use.

perhaps it's fair to say, the spirit of pie menu today lives in phone ui, example: a bunch of spacial squares, especially in Microsoft Windows 10's window menu, or somewhat in browser menus at right top corner.

by the way, the author Don Hopkin is a emacs oldbie. He ported sim city to x11. He wrote

The X-Windows Disaster

a chapter in The Unix-Haters Handbook. see The Unix-Haters Handbook

note, it used to be, any hacker have read them. Along with Worth Is Better.

he ranted on emacs change to visual lines, 5 years ago.

Rants on Emacs Visual Lines by Don Hopkins and Mark Crispin

this is originally posted to reddit discussion https://www.reddit.com/r/emacs/comments/8kkite/history_pie_menus_a_30_year_retrospective_don/dz9vozi/

JavaScript Books Review 2018

major update



CSS Variable


phone browser opaque smart behavior

seems there's opaque algorithm when phone browser renders html. example: a nav bar with #css position:fixed to top left, then android chrome may or may not hide it after scrolling down, depending the page's height. is there doc about how phone special treatment of css?

nice article, on css variable


don't use .io domain

so, if you use a .io domain, you are in trouble. Note that, the programer idiots love special domains, started with .cx , de.licio.us etc. and since about 2010, .io. the thing is, the fad come and go.

see https://www.uptimechecker.org/blog/how-domain-registrar-can-kill-your-business

Property Key (updated. replace var with const)

Prototype and Inheritance

How to Create Tooltip (updated)

Function.prototype.bind (minor update)

Use Object.create to Emulate Constructor (minor update)

Function Chaining (code update)

Semicolon Rules (updated)

Allowed Characters in Identifier (updated)

Object.prototype.valueOf (minor update)

Property Attributes


minor updates.

Branch Control: if then else, switch

Property Dot Notation / Bracket Notation

Minor updates. Now uses const instead of var.

Format Number

D3.js Visualization, a Quasi Science

[How Likes Went Bad By Matt Locke. At https://medium.com/s/a-brief-history-of-attention/how-likes-went-bad-b094ddd07d4 ]

haven't read the whole carefully but it's on the ballpark.

String Escape Sequence (new page)

Unicode Escape Sequence (updated)

JavaScript Basics (updated)

Get Max/Min Value of Array (minor update)

Scripting SVG (updated)

Operator “new” (updated)

JavaScript, Design Patterns Approach to Computer Language Tutorials

Object Constructor (updated)

JavaScript Map Filter

JavaScript quiz of the day. write a map_filter(map_obj,f). Returns a new map where f(key,value) returns true.

see the Map Object Tutorial


Map Filter

HTML: Input Range Slider (updated)

var Declaration Order (updated)

“typeof” Operator (updated)

CSS: Units (updated)

Why DOM Suck

JavaScript DOM SVG font-size sucks

SVG: Font Size (new page)

Split Array (new)

Define Function (updated)

Template String (updated)

String Overview (new page.)

var Name Scope (updated)

Color articles has all been updated.

var Declaration (updated)

Global Variable


“instanceof” Operator (updated)

Primitive Value

worked a lot on my js tutorial. To streamline them, make it easier to find info as practical reference when coding. Going to post 1 updated article a day.

updated to ES2015

Function Declaration vs Function Expression (minor update)

JavaScript Module, and Math vs Programing


#JavaScript quiz of the day. Write a splitArray(array, f), where f return true means split point. Result does not include split point elements and no empty array. e.g. splitArray([0,1,2,0,4], x => x === 0) returns [[1,2],[4]]

to my patreons, an intro to Xah Lee, is that right?


Object.keys (updated)

JavaScript Find Element in Array

JavaScript has:

worst design possible. Some return index, some boolean, some take function. Most can't deal NaN or undefined.

also, there's no function that finds all occurrences.

see Array.prototype

for-in Loop (minor update)

this is a stupid icon design.

disibility aid options icon 2018 03 05 11937
disibility aid options icon on MacOS, 2018-03-05

In the 1990s, the icon is a wheelchair. It is iconic. People can recognize what it means. But due to political correctness, it is changed to a human animal with arms wide posture. This happened to Mac, Microsoft Windows, and Linux.

also, the word “disabled” such as “disability options” is changed to “accessibility”, also incomprehensible.


SVG Transform Bug in Mac Safari Browser

oh futter. svg v.1.x still have problems. if you attach a transform attribute to the top svg element, it doesn't work in Safari browser, but works in Chrome and firefox. Took 1 hour to debug this futter.

DOM: Change CSS (updated)

JS in Depth
Buy Xah JavaScript Tutorial

Web Dev Tutorials