Xah Web Dev Blog

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

• https://www.xml.com/pub/a/1999/01/namespaces.html
• 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

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 Entity List
• 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.
User Interface Design: Peepshow Windows
new screenshot.

read

• https://tonsky.me/blog/font-size/
• 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

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

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

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

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 Style Guide
• 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