Xah Web Dev Blog Archive 2018-05
hideous colors, spurious animation
[utc is enough for everyone right By Zach Holman. At https://zachholman.com/talk/utc-is-enough-for-everyone-right ]
Hideous colors, spurious animation. And, it crashes old browsers even with js off.
Timing JavaScript Code (minor update)
the Map Object Tutorial (minor update)
WebSocket Tutorial (minor update)
Web Design Index (new index on web design, UI design, articles)
Date Constructor (updated)
Digital Clock (updated to ES2015)
stupid firefox, utf8 still not default
See also: HTML: Charset and Encoding
skeleton screen
UI design, pie menu
[Pie Menus: A 30 Year Retrospective 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, example: 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
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/
major update
updated.
updated
- JavaScript: DOM Methods
- JavaScript: List/Add/Remove Class Attribute
- JavaScript: insertAdjacentElement
updated
phone browser opaque smart behavior
seems there's opaque algorithm when phone browser renders html. example: 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
Property Key (updated. replace var with const)
How to Create Tooltip (updated)
Function.prototype.bind (minor update)
Function Chaining (code update)
Semicolon Rules (updated)
Allowed Characters in Identifier (updated)
Object.prototype.valueOf (minor update)
minor updates.
Branch Control: if then else, switch
Property Dot Notation / Bracket Notation
Minor updates. Now uses const instead of var.
[How Likes Went Bad 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.
HTML: Input Range Slider (updated)
var Declaration Order (Name Hoisting) (updated)
“typeof” Operator (updated)
CSS: Length Units (updated)
SVG: Font Size (new page)
Split Array 🚀 (new)
Define Function (updated)
Template String (updated)
String Overview (new page.)
var Name Scope (updated)
Color articles has all been updated.
var Declaration (updated)
instanceof Operator (updated)
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.
updated to ES2015
Function Declaration vs Function Expression (minor update)
JavaScript Module, and Math vs Programing
#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?
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 is no function that finds all occurrences.
see Array.prototype
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.
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.
JavaScript: Change CSS (updated)