formidablelabs / es6-interactive-guide

An interactive guide to ES6

es6-interactive-guide

An interactive guide to ES6

live site

Running the page locally:

npm install
webpack // add --watch if you like
// open index.html in browser

es6-interactive-guide's Issues

Weird const in the arrow functions demo

You're defining the double in the last example as a const, however it gets changed on every application of the map. let would make more sense, wouldn't it?

Add react router

Instead of one long page with broken links, add react-router to show only the current topic and support deep linking.

Hide menu behind toggle on small screens

The menu is large (and getting larger!), so it needs a button to open or close it on small screens when it's on top of the page instead of in a sidebar.

Problems with IE 11

Having a problem viewing the content in IE 11 using this link:
http://projects.formidablelabs.com/es6-interactive-guide/#/

Better builds + dev environment

This is a minor thing, but I'd recommend a setup like this for webpack in this repo, rather than webpack --watch:

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.minified.js"
},

I've found that to be a pretty clean setup for having a quick reloading dev environment (can add react hot loader too) and making sure that you only ship minified/optimized source when you deploy on gh-pages.

Quick copy tweaks

This is sweet! The interactive sandbox components really set it apart from other ES6 stuff. :)

Coupla quick copy tweaks I noticed while reading through:

Arrow functions

• [Not a true copy tweak] At the very bottom, the backticks delimiting code samples are getting greedy: (x) => x * x and x => x * x. (Not sure if actually an easy fix or not...)
  • (^^ Edit: my own escape chars aren't working right either; the problem I'm getting at is a pair of visible backticks around and and, in the next sentence, or.)

Generators

• In Calling a generator doesn't actually run any of it's contents, let's do its, possessive.
• We have an extra the in In the for..of *the the* variable Y is the result of the yield statements :)
• We write Generators can be used with for..of loops for iterating to completion; should it be to prevent iterating to completion? (If not, the distinction between that and normal looping behavior might need a little more explanation, for me at least.)

Spread operator

• In where you want to pass an iterable as it's components, we'll again want its.
• In Spread syntax works with any iterable, that includes arrays and instances, we can ditch the comma, since what follows is restricting "any iterable" to a specific subset.

Again, great work!

Update jobs messaging in footer (?)

Hey, I noticed that we just updated formidablelabs.com/careers to say that there aren't any open job listings right now: https://github.com/FormidableLabs/formidablelabs.com/pull/122

Given that update, I wonder if we should modify the footer here, which says "We're hiring"? (Kind of frustrating to click through from that and see that we're not hiring. ;) If so, I suppose we'd want to roll out the same update to Radium and other high-profile public repos with similar footers.

/cc @rgerstenberger @alexlande

Useless example

The line const [w, , ...[, ,z]] = foo; can be converted to const [w, , , ,z] = foo;, which is shorter and more readable. I think there's already enough use of the spread operator being shown, I'd consider this example useless.

Live site is down

The live site is down at the moment:

http://stack.formidable.com/es6-interactive-guide/

Arrow functions: demonstrating binding

The current example includes .bind() to demonstrate how context works with arrow functions, but the example doesn't actually need/use this. I think it would be more clear with an example that uses this, otherwise it kind of looks like "they're like regular functions but shorter".

Concise methods example

In the concise methods section the explanation provided is:

"In object literals and classes we can condense render: function () {} to render()"

And the example is the following:

const foo = function () {
  return "foo"
};

const a = "a";

const obj = {foo, a};

console.log(obj.foo());
console.log(obj.a);

This doesn't showcase at all what the description says. I think a better example would be something like:

const obj = {
  foo() {
    return "a";
  }
};

console.log(obj.foo());

With the console output:

"a"

Would be happy to submit a PR if you think that aligns with the goals of this project! Great resource by the way!

Remove `return`s from Generator examples

It’s not the best pedagogy to use return in the generators until the very end, then say that return is not a good idea. People will tend to forget negations that come after examples.
http://projects.formidablelabs.com/es6-interactive-guide/#/generators