Xah Web Dev Blog 2018-08

JS: String.prototype.replace

major update. added list of special chars in replace string, and example of replace all.

JS: Reflect.ownKeys. updated

BigInt is coming to JavaScript.

CSS: Units better explanation of vw

CSS: Fixed Aspect Ratio

JS: Find element Size

improved writing, links.

DOM: Difference Between textContent, innerHTML, innerText, nodeValue

updated to es2015

CSS Pseudo Class vs Pseudo Element

CSS Pseudo Class vs Pseudo Element

JS: Prototype and Inheritance

major rewrite. and also

Chinese website, trying to prevent people from copying the lyrics

chinese website hide lyrics 2018-07-25 e5eb5
lol. Chinese website, trying to prevent people from copying the lyrics.

note, lyrics sites, is contentious. In past 10+ years, many sites tried to be THE lyrics site. The internet things is that, at first, it's legally edgy (example: google image search), but after a while, everybody's doing it, unstoppable, became popularity contest.

then about 3 years ago ~2015, Google wiped them all out. Now when you search lyrics, google shows snippets right there, linked right to google lyrics page with Google music store.

JavaScript dom pain. what's the point of querySelectorAll if result is not live?

#JavaScript dom pain. what's the point of querySelectorAll if result is not live? example: u have a list, you found the item, want to color red. you can't cuz it's not live. workaround: add id to each element. Now, get the id of found item, then by id, color it.

js query select solution 2018-07-25 1752e
js query select solution 2018-07-25 1752e

JS: RegExp Tutorial

improved writing. More examples.

JS: Reflect.apply

JS: Symbol Tutorial (minor rewrite)

What's the difference between __proto__ vs getPrototypeOf()

see JS: Object.prototype.__proto__

JS: Class

now extensivly modified. Now, it is complete.

the following are in draft stage:

JavaScript class without keywords class new this

JS: Class updated

Shadow Dom

here's shadow dom. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

it seems rather useless. the purpose is to define custom tag such that you can use it like <xyz>…</xyz> without lots nested tags and css.

JS: const Declaration (updated to include info about prevent add/delete/change properties)

WHATWG vs W3C Split

For the past 30 years, unix hacker types are FOR “Standard”. They'll flash the STANDARD card, usually in context of dissing Microsoft. In past 10 yrs, the millennials gen, not so much. Look at JavaScript scene, npm, git, github, react, d3js, pop is king.

a glimpse into reactjs innards

https://github.com/facebook/react/blob/5a17a1ef1d77f0a99cb708adde283275b7eb49fd/src/renderers/dom/client/utils/DOMLazyTree.js#L17-L27

Web Design Index

HTML Validation, History and Politics

what's with ./ in front of relative path?

in recent years, the web standard or such seems to require ./ in front of relative path, e.g. <script type="module" src="./main.js"></script> else it's error. anyone know why? link? thanks

See also: JS: Import/Export

wtf does this mean in JavaScript? 「const { PI } = Math」

wtf does this mean in JavaScript? const { PI } = Math;

am so fk sk of js fk.

turns out it's destructuring assignment. very creative use.

[see JS: Destructuring Assignment]

it's destructurining no structure. imagine that. Why the young idiots can't write

const PI = Math.PI;
const { PI } = Math;

jesus, it's 1 char longer. #JavaScript

by the way, its from a example code of nodejs's official doc on module https://nodejs.org/docs/latest-v10.x/api/modules.html#modules_modules

JavaScript framework popularity 2018

js framework popularity 2018 be65e
JavaScript framework popularity 2018. Reactjs is way ahead. everything else is history [image source https://www.npmjs.com/npm/state-of-javascript-frameworks-2017-part-1]

speed comparison: creating element vs creating object

does any know the cost of creating obj and DOM element? not talking about inserting dom into the page, or causing it to render. just about creating dom off page. how expensive is it?

i didn't get any useful answer.

here's a simple test.

// 2018-07-04
// simple speed test comparing speed of
// creating element and append child
// vs
// creating empty object and append to array

const nn = 5000;
const xx = document. createElement("div");
const start1 = new Date().getTime();
for (let i = 0; i < nn; i++) { xx.appendChild (document. createElement("div")); }
const end1 = new Date().getTime();
const result1 = ( end1 - start1);

const yy = [];
const start2 = new Date().getTime();
for (let i = 0; i < nn; i++) { yy.push ({}); }
const end2 = new Date().getTime();
const result2 = ( end2 - start2);

console.log (  result1 , result2)

// it seems creating element is few times slower than creating empty object...
loading react from nodejs 2018-07-02 44414
loading react from nodejs 2018-07-02

JavaScript Graphics Lib Geometry Intermediate Language Problem

js svg lib geometry int lang problem 346a6
JavaScript Graphics Lib Geometry Intermediate Language Problem

one major problem in designing a #JavaScript lib for graphics is whether to have a intermediate language. #d3js says no, but now studying #reactjs, it says yes. #svg

it seems, studying #reactjs provides many answers to my javascript graphics framework design problems. am inclined to believe in reactjs ways, and screw the #d3js fak

the best reactjs tutorial

the best #reactjs tutorial is this https://reactjs.org/docs/hello-world.html this is best for, you are already expert of JavaScript, and you want to understand exactly what react does. Not some do this get that style of tutorials that's everywhere.

CSS: Display Property

CSS Display Property tutorial, first draft. CSS is one of the most complexxx fk

CSS: 2D Transform

JavaScript terminology, data object? object object?

ok, the JavaScript spec calls “data object”, example: {key1:1, key2:2}, as “object object”. ok, that's the jargon am gonna stick with.

JS: Object Type

Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method

Visual CSS major rework.

css border 2018-06-23 13a50

CSS: Border. new

CSS: Margin vs Padding. updated

CSS: Box Sizing

CSS: Media Query (minor update)

CSS: calc

JS: Character, Code Unit, Codepoint (major rewrite)

functional programing math unit vector speed quiz

2 #math unit vector f in #JavaScript. the 2nd works in any dimen. Quiz, their speed diff is constant or linear, for n calls of 2d vector input?

f=([a,b])=>((l)=>[a/l,b/l])(Math.hypot(...[a,b]));
g=v=>((l)=>v.map(((e)=>e/l)))(Math.hypot(...v));

console.log ( f([3,4]) );
console.log ( g([3,4]) );
console.log ( g([3,4,5]) );

// [ 0.6, 0.8 ]
// [ 0.6, 0.8 ]
// [ 0.4242640687119285, 0.565685424949238, 0.7071067811865475 ]

#xahcode

vote at twitter xah_lee

CSS: Background Image (updated)

#javascript a tale of 2 styles

const unit_vector1 = (([v1,v2]) => {const len = Math.hypot(...[v1,v2]); return [v1/len, v2/len];});

const unit_vector2 = (([v1,v2]) => ((len) => [v1/len, v2/len])(Math.hypot(...[v1,v2])));

which you prefer? reply or vote on twitter at twitter xah_lee

const reverse_obj_key_val = ((obj) => {
// given a obj, return a new obj that has its key and value reversed. If values are not unique, the previous is overwritten. 2018-06-04
const result = {};
Object.keys ( obj ). forEach ( ((x) => { result[obj[x]] = x }));
return result;
 });

JS: Class

major update

JS: Operator “new” (added a typical use example)

2018-06-01 to read Content Security Policy

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