Xah Web Dev Blog

JS: Event Delegation

npm chock 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.

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”

todo

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

todo

Social Media Like Button

JavaScript complexity 2014

todo

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

look

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.

JS: Load Order (major update)

todo

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

https://bellard.org/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

updated

interactive text shadow generator

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

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.

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

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) => {
x.preventDefault();
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); }
f_update();
});

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?

safari showed similar behavior as Firefox

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) {
f1(Math.random());
}
const end = new Date().getTime();
console.log ( end - start );
};

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

CSS: Linear Gradient

SVG: Circle Arc

finally, got it right.

JS: Operators

minor update

• CSS: Units
• HTML Basics

updated

• How to Run JavaScript
• SVG: Font Size

updated

Donald Knuth, Steve Jobs, and the Idiocy of Typography

minor update

CSS: Computed Style

major update

HTML: the Root Element

updated.

CSS: Media Query

improved writing

SVG: ViewBox, User Coordinate's Unit Size

new.

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: Button
• HTML: Input Text Field
• HTML: Password Text Field
• HTML: Textarea
• HTML: Radio Button
• HTML: Checkbox 🗹
• HTML: Selection, Popup Menu
• HTML: Input Range Slider
• HTML: Color Picker

HTML: Character Sets and Encoding

HTML Entity List (updated)

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 Entity List

CSS: Tabbed Menu

minor update

Using Unicode in HTML Attributes (review)

JS: Raining Hearts

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.visibility="hidden";
        newNode.style.position="fixed";
        newNode.style.top="5px";
        newNode.style.left="5px";
        newNode.style.backgroundColor="silver";
        newNode.style.zIndex="5133";
        newNode.style.height= "100%";
        newNode.style.width= "100%";
        newNode.style.overflow="auto";

        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 = "";
            imgLayer.appendChild(newImgNode);
            imgLayer.style.visibility="visible";
        }

        }) ;

    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?

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?

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

todo. not sure how to use RadioNodeList yet.

JavaScript spec size

• JavaScript 2015 spec is 4 mega bytes.
• 2016 is 5.1 M.
• 2018 is 6.7 M. (freezes Safari)

SVG: Circle Arc

SVG: Circle Arc

the idiocy of the SVG ellipse spec

SVG Path: Elliptical Arc

JS: Generator (updated)

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

• JS: Number.prototype.toString

• number to string JS: Convert Decimal/Hexadecimal

• string to int JS: Number.parseInt

• JS: Convert String to Number

converted all call of Object.getPrototypeOf to Reflect.getPrototypeOf

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.

• HTML Frameset HTML: Split Windows; Frameset
• HTML Iframe HTML: Iframe

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

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

• JS: Closure
• JS: Functional Programing
• JS: Prototype and Inheritance

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

Web Design: Problem of Header Linking to Table of Contents

rewritten

todo. review.

• The Problems with CSS
• Anti-bot Test: CAPTCHA!

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

new nav box

Firefox Chinese Serif Font Touches Top CSS Border

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

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 2017-04-24 By Daniel Colin James. At https://hackernoon.com/how-google-collapsed-b6ffa82198ee ]

CSS: Outline