Xah Web Dev Blog Archive 2017-05

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: Newspaper Text-Flow Over Multi-Column Layout (updated. Now supported by browsers)

CSS: Round Corners (minor update)

CSS: Animation (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 Fuqiao Xue (xfq).

Random Integer Function 🚀 (added es2015 code)

Randomize Node Children 🚀 (code updated to ES2015)

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: Find Window Size

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