Xah Web Dev Blog

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

• Chrome 63%
• Safari 17%
• Firefox 11%
• IE 3%
• Edge 1%

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

problem is also reported at

• https://www.reddit.com/r/archlinux/comments/67n16o/firefox_emoji_size_problems/
• https://www.reddit.com/r/firefox/comments/685et1/the_last_update_made_my_emojis_huge/

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.

• vw → Equal to 1% of the width of the viewport.
• vh → Equal to 1% of the height of the viewport.
• vi → Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis.
• vb → Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis.
• vmin → Equal to 1% of the minimum value of the height and the width of the viewport.
• vmax → Equal to 1% of the maximum value of the height and the width of the viewport.

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

• JS: NaN
• JS: Infinity
• JS: Number Constructor

new pages on encoding url.

• JS: encodeURI
• JS: encodeURIComponent
• JS: escape

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)

〔►see CSS: z-index〕

JS: Array.prototype.find new in ES2015.

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

• Open Sans. 29.2G download. Used by 18M sites. https://fonts.google.com/specimen/Open+Sans
• Roboto. 34.7G download. Used by 11M sites. https://fonts.google.com/specimen/Roboto?selection.family=Roboto
• Arimo. 704M download. Used by 596k sites. https://fonts.google.com/specimen/Arimo?selection.family=Arimo

• Source Code 81M download. Used by 224.6k sites. https://fonts.google.com/specimen/Source+Code+Pro?selection.family=Source+Code+Pro

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

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.

• Liberation Sans = Arial
• Liberation Sans Narrow == Arial Narrow
• Liberation Serif = Times New Roman
• Liberation Mono = Courier New

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: the Map Object Tutorial
• JS: Map Object
• JS: Map.prototype

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

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

wow, building javascript spec requires installing 111 packages.

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.

JS: Array.prototype.find (new in ES2015)

JS: Array.prototype.fill (new in ES2015)

JS: Function.prototype (updated for ES2015)

JS: Array How-To (updated)

JS: Math Object. Updated for ES2015. Added 15 new functions.

Firefox, a Dying Breed

JavaScript old rant on Socket.IO. Got a comment, looks like nothing changed. probably nobody's using it today. Where is Socket.IO Client Library At?

JS: String is 16 Bits Unit Sequence (expanded)

JS: Check Property Existence (updated for ES2015)

JavaScript Spec, Term “instance” is Not Defined

JavaScript oddity! is length a property of String.prototype?

in JavaScript ES2015 spec, it sometimes distinguish properties of prototype and properties of instance.

For example, for String.prototype, it doesn't list length as one of its property, but it is listed as a property in a separate section of “string instance”.

see ECMAScript 2015 §Text Processing#sec-properties-of-string-instances-length

however, in code, if you list properties of String.prototype, "length" is there.

console.log ( String.prototype.hasOwnProperty ( "length" ) ); // true

console.log ( Reflect.ownKeys ( String.prototype ) );
// has length

what gives?

JS: String Constructor (new page)

• JS: the Map Object Tutorial
• JS: Map Object
• JS: Map.prototype

new pages.

• JS: the Set Object Tutorial
• JS: Set Union, Intersection, Difference
• JS: Set Object
• JS: Set.prototype
• JS: Set.prototype.forEach

new pages.

JS: Iterable (new)

JS: Interface (new)

〔 A Brief History of JavaScript 2017-01-15 By Sebastián Peyrott. At https://auth0.com/blog/a-brief-history-of-javascript/〕

JavaScript creator on JavaScript history. 〔 Popularity 2008-04-03 By Brendan Eich. At https://brendaneich.com/2008/04/popularity/〕

one of the most annoying thing about css is that there's no way to control size of font across browsers, unless you download web font.

〔►see Meaning of Font Size and Em Height〕