Xah Web Dev Blog
- patreon me $5
- amazon egift card to xah@xahlee.org , $20 is nice.
- paypal to xah@xahlee.org , $20 is nice.
- bitcoin me 19dfoa3Q7oehm9MwCULQzBG8vqfCaeMazH
google adsense skkum, now, if u have adblocker on, the adsense site won't show. happened in past 2 months or so.
added more pic.
toread
CSS Selector Syntax
major update.
JS: for-of Loop
minor update
The proper way to code JavaScript today is deno + TypeScript. No npm and other shit.
updated, and or new code
updated
JS: Browser Info
minor update
todo
minor update.
Web Design: Skeleton Screen
updated
Common Web Fonts added a section on metrically compatible fonts
JavaScript new regex features JS2018, JS2021
Major rewrite on all things JavaScript regex. Some are new pages. Some are features in JS2018, JS2021.
- New Features 2016 to 2020
- RegExp Tutorial
- Regex Functions
- RegExp Syntax
- RegExp Flags
- RegExp Object
- RegExp.prototype
- String.prototype.split
- String.prototype.search
- String.prototype.match
- String.prototype.matchAll
- String.prototype.replace
- String.prototype.replaceAll
- RegExp.prototype.test
- RegExp.prototype.exec
also updated:
CSS: Outline
minor update
CSS. now ban ex
unit on my site. I recommend, the ONLY unit to use in CSS is px rem ch vw vh vmin vmax.
CSS: Units updated.
JS2018. Spread operator on object. Destructuring with rest operator on object.
major updates.
JS: Object.assign
updated.
HTML Entity List
minor update
Donald Knuth, Steve Jobs, and the Idiocy of Typography
added a Xah Talk Show video.
How to Run JavaScript updated. add deno
todo, need to write a JavaScript mapThread or zip function.
/* [ xah_is_array_equal(array1, array2) Return true if 2 array are equal. Allow array-like object. Allow nested array. http://xahlee.info/js/js_comparison_equality_test_objects.html version 2019-04-24 ] */ const xah_is_array_equal = ((array1, array2) => { if (Array.isArray(array1) !== Array.isArray(array2)) return false; if (array1.length !== array2.length) return false; return Array.prototype.every.call( array1, ((x, i) => { const y = array2[i]; if (Array.isArray(x)) { if (!Array.isArray(y)) { return false; } else { return xah_is_array_equal(x, y); } } else if (typeof x === "object" && typeof x !== null) { if (!(typeof y === "object" && typeof y !== null)) { return false; } else { return xah_is_obj_equal(x, y); } } else { return (x === y); } }), ); }); /* [ xah_is_obj_equal(obj1, obj2) Return true if 2 objects are equal. Equal here means deep compare enumerable properties of object http://xahlee.info/js/js_comparison_equality_test_objects.html version 2019-04-24 ] */ const xah_is_obj_equal = ((obj1, obj2) => { const keys1 = Object.keys(obj1).sort(); const keys2 = Object.keys(obj2).sort(); if (keys1.length !== keys2.length) return false; if (!keys1.every(((k, i) => (k === keys2[i])))) return false; return keys1.every( ((kk) => { const v1 = obj1[kk]; const v2 = obj2[kk]; if (Array.isArray(v1)) { return xah_is_array_equal(v1, v2); } else if (typeof v1 === "object" && v1 !== null) { return xah_is_obj_equal(v1, v2); } else { return v1 === v2; } }), ); }); /* [ xah_get_proto_chain(obj) Take any object, returns a array, the order of elements shows the proto chain. First element is obj itself, last element is root. http://xahlee.info/js/js_show_prototype_chain.html Version 2020-06-25 ] */ const xah_get_proto_chain = ((x) => { const result = [x]; let t = x; while ((t = Reflect.getPrototypeOf(t)) !== null) result.push(t); return result; }); // test const o1 = { k: 1 }; const o2 = Object.create(o1); o2.k = 2; const o3 = Object.create(o2); o3.k = 3; Object.create( Object.create( Object.create(Object.prototype, { "k1": { value: 1, writable: true, enumerable: true, configurable: true }, }), { "k2": { value: 2, writable: true, enumerable: true, configurable: true }, }, ), { "k3": { value: 3, writable: true, enumerable: true, configurable: true }, }, ); console.log(xah_get_proto_chain(o3)); // [ { k: 3 }, { k: 2 }, { k: 1 }, {} ] // [ o3, o2, o1, Object.prototype ]
also, the code shows example of imperative vs function style, where the latter is ugly in JavaScript.
major updates:
JavaScript in Depth
new logo.
JavaScript, deno is great. It does not support
__proto__
.
// 2020-09-13 console.log( Reflect.apply ( Object.prototype.hasOwnProperty , Object.prototype, ["__proto__"] ) ); // false in deno // true in browser and nodejs
major rework on JavaScript in Depth
now most definitions uses a new indent format.

currently working on new features in ES2020, and complete some ES2019 and before features.
Xah Talk Show 2020-09-06 on JavaScript, Node.js, Deno, NPM, HTML/CSS
Xah Talk Show 2020-08-11, JavaScript Live Code Rot13 Cipher App
HTML Timeline
old. repost
updated.
map of maps of maps in JavaScript

added a nested map example at JS: Map Object Tutorial
- check for horizontal scrollbar in phone CSS: Data URI Scheme
- review CSS: font-size
CSS: Units
updated
CSS: Flowing List
updated
HTML: Ruby Tag
updated
HTML: Marquee, Scrolling Text
updated
W3C HTML Validator Invalid
repost
repost
CSS Selector Syntax
repost
JS: Reflect.set
added example using this
binding.
JS: Getter/Setter Properties
added a section on this
binding.
JS: Reflect.construct
major rewrite.
Buy Followers Scam
repost
Access Property
minor format update
CSS Text Alignment, Justification
minor update
- added a panel to the Global Object
and minor updates to
minor updates
See also: null
minor updates. interactive css code generators.
major update to the JavaScript Object Reference section. Mostly formatting issues.
change
Object.getPrototypeOf
to
Reflect.getPrototypeOf
- Show Prototype Chain
- Prototype and Inheritance
- Array.prototype
- Object.prototype.isPrototypeOf
- Object.prototype.__proto__
- Object.create
- Property Key "prototype"
- Property Key “constructor”
- Generator Function
- Class
- Arrow Function
See also:
random articles, reviewed
Array.prototype.reduce
updated.
Empty array is error, unless there's 2nd arg
HTML Entity List
minor update.
- Keyword “extends”
- Keyword “super”
- Property Key "prototype"
- Function.prototype.call
- Create Object with Parent X
- Object.assign
- Array.prototype.reduce
updated.
HTML Frameset Tutorial
added chrome browser screenshot
now, you can buy my JavaScript tutorial using amazon. Buy JavaScript in Depth
spectacular plane curves in JavaScript, by mathematician Hermann Karcher http://virtualmathmuseum.org/Curves/index.html
great pong game in JavaScript
https://jackrugile.com/pongoo/
HTML: Input Number Field
minor update.
- Branch Control: if then else, switch
- Reflect
- JSON
- Math
- Object.prototype
- Prototype and Inheritance
- Property Key "prototype"
all updated.
updated
Source Code Encoding
updated.
Array.prototype.flat
minor update
minor updates.
major updates.
minor updates
updated.
minor updates
JavaScript NaN === NaN?
JavaScript try this in your browser console
NaN === NaN
did you guess right?
updated:
HTML Video Tag
minor update
JavaScript what's the difference between isNaN(num) and Number.isNaN(num)
JavaScript trivia.
what's the difference between
isNaN(num)
and
Number.isNaN(num)
answer at
the idiocy of programer nerds and typographers
Firefox button size changes background color
idiotic Firefox. if you change button size, it changes the background color.

<ul> <li><button style="font-size:1rem;" type="button">1</button></li> <li><button style="font-size:1.1rem;" type="button">2</button></li> <li><button style="font-size:1.2rem;" type="button">3</button></li> </ul>
new.
HTML: Definition List dl dt dd
minor update.
CSS: “:before”, “:after”
minor update
New Version of JavaScript in Depth
new version is out. I am sending to past buyers.
If you haven't already, buy at
Buy JavaScript in Depth
Master JavaScript today.
random tip today
CSS Selector Syntax
when i work on my site, i use my own tutorials and references often
so i was just looking at CSS to see how can i format table better for small screen
Intro to Event-Based Programing
minor update
Web Design
new nav panel.
brave browser still crashes on macOS catalina. latest version 80.1.4.96
w3c and whatwg finally merged their html spec

w3c and whatwg finally merged their html spec. No more diff specs. Also, many links to w3c html spec now redirect to whatwg. e.g. https://www.w3.org/TR/html/syntax.html#void-elements
major update to my JavaScript tutorial's navigation panel.
Have a look
JavaScript in Depth
updated.
Google's webp is a virus
Google's webp is a virus. It's now used by amazon when you are in chrome. Firefox now supports webp too. Apple still doesn't. Not in Safari, not in image preview, etc.
dot product of n vectors of any dimension
so yester we did JavaScript dot product of n vectors of any dimension
const vecDot = (( ... vectors) => vectors . reduce ((v1, v2) => v1. map ((x,i) => x * v2[i])) . reduce ( (a,b) => (a+b)) );
supreme code
Xah Talk Show
hand writing Chinese, JavaScript coding vector dot product function style, intro to constructed language 2019-12-14
Xah Talk Show
JavaScript+SVG live coding+tutorial. creating polyhedron real-time rotation from scratch 2019-11-23
Xah Talk Show Geometry regular polyhedron, JavaScript + SVG tutorial, rotate 3D cube real time 2019-11-15
The Garbage Webpack Wants You to Do
the garbage webpack wants you to do. basically, they are normalizing hack. creating hack solution to solve problem. like unix did to industry.

i think webpack basic features a great, e.g. bundling, removing unused code, minimize js, etc.
but they tried to basically change the JavaScript lang, by importing css, image, font etc Using JavaScript import syntax. to move image css etc seems a major hack. Moving file and dealing with html images is a complete different category of task then JavaScript import/export modules.
they try to make the dependency clear. but the way they did is a hack job, seems they are popularizing the practice by the tool.
that's how programing industry becomes garbage.
minor updates
JavaScript Webpack Bloat
JavaScript installing webpack installs 390 f packages. F JavaScript

following webpack official tutorial, 7 lines of code (213 bytes) becomes 134 lines 565k. jesus.

imgur reactjs bloat
imgur has become rotten since about 2017. Since, you can't view images with JavaScript off.

svelte.dev
this is supposed to be the latest and greatest, better than angular react vue https://svelte.dev

npm choke 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”

Load Order (major update)