Houston Techfest 2014
Hello, World. Again.

Still Learning - ES6

Saturday, November 29th 2014

I really like ECMAscript. And, I continue to learn about it every time I write something new in it. Some friends and I want to make learning about the new version of ECMAscript available and approachable to folks that don’t have time to go out and do it themselves. With that, I announce the ongoing development of ES6 Walkthroughs.

Over at that link, @bryan, @davehimself, and I have started putting together a bunch of tutorials, self-guided or narrated, depending on the complexity of the subject.

Written about ES6 in ES6

In creating the ECMAscript content that powers the site, I initially wrote it in ECMAscript 5, the stuff that we use when writing for most of the A-Class browsers. Then, it occurred to me that I should write all of the Web application logic in ES6 and transpile it to ES5 for browser consumption. I did that using traceur as part of the build script. So, if you want to see some real-life ECMAscript 6, you can check out the *.js files in _src/modules to see ES6 in action. Here’s a Gist based on the tests module used by the pages to detect support of a feature.

Status of the content

A couple of days ago, I finished the first of the narrated walkthroughs. In doing so, I figured out the format and contribution model for the content. @davehimself and I started talkig about a feedback mechanism for the site, as well. We both would like to try something using Go on a cheap linode. We need to complete that work before announcing it to the whole, wide world. However, since you, dear friend, read this blog, you can help us test the content of the site, should you find time to do so.

Better yet, if you want to help contribute content to the site, you can head over to the list of needed walkthroughs, pick one, and contribute! I will reproduce the contribution guidelines, here, so that you know the scope of the work needed to complete a narrated walkthrough. But, don’t let the task daunt you. I found it a lot of fun! You can see all of this on the project’s README, as well.

How to contribute a narrated tutorial

  1. Choose a tutorial that you want to create from the list of open issues and assign yourself to the task (if you’re on the team) or comment that you want to provide the content.
  2. Branch gh-pages
  3. Find the tutorial that you chose in the first step in _src/index.json so you can
    • Remove the "state": "not-ready" entry; and,
    • Create a “filename” entry with the name of the html file name that you want generated.
  4. Write a script for the walkthrough and include the text “I, [your name], license this script under the Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)”
  5. Save the script into the _scripts subdirectory.
  6. Record the script, perform any post-production work to make it sound really good, and save it in two formats with the base file name equivalent to the file name of the tutorial (found in the index.json):
  7. Add an entry in the index.json in the object for the tutorial that you chose in the first step with the key "audioSources" and list the two file names that you created in the previous step.
  8. Add an entry in the index.json in the object for the tutorial that you chose in the first step with the key "keyframes" with an object value whose keys are the number of seconds into the recorded script that you want to insert text and whose values are the text that you want the tutorial to enter into the editor.
  9. Add an entry in the index.json in the object for the tutorial that you chose in the first step with the key "author" with an object value whose keys are "name" and "url" and whose values are your name and a URL to your presence on the Web, respectively. This will allow the correct copyright to display on the page.
  10. Put your audio files in the top-level narrated-walkthroughs directory.
  11. Commit. Push. Pull request.