Xah Web Dev Blog

patreon me $5 https://www.patreon.com/xahlee
amazon egift card https://www.amazon.com/gp/product/B004LLIKVU to xah@xahlee.org , $20 is nice.
https://www.paypal.com/ to xah@xahlee.org , $20 is nice.
bitcoin me 19dfoa3Q7oehm9MwCULQzBG8vqfCaeMazH

Xah Web Dev Blog Archive

2019-07-12

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.

2019-07-05

HTML Frameset Tutorial

major update

2019-07-03

HTML: Email Field 📧

2019-07-02

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

see HTML: Split Windows; Frameset

2019-06-29

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

updated

2019-06-28

interactive text shadow generator

2019-06-27

2019-06-26

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

2019-06-25

2019-06-24

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.

2019-06-24

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

2019-06-23

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

2019-06-23

gradient generator 2019-06-24 v7sk8 — gradient generator 2019-06-24

CSS: Linear Gradient

2019-06-19

SVG: Circle Arc

finally, got it right.

2019-06-19

JS: Operators

minor update

2019-06-18

updated

2019-06-12

updated

2019-06-10

Donald Knuth, Steve Jobs, and the Idiocy of Typography

minor update

2019-06-10

CSS: Computed Style

major update

2019-06-10

HTML: the Root Element

updated.

2019-06-10

CSS: Media Query

improved writing

2019-06-10

SVG: ViewBox, User Coordinate's Unit Size

new.

2019-06-09

Browser War, Mobile Passed Desktop Since ~2016

2019-06-09

HTML: Viewport Meta

2019-06-09

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

2019-06-07

New Tutorial Pages on HTML GUI

with JavaScript code showing result in realtime

2019-06-07

HTML: Character Sets and Encoding

2019-06-07

HTML Entity List (updated)

2019-06-06

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

2019-06-06

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

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

HTML Entity List

2019-06-01

CSS: Tabbed Menu

minor update

2019-06-01

Using Unicode in HTML Attributes (review)

2019-06-01

JS: Raining Hearts

major update. still to tweak. todo

2019-06-01

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);

}

2019-06-01

JS: Load Order

minor update to this and other pages at DOM Scripting Tutorial

2019-05-29

DOM: NodeList vs HTMLCollection (major update)

2019-05-27

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

2019-05-27

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?

2019-05-27

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?

2019-05-26

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

2019-05-23

JS: the Set Object Tutorial (minor update)

2019-05-21

JS: Reverse Key Value of Map Obj

2019-05-21

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

see JS: Map.prototype.forEach

2019-05-20

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

2019-05-19

todo. not sure how to use RadioNodeList yet.

2019-05-11

JavaScript spec size

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

2019-05-18

SVG: Circle Arc

2019-05-09

the idiocy of the SVG ellipse spec

SVG Path: Elliptical Arc

2019-05-05

JS: Generator (updated)

2019-05-04

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.

2019-05-02

JS: Iterator (updated)

2019-05-01

JS: “typeof” Operator (updated)

2019-04-28

JavaScript String Problem

2019-04-27

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

2019-04-25

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.

2019-04-25

JS: Array.prototype.flat (new)

2019-04-22

number faq

JS: Number.prototype.toString

number to string JS: Convert Decimal/Hexadecimal

string to int JS: Number.parseInt

JS: Convert String to Number

2019-04-17

converted all call of Object.getPrototypeOf to Reflect.getPrototypeOf

JS: Reflect.getPrototypeOf

2019-04-13

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

2019-04-10

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

2019-04-07

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/

2019-03-24

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.

2019-03-17

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

2019-03-05

Google Webfont Tutorial (minor update)

2019-02-26

CSS: user-select

2019-02-23

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.

2019-02-21

old articles