Xah Web Dev Blog

Xah Web Dev Blog Archive

2021-09-20 read

find out in svg spec just what these are

<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="210.7" width="630.7" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">

Common Web Fonts

here's how to disable a link.

a { pointer-events:none; }

2021-08-07 some old to review

ui design on off msi realtek 2021-07-31
ui design on off msi realtek 2021-07-31

Idiotic user interface design.

The check mark is actually a on/off toggle button. It should be 2 check mark boxes, one labled On, the other Off, with current state checked.

javadoc no more frames 2021-07-29
javadoc no more frames 2021-07-29
need a page on list, nested list.

updated.

facebook_browser_console_warning_2017-03-10-s250
Facebook Browser Console Warning
Windows10 defender firewall block 2021-06-29
Windows10 defender firewall block 2021-06-29

[JavaScript: the first 20 years By Allen Wirfs-Brock , Brendan Eich. At https://dl.acm.org/doi/10.1145/3386327 ]

new build of JavaScript in Depth is out. Buy JavaScript in Depth you buy it!

Windows 10 Still Using Bitmap Font

minor updates.

Worst World Clock User interface Design

new.

Updated. Change panel organization. Added lots grouped topic navigation panels at bottom of each page.

XahTV 2021-04-10 JavaScript Live Coding an Interactive Bigrams Count

i have a 27 inches screen. modern app uiux faak force it to 3 inches.
User Interface Design: Peepshow Windows
new screenshot.

read

All About Google
minor update.

“gotham”, 3d rotation. JavaScript, canvas, webgl. https://codepen.io/ge1doot/full/OJRQLMY

Web Tech Gossip

disqus_ad_spam_2017-04-30-s250
disqus ad spam
html5rocks_hip_hand_sign_2015
Google Html5Rocks

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.

ms_silverlight_girl_taiwan-s250
Internet Explorer Anime Girl

toread

Centering with CSS

All About Google

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

Internet_Explorer_anime_girl-s250
Internet Explorer Anime Girl

JS: Browser Info
minor update

todo

HTML: Picture Tag

HTML: Image Tag

minor update.

Web Design: Skeleton Screen
updated

Windows_10_thin_border_2021-02-11
Metro Flat Design Sucks

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.

also updated:

CSS: Outline
minor update

Chinese Font

CSS: Multi-Column/Newspaper Layout

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.

JS: Nullish Coalescing Operator

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.

JS in Depth
XAH  BUY NOW

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__

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

XahTV 2020-09-06 on JavaScript, Node.js, Deno, NPM, HTML/CSS

JS: Class Without Class Keyword

JS: Class

XahTV 2020-08-11, JavaScript Live Code Rot13 Cipher App

HTML Timeline
old. repost

updated.

map of maps of maps in JavaScript

js nested map 2020-08-08 4jC2n
js nested map 2020-08-08

added a nested map example at JS: Map Object Tutorial

updated

W3C HTML Validator Invalid
repost

Xah Web Dev Blog Archive