Xah Web Dev Blog

great pong game in JavaScript https://jackrugile.com/pongoo/

HTML: Input Number Field
minor update.

• JS: Branch Control: if then else, switch
• JS: Reflect
• JS: JSON
• JS: Math
• JS: Object.prototype
• JS: Prototype and Inheritance
• JS: Property Key "prototype"

all updated.

updated

• JS: escape
• JS: Encode URL, Escape String
• JS: encodeURI
• JS: the Global Object

JS: Source Code Encoding
updated.

JS: Array.prototype.flat
minor update

• JS: Object Constructor
• JS: Reflect.deleteProperty
• JS: Check Property Existence
• JS: Create/Delete Property

minor updates.

• JS: Property Attributes
• JS: Getter/Setter Properties

major updates.

todo

• JavaScript Style Guide

• JS: Arrow Function
• DOM: Add/Remove Event Handler
• DOM: NodeList vs HTMLCollection

minor updates

updated.

• JS: Understand JS Array
• JS: Create Array
• JS: Sparse Array
• JS: Array-Like Object
• JS: Array How-To
• JS: Range Function for Array
• JS: Array Constructor
• JS: Array.prototype.fill
• JS: Array.prototype.length
• JS: Array.prototype.splice

minor updates

• How to Run JavaScript
• JS: How to Use Browser Console
• JS: Use Object.create to Emulate Constructor
• JS: Delete operator
• JS: NaN
• JS: isNaN
• JS: Number.isNaN

JavaScript NaN === NaN?

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

updated:

• JS: Infinity
• JS: NaN
• JS: undefined

HTML Video Tag
minor update

todo. review, read thru. these now has type link embedded.

• JS: true, false
• JS: Reflect
• JS: undefined
• JS: Infinity
• JS: JSON
• JS: Math
• JS: Boolean.prototype
• JS: Function.prototype
• JS: Number.prototype
• JS: Array.prototype
• JS: Date.prototype
• JS: Map.prototype
• JS: Object.prototype
• JS: RegExp.prototype
• JS: Set.prototype
• JS: String.prototype
• JS: Symbol.prototype

• JS: Global Variable
• JS: Reflect
• JS: Array Object
• JS: Boolean Object
• JS: Date Object
• JS: Function Object
• JS: JSON
• JS: Math
• JS: Number Object
• JS: Object Object
• JS: RegExp Object
• JS: Set Object
• JS: String Object
• JS: Symbol Object

• JS: the Global Object

• JS: What's Strict Mode and How to Determine Strict Mode?
• JS: “this” Binding
• JS: Global Variable
• JS: Map Object
• JS: the Global Object

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

• JS: Number.isNaN
• JS: NaN

the idiocy of programer nerds and typographers

Font Size problem

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>

new.

• JS: Reverse Object Key/Value
• JS: Reverse Key/Value of Map

JS: the Map Object Tutorial

CSS: Letter Spacing, Word Spacing

HTML: Definition List dl dt dd
minor update.

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

New Version of JavaScript in Depth

new version is out. I am sending to past buyers.

If you haven't already, buy at
Buy Xah JavaScript Tutorial

Master JavaScript today.

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

JS: Intro to Event-Based Programing
minor update

Web Design
new nav panel.

brave browser still crashes on macOS catalina. latest version 80.1.4.96

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

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

updated.

• JS: Get URL (window.location)
• JS: Get Cookie, Set Cookie
• HTTP Protocol Tutorial

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.

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

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

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

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.

minor updates

• JS: Array Constructor
• JS: Sparse Array

JavaScript Webpack Bloat

JavaScript installing webpack installs 390 f packages. F JavaScript

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

imgur reactjs bloat

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

svelte.dev

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

JS: Event Delegation

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”

The Story of XML

The rise and fall of XML. Be conservative in what you send; be liberal in what you accept. 2019-10-01

JS: Load Order (major update)