Xah Web Dev Blog

Xah Web Dev Blog Archive

dot product of n vectors of any dimension

so yester we did JavaScript dot product of n vectors of any dimension

const vecDot = (( ... vectors) => vectors . reduce ((v1, v2) => v1. map ((x,i) => x * v2[i])) . reduce ( (a,b) => (a+b)) );

supreme code

Xah Talk Show
hand writing Chinese, JavaScript coding vector dot product function style, intro to constructed language 2019-12-14

Xah Talk Show
JavaScript+SVG live coding+tutorial. creating polyhedron real-time rotation from scratch 2019-11-23

Xah Talk Show Geometry regular polyhedron, JavaScript + SVG tutorial, rotate 3D cube real time 2019-11-15

The Garbage Webpack Wants You to Do

the garbage webpack wants you to do. basically, they are normalizing hack. creating hack solution to solve problem. like unix did to industry.

webpackjs loading image 2019-11-01 p9fkr
webpackjs loading image 2019-11-01 p9fkr

i think webpack basic features a great, e.g. bundling, removing unused code, minimize js, etc.

but they tried to basically change the JavaScript lang, by importing css, image, font etc Using JavaScript import syntax. to move image css etc seems a major hack. Moving file and dealing with html images is a complete different category of task then JavaScript import/export modules.

they try to make the dependency clear. but the way they did is a hack job, seems they are popularizing the practice by the tool.

that's how programing industry becomes garbage.

minor updates

JavaScript Webpack Bloat

JavaScript installing webpack installs 390 f packages. F JavaScript

js npm webpack install 2019-10-29 krjs9
js npm webpack install 2019-10-29 krjs9

following webpack official tutorial, 7 lines of code (213 bytes) becomes 134 lines 565k. jesus.

webpackjs generated bloat 2019-10-30 n324t
webpackjs generated bloat 2019-10-30 n324t

imgur reactjs bloat

imgur has become rotten since about 2017. Since, you can't view images with JavaScript off.

imgur reactjs bloat 2019-10-31 cqv9w
imgur reactjs bloat 2019-10-31 cqv9w https://twitter.com/csswizardry/status/1185604806901207045


this is supposed to be the latest and greatest, better than angular react vue https://svelte.dev

JS: Event Delegation

js before after 2015 2019-10-04 b47s4
JavaScript 2015 before and after

npm choke on node version

apparently, in some dinosaur age, npm decided to sit on /usr/local/lib/node_modules , and that became a relic. by the way the whole /usr/local/ is the relic inherited from your love of the unix philosophy. few milen gen understand it today.

npm choke on node version 2019-10-01 cwy5k
npm choke on node version 2019-10-01 cwy5k

my unix skillz of 1999 comes back to life. had to do surgery to get npm upgraded on MacOS. #nodejs the pesky error “npm WARN npm npm does not support Node.js v11.14.0”

npm choke on node version 2019-10-01 4vsjn
npm choke on node version 2019-10-01 4vsjn


Micropayment on the Web: It's Only a Matter of Time

The Story of XML

The rise and fall of XML. Be conservative in what you send; be liberal in what you accept. 2019-10-01


Social Media Like Button

JavaScript complexity 2014


there exist fucks in the coding industry that creates this complex fuck, and, is common, used everywhere in industry, as accepted practice


var CC = function(){
    var kk = function() {
        this.ii.apply(this, arguments);
    kk.prototype.ii = function(){};
    return kk;

var PP = new CC;
PP.prototype.ii = function(){};

var p1 = new PP;

can you understand what it does? it's only 8 lines

take few min to try. see how far is your js skill. really, try to understand it. not just roughly get the idea. if all you can do is roughly have some idea what it does, that means you are another drib in the industry.

instead, you should: describe the full behavior of CC

now, let's dissect it mathematically.

first of all, it defines a function CC

kk is a function. kk returns undefined when kk is called

the idiots in the industry with that mcv and class shit. it's a train that won't stop, but runs out of steam in 10 years as always.

creating extreme complexity that nobody understands

your job is to analyze this code, detail EVERY aspect of its behavior, as a piece of math. (btw it is common, as exemplarily from js gurus)

my job, is to ding it with profusion and gravity. wait for it. i'm betting on myself on this. this is, boarding the train first, think about ticket later.

screenshot 2019-09-29 frf2s
screenshot 2019-09-29 frf2s

JS: Load Order (major update)


const xah_reverse_string = ((x) => x.split(RegExp("", "u")).reverse() .join("") );

// test
console.log (
 xah_reverse_string("some😃thing") === "gniht😃emos"
); // true

Guile scheme lisp, is python a lisp?, JetBrain vs Emacs editor, why clojure java. 2019-08-25

JavaScript alternatives, intro to ES2015, JavaScript warts, xah talk show 2019-08-23

webp and jpeg 2000 image formats

Safari supports jp2 (jpeg 2000) image format. Firefox no, Google Chrome no. Google's webp image format is becoming popular. Safari doesn't support it.

Xah Talk Show 2019-08-11. jwz keyboard. why JavaScript no "use js2015", rant on Brendan Eich

new JavaScript compiler: QuickJS


written by Fabrice Bellard. He is perhaps the top 10 greatest programer. you can read about him on Wikipedia.

HTML Frameset Tutorial

major update

HTML: Email Field 📧

it seems, java doc since java 11 (year 2018) stopped using html 4 frameset.

see HTML: Split Windows; Frameset

DOM: Get Elements by ID, Tag, Name, Class, CSS Selector


interactive text shadow generator

screenshot 2019-06-28 vjt7h
CSS: Text Shadow
screenshot 2019-06-27 t8q3q
CSS: HSL Color
screenshot 2019-06-26 c5tws
CSS: Box Shadow

todo. create js lib page, js function to generate css color code. includes rgb hexadecimal, rgb decimal, hsl, and opacity. 2 functions or 2 in 1.

    const random_hsl_color_str = (() => `hsl( ${random_int(0, 359)} , ${random_int(0, 100)}%, ${random_int(0, 100)}%)`);
    const randomInt = ((xmin,xmax) => (Math.floor( Math.random() * (xmax + 1 - xmin) + xmin )));
    const randRGBColorString = (() => {
        const rand2Hex = (() => {
            const x = randomInt(0,255).toString (16);
            if ( x.length === 1 )
            { return "0" + x } else
            { return x } } );
        return `#${rand2Hex()}${rand2Hex()}${rand2Hex()}`;
screenshot 2019-06-25 5wh9x
CSS: Radial Gradient

TypeScript DOM interface property x not in y

in TypeScript you get this property x not in y all the time. most annoying. Those dom objects (aka interfaces) are esoteric, and hard to find answer other than common errors.

screenshot 2019-06-24 93yb9
screenshot 2019-06-24

JavaScript up/down arrow key to increase number field by 1 or 0.1

screenshot 2019-06-25 96r58
screenshot 2019-06-25 96r58

spent 3 hours to have written this, to increase/decrease number field by 1 or 0.1 by up/down arrow. Until i realized it's builtin in browser, with “new” <input type="number" />

see HTML: Input Number Field

However, using mouse wheel to increase/decrease a number field is not supported by browser. Here's the code

const f_mouse_wheel_event = ((x) => {
const box = x.target;
if ( x.deltaY > 0) { box.value = (Number.parseInt(box.value) - 1); }
if ( x.deltaY < 0) { box.value = (Number.parseInt(box.value) + 1); }
screenshot 2019-06-25 tz94b
screenshot 2019-06-25 tz94b

JavaScript function speed, compiler optimization

JavaScript in theory, f2 should be faster than f1. In Firefox, true. 141 vs 86. In chrome, both 10. The state of compiler optimization is unpredictable. Did Chrome just skipped the whole loop?

screenshot 2019-06-23 vfhwy
screenshot 2019-06-23 vfhwy

safari showed similar behavior as Firefox

screenshot 2019-06-23 wfq42
screenshot 2019-06-23 wfq42
const cos = Math.cos;
const sin = Math.sin;
const π = Math.PI;

const f1 = ((x) => [[cos(x),-sin(x)], [sin(x), cos(x)]]);

const f2 = ((x) =>
const cosx = cos(x);
const sinx = sin(x);
return [[cosx,-sinx], [sinx, cosx]];

const nn = 99999;

const start = new Date().getTime();
for (let i = 0; i < nn; ++i) {
const end = new Date().getTime();
console.log ( end - start );

const start = new Date().getTime();
for (let i = 0; i < nn; ++i) {
const end = new Date().getTime();
console.log ( end - start );
gradient generator 2019-06-24 v7sk8
gradient generator 2019-06-24

CSS: Linear Gradient

SVG: Circle Arc

finally, got it right.

svg circle arc 2019-06-19 m4d33
svg circle arc 2019-06-19 m4d33

JS: Operators

minor update



Donald Knuth, Steve Jobs, and the Idiocy of Typography

minor update

CSS: Computed Style

major update

HTML: the Root Element


CSS: Media Query

improved writing

SVG: ViewBox, User Coordinate's Unit Size


Browser War, Mobile Passed Desktop Since ~2016

HTML: Viewport Meta

xah talk show 2019-06-07 understand JavaScript object like a mathematician

New Tutorial Pages on HTML GUI

with JavaScript code showing result in realtime

HTML: Character Sets and Encoding

HTML Entity List (updated)

html entities 2019-06-07 zf5nk
html entities

Xah talk show 2019-06-05 live coding javascript, html entities, emacs workflow demo, xah fly keys

JavaScript quiz: when a array is inside a template string, no print the square brackets

todo. research. when a array is inside a template string, it will not print the square brackets

const x = [1,2];
console.log(x); // [ 1, 2 ]
console.log(x.toString() === "1,2"); // true
console.log(`${x}` === "1,2"); // true

incomplete answer: console.log is browser dependent.

console.log spec https://console.spec.whatwg.org

more research todo

2019-06-04 sad. html5 created a bunch of entities that does not end in semicolon.

html entities 2019-06-04 gffbt
html entities 2019-06-04 gffbt

HTML Entity List

CSS: Tabbed Menu

minor update

Using Unicode in HTML Attributes (review)

JS: Raining Hearts

screenshot 2019-06-01 swytt
screenshot 2019-06-01 swytt

major update. still to tweak. todo

image popup lib

todo. work in progress.

write up as a library. image popup

// 2014-07-12
// version 2019-06-01

// on click, show a big version of the image

    const activeNode = document. getElementById("area85743");

    const f_new_layer = (() => {
        const newNode = document. createElement("div");

        newNode.style.height= "100%";
        newNode.style.width= "100%";

        newNode.addEventListener ("click", (() => { newNode.style.visibility="hidden"; })  , false);

        document. body.appendChild(newNode);

        return newNode;

    const f_update = ((evt) => {

        if ( evt.target.nodeName.toLowerCase() === "img" ) {
            let xurl = evt.target.src;

            // get the image file name, sans dir
            const fileName = xurl.replace(/^.*\//, '');
            const newName = fileName.replace(/-s.jpg/, '.png');
            const newImgNode = new Image();
            newImgNode.src = "m/" + newName;

            imgLayer.innerHTML = "";

        }) ;

    const imgLayer = f_new_layer();

    activeNode.addEventListener ("click", f_update , false);


JS: Load Order

minor update to this and other pages at DOM Scripting Tutorial

DOM: NodeList vs HTMLCollection (major update)

JavaScript Get Radio Button Value Sans Loop

this is JavaScript magic. Best way to get radio button value. All function style. No for-loop.

see HTML: Radio Button

Microsoft Edge browser bug, input event not fire on radio button

JavaScript. Can't believe i ran into this bug. Edge browser, written from ground up few years ago, has this bug?

Edge browser input event bug  2019-05-27 v6wnf
Edge browser input event bug 2019-05-27 v6wnf

browser .getElementsByClassName now return True Array?

sometimes in the past 3 years, result of .getElementsByClassName can use array method .forEach directly, even though they are not true array. Any got detail of this?

screenshot 2019-05-27 qvcm9
screenshot 2019-05-27 qvcm9

See also: DOM: NodeList vs HTMLCollection

DOM: Node Type, Node Name, Node Value (minor update)

JS: the Set Object Tutorial (minor update)

JS: Reverse Key Value of Map Obj

JavaScript Map.prototype.forEach is pretty stupid in that it reverses the order of key val args.

see JS: Map.prototype.forEach

browser auto getElementById

JavaScript just noticed something amazing. you don't need getElementById. They are automatically done in JavaScript. Tested to work in safari and Google Chrome. Does any know if this is in standard or what?

i had const x = document.getElementById ('x'); etc. but removing them still works when i x.addEventListener ('input', f_update, false) i'd expect “x not defined”

apparently, the spec mentioned it, but is “non-normative”, meaning, it is not reliable. thx to @lg188

browser auto getElementById 2019-05-20 7kvv5
browser auto getElementById 2019-05-20 7kvv5
RadioNodeList 2019-05-18 287mb
RadioNodeList 2019-05-18 287mb

todo. not sure how to use RadioNodeList yet.

JavaScript spec size

SVG: Circle Arc

SVG: Circle Arc

the idiocy of the SVG ellipse spec

screenshot 2019-05-18 2ps7v
screenshot 2019-05-18 2ps7v

SVG Path: Elliptical Arc

JS: Generator (updated)

Firefox disabled extension 2019-05-04 s9kft
Firefox disabled extension 2019-05-04 s9kft

Firefox still has extensions disabled. i am wondering if it intentional accident, or intentional afterwards.

one sneaky thing Firefox does is that it requires you to agree to use your data before you can get the extesion disabled fix. also, in the past few years, it donates to antifa, and other nasty things on the news.

i use 4 browsers. Google Chrome with Google sites ONLY. Brave for generic site (JavaScript off). Safari for alt twitter acount. Firefox for main local web dev (JavaScript off). Now, Safari or Brave replaces Firefox. I'll see which one.

the thing about gnu icecat is that, those are just clone of firefox. they rely on the commercial firefox. open source fsf as ideology, do not survive. They survive on the donations from patent ridden and evil commercial enterprises's breadcrumb (and those who works for them).

i like to support good things in society, so we can live freely. Not living in a underground niche community. That's most linux etc fsf open source hackers are doing. Forever in fear, in a rebel state.

JS: Iterator (updated)

JS: “typeof” Operator (updated)

JavaScript String Problem

JS: ECMAScript 2016, 2017, 2018, 2019 new. still incomplete.

JavaScript requestAnimationFrame sucks

requestAnimationFrame(f) → calls the function f when browser is ready to update display.

f is passed a integer ms of type DOMHighResTimeStamp. It is milliseconds from performance.timing.navigationStart.

new Date(performance.timing.navigationStart + ms)

should be equal to

new Date()

let x = performance.now();
let y = performance.timing.navigationStart + x;
let z = new Date ( );

console.log ( new Date(y) )
console.log ( z  )

The purpose of requestAnimationFrame is when animation done by JavaScript needs to be updated frequently (say, few times a second). Instead of using setInterval, one can use it in combination with requestAnimationFrame, so that the code runs only when browser updates the display.

Example usage:

const update_clock = ((timestamp) => {
    const dd = new Date(performance.timing.navigationStart + timestamp);
    sec_hand.setAttribute("transform", "rotate(" + (dd.getSeconds()*6 + (dd.getMilliseconds()*6/1000)).toString() +  ")");

setInterval( (() => { requestAnimationFrame(update_clock) }) , 1000/20);

JS: SVG Clock

the JavaScript web requestAnimationFrame is nasty. Extremely complex semantics, yet, no loop construct, so that user either need to use recursion with complicated manual timing control, or need to use setInterval anyway.

JS: Array.prototype.flat (new)

number faq

converted all call of Object.getPrototypeOf to Reflect.getPrototypeOf

js Reflect.getPrototypeOf 2019-04-17 7fvt8
js Reflect.getPrototypeOf 2019-04-17 7fvt8

JS: Reflect.getPrototypeOf

parceljs, a new js tech. nodejs Ryan Dahl highly recommended. https://parceljs.org

spent 1 hour on the svg path ellipse. still haven't figured out how to use it to draw a quarter circle arc. extremely idiotic tech.

SVG Path: Elliptical Arc

HTML4 Frameset, Best Idea Killed by Google

it's a sad story that the html4 frameset is killed, by Google and web dev community beginning around 2005. it's the best idea. Today's html5 and JavaScript still cannot do anything close.

Java doc is still (and only one) using frameset https://docs.oracle.com/javase/7/docs/api/

the JavaScript spec, ECMA-262 ECMAScript® Language Specification (LOL™) is the worst lang spec i've read. It is INCOMPREHENSIBLE and UNNECESSARILY so. Also, originally i put links to it from my tutorial for my own convenience of writing tutorial. But nobody else read it.

programers posting bullshit to get followers

Eric Elliott 2019-03-17 Qmjj7
Eric Elliott 2019-03-17 https://twitter.com/_ericelliott/status/1107339574999687168

this guy, posts bullshit daily, for like at least 3 years. basically, it's a marketing strategy, posting drama things and soundbytes to get lots clicks by the masses who don't know stuff. that's at least part of the reason he got 40k followers.

JavaScript here's my intro to the topics he listed

Google Webfont Tutorial (minor update)

CSS: user-select

do you have a specific case situation where programer needs to know type coercion result?

i think when one saw a code location where type coercion is happening, you simply just change the code so it's explicit type conversion, unless it's trivial or well-known cases such as number to string.

type coercion results between types that doesn't make sense, are usually just arbitrary, depending on the lang desiner or what happens to be the case in the lang. especially lang with bad history like js.

old articles

  1. Google AdSense Ban on Ancient Asian Goddess Sculpture Page
  2. How to Start Google Chrome in a New Instance?
  3. Google Plus Favicon Change 2013-03-15
  4. Google Reader RIPS
  5. Google's Deceptive Ad: Google Puts Ad in Email Under Promotion Tab
  6. Google: “Don't Be Evil” vs “Don't Do Evil”
  7. Google Now Requires JavaScript AND Cookies?
  8. Google's sitemap.org Got Hacked?
  9. Are Googlers the Minions of Google Marketing?
  10. Steve Jobs 3 Months Before He Died
  11. TV Has Arrived on The Web
  12. Industrial Tech: Twilio, SendGrid, Google Cloud Messaging, Apple Push Notification Service
  13. Adjust Your Google Ad Preferences, or Opt Out
  14. Amazon Closes CA Affiliate Program
  15. Tech Humor: Apache vs Node.js vs NGINX 📺
  16. What's the Difference Between Google's “following” a Blog vs Subscribe?
  17. Humor: CSS Experimental Pain, Window Blind
  18. Gmail State-Sponsored Attack Warning
  19. Google Do Evil
  20. Google Gmail Blocks Mozilla Thunderbird
  21. All About Google
  22. Google's PageSpeed Insights Fails Its Own Site
  23. Google Search Dropped Traffic To XahLee.org
  24. SEO: Underscore vs Hyphen: How Google Webmaster Advices Hurt Quality Writers 📺
  25. Hacker News Traffic Effect
  26. Web Tech Gossip
  27. Internet Explorer Anime Girl
  28. Global Internet Usage Hour Pattern
  29. Web Advertisement in 2011: JavaScript Popups
  30. MegaUpload Crime Boss
  31. Monolithic Web Pages
  32. Opera Browser Can't Load Twitter CSS: OCSP Error
  33. Software Piracy, Open Source, Free Software, Copyright
  34. How Much Can You Make by Blogging? Google AdSense?
  35. Why I'm Removing Tech Blogger Celebrities and Googler on G+
  36. Social Network Post Scoring Systems and Their Consequences
  37. My Personal Photos of Steve Jobs (1955 to 2011)
  38. Steve Yegge's Google Platforms Rant
  39. SOPA: Stop or Start Online Piracy Act?
  40. JavaScript DOM SVG font-size sucks
  41. Modern Tablet Computer Features
  42. Twitter Usage Map
  43. Web Hosting Compared: 2006-01
  44. What Your Google Plus Strategy Should Be?
  45. Wikipedia Morons
  46. On Wikipedia's Misinformation
  47. Women in Tech: Today's Google Plus Recommendation?

CSS: Reset

the last breath of google plus

the last breath of google plus

google plus shutdown 2019-02-14 4h37m
google plus shutdown 2019-02-14 4h37m
sicp chapter 1 p24s6-s294x212
Web Design: Problem of Header Linking to Table of Contents


todo. review.

while reviewing old article Web Design: Should Hyperlinks Have Underline? discovered, that time.com does not use https still. very strange.

new nav box

windows10 dark theme 2019-02-09 k59bs-s306x204
Dark Theme Web Design

Firefox Chinese Serif Font Touches Top CSS Border

Firefox chinese serif font bug 5pzmn
Firefox chinese serif font bug 5pzmn

Stupid Firefox bug. When you have font-family:serif on chinese char, it touches the top css border. Does not happen in Google Chrome or Safari.

简体繁體字表; List of Simplified/Traditional Chinese Characters

Chinese serif and sans-selif Font Names

Google Greed, YouTube Related Video

YouTube Scamer Stealing Video

writing a math curve plotter in JavaScript, without any library, part 1.
writing a math curve plotter in JavaScript, without any library, part 2.
twitter usage map 2019-01-22 frf7s-s356x176
Twitter Usage Map

This is How Google will Collapse

great article. the title is a click bait, but the article has lots relevant info.

[This is How Google will Collapse By Daniel Colin James. At https://hackernoon.com/how-google-collapsed-b6ffa82198ee ]

CSS: Outline

twitter spam js teacher 2019-01-02 29391-s210x298
Twitter Spam, from “JavaScript teacher”

Xah Web Dev Blog Archive

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials