Xah Web Dev Blog

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

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. JS: What Does Live Object Mean?
  16. JS: Boolean Constructor
  17. JS: 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

TypeScript Tutorial (basics of using TypeScript to translate ES2015 to ES5)

JS: Method Chaining and Function Composition (added ES2015 version)

Global Internet Usage Hour Pattern (code updated to JavaScript es2015 via TypeScript)

one major problem of JavaScript still is that there's no range function for array, even in ES2016. That means, you cannot avoid using for-loop.

JS: SVG Clock (now js ES2015 code in TypeScript)

JS: Range Function for Array (new ES2015 function)

JS: “instanceof” Operator (major rewrite)

JS: Date Object (minor update)

JS: Stopwatch (updated, added JS ES2015 code.)

Google Chrome has disabled the chrome://plugins settings page, starting with Google Chrome version 57 (released in 2017 March)

JS: Object.prototype.valueOf (new page)

JS: Array How-To (updated)

JS: Object to Array (new page)

Seo Hack on Alexa

Google Releases a Open Source Serif Chinese Font

http://developers.googleblog.com/2017/04/noto-serif-cjk-is-here.html

Understand JavaScript Iterable, Iterator, Generator Function and Generator

JavaScript ES2015 has new concepts of iterable, iterator, generator function and generator.

They are somewhat confusing and complex.

To understand them clearly, here's explanations, read in order.

  1. JS: Interface
  2. JS: Iterable
  3. JS: Iterator
  4. JS: for-of Loop
  5. JS: Generator Function
  6. JS: Generator

JS: Iterator Prototype

JS: Number.prototype (now, the number object reference is complete.)

new pages

new pages on encoding url.

JS: Number Object (new page)

JS: Arrow Function (updated)

JS: How to Convert ES5 to ES2015

survey. Web Design: Serif or Sans-Serif? (updated)

JS: Function Parameters (updated for ES2015)

JavaScript trick. If you want to use forEach with break, use JS: Array.prototype.every.

Spamer Email You Asking for Link Back

there's a new scam method. Real people email you, saying good things on your article, and ask you to link to their blog too.

although real person, but you can see the context is totally off. e.g. years old blog, or wrong community, non-specifics, etc.

The person is probably cheaply hired to look for web pages to email to ask for links.

If you do not reply, the person asks again in a couple of weeks. Repeat, up to 4 times.

See also: Web Spam, Scam, Blackhat SEO Collection

JS: Boolean Object (complete rewrite)

JS: Boolean.prototype (new page)

JS: true, false (complete write)

css z index

〔►see CSS: z-index

JS: Array.prototype.find new in ES2015.

facebook browser console warning 2017 03 10
facebook browser console warning

JS: Sparse Array (updated)

JS: String.fromCodePoint New in ES2015. Now working with Unicode emoji is much easier.

JS: Property Key "constructor" (updated)

1. the issue with font is that, ① if you care that your site look EXACTLY the same in diff browsers/OSes. ② if you mind a web font download.

2. caring for exact look across is not just esthetics. e.g. when you have iframe. scroll bar may or may not appear, depending on font used.

3. If you want pixel-exact look, then solution is easy. Use Arial, Courier New. They are on both Windows, Mac, but not linux.

4. there's no general solution for pixel-exact look across Windows, Mac, Linux, without requiring download (i.e. web font).

5. if you don't mind requiring user download, then Google web font Roboto & Arimo for sans are excellent solution.

6. If you chose a popular Google webfont such as Roboto, it's almost already cached, so no cost for site load time.

7. but the problem with web fonts is that, it requires a network connection. Your site can no longer serve as portable book in HTML format.

8. vast majority of websites do not use web font. And Arial is probably still the most used font on web sites.

9. Google Search is using Roboto, and YouTube and Google Plus. Probably all Google sites.

10. Twitter, StackOverflow, Wikipedia, seem to default to local fonts. They use sans-serif, most popular are Arial, Georgia, Verdana.

11. nytimes, washington post, forbes, use local font, Georgia. US Today is Arial.

12. wsj uses its own proprietary webfont, serif.

13. Time Mag uses proprietary webfont, serif. “Duplicate Iconic”

14. New Yorker, always the snobby one, uses proprietary webfont, serif. “TNY Adobe Caslon Pro”

15. ok, that concludes today's Xah Edu Corner, episode №20170225155325, 〈tech geeking and trifles of font〉.

JS: String Methods for RegExp (updated for ES2015)

JS: RegExp Syntax (updated for ES2015)

JS: Find Object's Prototype (updated for ES2015)

JavaScript Object Ontology!

JavaScript es2015 objects ontology
JavaScript Object Ontology!

JavaScript regex is modeled after perl5 by spec, but it doesn't have the decency to name it regex instead of regexp.

video format support

as of 2017-02-22

on Windows
Google ChromeFirefoxedge
mp4yesyesyes
webmyesyesno
on Linux
Google Chrome Firefox
mp4yesyes
webmyesyes

Xah JavaScript in Depth, New Version Out

Buy Xah JavaScript Tutorial

New version is out. Update sent to previous buyers.

If you don't have it, check it out. Link to it, tell friends, buy it. Thanks.

JS: Default Charset/Encoding (new page on its own. updated for ES2015)

JS: Object.prototype.toString (new page)

JS: Determine Type of Object (major rewrite)

JS: Prevent Adding Property (updated for ES2015)

JS: Delete operator (new page, on its own)

JS: Property Descriptor (new page, on its own) And all pages about property are updated for ES2015.

JS: Property Key, updated to ES2015.

JS: Property Overview (in depth). Updated to ES2015.

JS: Access Property, List Properties (updated for ES2015)

Compatible Fonts for Linux and Windows

Font is a major pain.

here's a tip to solve diff font on diff OS problem, if you don't want to use Google web font that require users download.

they have the same metrics.

The Liberation fonts are on Linux. The Arial and stuff are available on Microsoft Windows 10 and Mac.

〔►see Meaning of Font Size and Em Height

See also: Best Unicode Fonts for Programer

Firefox is sucking major ass in everyway. for some reason, on window 10 intel i5 cpu, it's still installing 32 bits.

node.js bug. Object.setPrototypeOf returns wrong thing

// node.js bug. this should print “Object {}” but prints “Function {}”
var hh = {}; console.log ( Object.setPrototypeOf ( hh, Array ) );

JS: Convert Object to/from Map (new)

following pages all updated. Each methods on its own page.

JS: Map.prototype.forEach (new standalone page.)

JS: Iterate Over Map Object (new standalone page.)

wow, building javascript spec requires installing 111 packages.

build js spec 2017 02 01

JavaScript ECMA2016 is Released in 2016 June

very odd. JavaScript Array.prototype.includes is not in the spec at http://www.ecma-international.org/ecma-262/6.0/#sec-array.prototype.indexof but is in spec here https://tc39.github.io/ecma262/2016/#sec-array.prototype.includes

oh wow. Found answer. JavaScript Array.prototype.includes is not in ECMA2015 because it is in ECMA2016, and it's already out! ECMA2016 is released in 2016 June.

Like what you read? Buy JavaScript in Depth
ohayo — a new type of editor for a new type of Lisp