Add ES5/ESnext switcher on about page

[rvagg]

This is a proof of concept, my frontend JS is super-rusty so this will likely need a more skilled hand if we go with it. My styling skills also leave a lot to be desired. The purpose of this is for discussion and a possible way to address the growing concern and confusion about the increasing use of ES6+ in docs. Specifically being discussed here: nodejs/docs#55 (and perhaps elsewhere?).

Here's what my PR adds:

The markdown only needs to have Modern JavaScript: added before a code block, then ES5: followed by a code block with ES5. The work of putting it together is done in the browser, if for some reason that can't be done the fall back just displays the two blocks with titles above them so it gracefully degrades. This approach could be used across all docs, API docs included.

[stevemao]

Ref: #431

[phillipj]

Looks like a good approach 👍

[benjamingr]

Looks like a great idea ! Good work!

I gladly volunteer to port all other existing doc pages to have the two versions if the help is needed.

[eljefedelrodeodeljefe]

@rvagg skimming through all the code blocks on #4733 that looks really useful to me. Bearing in mind future changes to the language. Also, through adding dimension to the docs I can imagine lots of other use cases for tutorials and examples etc.... I'll grab this up, I guess.

[stevemao]

this should be ```js (https://github.com/nodejs/docs/blob/master/STYLE-GUIDE.md bottom).

[rvagg]

@benjamingr since frontend is not my forte, it's been too long since I kept track of what browsers support what, and I was putting this up as a POC initially, would you mind taking this over? The branch is in the repo so you can take it and do what you like with it until you're happy with it.

[eljefedelrodeodeljefe]

@benjamingr, @rvagg also I had a quick look a while ago, and I think the API docs are using features like display: flex, which liekly exclude IE8 support anyhow. Since Microsoft is dropping support for it, I wouldn't put too much work into compat.

[xcatliu]

@benjamingr @rvagg @eljefedelrodeodeljefe

According to Web Browser Market Share Trends, IE8 has only 1.1% users in total (2015-12).
And I tried https://nodejs.org/en/about/ in IE8, it looks like this:

So I think it's time to say goodbye to IE8.

[benjamingr]

@eljefedelrodeodeljefe display: flex excludes IE9 too IIRC,

I vote to disable support for any browsers under latest (since it's for developers). JavaScript developers don't use old browsers anyway. The only case I can think of that makes me sad here is developers stuck debugging things on computers with old IE (like IIS servers) and want to open the docs - that's not really that big of a deal though.

@rvagg assuming this idea (switching between modern JS and ES5) gets accepted - I can gladly revamp the code base for it and as I said before add such examples for all code examples on the site docs. I just don't want to do a lot of work while we're not sure yet it'll be used (and the PoC does a good job at illustrating the usefulness).

[stevemao]

So I think it's time to say goodbye to IE8.

Thanks for testing this @xcatliu , lets say good bye to old ies 👍

[silverwind]

@benjamingr Flexbox support starts with IE10 (buggy and prefixed), IE11 should be fine.
@eljefedelrodeodeljefe API docs don't need Flexbox and work for me in IE11's IE7 mode with a few minor issues.

[chrisdickinson]

Noting this here for future folks: the Docs WG resolution was not to apply this approach to all of the docs due to the maintenance burden of keeping up two examples for every existing example, and instead look for a better way to highlight confusing syntax (like backticks.)