Xah Web Dev Blog

JS: the Set Object Tutorial (minor update)

JS: Reverse Key Value of Map Obj

JavaScript Map.prototype.forEach is pretty stupid in that it reverses the order of key val args.

see JS: Map.prototype.forEach

browser auto getElementById

#JavaScript just noticed something amazing. you don't need getElementById. They are automatically done in JavaScript. Tested to work in safari and Google Chrome. Does any know if this is in standard or what?

i had const x = document.getElementById ('x'); etc. but removing them still works when i x.addEventListener ('input', f_update, false) i'd expect “x not defined”

apparently, the spec mentioned it, but is “non-normative”, meaning, it is not reliable. thx to @lg188

todo. not sure how to use RadioNodeList yet.

JavaScript spec size

• JavaScript 2015 spec is 4 mega bytes.
• 2016 is 5.1 M.
• 2018 is 6.7 M. (freezes Safari)

SVG: Circle Arc

SVG: Circle Arc

the idiocy of the SVG ellipse spec

SVG Path: Elliptical Arc

JS: Generator (updated)

Firefox still has extensions disabled. i am wondering if it intentional accident, or intentional afterwards.

one sneaky thing Firefox does is that it requires you to agree to use your data before you can get the extesion disabled fix. also, in the past few years, it donates to antifa, and other nasty things on the news.

i use 4 browsers. Google Chrome with Google sites ONLY. Brave for generic site (JavaScript off). Safari for alt twitter acount. Firefox for main local web dev (JavaScript off). Now, Safari or Brave replaces Firefox. I'll see which one.

the thing about gnu icecat is that, those are just clone of firefox. they rely on the commercial firefox. open source fsf as ideology, do not survive. They survive on the donations from patent ridden and evil commercial enterprises's breadcrumb (and those who works for them).

i like to support good things in society, so we can live freely. Not living in a underground niche community. That's most linux etc fsf open source hackers are doing. Forever in fear, in a rebel state.

JS: Iterator (updated)

JS: “typeof” Operator (updated)

JavaScript String Problem

JS: ECMAScript 2016, 2017, 2018, 2019 new. still incomplete.

JavaScript requestAnimationFrame sucks

requestAnimationFrame(f) → calls the function f when browser is ready to update display.

f is passed a integer ms of type DOMHighResTimeStamp. It is milliseconds from performance.timing.navigationStart.

new Date(performance.timing.navigationStart + ms)

should be equal to

new Date()

let x = performance.now();
let y = performance.timing.navigationStart + x;
let z = new Date ( );

console.log ( new Date(y) )
console.log ( z  )

The purpose of requestAnimationFrame is when animation done by JavaScript needs to be updated frequently (say, few times a second). Instead of using setInterval, one can use it in combination with requestAnimationFrame, so that the code runs only when browser updates the display.

Example usage:

const update_clock = ((timestamp) => {
    const dd = new Date(performance.timing.navigationStart + timestamp);
    sec_hand.setAttribute("transform", "rotate(" + (dd.getSeconds()*6 + (dd.getMilliseconds()*6/1000)).toString() +  ")");
});

setInterval( (() => { requestAnimationFrame(update_clock) }) , 1000/20);

JS: SVG Clock

the JavaScript web requestAnimationFrame is nasty. Extremely complex semantics, yet, no loop construct, so that user either need to use recursion with complicated manual timing control, or need to use setInterval anyway.

JS: Array.prototype.flat (new)

number faq

• JS: Number.prototype.toString

• number to string JS: Convert Decimal/Hexadecimal

• string to int JS: Number.parseInt

• JS: Convert String to Number

converted all call of Object.getPrototypeOf to Reflect.getPrototypeOf

JS: Reflect.getPrototypeOf

parceljs, a new js tech. nodejs Ryan Dahl highly recommended. https://parceljs.org

spent 1 hour on the svg path ellipse. still haven't figured out how to use it to draw a quarter circle arc. extremely idiotic tech.

SVG Path: Elliptical Arc

HTML4 Frameset, Best Idea Killed by Google

it's a sad story that the html4 frameset is killed, by Google and web dev community beginning around 2005. it's the best idea. Today's html5 and JavaScript still cannot do anything close.

• HTML Frameset HTML: Split Windows; Frameset
• HTML Iframe HTML: Iframe

Java doc is still (and only one) using frameset https://docs.oracle.com/javase/7/docs/api/

the #JavaScript spec, ECMA-262 ECMAScript® Language Specification (LOL™) is the worst lang spec i've read. It is INCOMPREHENSIBLE and UNNECESSARILY so. Also, originally i put links to it from my tutorial for my own convenience of writing tutorial. But nobody else read it.

programers posting bullshit to get followers

this guy, posts bullshit daily, for like at least 3 years. basically, it's a marketing strategy, posting drama things and soundbytes to get lots clicks by the masses who don't know stuff. that's at least part of the reason he got 40k followers.

JavaScript here's my intro to the topics he listed

• JS: Closure
• JS: Functional Programing
• JS: Prototype and Inheritance

Google Webfont Tutorial (minor update)

CSS: user-select

do you have a specific case situation where programer needs to know type coercion result?

i think when one saw a code location where type coercion is happening, you simply just change the code so it's explicit type conversion, unless it's trivial or well-known cases such as number to string.

type coercion results between types that doesn't make sense, are usually just arbitrary, depending on the lang desiner or what happens to be the case in the lang. especially lang with bad history like js.

old articles

1. Google AdSense Ban on Ancient Asian Goddess Sculpture Page
2. How to Start Google Chrome in a New Instance?
3. Google Plus Favicon Change 2013-03-15
4. Google Reader RIPS
5. Google's Deceptive Ad: Google Puts Ad in Email Under Promotion Tab
6. Google: “Don't Be Evil” vs “Don't Do Evil”
7. Google Now Requires JavaScript AND Cookies?
8. Google's sitemap.org Got Hacked?
9. Are Googlers the Minions of Google Marketing?
10. Last Public Video of Steve Jobs: Jobs Presenting the Apple Circle Building
11. TV Has Arrived on The Web
12. Industrial Tech: Twilio, SendGrid, Google Cloud Messaging, Apple Push Notification Service
13. Adjust Your Google Ad Preferences, or Opt Out
14. Amazon Closes CA Affiliate Program
15. Tech Humor: Apache vs Node.js vs NGINX 📺
16. What's the Difference Between Google's “following” a Blog vs Subscribe?
17. Humor: CSS Experimental Pain, Window Blind
18. Gmail State-Sponsored Attack Warning
19. Google Do Evil
20. Google Gmail Blocks Mozilla Thunderbird
21. All About Google
22. Google's PageSpeed Insights Fails Its Own Site
23. Google Search Dropped Traffic To XahLee.org
24. SEO: Underscore vs Hyphen: How Google Webmaster Advices Hurt Quality Writers 📺
25. Hacker News Traffic Effect
26. Web Tech Gossip
27. Internet Explorer Anime Girl
28. Global Internet Usage Hour Pattern
29. Web Advertisement in 2011: JavaScript Popups
30. MegaUpload Crime Boss
31. Monolithic Web Pages
32. Opera Browser Can't Load Twitter CSS: OCSP Error
33. Software Piracy, Open Source, Free Software, Copyright
34. How Much Can You Make by Blogging? Google AdSense?
35. Why I'm Removing Tech Blogger Celebrities and Googler on G+
36. Social Network Post Scoring Systems and Their Consequences
37. My Personal Photos of Steve Jobs (1955 to 2011)
38. Steve Yegge's Google Platforms Rant
39. SOPA: Stop or Start Online Piracy Act?
40. JavaScript DOM SVG font-size sucks
41. Modern Tablet Computer Features
42. Twitter Usage Map
43. Web Hosting Compared: 2006-01
44. What Your Google Plus Strategy Should Be?
45. Wikipedia Morons
46. On Wikipedia's Misinformation
47. Women in Tech: Today's Google Plus Recommendation?

CSS: Reset

the last breath of google plus

the last breath of google plus

Web Design: Problem of Header Linking to Table of Contents

rewritten

todo. review.

• The Problems with CSS
• Anti-bot Test: CAPTCHA!

while reviewing old article Web Design: Should Hyperlinks Have Underline? discovered, that time.com does not use https still. very strange.

Donald Knuth, Steve Jobs, and How Typography Sucks

updated.

new nav box

Firefox Chinese Serif Font Touches Top CSS Border

Stupid Firefox bug. When you have font-family:serif on chinese char, it touches the top #css border. Does not happen in Google Chrome or Safari.

简体繁體字表; List of Simplified/Traditional Chinese Characters

Chinese serif and sans-selif Font Names

Google Greed, YouTube Related Video

YouTube Scamer Stealing Video

This is How Google will Collapse

great article. the title is a click bait, but the article has lots relevant info.

[This is How Google will Collapse 2017-04-24 By Daniel Colin James. At https://hackernoon.com/how-google-collapsed-b6ffa82198ee ]

CSS: Outline

npm Fiasco. Malware that Steals Bitcoin added to HTML Validation, History and Politics

interactive js app for visualizing quaternions

https://eater.net/quaternions/video/intro

Google Do Evil

Started to collect Google's evil deeds there.

Modern JavaScript Explained For Dinosaurs

great article

[Modern JavaScript Explained For Dinosaurs 2017-10-18 By Peter Jang. At https://medium.com/the node js collection/modern javascript explained for dinosaurs f695e9747b70 ]

“modern” template driven html. prefetch all the ads in the world

browser war, and mobile has passed desktop/laptop for browsing since ~2016.

for my xahlee.info, mobile is only 25%, because most of xahlee.info is programing stuff.

If you design website, make sure it works well on phone screen.

browser war. Google Chrome is now king of abuse. Firefox and Microsoft Edge are irrelevant

Google force android phone to install Chrome. also, bundling chrome with chromebook. And make sites that works well in Chrome only.

Here's a great article.

[The State of Web Browsers 2018-12-05 By Ferdy Christant. At https://ferdychristant.com/the-state-of-web-browsers-f5a83a41c1cb ]

that guy's “been in the web game since 1996”. i began writing html in 1996 too.

See also: hackernews comment on Google Chrome abuse. https://news.ycombinator.com/item?id=18617189

SVG: Font Size

updated. Still haven't found a solution to something like css's 1rem, when user coordinate is used.

HTML Video Tag

HTML Audio Tag. updated.

Mac still doesn't support webm video nor opus audio

DOM: Disable Right Click

new page. a simple, frequently asked example.

Douglas Crockford has a new book How JavaScript Works I thumbed thru in a friend's house. It's very good. It's unusual. It's not for beginners. And written in a stye you have to read from cover to cover in sequence. But you get deep understanding.

JavaScript SVG Clock

JS: SVG Clock updated code.

it's so convenient to use bleeding edge tech. .insertAdjacentElement DOM: insertAdjacentElement and .currentScript DOM: Get Current Script Tag no more inserting an id and get element by id

Web Design: Fixed-Layout, Flowed-Layout, Responsive Design

Note that in 2000s, there is big brouhaha among “web design” circles about Fixed-Layout vs Flowed-Layout. Most sites is fixed layout. best example is Apple. They assume ur screen is ≥ 1000 pixels wide. Fixed layout is like printed magazine. if ur window is smaller, u can only see parts.

see Web Design: Fixed-Layout vs Flowed-Layout

here's minimal window width assumptions of apple facebook google microsoft amazon etc sites around 2010 see Web Design, Minimal Window Width

the debate about fixed vs flowed layout is that, fixed is always better looking on a specific screen. But flowed looks much better on a screen not the designer intended/expected.

I prefer flowed, and thought about it for years. Flow layout is supposed to work in any screen size and ratio. In practice, its just impossible. What actually happens, as with today's “responsive design”, is just design for four or so intended screen size and ratio.

note that, web design began in ~1994 when html began. Around that time, most monitor is 640x480. around ~2005 it's 800px width. 2010 it's 1020 width (by now, laptops is most common). most professional web sites use fixed layout. i.e. design for specific screen width.

also, flowed layout is pretty much favored by nerds or programers, who focus on logical structure. example: chapters, sections, subsections. Fixed layout design, is favored by artists or “designers” (aka desktop publishing of 1990s on Mac), because it's pretty.

note, CSS was invented in 1996 but isn't used widely till ~2002. The thinking about flowed vs fixed layout was that, always markup by logical structure, but use css to make the design/layout. this is actually a myth to this day.

Other than academic papers, vast majority of commercial sites do not have any natural logical structure. The “logical” markup is just a artificial pretense. This can be seen today especially with so-called “single page app”. #css #design

CSS: Display Table on Small Screen (major update)

HTML: Viewport Meta

discovered CSS unit “cap”

discovered CSS unit cap. i thought it'd solve the font size problem. But very disappointed. It's a CSS length value. Not a property. We need a property, example: font-cap-size:16px.

see Meaning of Font Size

CSS: Units (more major update.)

CSS unit is incredibly complex.

HTML: the Root Element (new)

“Alien heads found in Georgia”. 'was the origin of name of the font Georgia.

CSS: font-family

CSS: font-family

CSS for beginners. Filling up my CSS tutorial so it covers all commonly used properties. Now, the font topic is complete

1. CSS: Font Weight
2. Google Webfont

updated

Font Size problem (on its own page)

Donald Knuth, Steve Jobs, and How Typography Sucks

CSS: Computed Style

Meaning of Font Size

CSS: font-size

all updated or rewritten

Standard Web Fonts (updated. added JavaScript to show what font your browser is actually using.)

2018-11-02 Turns out, it is impossible to find out programatically what font is actually used.

CSS: Display Table on Small Screen

DOM: Basic DOM Methods (minor update)

jQuery Tutorial by Example (minor update)

• HTML: meter Tag
• HTML: progress Tag
• HTML: address Tag

updated.

HTML Tutorial Complete update.

obsolete html5 tags

these html5 tags are now obsolete

• <command />
• <keygen />
• <menuitem />

and <hgroup> , w3c says no, whatwg says it's good.

updated HTML5 Tags Complete List

List of HTML Self-Closing Tags updated

HTML/XML Entity List (convert table to list. easier for phone screen)

HTML5 Tags Complete List (minor update. convert table to list. easier for phone screen)

Case Sensitivity of HTML5, XML, CSS, JavaScript

added the case for css.

CSS Selector Syntax (rewrite)

Atom Webfeed Tutorial

JS: String.prototype.replace

major update. added list of special chars in replace string, and example of replace all.

JS: Reflect.ownKeys. updated

BigInt is coming to JavaScript.

CSS: Units better explanation of vw

CSS: Fixed Aspect Ratio

JS: Find element Size

• JS: Delete operator
• JS: Reflect.deleteProperty
• JS: Reflect.defineProperty
• JS: Object.defineProperty

improved writing, links.

DOM: Difference Between textContent, innerHTML, innerText, nodeValue

updated to es2015

CSS Pseudo Class vs Pseudo Element

CSS Pseudo Class vs Pseudo Element

JS: Prototype and Inheritance

major rewrite. and also

• JS: Get/Set Prototype
• JS: Create Object with Parent X

Chinese website, trying to prevent people from copying the lyrics

note, lyrics sites, is contentious. In past 10+ years, many sites tried to be THE lyrics site. The internet things is that, at first, it's legally edgy (example: google image search), but after a while, everybody's doing it, unstoppable, became popularity contest.

then about 3 years ago ~2015, Google wiped them all out. Now when you search lyrics, google shows snippets right there, linked right to google lyrics page with Google music store.

JavaScript dom pain. what's the point of querySelectorAll if result is not live?

#JavaScript dom pain. what's the point of querySelectorAll if result is not live? example: u have a list, you found the item, want to color red. you can't cuz it's not live. workaround: add id to each element. Now, get the id of found item, then by id, color it.

JS: RegExp Tutorial

improved writing. More examples.

JS: Reflect.apply

JS: Symbol Tutorial (minor rewrite)

What's the difference between __proto__ vs getPrototypeOf()

see JS: Object.prototype.__proto__

JS: Class

now extensivly modified. Now, it is complete.

the following are in draft stage:

• JS: Keyword “extends”
• JS: Keyword “super”

JavaScript class without keywords class new this

JS: Class updated

Shadow Dom

here's shadow dom. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

it seems rather useless. the purpose is to define custom tag such that you can use it like <xyz>…</xyz> without lots nested tags and css.

JS: const Declaration (updated to include info about prevent add/delete/change properties)

WHATWG vs W3C Split

For the past 30 years, unix hacker types are FOR “Standard”. They'll flash the STANDARD card, usually in context of dissing Microsoft. In past 10 yrs, the millennials gen, not so much. Look at JavaScript scene, npm, git, github, react, d3js, pop is king.

a glimpse into reactjs innards

https://github.com/facebook/react/blob/5a17a1ef1d77f0a99cb708adde283275b7eb49fd/src/renderers/dom/client/utils/DOMLazyTree.js#L17-L27

Web Design Index

HTML Validation, History and Politics

what's with ./ in front of relative path?

in recent years, the web standard or such seems to require ./ in front of relative path, e.g. <script type="module" src="./main.js"></script> else it's error. anyone know why? link? thanks

See also: JS: Import/Export

wtf does this mean in JavaScript? 「const { PI } = Math」

wtf does this mean in JavaScript? const { PI } = Math;

am so fk sk of js fk.

turns out it's destructuring assignment. very creative use.

[see JS: Destructuring Assignment]

it's destructurining no structure. imagine that. Why the young idiots can't write

const PI = Math.PI;
const { PI } = Math;

jesus, it's 1 char longer. #JavaScript

by the way, its from a example code of nodejs's official doc on module https://nodejs.org/docs/latest-v10.x/api/modules.html#modules_modules

JavaScript framework popularity 2018

speed comparison: creating element vs creating object

does any know the cost of creating obj and DOM element? not talking about inserting dom into the page, or causing it to render. just about creating dom off page. how expensive is it?

i didn't get any useful answer.

here's a simple test.

// 2018-07-04
// simple speed test comparing speed of
// creating element and append child
// vs
// creating empty object and append to array

const nn = 5000;
const xx = document .createElement("div");
const start1 = new Date().getTime();
for (let i = 0; i < nn; i++) { xx.appendChild (document .createElement("div")); }
const end1 = new Date().getTime();
const result1 = ( end1 - start1);

const yy = [];
const start2 = new Date().getTime();
for (let i = 0; i < nn; i++) { yy.push ({}); }
const end2 = new Date().getTime();
const result2 = ( end2 - start2);

console.log (  result1 , result2)

// it seems creating element is few times slower than creating empty object...

JavaScript Graphics Lib Geometry Intermediate Language Problem

one major problem in designing a #JavaScript lib for graphics is whether to have a intermediate language. #d3js says no, but now studying #reactjs, it says yes. #svg

it seems, studying #reactjs provides many answers to my javascript graphics framework design problems. am inclined to believe in reactjs ways, and screw the #d3js fak

the best reactjs tutorial

the best #reactjs tutorial is this https://reactjs.org/docs/hello-world.html this is best for, you are already expert of JavaScript, and you want to understand exactly what react does. Not some do this get that style of tutorials that's everywhere.

CSS: Display Property

CSS Display Property tutorial, first draft. CSS is one of the most complexxx fk

CSS: 2D Transform

JavaScript terminology, data object? object object?

ok, the JavaScript spec calls “data object”, example: {key1:1, key2:2}, as “object object”. ok, that's the jargon am gonna stick with.

JS: Object Type

Jargons Explained: Tag, Element, Node, Object, Attribute, Property, Method

Visual CSS major rework.

CSS: Border. new

CSS: Margin vs Padding. updated

CSS: Box Sizing

CSS: Media Query (minor update)

CSS: calc

JS: Character, Code Unit, Codepoint (major rewrite)

functional programing math unit vector speed quiz

2 #math unit vector f in #JavaScript. the 2nd works in any dimen. Quiz, their speed diff is constant or linear, for n calls of 2d vector input?

f=([a,b])=>((l)=>[a/l,b/l])(Math.hypot(...[a,b]));
g=v=>((l)=>v.map(((e)=>e/l)))(Math.hypot(...v));

console.log ( f([3,4]) );
console.log ( g([3,4]) );
console.log ( g([3,4,5]) );

// [ 0.6, 0.8 ]
// [ 0.6, 0.8 ]
// [ 0.4242640687119285, 0.565685424949238, 0.7071067811865475 ]

#xahcode

vote at https://twitter.com/xah_lee/status/1007537943894896641

CSS: Background Image (updated)

#javascript a tale of 2 styles

const unit_vector1 = (([v1,v2]) => {const len = Math.hypot(...[v1,v2]); return [v1/len, v2/len];});

const unit_vector2 = (([v1,v2]) => ((len) => [v1/len, v2/len])(Math.hypot(...[v1,v2])));

which you prefer? reply or vote on twitter at https://twitter.com/xah_lee/status/1004578264046661632

const reverse_obj_key_val = ((obj) => {
// given a obj, return a new obj that has its key and value reversed. If values are not unique, the previous is overwritten. 2018-06-04
const result = {};
Object.keys ( obj ). forEach ( ((x) => { result[obj[x]] = x }));
return result;
 });

JS: Class

major update

JS: Operator “new” (added a typical use example)

2018-06-01 to read Content Security Policy

hideous colors, spurious animation

[utc is enough for everyone right 2018-05- 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.

JS: Timing JavaScript Code (minor update)

JS: the Map Object Tutorial (minor update)

WebSocket Tutorial (minor update)

JavaScript UI: Shake Element (updated for ES2015)

Web Design Index (new index on web design, UI design, articles)

JS: Date Constructor (updated)

JavaScript: Floating Box Following Scroll

JS: Digital Clock (updated to ES2015)

stupid firefox, utf8 still not default

See also: HTML: Character Sets and Encoding

skeleton screen

Web Design: Skeleton Screen

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

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

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

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)