Xah Web Dev Blog

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

• JS: Date.UTC
• JS: Function.prototype.apply
• JS: Object.defineProperties
• JS: Object.getOwnPropertyDescriptor
• JS: Object.isFrozen
• JS: Object.isSealed
• JS: Object.prototype.propertyIsEnumerable
• JS: Object.seal
• JS: Array.prototype.pop

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: 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 (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 2015-08-05 By Kristofer Baxter. At https://medium.com/netflix-techblog/making-netflix-com-faster-f95d15f2e972 〕

paypal switched from Java to node.js

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

Google trying to prevent user downloading brave browser?

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