Xah Web Dev Blog

Xah Web Dev Blog Archive

Stopping this blog. This web dev blog began in 2010-01. [see Xah Web Dev Blog 2010-01] It was split from Xah Programing Blog. Because i was dying of hunger and wanted to get peanuts from Google Ads. Now, no more. Read web dev stuff at my main programing blog.

How to Make Your Website Dark Theme

Ok guys. Remove cache, now xah site support dark theme! Still going thru testing stage. So if u find problems, tell it. Thank you!

xah site dark theme 2022-01-08
xah site dark theme 2022-01-08

Web Design Hack: Unicode Private Area Character as Icon

WHATWG vs W3C Split

Internet Explorer Anime Girl

Xah JavaScript Style Guide for Functional Programers

HTML Entity List updated.

JS: Copy Text

The windows file explorer faaak. you have Ctrl+l and Alt+d to select the file path. But if u presse tab by mistake, the focus went to the search box, and both the key shortcuts don't work no more. If you Shift+Tab back, it still doesn't work. because now your focus is on the widget in the path field. Faaak windows. Faaaking idiotic in every way.

Mouse Cursor History (and why I made my own)
Nov 5, 2018

Web Domain Farm Spam

xtodo 2021-09-20 read

find out in svg spec just what these are

<?xml version="1.0" encoding="UTF-8"?>
<svg width="901" height="303" version="1.1"


Common Web Fonts

here's how to disable a link.

a { pointer-events:none; }

xtodo 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.


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


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.
UI Design: Peepshow Windows
new screenshot.

xtodo read

All About Google
minor update.

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

Web Tech Gossip

disqus ad spam
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.

Internet Explorer Anime Girl

xtodo 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


Internet Explorer Anime Girl

JS: Browser Info
minor update


HTML: Picture Tag

HTML: Image Tag

minor update.

Web Design: Skeleton Screen

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

JS: Nullish Coalescing Operator

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.
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(
    ((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
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;

/* [
Take any object, returns a array, the order of elements shows the proto chain. First element is obj itself, last element is root.
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.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 },

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

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


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


W3C HTML Validator Invalid

Xah Web Dev Blog Archive