Xah Web Dev Blog 2019-05

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

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

updated

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: 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.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?

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)

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