Xah Web Dev Blog

/* [
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.

2020-10-01

major updates:

2020-10-01

JavaScript in Depth
new logo.

∑ JS ^{in Depth}
XAH BUY NOW

2020-09-13

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

JS: Object.prototype.__proto__

2020-09-10

major rework on JavaScript in Depth

now most definitions uses a new indent format.

def format change npjMG qptwN — programing language tutorial formats

currently working on new features in ES2020, and complete some ES2019 and before features.

∑ JS ^{in Depth}
XAH BUY NOW

2020-09-06

Xah Talk Show 2020-09-06 on JavaScript, Node.js, Deno, NPM, HTML/CSS

2020-08-24

JS: Class Without Class Keyword

2020-08-23

JS: Class

2020-08-11

Xah Talk Show 2020-08-11, JavaScript Live Code Rot13 Cipher App

2020-08-10

HTML Timeline
old. repost

2020-08-08

updated.

2020-08-08

map of maps of maps in JavaScript

added a nested map example at JS: Map Object Tutorial

2020-08-05

review What's a Letter in CSS's first-letter Pseudo-element?

check for horizontal scrollbar in phone CSS: Data URI Scheme

review CSS: font-size

CSS: Data URI Scheme

2020-08-05

CSS: Units
updated

2020-08-05

CSS: Flowing List
updated

2020-08-05

HTML: Ruby Tag
updated

2020-08-05

HTML: Marquee, Scrolling Text
updated

2020-08-03

W3C HTML Validator Invalid
repost

2020-07-22

repost

2020-07-17

JavaScript Factorial

2020-07-16

CSS Selector Syntax
repost

2020-07-14

WebGL Demo: Brisk Hindsight

2020-07-07

JS: Reflect.set
added example using this binding.

2020-07-07

JS: Getter/Setter Properties
added a section on this binding.

2020-07-06

JS: Reflect.construct
major rewrite.

2020-07-06

Buy Followers Scam
repost

2020-07-05

Access Property
minor format update

2020-07-04

Evolution of the Script Tag

2020-07-04

CSS Text Alignment, Justification
minor update

2020-07-02

added a panel to the Global Object

and minor updates to

2020-07-02

minor updates

JavaScript NaN === NaN?

JavaScript try this in your browser console NaN === NaN did you guess right?

updated:

2020-04-30

HTML Video Tag
minor update

2020-04-22

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

2020-04-22

the idiocy of programer nerds and typographers

Font Size problem

2020-04-22

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>

2020-04-21

new.

2020-04-16

the Map Object Tutorial

2020-04-11

CSS: Letter Spacing, Word Spacing

2020-04-11

HTML: Definition List dl dt dd
minor update.

2020-04-11

CSS: “:before”, “:after”
minor update

2020-03-26

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.

2020-03-19

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

2020-03-18

Intro to Event-Based Programing
minor update

2020-03-17

Web Design
new nav panel.

2020-03-11

brave browser still crashes on macOS catalina. latest version 80.1.4.96

2020-03-09

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

2020-02-20

major update to my JavaScript tutorial's navigation panel. Have a look
JavaScript in Depth

2020-02-18

updated.

2020-02-18

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.

2019-12-15

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

2019-11-23

Xah Talk Show
JavaScript+SVG live coding+tutorial. creating polyhedron real-time rotation from scratch 2019-11-23

2019-11-15

Xah Talk Show Geometry regular polyhedron, JavaScript + SVG tutorial, rotate 3D cube real time 2019-11-15

2019-11-01

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.

2019-10-31

minor updates

2019-10-29

JavaScript Webpack Bloat

JavaScript installing webpack installs 390 f packages. F JavaScript

js npm webpack install 2019-10-29 krjs9 — js npm webpack install 2019-10-29

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

webpackjs generated bloat 2019-10-30 n324t — webpackjs generated bloat 2019-10-30

2019-10-20

imgur reactjs bloat

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

2019-10-16

svelte.dev

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

2019-10-04

Event Delegation

2019-10-01

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”