Xah Web Dev Blog

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!

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

• UI Design, Which is Better? One Single Way to Reach a Command or Multiple Ways?
• Windows User Interface Design: Accidental Hide Windows

• Windows Sucks
• Windows Marketing Popup

• Windows 10 Flat Design Sucks
• User Interface Design Criterions
• Windows 10 Still Using Bitmap Font
• Windows Elevation Prompt Idiocy
• Windows Taskbar Sucks
• Why Windows User Interface Suck
• User Interface Design Criterions

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"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
>

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

• https://www.xml.com/pub/a/1999/01/namespaces.html
• [ Persistent uniform resource locator ] [ 2021-09-20 https://en.wikipedia.org/wiki/Persistent_uniform_resource_locator ]

Common Web Fonts

here's how to disable a link.

a { pointer-events:none; }

• JavaScript: Image Rollover
• JavaScript: Pre-Cache Images

xtodo 2021-08-07 some old to review

• JavaScript Books Review 2018
• CSS1 and CSS2 Differences
• What is a Letter in CSS's first-letter Pseudo-element?
• CSS Pixel Ruler
• CSS Trick: Display Language Name in Code Snippet
• CSS 2 Named System Colors
• CSS Shapes
• DOM: .appendChild
• DOM: insertAdjacentElement
• Why DOM Suck
• HTML: Input Tag
• HTML: using Object tag for Iframe
• Web Browser Rendering Behavior: img Inside Anchor Link No Longer Has Border by Default
• JavaScript: Functional Programing (old, pre-JS2015)
• JavaScript: Should You Move Variables to the Top?
• JavaScript: Round/Truncate Number
• jQuery Tutorial: Selectors
• JavaScript: Douglas Crockford the Better Parts: the Bads Parts Reconsidered
• JavaScript: Reflect.enumerate
• JavaScript: Get Max/Min Value of Array
• HTML Canvas Reference
• JavaScript: Creating Nodes, Functional Programing Style
• JavaScript: How to Detect Adobe Flash, QuickTime?
• JavaScript: Dollar Sign in JavaScript
• JavaScript: Instant Form Field Validation
• HTML FORM Validation with JavaScript

Idiotic user interface design.

• You don't know what the check mark is for.
• You don't know if check mark can is a button or not. (Click it sometimes do nothing, depending on your current audio config.)
• You don't know what the mic icon is for. Don't know if it can be clicked.

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.

• CSS Position: static, relative, fixed, absolute
• CSS: Fix Element to Window
• CSS: Position: Relative
• CSS: Absolute Position
• CSS: Text Over Image
• CSS: z-index
• JavaScript: How to Create Tooltip
• JavaScript: Raining Hearts

updated.

[JavaScript: the first 20 years 2021-06-29 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

• HTML: Figure Tag
• HTML: Image Tag
• JS: String.prototype.match
• JS: Getter/Setter Properties
• HTML/CSS Case Sensitivity

minor updates.

Worst World Clock User interface Design

new.

• JS: Sort Map
• JS: Truncate Map
• JS: Iterate String

• JS: Set.prototype.values

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

• JS: the Global Object
• JS: Array Basics
• JS: Array Overview
• JS: Value Types
• JS: let Declaration
• JS: Define Function
• JS: Property Overview
• JS: Object Overview
• JS: Interface
• JS: Date Tutorial
• JS: Function Chaining
• JS: Function Argument Destructure
• JS: String Overview
• JS: Convert String/Number

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

• https://tonsky.me/blog/font-size/
• [ Web beacon ] [ 2021-03-10 https://en.wikipedia.org/wiki/Web_beacon ]

All About Google
minor update.

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

Web Tech Gossip

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

• https://fetch.spec.whatwg.org/
• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

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.

• JS: Convert Object to/from Map
• JS: Object.fromEntries
• JS: Iterate Over Map Object

updated, and or new code

• TypeScript Tutorial
• TypeScript Misc Notes

updated

JS: Browser Info
minor update

todo

HTML: Picture Tag

HTML: Image Tag

• CSS: Reset, Default Values
• HTML Tags Complete List
• HTML: s strike del Tags

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
• RegExp 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:

• String.fromCodePoint
• String.prototype.codePointAt
• Iterator
• Iterable

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: Spread Operator
• JS: Destructuring Assignment
• JS: Function Argument Destructure

JS: Object.assign
updated.

JS: Nullish Coalescing Operator

• new JS: Optional Chaining Operator
• updated JS: Property Dot Notation vs Bracket Notation

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:

• Xah JavaScript Style Guide for Functional Programers
• JS: Delete operator
• JS: Sparse Array
• JS: Array.prototype.length
• JS: true/false
• JS: Operators
• JS: Equality

• JS: Range Function for Array
• JS: Random Array Element, Randomize Array
• JS: Random Number Function
• JS: Test Equality of Objects
• JS: Array How-To
• JS: Clone, Deep Copy Object/Array
• JS: Show Prototype Chain

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

JS: Object.prototype.__proto__

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.

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

• JS: RegExp Object
• JS: RegExp Constructor

updated.

map of maps of maps in JavaScript

added a nested map example at JS: Map Object Tutorial

• review What is 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

updated

• CSS: Units
• CSS: Flowing List
• HTML: Ruby Tag
• HTML: Marquee, Scrolling Text

W3C HTML Validator Invalid
repost