Skip to content

Commit 2788494

Browse files
ShMcKShMcK
committed
tutorial updated for atom 0.9
1 parent 30f56a1 commit 2788494

File tree

9 files changed

+169
-150
lines changed

9 files changed

+169
-150
lines changed

‎README.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,6 @@ CodeRoad is an open-sourced interactive tutorial platform for the Atom Editor. L
1919

2020
## Outline
2121

22-
### Features
23-
24-
New features in ES2015.
25-
2622
##### Let
2723

2824
`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.
@@ -77,3 +73,18 @@ let multi = `string text line 1
7773

7874
let template = `string text ${expression} string text`;
7975
```
76+
77+
##### Object Literal
78+
79+
A shorthand for writing objects.
80+
81+
```js
82+
const foo = 'something';
83+
const bar = 'else';
84+
85+
// using object literal shorthand
86+
const fooObj = {
87+
foo, bar
88+
};
89+
// { foo: 'something', bar: 'else'}
90+
```

‎coderoad.json

Lines changed: 147 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -3,155 +3,165 @@
33
"title": "ES2015",
44
"description": "Practice refactoring with ES2015 features."
55
},
6-
"chapters": [
6+
"pages": [
77
{
8-
"title": "Features",
9-
"description": "New features in ES2015.",
10-
"pages": [
8+
"title": "Let",
9+
"description": "`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.\n\nThis is unlike the `var` keyword, which defines a variable globally, or locally to an entire function regardless of block scope.\n\n```js\nvar global = true;\nlet blockScoped = true;\n```",
10+
"tasks": [
1111
{
12-
"title": "Let",
13-
"description": "`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.\n\nThis is unlike the `var` keyword, which defines a variable globally, or locally to an entire function regardless of block scope.\n\n```js\nvar global = true;\nlet blockScoped = true;\n```",
14-
"tasks": [
15-
{
16-
"description": "Run the `varTest` function and look in the console.",
17-
"tests": [
18-
"1/01/01"
19-
],
20-
"hints": [
21-
"Click \"SAVE\". ⌘ + S on Mac, ctrl + S on Windows"
22-
],
23-
"actions": [
24-
"open('let.js')",
25-
"set('// call `varTest()`\nfunction varTest() {\n\tvar x = 1;\n\tif (true) {\n\t\tvar x = 2;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nvarTest();\n\n\n')"
26-
]
27-
},
28-
{
29-
"description": "Change `var` to `let` and run the `letTest` function. Don't forget to look in the console.",
30-
"tests": [
31-
"1/01/02"
32-
],
33-
"actions": [
34-
"insert('\n// use `let` and call `letTest()`\nfunction letTest() {\n\tvar x = 3;\n\tif (true) {\n\t\tvar x = 4;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nletTest();\n\n\n')"
35-
]
36-
},
37-
{
38-
"description": "fix the broken loop to log numbers 1 to 5",
39-
"tests": [
40-
"1/01/03"
41-
],
42-
"actions": [
43-
"insert('\n// log numbers from 1 to 5\nfor (var i = 1; i <= 5 ; i++ ) {\n setTimeout(function() {\n console.log(i);\n })\n}\n// 6 6 6 6 6\n\n')"
44-
]
45-
}
12+
"description": "Run the `varTest` function and look in the console.",
13+
"tests": [
14+
"1/01/01"
4615
],
47-
"onPageComplete": "Great! Now you that you have an idea of how `let` works, continue to look at declaring variables with `const`."
16+
"hints": [
17+
"Click \"SAVE\". ⌘ + S on Mac, ctrl + S on Windows"
18+
],
19+
"actions": [
20+
"open('let.js')",
21+
"set('// call `varTest()`\nfunction varTest() {\n\tvar x = 1;\n\tif (true) {\n\t\tvar x = 2;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nvarTest();\n\n\n')"
22+
]
23+
},
24+
{
25+
"description": "Change `var` to `let` and run the `letTest` function. Don't forget to look in the console.",
26+
"tests": [
27+
"1/01/02"
28+
],
29+
"actions": [
30+
"insert('\n// use `let` and call `letTest()`\nfunction letTest() {\n\tvar x = 3;\n\tif (true) {\n\t\tvar x = 4;\n\t\tconsole.log(x);\n\t}\n\tconsole.log(x);\n}\nletTest();\n\n\n')"
31+
]
32+
},
33+
{
34+
"description": "fix the broken loop to log numbers 1 to 5",
35+
"tests": [
36+
"1/01/03"
37+
],
38+
"actions": [
39+
"insert('\n// log numbers from 1 to 5\nfor (var i = 1; i <= 5 ; i++ ) {\n setTimeout(function() {\n console.log(i);\n })\n}\n// 6 6 6 6 6\n\n')"
40+
]
41+
}
42+
],
43+
"onPageComplete": "Great! Now you that you have an idea of how `let` works, continue to look at declaring variables with `const`."
44+
},
45+
{
46+
"title": "Const",
47+
"description": "`const` is block-scoped, much like `let` statement.\n\nHowever, the value of a constant cannot change through re-assignment, and it can't be redeclared.\n\n```js\nconst name = 'Shawn';\nname = 'Ben'; // Uncaught TypeError\nconsole.log(name); // Shawn\n```\n\n*Note: Atom uses an older version of Chrome that does not fully implement const yet. Const will work in Atom after a few months.*",
48+
"tasks": [
49+
{
50+
"description": "Declare \"person\" as a `const`",
51+
"tests": [
52+
"1/02/01"
53+
],
54+
"actions": [
55+
"open('const.js')",
56+
"set('/*\nNote: Atom uses an older version of Chrome (47) that does not fully implement `const` yet.\n\n`const` will work in a later version of chrome, so these tests are currently skipped.\n*/\n\n// change password into a const so that it\n// cannot be redeclared\nvar password = 'PASS';\npassword = '1234';\n\n\n')"
57+
]
4858
},
4959
{
50-
"title": "Const",
51-
"description": "`const` is block-scoped, much like `let` statement.\n\nHowever, the value of a constant cannot change through re-assignment, and it can't be redeclared.\n\n```js\nconst name = 'Shawn';\nname = 'Ben'; // Uncaught TypeError\nconsole.log(name); // Shawn\n```\n\n*Note: Atom uses an older version of Chrome that does not fully implement const yet. Const will work in Atom after a few months.*",
52-
"tasks": [
53-
{
54-
"description": "Declare \"person\" as a `const`",
55-
"tests": [
56-
"1/02/01"
57-
],
58-
"actions": [
59-
"open('const.js')",
60-
"set('/*\nNote: Atom uses an older version of Chrome (47) that does not fully implement `const` yet.\n\n`const` will work in a later version of chrome, so these tests are currently skipped.\n*/\n\n// change password into a const so that it\n// cannot be redeclared\nvar password = 'PASS';\npassword = '1234';\n\n\n')"
61-
]
62-
},
63-
{
64-
"description": "Declare \"person\" as a constant. Check the log to see what will happen.",
65-
"tests": [
66-
"1/02/02"
67-
],
68-
"actions": [
69-
"insert('\n// declare person as a const\n// cannot be redeclared\nvar person = {\n name: 'Shawn',\n city: 'Vancouver'\n};\n\nperson = {\n name: 'Unknown',\n city: 'Las Vegas'\n};\n\nperson.favoriteColor = 'blue';\n\n// what will the output be?\nconsole.log(person);\n\n\n')"
70-
]
71-
},
72-
{
73-
"description": "Declare \"people\" as a constant. Check the log again.",
74-
"tests": [
75-
"1/02/03"
76-
],
77-
"actions": [
78-
"insert('\n// declare people as a const\n\nvar people = ['Mandi', 'Mack', 'Ben'];\n\npeople = [];\n\npeople.push('Shawn');\n\n// what will the output be?\nconsole.log(people);\n\n')"
79-
]
80-
}
60+
"description": "Declare \"person\" as a constant. Check the log to see what will happen.",
61+
"tests": [
62+
"1/02/02"
63+
],
64+
"actions": [
65+
"insert('\n// declare person as a const\n// cannot be redeclared\nvar person = {\n name: 'Shawn',\n city: 'Vancouver'\n};\n\nperson = {\n name: 'Unknown',\n city: 'Las Vegas'\n};\n\nperson.favoriteColor = 'blue';\n\n// what will the output be?\nconsole.log(person);\n\n\n')"
8166
]
8267
},
8368
{
84-
"title": "Arrow Functions",
85-
"description": "An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the `this` value.\n\nArrow functions are always anonymous.\n\n```js\n// multi-line\nconst add = (x, y) => {\n\treturn x + y;\n};\n// single line, auto returns\nconst subtractOne = x => x - 1;\nconst getOne = () => 1;\n```",
86-
"tasks": [
87-
{
88-
"description": "Change the \"greet\" function to use an `=>` function",
89-
"tests": [
90-
"1/03/01"
91-
],
92-
"actions": [
93-
"open('arrow-function.js')",
94-
"set('// use =>\nconst greet = function (name) {\n\treturn 'hello ' + name;\n}\n\n\n')"
95-
]
96-
},
97-
{
98-
"description": "Change the \"getName\" function to use an `=>` function without using the keyword `return`",
99-
"tests": [
100-
"1/03/02"
101-
],
102-
"actions": [
103-
"insert('\n// use => no return statement\nconst getName = function getName() {\n\treturn 'Joe';\n}\n\n\n')"
104-
]
105-
},
106-
{
107-
"description": "Fix the broken clock by using arrow functions.",
108-
"tests": [
109-
"1/03/03"
110-
],
111-
"actions": [
112-
"insert('\n// fix the clock\n// http://codepen.io/redacademy/pen/mPjXVW\n\n')"
113-
]
114-
}
69+
"description": "Declare \"people\" as a constant. Check the log again.",
70+
"tests": [
71+
"1/02/03"
72+
],
73+
"actions": [
74+
"insert('\n// declare people as a const\n\nvar people = ['Mandi', 'Mack', 'Ben'];\n\npeople = [];\n\npeople.push('Shawn');\n\n// what will the output be?\nconsole.log(people);\n\n')"
75+
]
76+
}
77+
]
78+
},
79+
{
80+
"title": "Arrow Functions",
81+
"description": "An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the `this` value.\n\nArrow functions are always anonymous.\n\n```js\n// multi-line\nconst add = (x, y) => {\n\treturn x + y;\n};\n// single line, auto returns\nconst subtractOne = x => x - 1;\nconst getOne = () => 1;\n```",
82+
"tasks": [
83+
{
84+
"description": "Change the \"greet\" function to use an `=>` function",
85+
"tests": [
86+
"1/03/01"
11587
],
116-
"onPageComplete": "Great! Now you should have a good idea how to use `=>` functions, and how arrow functions solve the confusion over `this`"
88+
"actions": [
89+
"open('arrow-function.js')",
90+
"set('// use =>\nconst greet = function (name) {\n\treturn 'hello ' + name;\n}\n\n\n')"
91+
]
11792
},
11893
{
119-
"title": "Template Literal",
120-
"description": "Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.\n\nTemplate strings are wrapped in the backtick symbol: '\\`'. Variables can be put inside of template strings using `${ name }` syntax.\n\n```js\nlet single = `string text`;\nlet multi = `string text line 1\n string text line 2`;\n\nlet template = `string text ${expression} string text`;\n```",
121-
"tasks": [
122-
{
123-
"description": "`log` a template literal using `template`. What does it look like?",
124-
"actions": [
125-
"open('template-literal.js')",
126-
"set('// change the output to a template literal\n\nfunction template() {\n console.log('I know what a backtick is');\n}\ntemplate();\n\n\n')"
127-
],
128-
"tests": [
129-
"1/04/01"
130-
]
131-
},
132-
{
133-
"description": "rewrite `multiline` to use template literals",
134-
"tests": [
135-
"1/04/02"
136-
],
137-
"actions": [
138-
"insert('\nfunction multiline() {\n\tconsole.log('1.\\n2.\\n3.');\n}\nmultiline();\n// 1.\n// 2.\n// 3.\n\n\n')"
139-
]
140-
},
141-
{
142-
"description": "rewrite `expressions` to use template literals",
143-
"tests": [
144-
"1/04/03"
145-
],
146-
"hints": [
147-
"Use `${expressions}`"
148-
],
149-
"actions": [
150-
"insert('\nfunction expression(name) {\n console.log(\n 'Hello ' + name +\n ', your bill is ' +\n (2.25 * 1.15).toFixed(2) +\n '.'\n );\n}\nexpression('Joe');\n\n')"
151-
]
152-
}
94+
"description": "Change the \"getName\" function to use an `=>` function without using the keyword `return`",
95+
"tests": [
96+
"1/03/02"
15397
],
154-
"onPageComplete": "Great! Now you should have a good idea how to use template literals in your code"
98+
"actions": [
99+
"insert('\n// use => no return statement\nconst getName = function getName() {\n\treturn 'Joe';\n}\n\n\n')"
100+
]
101+
},
102+
{
103+
"description": "Fix the broken clock by using arrow functions.",
104+
"tests": [
105+
"1/03/03"
106+
],
107+
"actions": [
108+
"insert('\n// fix the clock\n// http://codepen.io/redacademy/pen/mPjXVW\n\n')"
109+
]
110+
}
111+
],
112+
"onPageComplete": "Great! Now you should have a good idea how to use `=>` functions, and how arrow functions solve the confusion over `this`"
113+
},
114+
{
115+
"title": "Template Literal",
116+
"description": "Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.\n\nTemplate strings are wrapped in the backtick symbol: '\\`'. Variables can be put inside of template strings using `${ name }` syntax.\n\n```js\nlet single = `string text`;\nlet multi = `string text line 1\n string text line 2`;\n\nlet template = `string text ${expression} string text`;\n```",
117+
"tasks": [
118+
{
119+
"description": "`log` a template literal using `template`. What does it look like?",
120+
"actions": [
121+
"open('template-literal.js')",
122+
"set('// change the output to a template literal\n\nfunction template() {\n console.log('I know what a backtick is');\n}\ntemplate();\n\n\n')"
123+
],
124+
"tests": [
125+
"1/04/01"
126+
]
127+
},
128+
{
129+
"description": "rewrite `multiline` to use template literals",
130+
"tests": [
131+
"1/04/02"
132+
],
133+
"actions": [
134+
"insert('\nfunction multiline() {\n\tconsole.log('1.\\n2.\\n3.');\n}\nmultiline();\n// 1.\n// 2.\n// 3.\n\n\n')"
135+
]
136+
},
137+
{
138+
"description": "rewrite `expressions` to use template literals",
139+
"tests": [
140+
"1/04/03"
141+
],
142+
"hints": [
143+
"Use `${expressions}`"
144+
],
145+
"actions": [
146+
"insert('\nfunction expression(name) {\n console.log(\n 'Hello ' + name +\n ', your bill is ' +\n (2.25 * 1.15).toFixed(2) +\n '.'\n );\n}\nexpression('Joe');\n\n')"
147+
]
148+
}
149+
],
150+
"onPageComplete": "Great! Now you should have a good idea how to use template literals in your code"
151+
},
152+
{
153+
"title": "Object Literal",
154+
"description": "A shorthand for writing objects.\n\n```js\nconst foo = 'something';\nconst bar = 'else';\n\n// using object literal shorthand\nconst fooObj = {\n foo, bar\n};\n// { foo: 'something', bar: 'else'}\n```",
155+
"tasks": [
156+
{
157+
"description": "Rewrite the object in an easier way using object literals",
158+
"actions": [
159+
"open('object-literal.js')",
160+
"set('// rewrite in a simpler way\nfunction getPersonObj(name, city) {\n return {\n name: name,\n city: city\n };\n}\n')"
161+
],
162+
"tests": [
163+
"1/05/01"
164+
]
155165
}
156166
]
157167
}

‎tutorial/1/01/let.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
### Let
1+
## Let
22

33
`let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.
44

‎tutorial/1/02/const.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
### Const
1+
## Const
22

33
`const` is block-scoped, much like `let` statement.
44

‎tutorial/1/03/arrow-function.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
### Arrow Functions
1+
## Arrow Functions
22

33
An arrow function (`=>`) expression has a shorter syntax compared to function expressions and lexically binds the `this` value.
44

‎tutorial/1/04/template-literal.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
### Template Literal
1+
## Template Literal
22

33
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.
44

‎tutorial/2/01/01.spec.js renamed to ‎tutorial/1/05/01.spec.js

File renamed without changes.

‎tutorial/2/01/object-literal.md renamed to ‎tutorial/1/05/object-literal.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
### Object Literal
1+
## Object Literal
22

33
A shorthand for writing objects.
44

@@ -15,7 +15,7 @@ const fooObj = {
1515

1616
+ Rewrite the object in an easier way using object literals
1717
@action(open('object-literal.js'))
18-
@test('2/01/01')
18+
@test('1/05/01')
1919
@action(set(
2020
```
2121
// rewrite in a simpler way

‎tutorial/tutorial.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# ES2015
22
Practice refactoring with ES2015 features.
33

4-
## Features
5-
New features in ES2015.
6-
74
@import('1/01/let')
85
@import('1/02/const')
96
@import('1/03/arrow-function')
107
@import('1/04/template-literal')
8+
@import('1/05/object-literal')

0 commit comments

Comments
 (0)