Git Product home page Git Product logo

es6-workshop's Introduction

ES6-Workshop

slides-badge chat-badge Build Status License All Contributors

PRs Welcome Donate Code of Conduct Watch on GitHub Star on GitHub Tweet

Welcome

Welcome to this ES6 workshop. Our goal is to help everyone make strides towards learning the newest ES6 syntax, and how to use the latest constructs in JavaScript.

This repo is meant to be used in parallel with a lecture style presentation of the new features.

Thanks

Special thanks to Aaron Frost and Axel Rauschmayer for creating the original repo from which this is forked.

Your Goal

This repo is full of failing tests. The only way to get them to pass it by using your newly acquired knowledge of ES6 and all of the new features that are part of this latest release. For each test, you will need to write/rewrite to code using the latest ES6 syntax. Once all of your tests pass, you will want to move onto the next section.

By the time that the workshop is over (time permitting), all of your tests will be running and passing.

System Requirements

  • git
  • Node (at least version 8.9.4)
  • npm (at least version 5.6.0)

Setup

You will need to start by cloning this repo, then you'll run a simple setup script which will install all the dependencies and validate that you're ready to go. From your terminal, type:

git clone https://github.com/kentcdodds/es6-workshop.git
cd es6-workshop
yarn run setup
git commit -am "setup"

If this finishes without issues, great πŸ‘! However, if you have problems, please file an issue on this repo here.

How To Run Tests

Once you have everything installed, you are ready to run some tests. There are two directories with tests in them: exercises and exercises-final. The exercises-final directory is like a cheat sheet. All of the tests contain the required ES6 code to make the tests pass. You will need to edit the tests in the exercises directory, and make the tests pass.

To run the tests, in your terminal run:

yarn test

To run a specific test file, in your terminal run:

yarn test -- exercises/01_block-scoping.test.js

If you want the tests to continue running as you make changes, run:

yarn run test:watch

This will start jest in its interactive watch mode (learn more). If you see a bunch of failures, make sure you're in "only changed" mode by clicking the o key. There should not be any tests run at this point. Your job is to go into each test file in exercises and make the tests pass. As you make changes, jest will run the file's tests. Once you have written the required ES6 code, the tests will pass, and you can move on.

Also, during watch mode you can press the p key to filter for only the test file you want to run. You can even press the t key to filter for only the tests you want to run (by their test name). Note, that for these to work, you need to run all the tests first. Hit the a key to do that.

Note: You may prefer to run the test:changed script which will run the tests only once. This will allow you to avoid the "learning crutch" of immediate feedback that you get from the watch mode. But it's up to you!

Contributing

If you have any questions, let me know.

If you use this workshop, please Pull Request this README with a link to your event.

If you want to edit/update anything in the exercises, please make all changes in the templates directory. We're using split-guide, so the exercises and exercises-final directories are generated.

Events

Contributors

Thanks goes to these wonderful people (emoji key):

Aaron Frost
Aaron Frost

πŸ’» πŸ“– πŸ“’ ⚠️
Axel Rauschmayer
Axel Rauschmayer

πŸ“’
Kent C. Dodds
Kent C. Dodds

πŸ’» πŸ“– πŸš‡ πŸ‘€ πŸ“’ ⚠️
Jim Cummins
Jim Cummins

πŸ“– ⚠️
Lindsey
Lindsey

πŸ“–
Marius Butuc
Marius Butuc

πŸ’»
Carlos Ortega
Carlos Ortega

πŸ“–
Ryan Braganza
Ryan Braganza

πŸ’»
Emrah Mehmedov
Emrah Mehmedov

πŸ’» ⚠️
Arijit Layek
Arijit Layek

πŸ’»
Dhruv Mishra
Dhruv Mishra

πŸ’»
Bobby White
Bobby White

⚠️
Ben Ilegbodu
Ben Ilegbodu

πŸ“– ⚠️
Thomas Greenhalgh
Thomas Greenhalgh

πŸ’»
Aaron Ang
Aaron Ang

πŸ’» πŸ“–
Daniela Yassuda
Daniela Yassuda

πŸ’»
Kyle West
Kyle West

πŸ’» ⚠️
Álvaro Salazar
Álvaro Salazar

πŸ“–
ambujsahu81
ambujsahu81

πŸ“–
TIGER
TIGER

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

This material is available for private, non-commercial use under the GPL version 3. If you would like to use this material to conduct your own workshop, please contact me at [email protected]

es6-workshop's People

Contributors

aaronang avatar aaronfrost avatar alayek avatar allcontributors[bot] avatar ambujsahu81 avatar benmvp avatar bobby-white avatar cyborgspider avatar danielasy avatar dhruvmishra avatar fabriciopirini avatar gizmomkd avatar jimthedev avatar kyle-west avatar lmdragun avatar m7mdtiger avatar mariusbutuc avatar ryanbraganza avatar tgreenhalgh avatar tivcrmn avatar villeahy avatar wrb94 avatar xala3pa avatar zyst avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

es6-workshop's Issues

Migrate to AVA

Just because I think it's simpler, faster, and I want to encourage people to use it :-)

Syntax error on yarn run setup

Hello,

Thank you for the workshop. I'm excited to get started. I'm hoping to get some help with the following error on initial setup:

$ yarn -v
n1.7.0
$ node -v
v6.14.2
$ yarn run setup
yarn run v1.7.0
$ node ./scripts/verify && node ./scripts/install && npm run validate && node ./scripts/autofill-feedback-email
/code/sandbox/es6-workshop/scripts/verify.js:22
    )
    ^

SyntaxError: Unexpected token )
    at createScript (vm.js:56:10)
    at Object.runInThisContext (vm.js:97:10)
    at Module._compile (module.js:549:28)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.runMain (module.js:611:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:160:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Should we have a prepush hook to run tests before pushing?

Something like the "precommit" script in package.json

"prepush": "yarn setup"

Would this be a desired feature, to locally run the tests and lint before pushing?

A use-case I can think of is to not have to wait till Travis gets back to the contributor that there is a minor lint violation.

SyntaxError: Unexpected token {

I was running my first test on the first exercise and got a syntax error:

$ yarn test:changed
yarn test:changed v0.19.1
$ npm run test --silent -- --onlyChanged
 FAIL  exercises/01_block-scoping.test.js
  ● Test suite failed to run

    SyntaxError: Unexpected token {

      at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
      at process._tickCallback (node.js:369:9)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.729s
Ran all test suites related to changed files.
error Command failed with exit code 1.

The file itself definetely has no syntax errors, i can attach it if it helps.
Thanks!

SyntaxError: Unexpected token import

hi

I followed the setup process as described but when I run an individual quiz file I get this:

(function (exports, require, module, __filename, __dirname) { import log from './pretty-log' ^^^^^^ SyntaxError: Unexpected token import at Object.exports.runInThisContext (vm.js:73:16) at Module._compile (module.js:543:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12) at Function.Module._load (module.js:439:3) at Module.runMain (module.js:605:10) at run (bootstrap_node.js:418:7) at startup (bootstrap_node.js:139:9) at bootstrap_node.js:533:3

It might just be my machine of something...

Thanks

Node @ 7.5.0
yarn @ 0.19
npm @ 4.1.2

Proxies

Now that we have Node v6, we can use Proxies which is pretty legit. Let's make an example of this! Some examples here

One question about 01_block-scoping quizz

I run yarn start and go into the interactive mode.
When I run this function. I think it should throw an error about the reference due to let and const, but it did not.

image

image

Is this something wrong with the settings in this project about babel?

Help add quizzes!

I added a quizzes directory and intend on adding a few quiz functions for every concept to be used before/while teaching the concept. If anyone wants to help make those, please do! I recorded this video explaining how it works and stuff!

Chokidar not watching file changes if filename is 12_maps.js

When running the command yarn quiz or npm run quiz, it's rerunning only on the first file change for this file.

After that, it's been ignoring all file changes on the file. However, changes in other files detected
And this is happening only for one file, 12_maps.js.

I tested the chokidar regex from run.js, which is *_*.js under quizzes directory.

I tested on two machines. On my laptop, I faced same issue with Atom and VSCode embedded terminals.

I have reproduced the issue on Cloud9. You can view the issue live here.

Have also posted in the gitter chatroom.

No option to run tests in "only changed" mode

When running yarn run test:watch, there is no option to run in "only changed" mode, i.e. no o option. This makes me wonder why Jest decided to remove this option in the interactive dialog; the option can still be passed as an option to Jest CLI.

Anyway, the "How To Run Tests" needs to be updated.

Thanks a lot for this great workshop πŸ˜„

EDIT: I think Jest runs in "only changed" mode by default, i.e. no need to press o anymore.

Remove unnecessary `defaultObj` in `07_parameters.test.js`

function myFunction({name = 'Aaron', age = 35, favoriteBand = 'Queen'} = defaultObj) {
has:

const defaultObj = {
  name: 'Aaron',
  age: 35,
  favoriteBand: 'Queen'
};

function myFunction({name = 'Aaron', age = 35, favoriteBand = 'Queen'} = defaultObj) {
  expect(name).to.exist;
  expect(age).to.exist;
  expect(favoriteBand).to.exist;
}

myFunction();

But defaultObj is actually redundant! If you just set it to {}, it still works. As best as I can wrap my head around it:

  1. Default parameter replacement: myFunction() β†’ myFunction({})
  2. Destructuring: name = {}.name; ... all of which are undefined
  3. Default parameters, again! name = name === undefined ? 'Aaron' : name; ... which effectively rebuilds defaultObj.

This is insane. WebAssembly can't come soon enough. :)

Deleting repo and recreating due to fork of a fork issues

Because when someone forks this repo to contribute stuff, it becomes a fork of the original repo making it hard to contribute to this repo. This repo has diverted significantly from the original repo anyway and I will leave the gratitude in the README and leave the commits as they are, so I think it'll be fine.

πŸ‘‹ stars, forks, and watchers :-(

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.