domenic / count-to-6

An intro to some ES6 features via a set of self-guided workshops.

Count Up to Version 6 of JavaScript!

An intro to some ES6 features via a set of self-guided workshops.

Count-to-6 will run you through a series of exercises that introduce you to some of the simpler features of ECMAScript 6, the upcoming revision to the JavaScript language. It leverages the excellent Traceur compiler to allow you to write code with ES6 syntax, today.

Our coverage so far is pretty minor, but it's growing over time. Check out the issues list for upcoming plans.

How to Play

First install Node.js. Make sure it's a recent version, in the 0.10 range.

Now do:

npm install -g count-to-6

And get started by typing count-to-6!

count-to-6's Issues

rename es6 to es 2015?

Promises

Example: show them promise-returning delay.

Exercise: make them write a promise-returning fs.readFile.

Refer to the Promise-It-Won't-Hurt workshop for more?

https://github.com/lukehoban/es6features#promises

... is an unexpected token (rest challenge)

phil@HAL:~/Development/js-node$ node program.js 
/home/phil/Development/js-node/program.js:1
(function (exports, require, module, __filename, __dirname) { function sum(...args) {
                                                                           ^^^

SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:387:25)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:142:18)

running node with the --es_staging flag would solve the problem for me. But i can't tell count-to-6 verify to use this flag.
im on node v5.9.1

Extra Escape Character Rendered in Problem "Template Strings"

Hey! I'm one of a group of mentors running NodeSchool events in NYC. We've mentored your workshop at our events a few times and we love it!

Today we had some attendees point out that the explanation of the initial template strings problem was misleading. They had gotten confused and thought there was a need to escape the initial backtick due to the way the explanation rendered.

Image : https://s3.amazonaws.com/uploads.hipchat.com/22279/1042749/nBHBM5ItyiFMmyp/IMG_20160225_195901.jpg

Should be a really fast, easy fix - I'm doing this from my phone now but I'd be glad to take a look and help fix it this weekend if you're not going to beat me to it before then. (=

Symbols

https://github.com/lukehoban/es6features#symbols

Node 0.11 Symbols are mostly spec-compliant, with only a few deviations IIRC.

This is tricky to come up with a use case for. Maybe bullet-proof duck-typing? Or attaching properties to req?

Update to workshopper 2.x/workshopper-exercise 2.x

Just updating in package.json causes failures; it seems like the Traceur processor is no longer working.

Here's all the places we create custom plugin-ey things:

• https://github.com/domenic/count-to-6/blob/master/lib/setup-basics.js
• https://github.com/domenic/count-to-6/blob/master/lib/single-function-processor.js
• https://github.com/domenic/count-to-6/blob/master/lib/traceur-processor.js

Plus the initial setup, which might need a tiny bit of updating: https://github.com/domenic/count-to-6/blob/master/lib/count-to-6.js

Here is a sample exercise:

https://github.com/domenic/count-to-6/blob/master/lib/exercises/tagged_template_strings/exercise.js

Anyone familiar with recent workshoppers want to help out with a pull request?

Arrow functions

https://github.com/lukehoban/es6features#arrows

Class syntax

https://github.com/lukehoban/es6features#classes

node doesn't know about ES6 features

I tried to run this line in my terminal:
node -e 'function test(...args) { console.log(args.join(' ')) } test('this' 'is' 'a' 'test');'
and I got SyntaxError: Unexpected token .
My node version is 0.10.35 , but apparently it doesn't recognize REST feature syntax (the "...args" part) and I'm curious why is that? Given the fact that when I use this syntax to solve count-to-6 workshop tasks it works alright and it runs in the same environment, right? I mean when I run 'count-to-6 verify file.js' it uses nodejs installed on my machine to evaluate the script. Am i missing something here?

Generators

Too big?

Focus on lazy sequences?

Make them write a combinator, e.g. takeWhile?

https://github.com/lukehoban/es6features#generators

tagged template strings - escaping apostrophes

Why do you suggest using ' to escape an apostrophe instead of ' ?

Hand with ARROW FUNCTIONS, Part 1

Can someone give me a hand understanding the solution for ARROW FUNCTIONS, Part 1 ?

I'm fine as far as the reduce ...

var result = inputs.map(s => s[0])
                       .reduce((soFar, s) => soFar + s);

The output of the map is of the form:

[ 'J', 'i', 'f', 'a', 's', 'N', 'i', 'f' ]

and the reduce is doing a recursive concatenation. What I'm confused about is what are the initial values of soFar and s?

Thanks!

Default arguments

https://github.com/lukehoban/es6features#default--rest--spread

Plus default destructuring?

What's the different between 'process.argv.slice(2)' and 'process.argv[2]'

tagged template strings (step 8) location of colon

Minor typo in instructions: The example output in the instructions shows the colon inside the bold tag, but the test expects it be outside the bold tag.

domenic says:
should be
domenic says:

`let` keyword

An early quick challenge on let vs. var might be a good item to include. Extremely useful, easy to understand, minimal prior knowledge required.

HELLO ES6 example not working i.e. not verify..

My helloES.js contains..

console.log("HELLO ES6");

count-to-6 verify helloES.js

when i verify first example of count-to-6.. it throws Error shown below..BTW count-to-6 run helloES.js works fine..

?exercises.HELLO ES6.compare.title || common.exercise.compare.title || compare.title?

/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/comparestdout.js:19
  return new Array(sz + 1).join(ch)
         ^
 RangeError: Invalid array length
    at repeat (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/comparestdout.js:19:10)
    at center (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/comparestdout.js:25:13)
    at Exercise.transform (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/comparestdout.js:57:40)
    at Transform._read (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at Transform.Writable.write (/usr/lib/node_modules/count-to-6/node_modules/workshopper-exercise/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at Stream.ondata (stream.js:51:26)
    at Stream.emit (events.js:95:17)

Proxies

https://github.com/lukehoban/es6features#proxies

Would need to run in Node 0.11.x, and use https://github.com/tvcutsem/harmony-reflect, although tvcutsem/harmony-reflect#34 is somewhat of a blocker.

Tagged Templates

When I just ran through this, the tagged templates lesson was the last one. So wouldn't the following solution seem more like a 'finale' (though seems from the Issues you've already added that you plan adding more lessons) :

console.log(html`<b>${process.argv[2]} says</b>: "${process.argv[3]}"`);

function html(arr, ...vars) {
  var sanitize = 
    raw => raw
      .replace(/\&/g, "&amp;")
      .replace(/\'/g, "&#39;")
      .replace(/\"/g, "&#quot;")
      .replace(/\</g, "&#lt;")
      .replace(/\>/g, "&#gt;")
    ;

  return arr.splice(1).reduce(
    (acc, str, i) =>  acc + sanitize(vars[i]) + str
  , arr[0]);
}

Also (very minor) : Typo in #5 : "horrible arguments objet again"

Overall :: Very nice!
Martin
:-)

DeprecationWarning?

I'm doing the count-to-6 workshop and keep getting the error: "(node:20733) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead"

WeakMap

https://github.com/lukehoban/es6features#map--set--weakmap--weakset

Again, Node 0.11 is mostly spec-compliant here.

The use case here would be private members, I think.

Enhanced object literals

https://github.com/lukehoban/es6features#enhanced-object-literals

In particular, computed property names, shorthand methods, and shorthand properties.

Excercise #2 - error

I checked my syntax and even checked it with online es6 compiler and it worked.
However when I am reading process.argv[2] it prints one of the following values "ECMA" "ES6" , etc.
Which is really awkward because I did call the "run program.js somestringliteral"
So it should parse argv[2] as somestring literal.

Set

Easy enough: get them to write an efficient, any-object unique function.

Forms of verification

So far we have:

• Compare stdout
• Make them write a function and run tests against it.

Are there other possibilities? E.g. it seems dumb to make them test destructuring this way.

Binary file not created when installing package

Using WSL Ubuntu 18.04 on Win10.

I was able to install and use learnyounode without any problems.

Right before installing count-to-6 I changed my global npm modules directory to a new location to safely resolve some permissions issues (as per npm's official instructions).

After installing count-to-6 the module was successfully installe din the global folder, but the binary was not created and therefore I can't simply run count-to-6 in bash to start the program.

Destructuring

https://github.com/lukehoban/es6features#destructuring

Checking syntax used

This is an easy enhancement: as a prefilter, before the transpiler, verify that they're using ES6 syntax, and not cheating by using ES5.

This could be done either with quick regexes, e.g. check that spread or rest is present by searching for ..., or it could be more robust by checking the AST. We'd probably have to use the Traceur AST. I am not sure what the state of the documentation for that is.

can not start

Can't start it. It shows a Reference Error: count is not defined when I enter count-to-6 in node

is this in active development or abandoned ?

Move from traceour to babel (6to5)

As suggested in #21 babel (former 6to5) could be used instead of traceour to gain access to more es6 features.

how do I move forward with the lesson or show solution?

So if I'm stuck at a challenge isn't there an option to just show me the solution? IIRC some of the other lessons has this.

The reason problem is I'm stuck on one of the lesson. I don't remember the details, I will put them up here.

Binary and octal literals

https://github.com/lukehoban/es6features#binary-and-octal-literals

Too minor?

Destructuring asignment misleading

I've just spent quite a bit of time on problem 5 because there is no information in the instructions (or on the web for that matter) about how to do a destructured assignment into an object.

If you google ES6 destructuring, all the examples show assignments to simple variables rather than object properties.

The given solution achieves this using
[, result.username, result.email] = args;
which works, but can be the source of many frustrations because it gives an unhelpful syntax error if preceded with the let keyword.

All the examples given in this problem are misleading because they all use let:
let [foo, , baz] = numbers;
let {width:x, depth} = box;
So the learner is not aware that the keyword must be left off if wishing to assign to an object's properties.

I would add another example so that the learner has all the pieces of the puzzle in front of them before they embark on solving it.