Xah Web Dev Blog

You, put in a few bucks in my patreon. https://www.patreon.com/xahlee Thank you.

js plot ellipse 2017 08 29 1380
JavaScript plotting ellipse

in September, i'll be blogging on my patreon account only.

https://www.patreon.com/xahlee

If you like my stuff, i hope you patreon me there.

JavaScript tutorial updates today

the following are updated to ES2015

if you like it, become my patreon https://www.patreon.com/xahlee

JavaScript tutorial updates https://www.patreon.com/posts/14058806

CSS: Data URI Scheme, Base64 Encoding (minor update)

JS: Object.setPrototypeOf (minor update)

JS: Image Rollover (updated to ES2015)

JavaScript tutorial pages updated to ES2015

The following, are updated to ES2015. Mostly, change var to let or const.

  1. JS: Object.freeze
  2. JS: Convert String to Number
  3. JS: String Constructor
  4. JS: Object.freeze
  5. JS: Convert String to Number
  6. JS: Number.prototype
  7. JS: Function.prototype.call
  8. JS: Array.isArray
  9. JS: RegExp.prototype.test
  10. JS: Array.prototype.length
  11. JS: Array.prototype.reverse
  12. JS: Map.prototype.set
  13. JS: Pop-up New Window
  14. What's the Difference Between jQuery Selector and DOM querySelectorAll()?
  15. DOM: What Does Live Object Mean?
  16. JS: Boolean Constructor
  17. DOM: Basic DOM Methods
  18. JS: Array.prototype.fill
  19. JS: Property Descriptor
  20. JS: Object.prototype.hasOwnProperty

JS: Falling Snow Effect (updated to ES2015)

JS: String Constructor (minor update)

to my patreon supporters, new article https://www.patreon.com/posts/13809835

JS: Class Tutorial (major update)

js destructure array c2cf6
js destructure array
js destructure object f66a0
js destructure object

JS: Destructuring Assignment (major update)

put in a few bucks in my patreon. https://www.patreon.com/xahlee Thank you.

Google has a new JavaScript style guide, covering es2015, at https://google.github.io/styleguide/jsguide.html

Full Page Screenshot in Browser

Standard Web Fonts (added screenshot for correct illustration)

js escape unicode tears 2017 07 24
JavaScript escape unicode tears

JS: escape (major rewrite)

JS: String.prototype.charAt (updated)

JS: String Code Unit vs Code Point (minor update)

JS: Convert Character To/From Codepoint (minor update)

JS: String.fromCharCode (minor update)

JS: Function Declaration vs Function Expression (updated for ES2015)

JS: var Name Scope (updated for ES2015)

JS: var/function Order (minor update)

Netflix switched from Java to node.js

Making Netflix.com Faster By Kristofer Baxter. At https://medium.com/netflix-techblog/making-netflix-com-faster-f95d15f2e972

paypal switched from Java to node.js

paypal java to nodejs 2013 81643
paypal java to nodejs
paypal java vs nodejs speed 78513
paypal java vs nodejs speed

Node.js at PayPal By Jeff Harrell. At https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal/

Google trying to prevent user downloading brave browser?

google evil brave browser 2017 06 12
Google trying to prevent user downloading brave browser. Other deb file, such as skype, no such warning. 2017-06-12. According to brave, they imply that's due to they failed to sign the file. See https://twitter.com/brianbondy/status/874421743779229696 and https://github.com/brave/browser-laptop/issues/9408

Interesting that Microsoft Edge browser haven't picked up. Remain below Google Chrome, Firefox, Safari, Internet Explorer.

Firefox Linux bug. “Noto Color Emoji” font are huge

firefox bug big noto emoji 2017 05 21
Firefox Linux bug. “Noto Color Emoji” font are shown huge, and ignores font-size CSS.

problem is also reported at

CSS: Multi-Column Layout for Text Flow (updated. Now supported by browsers)

CSS: Round Corners, border-radius (minor update)

CSS: Animation Tutorial (minor update)

CSS Color Spec Separator Now Allow Space

O, the whims of the standard.

https://github.com/w3c/csswg-drafts/commit/a54f8b2089d16eca696690fe7ffc3c11d4db9861

2017-05-12 thanks to xfq.

JS: Random Range Function (added es2015 code)

JS: Randomize Element Children (code updated to ES2015)

JS: Find Window Size (updated)

new CSS unit: vw vh vi vb vmin vmax

there's new CSS unit.

The vw and vh are supported by Google Chrome, Firefox, Edge, Safari, latest ones as of 2017-05-06

The vi and vb are not supported by Google Chrome, and probably not others neither.

these are really needed. For example, you want to create a div box, with a specified aspect ratio of say 4/3. (width 4, height 3). You can say

style="width:100vw; height:75vw"

Often, on the side you have columns for index and ads etc. What you really want is percentage of the container box. The solution is the vb unit. Like this:

style="width:100vb; height:75vb"

But vb is not supported by Google Chrome yet.

These are most useful when you are creating SVG graphics, and you want the viewport to be max of a div, with a specified aspect ratio.

〔►see Practical SVG Tutorial

See also: JS: Find Window Size

yarn, a new package manager for JavaScript. I recommend it instead of npm. https://code.facebook.com/posts/1840075619545360