Xah Web Dev Blog

skeleton screen

about few weeks ago, when you load YouTube, it start with gray boxes that are later filled with text. I suppose it's implementation change starting with some kinda template? anyone can give detail? #xahcode

turns out, it's called skeleton screen, a new fad.

you can search that phrase and lots articles will turn up.

it actually slows the page down, and adds bloat.

the web designer gurus, are always the most idiotic. They made things worse and worse over the past 20 years.

UI design, pie menu

[Pie Menus: A 30 Year Retrospective 2018-05-15 By Don Hopkins, Ground Up Software. At https://medium.com/@donhopkins/pie-menus-936fed383ff1 ]

am fond of pie menu. in Second Life, which i lived in from 2007 to 2012, uses pie menu. It's simpler, easier, faster to use.

perhaps it's fair to say, the spirit of pie menu today lives in phone ui, e.g. a bunch of spacial squares, especially in Microsoft Windows 10's window menu, or somewhat in browser menus at right top corner.

by the way, the author Don Hopkin is a emacs oldbie. He ported sim city to x11. He wrote

The X-Windows Disaster

a chapter in The Unix-Haters Handbook. see The Unix-Haters Handbook

note, it used to be, any hacker have read them. Along with Worth Is Better.

he ranted on emacs change to visual lines, 5 years ago.

Rants on Emacs Visual Lines by Don Hopkins and Mark Crispin

this is originally posted to reddit discussion https://www.reddit.com/r/emacs/comments/8kkite/history_pie_menus_a_30_year_retrospective_don/dz9vozi/

JavaScript Books Review 2018

major update

• JS: Object.create
• JS: Reflect.has

updated.

• JS: Getter/Setter Properties
• DOM: Remove Element's Attribute Value

updated

CSS Variable

• DOM: Basic DOM Methods
• DOM: List/Add/Remove Class Attribute
• DOM: .insertAdjacentElement

updated

phone browser opaque smart behavior

seems there's opaque algorithm when phone browser renders html. e.g. a nav bar with #css position:fixed to top left, then android chrome may or may not hide it after scrolling down, depending the page's height. is there doc about how phone special treatment of css?

nice article, on css variable

https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

don't use .io domain

so, if you use a .io domain, you are in trouble. Note that, the programer idiots love special domains, started with .cx , de.licio.us etc. and since about 2010, .io. the thing is, the fad come and go.

see https://www.uptimechecker.org/blog/how-domain-registrar-can-kill-your-business

JS: Property Key (updated. replace var with const)

JS: Prototype and Inheritance

JS: How to Create Tooltip (updated)

JS: Function.prototype.bind (minor update)

JS: How to Use Object.create() to Emulate Constructor? (minor update)

JS: Pipe Function Instead of Method Chaining (code update)

JS: Semicolon Rules (updated)

JS: Allowed Characters in Identifier (updated)

JS: Object.prototype.valueOf (minor update)

JS: Property Attributes, writable, enumerable, configurable

JS: Object.defineProperty

minor updates.

JS: Branch Control: if then else, switch

JS: Property Dot Notation / Bracket Notation

Minor updates. Now uses const instead of var.

JS: Format Number

D3.js Visualization, a Quasi Science

[How Likes Went Bad 2018-04-25 By Matt Locke. At https://medium.com/s/a-brief-history-of-attention/how-likes-went-bad-b094ddd07d4 ]

haven't read the whole carefully but it's on the ballpark.

JS: String Escape Sequence (new page)

JS: Unicode Escape Sequence (updated)

JavaScript Basics (updated)

JS: Get Max/Min Value of Array (minor update)

JS: Scripting SVG (updated)

JS: Operator “new” (updated)

JS: Import/Export

JavaScript, Design Patterns Appoach to Computer Language Tutorials

JS: Object Constructor (updated)

JavaScript Map Filter

JavaScript quiz of the day. write a map_filter(map_obj,f). Returns a new map where f(key,value) returns true.

see JS: the Map Object Tutorial

solution:

JS: Map Filter

HTML: Input Range Slider (updated)

JS: var Declaration Order (updated)

JS: “typeof” Operator (updated)

CSS: Units (updated)

Why DOM Suck

JavaScript DOM SVG font-size sucks

SVG: Font Size (new page)

JS: Split Array (new)

JS: Define Function (updated)

JS: Template String (updated)

JS: String Overview (new page.)

JS: var Name Scope (updated)

Color articles has all been updated.

• CSS Color Syntax
• CSS Color Names
• CSS: HSL Color
• CSS: Opacity
• CSS: Linear Gradient
• CSS: Radial Gradient

JS: var Declaration (updated)

JS: Global Variable

JS: Closure

JS: “instanceof” Operator (updated)

JS: Primitive Value

worked a lot on my js tutorial. To streamline them, make it easier to find info as practical reference when coding. Going to post 1 updated article a day.

• JS: Object Type
• JS: Value Types
• JS: Object.prototype.isPrototypeOf

updated to ES2015

JS: Function Declaration vs Function Expression (minor update)

JavaScript Module, and Math vs Programing

https://www.patreon.com/posts/17694740

JavaScript Math and Plot Libs

several math and plot related js libs to read.

all these are probably very good.

d3 and rollup.js https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4

d3 https://github.com/d3/d3

function-plot https://github.com/mauriciopoppe/function-plot/

mathjs http://mathjs.org/index.html

stack.gl http://stack.gl

plotly.js https://github.com/plotly/plotly.js

propel https://github.com/propelml/propel

complex function phase portrait https://www.shadertoy.com/view/XsVczh

JavaScript ES2016 ES2017 ES2018 ES2019

js is moving fast.

http://exploringjs.com/es2016-es2017/

http://exploringjs.com/es2018-es2019/

#JavaScript quiz of the day. Write a splitArray(array, f), where f return true means split point. Result does not include split point elements and no empty array. e.g. splitArray([0,1,2,0,4], x => x === 0) returns [[1,2],[4]]

to my patreons, an intro to Xah Lee, is that right?

https://www.patreon.com/posts/17455187

JS: Object.keys (updated)

JavaScript Find Element in Array

JavaScript has:

• indexOf
• lastIndexOf
• find
• findIndex
• includes

worst design possible. Some return index, some boolean, some take function. Most can't deal NaN or undefined.

also, there's no function that finds all occurrences.

see JS: Array.prototype

JS: for-in Loop (minor update)

this is a stupid icon design.

In the 1990s, the icon is a wheelchair. It is iconic. People can recognize what it means. But due to political correctness, it is changed to a human animal with arms wide posture. This happened to Mac, Microsoft Windows, and Linux.

also, the word “disabled” such as “disability options” is changed to “accessibility”, also incomprehensible.

https://www.patreon.com/posts/17332715

SVG Transform Bug in Mac Safari Browser

oh futter. svg v.1.x still have problems. if you attach a transform attribute to the top svg element, it doesn't work in Safari browser, but works in Chrome and firefox. Took 1 hour to debug this futter.

DOM: Change CSS (updated)

JS: String.prototype.split (major rewrite)

JS: Reflect.get (updated)

JS: Function Parameters

JS: Create Object with Parent X (updated)

js quiz. Get max boundary in a plane

JavaScript quiz. You have const tt = [[t1,[x1,y1]],[t2,[x2,y2]],...]; write a function, that returns [min x, max x, min y, max y].

JS: String.prototype.replace (updated)

JS: Map Constructor (new standalone page)

JS: the Map Object Tutorial

JS: Convert Object to/from Map (updated)

JS: Array.prototype.copyWithin (updated)

google is introducing new search console, retiring the old. (that is, you can put a google search box on your site for searching your site) But now, no thanks.

JS: RegExp Tutorial (updated)

Understand JavaScript Class Like a Mathematician (updated)

JS: Class Tutorial

JS: Show Prototype Chain (new)

JS: Array Constructor (updated)

to read today

https://github.com/google/incremental-dom/

http://exploringjs.com/es6/ch_symbols.html#_examples-of-name-clashes-in-javascripts-standard-library

JS: Replace All Children, createDocumentFragment (repost)

Chrome 68 will mark all HTTP sites as “not secure”

Chrome 68 will mark all HTTP sites as “not secure” https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html

google chrome marking http insecure means, info will be more centralized to big mainstream sites only. if google did this 10 years ago, we might think it's trying to do good. Today, it's more like tighten the noose on info control.

JS: Prototype and Inheritance (updated)

DOM: .insertAdjacentElement

JS: Browser Window Object, Document Object Model (updated)

DOM Scripting Tutorial (major reorganization of topics)

Buy Xah JavaScript Tutorial

Get my JavaScript In Depth book. The best JavaScript book + reference that exists. Free update for 2 years.

Buy Xah JavaScript Tutorial

JavaScript tutorial today.

• DOM: Get Element's Attribute Value
• DOM: Set Element's Attribute Value

every time you try functional programing in JavaScript, you run into a problem.

JavaScript is truly a abomination.

( true ? (let t = 3) : 4 );

(function (exports, require, module, __filename, __dirname) { !( true ? (let t = 3) : 4 );
                                                                             ^
SyntaxError: Unexpected identifier
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

• DOM: Create/Insert HTML Element
• DOM: Remove HTML Element
• DOM: Difference Between textContent, innerHTML, innerText, nodeValue

These pages are updated.

• DOM: Get Elements by ID, Tag, Name, Class, CSS Selector
• JS: String.prototype.codePointAt

updated.