xahlee js todo

todo. review, read thru. these now has type link embedded.




todo

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

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

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

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

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

}
RadioNodeList 2019-05-18 287mb
RadioNodeList 2019-05-18

not sure how to use RadioNodeList yet.

orphan or remove panel

some needs to have back link to global obj.

some needs to have back link to some xah lib.


and some

todo. need to remove the nav panel: <div class="lpanel_h7h547"> <h4>Web Dev Tutorials</h4>

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.

JavaScript

js tutorial things.

2019-06-02 write a setTimeout and setInterval tutorial.

this page, possibly need more examples. CSS Selector Syntax for example, select all checked boxes. also, distinguish pseudo class and pseudo element

2018-11-01 finish

old, to review:

need to go thru all links in HTML5 Tags Complete List and make sure all has examples of those none. HTML5 Tags Complete List

2019-06-09 JS: Number.prototype on the type section, remove the // comment. also, maybe remove the Object.prototype.toString.call line. check all such pages. do all.

figure out why

console.log (
Reflect.apply ( Object.prototype.toString , Boolean.prototype , [] ) === "[object Boolean]"
); // true

console.log (
Object.prototype.valueOf.call ( Boolean.prototype )
); // [Boolean: false]

console.log (
Reflect.apply ( Boolean.prototype.valueOf ,  Boolean.prototype , [] ) === false
); // true

JS: Boolean.prototype

JavaScript Math and Plot Libs

several math and plot related JavaScript libs to read.

all these are probably very good.

d3 and rollup.js https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4

d3 https://github.com/d3/d3

function-plot https://github.com/mauriciopoppe/function-plot/

mathjs http://mathjs.org/index.html

stack.gl http://stack.gl

plotly.js https://github.com/plotly/plotly.js

propel https://github.com/propelml/propel

complex function phase portrait https://www.shadertoy.com/view/XsVczh

great article [Modern JavaScript Explained For Dinosaurs By Peter Jang. At https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70 ]