Skip to content

Commit 29a23f6

Browse files
authored
Merge branch 'master' into patch-1
2 parents a572426 + 7361a22 commit 29a23f6

File tree

14 files changed

+86
-95
lines changed

14 files changed

+86
-95
lines changed

1-js/01-getting-started/1-intro/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Different engines have different "codenames", for example:
2626

2727
- [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- in Chrome and Opera.
2828
- [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- in Firefox.
29-
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari etc.
29+
- ...There are other codenames like "Trident", "Chakra" for different versions of IE, "ChakraCore" for Microsoft Edge, "Nitro" and "SquirrelFish" for Safari, etc.
3030

3131
The terms above are good to remember, because they are used in developer articles on the internet. We'll use them too. For instance, if "a feature X is supported by V8", then it probably works in Chrome and Opera.
3232

@@ -45,7 +45,7 @@ The engine applies optimizations on every stage of the process. It even watches
4545

4646
The modern JavaScript is a "safe" programming language. It does not provide low-level access to memory or CPU, because it was initially created for browsers which do not require it.
4747

48-
The capabilities greatly depend on the environment that runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests etc.
48+
The capabilities greatly depend on the environment that runs JavaScript. For instance, [Node.JS](https://wikipedia.org/wiki/Node.js) supports functions that allow JavaScript to read/write arbitrary files, perform network requests, etc.
4949

5050
In-browser JavaScript can do everything related to webpage manipulation, interaction with the user and the webserver.
5151

1-js/01-getting-started/2-code-editors/article.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,12 @@ If you haven't considered selecting an IDE yet, look at the following variants:
1616
- [Visual Studio Code](https://code.visualstudio.com/) (free).
1717
- [Netbeans](http://netbeans.org/) (paid).
1818

19-
All of the IDEs except cross-platform.
19+
All of the IDEs are cross-platform.
2020

21-
For Windows, there's also a "Visual Studio" editor, don't mess it with "Visual Studio Code". "Visual Studio" is a paid and actually very powerful Windows-only editor, well-suited for .NET platform. A free version of it is called [Visual Studio Community](https://www.visualstudio.com/vs/community/).
21+
For Windows, there's also a "Visual Studio" editor, don't confuse it with "Visual Studio Code". "Visual Studio" is a paid and actually very powerful Windows-only editor, well-suited for .NET platform. A free version of it is called ([Visual Studio Community](https://www.visualstudio.com/vs/community/).
2222

2323
Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
2424

25-
26-
2725
## Lightweight editors
2826

2927
"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
@@ -53,7 +51,7 @@ I'm using:
5351

5452
## Let's not argue
5553

56-
The editors in the lists above are those that either I or my friends who I consider good developers have been using for a long time and are happy with.
54+
The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
5755

5856
There are other great editors in our big world. Please choose the one you like the most.
5957

1-js/02-first-steps/02-structure/article.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ The first thing to study is the building blocks of the code.
66

77
Statements are syntax constructs and commands that perform actions.
88

9-
We've already seen a statement `alert('Hello, world!')`, which shows the message.
9+
We've already seen a statement `alert('Hello, world!')`, which shows the message "Hello world!".
1010

1111
We can have as many statements in the code as we want. Another statement can be separated with a semicolon.
1212

@@ -46,7 +46,7 @@ alert(3 +
4646
+ 2);
4747
```
4848

49-
The code outputs `6`, because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", no semicolon required. And in this case that works as intended.
49+
The code outputs `6` because JavaScript does not insert semicolons here. It is intuitively obvious that if the line ends with a plus `"+"`, then it is an "incomplete expression", so the semicolon is not required. And in this case that works as intended.
5050

5151
**But there are situations where JavaScript "fails" to assume a semicolon where it is really needed.**
5252

@@ -98,7 +98,7 @@ It's recommended to put semicolons between statements even if they are separated
9898

9999
As time goes on, the program becomes more and more complex. It becomes necessary to add *comments* which describe what happens and why.
100100

101-
Comments can be put into any place of the script. They don't affect the execution, because the engine simply ignores them.
101+
Comments can be put into any place of the script. They don't affect the execution because the engine simply ignores them.
102102

103103
**One-line comments start with two forward slash characters `//`.**
104104

@@ -156,4 +156,4 @@ Please, don't hesitate to comment your code.
156156

157157
Comments increase the overall code footprint, but that's not a problem at all. There are many tools which minify the code before publishing to the production server. They remove comments, so they don't appear in the working scripts. Therefore comments do not have any negative effects on production at all.
158158

159-
Further in the tutorial, there will be a chapter <info:coding-style> that also explains how to write better comments.
159+
Further in the tutorial there will be a chapter <info:coding-style> that also explains how to write better comments.

1-js/03-code-quality/02-coding-style/article.md

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
# Coding style
1+
# Coding Style
22

33
Our code must be as clean and easy to read as possible.
44

5-
That is actually an art of programming -- to take a complex task and code it in a way that is both correct and human-readable.
6-
7-
One thing to help is the good code style.
5+
That is actually the art of programming -- to take a complex task and code it in a way that is both correct and human-readable.
86

97
## Syntax
108

11-
A cheatsheet with the rules (more details below):
9+
Here is a cheatsheet with some suggested rules (see below for more details):
1210

1311
![](code-style.png)
1412
<!--
@@ -38,13 +36,13 @@ if (n < 0) {
3836

3937
Now let's discuss the rules and reasons for them in detail.
4038

41-
Nothing is "carved in stone" here. Everything is optional and can be changed: these are coding rules, not religious dogmas.
42-
43-
### Curly braces
39+
```warn header="Irony Detected"
40+
Nothing is set in stone here. These are style preferences, not religious dogmas.
41+
```
4442

45-
In most JavaScript projects curly braces are written on the same line as the corresponding keyword, not on the new line, a so-called "Egyptian" style. There's also a space before an opening bracket.
43+
### Curly Braces
4644

47-
Like this:
45+
In most JavaScript projects curly braces are written in "Egyptian" style with the opening brace on the same line as the corresponding keyword -- not on a new line. There should also be a space before the opening bracket, like this:
4846

4947
```js
5048
if (condition) {
@@ -56,7 +54,7 @@ if (condition) {
5654

5755
A single-line construct is an important edge case. Should we use brackets at all? If yes, then where?
5856

59-
Here are the annotated variants, so you can judge about their readability on your own:
57+
Here are the annotated variants so you can judge their readability for yourself:
6058

6159
<!--
6260
```js no-beautify
@@ -74,21 +72,21 @@ if (n < 0) {
7472
-->
7573
![](figure-bracket-style.png)
7674

77-
As a summary:
78-
- For a really short code, one line is acceptable: like `if (cond) return null`.
79-
- But a separate line for each statement in brackets is usually better.
75+
In summary:
76+
- For very short code, one line is acceptable. For example: `if (cond) return null`.
77+
- But a separate line for each statement in brackets is usually easier to read.
8078

81-
### Line length
79+
### Line Length
8280

83-
The maximal line length should be limited. No one likes to eye-follow a long horizontal line. It's better to split it.
81+
No one likes to read a long horizontal line of code. It's best practice to split them up and limit the length of your lines.
8482

85-
The maximal line length is agreed on the team-level. It's usually 80 or 120 characters.
83+
The maximum line length should be agreed upon at the team-level. It's usually 80 or 120 characters.
8684

8785
### Indents
8886

8987
There are two types of indents:
9088

91-
- **A horizontal indent: 2(4) spaces.**
89+
- **Horizontal indents: 2 or 4 spaces.**
9290

9391
A horizontal indentation is made using either 2 or 4 spaces or the "Tab" symbol. Which one to choose is an old holy war. Spaces are more common nowadays.
9492

@@ -107,9 +105,9 @@ There are two types of indents:
107105
}
108106
```
109107

110-
- **A vertical indent: empty lines for splitting code into logical blocks.**
108+
- **Vertical indents: empty lines for splitting code into logical blocks.**
111109

112-
Even a single function can often be divided in logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically:
110+
Even a single function can often be divided into logical blocks. In the example below, the initialization of variables, the main loop and returning the result are split vertically:
113111

114112
```js
115113
function pow(x, n) {
@@ -125,21 +123,21 @@ There are two types of indents:
125123

126124
Insert an extra newline where it helps to make the code more readable. There should not be more than nine lines of code without a vertical indentation.
127125

128-
### A semicolon
126+
### Semicolons
129127

130-
A semicolon should be present after each statement. Even if it could possibly be skipped.
128+
A semicolon should be present after each statement, even if it could possibly be skipped.
131129

132-
There are languages where a semicolon is truly optional. It's rarely used there. But in JavaScript there are few cases when a line break is sometimes not interpreted as a semicolon. That leaves a place for programming errors.
130+
There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors.
133131

134-
As you become more mature as a programmer, you may choose a no-semicolon style, like [StandardJS](https://standardjs.com/), but that's only when you know JavaScript well and understand possible pitfalls.
132+
As you become more mature as a programmer, you may choose a no-semicolon style like [StandardJS](https://standardjs.com/). Until then, it's best to use semicolons to avoid possible pitfalls.
135133

136-
### Nesting levels
134+
### Nesting Levels
137135

138-
There should not be too many nesting levels.
136+
Try to avoid nesting code too many levels deep.
139137

140-
Sometimes it's a good idea to use the ["continue"](info:while-for#continue) directive in the loop to evade extra nesting in `if(..) { ... }`:
138+
Sometimes it's a good idea to use the ["continue"](info:while-for#continue) directive in a loop to avoid extra nesting.
141139
142-
Instead of:
140+
For example, instead of adding a nested `if` conditional like this:
143141
144142
```js
145143
for (let i = 0; i < 10; i++) {
@@ -162,7 +160,7 @@ A similar thing can be done with `if/else` and `return`.
162160
163161
For example, two constructs below are identical.
164162
165-
The first one:
163+
Option 1:
166164
167165
```js
168166
function pow(x, n) {
@@ -180,7 +178,7 @@ function pow(x, n) {
180178
}
181179
```
182180
183-
And this:
181+
Option 2:
184182
185183
```js
186184
function pow(x, n) {
@@ -199,13 +197,13 @@ function pow(x, n) {
199197
}
200198
```
201199
202-
...But the second one is more readable, because the "edge case" of `n < 0` is handled early on, and then we have the "main" code flow, without an additional nesting.
200+
The second one is more readable because the "edge case" of `n < 0` is handled early on. Once the check is done we can move on to the "main" code flow without the need for additional nesting.
203201
204-
## Functions below the code
202+
## Function Placement
205203
206-
If you are writing several "helper" functions and the code to use them, then there are three ways to place them.
204+
If you are writing several "helper" functions and the code that uses them, there are three ways to organize the functions.
207205
208-
1. Functions above the code that uses them:
206+
1. Functions declared above the code that uses them:
209207
210208
```js
211209
// *!*function declarations*/!*
@@ -235,7 +233,6 @@ If you are writing several "helper" functions and the code to use them, then the
235233
walkAround();
236234
237235
// --- *!*helper functions*/!* ---
238-
239236
function createElement() {
240237
...
241238
}
@@ -248,55 +245,54 @@ If you are writing several "helper" functions and the code to use them, then the
248245
...
249246
}
250247
```
251-
3. Mixed: a function is described where it's first used.
248+
3. Mixed: a function is declared where it's first used.
252249

253250
Most of time, the second variant is preferred.
254251

255-
That's because when reading a code, we first want to know "what it does". If the code goes first, then it provides that information. And then maybe we won't need to read functions at all, especially if their names are adequate to what they're doing.
252+
That's because when reading code, we first want to know *what it does*. If the code goes first, then it provides that information. Then, maybe we won't need to read the functions at all, especially if their names are descriptive of what they actually do.
256253

257-
## Style guides
254+
## Style Guides
258255

259-
A style guide contains general rules about "how to write": which quotes to use, how many spaces to indent, where to put line breaks, etc. A lot of minor things.
256+
A style guide contains general rules about "how to write" code, e.g. which quotes to use, how many spaces to indent, where to put line breaks, etc. A lot of minor things.
260257

261-
In total, when all members of a team use the same style guide, the code looks uniform. No matter who of the team wrote it, it's still the same style.
258+
When all members of a team use the same style guide the code tends looks uniform, regardless of which team member wrote it.
262259

263-
Surely, a team may think out a style guide themselves. But as of now, there's no need to. There are many tried, worked-out style guides, which are easy to adopt.
260+
Of course, a team can always write their own style guide. Most of the time though, there's no need to. There are many existing tried and true options to choose from, so adopting one of these is usually your best bet.
264261
265-
For instance:
262+
Some popular choices:
266263
267264
- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
268265
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
269266
- [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
270267
- [StandardJS](https://standardjs.com/)
271-
- (there are more)
268+
- (plus many more)
272269
273-
If you're a novice developer, then you could start with the cheatsheet above in the chapter, and later browse the style guides to pick up the common principles and maybe choose one.
270+
If you're a novice developer, start with the cheatsheet at the beginning of this chapter. Once you've mastered that you can browse other style guides to pick up common principles and decide which one you like best.
274271
275-
## Automated linters
272+
## Automated Linters
276273
277-
There are tools that can check the code style automatically. They are called "linters".
274+
Linters are tools that can automatically check the style of your code and make suggestions for refactoring.
278275
279-
The great thing about them is that style-checking also finds some bugs, like a typo in a variable or function name.
276+
The great thing about them is that style-checking can also find some bugs, like typos in variable or function names. Because of this feature, installing a linter is recommended even if you don't want to stick to one particular "code style".
280277

281-
So it's recommended to install one, even if you don't want to stick to a "code style". They help to find typos -- and that's already good enough.
282-
283-
Most well-known tools are:
278+
Here are the most well-known linting tools:
284279

285280
- [JSLint](http://www.jslint.com/) -- one of the first linters.
286281
- [JSHint](http://www.jshint.com/) -- more settings than JSLint.
287282
- [ESLint](http://eslint.org/) -- probably the newest one.
288283

289284
All of them can do the job. The author uses [ESLint](http://eslint.org/).
290285

291-
Most linters are integrated with editors: just enable the plugin in the editor and configure the style.
286+
Most linters are integrated with many popular editors: just enable the plugin in the editor and configure the style.
292287

293288
For instance, for ESLint you should do the following:
294289

295290
1. Install [Node.JS](https://nodejs.org/).
296291
2. Install ESLint with the command `npm install -g eslint` (npm is a JavaScript package installer).
297292
3. Create a config file named `.eslintrc` in the root of your JavaScript project (in the folder that contains all your files).
293+
4. Install/enable the plugin for your editor that integrates with ESLint. The majority of editors have one.
298294

299-
Here's an example of `.eslintrc`:
295+
Here's an example of an `.eslintrc` file:
300296
301297
```js
302298
{
@@ -313,22 +309,16 @@ Here's an example of `.eslintrc`:
313309
}
314310
```
315311
316-
Here the directive `"extends"` denotes that we base on the "eslint:recommended" set of settings, and then we specify our own.
317-
318-
Then install/enable the plugin for your editor that integrates with ESLint. The majority of editors have it.
319-
320-
It is possible to download style rule sets from the web and extend them instead. See <http://eslint.org/docs/user-guide/getting-started> for more details about installation.
321-
322-
Using a linter has a great side-effect: linters catch typos. For instance, when an undefined variable is accessed, a linter detects it and (if integrated with an editor) highlights it. In most cases that's a mistype. So we can fix it right ahead.
312+
Here the directive `"extends"` denotes that the configuration is based on the "eslint:recommended" set of settings. After that, we specify our own.
323313
324-
For that reason even if you're not concerned about styles, using a linter is highly recommended.
314+
It is also possible to download style rule sets from the web and extend them instead. See <http://eslint.org/docs/user-guide/getting-started> for more details about installation.
325315
326-
Also certain IDEs support built-in linting, that also may be good, but not so tunable as ESLint.
316+
Also certain IDEs have built-in linting, which is convenient but not as customizable as ESLint.
327317
328318
## Summary
329319
330-
All syntax rules from this chapter and the style guides aim to increase readability, so all of them are debatable.
320+
All syntax rules described in this chapter (and in the style guides referenced) aim to increase the readability of your code, but all of them are debatable.
331321
332-
When we think about "how to write better?", the sole criterion is "what makes the code more readable and easier to understand? what helps to avoid errors?" That's the main thing to keep in mind when choosing the style or discussing which one is better.
322+
When we think about writing "better" code, the questions we should ask are, "What makes the code more readable and easier to understand?" and "What can help us avoid errors?" These are the main things to keep in mind when choosing and debating code styles.
333323
334-
Read style guides to see the latest ideas about that and follow those that you find the best.
324+
Reading popular style guides will allow you to keep up to date with the latest ideas about code style trends and best practices.

1-js/04-object-basics/01-object/4-const-object/task.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ importance: 5
44

55
# Constant objects?
66

7-
Is it possible to change an object declared with `const`, how do you think?
7+
Is it possible to change an object declared with `const`? What do you think?
88

99
```js
1010
const user = {

1-js/04-object-basics/01-object/article.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ let obj = {
205205
for: 1,
206206
let: 2,
207207
return: 3
208-
}
208+
};
209209
210210
alert( obj.for + obj.let + obj.return ); // 6
211211
```
@@ -605,7 +605,7 @@ for (let key in user) {
605605
}
606606
*/!*
607607

608-
// now clone is a fully independant clone
608+
// now clone is a fully independent clone
609609
clone.name = "Pete"; // changed the data in it
610610

611611
alert( user.name ); // still John in the original object

1-js/04-object-basics/03-symbol/article.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ user[id] = "ID Value";
7575
alert( user[id] ); // we can access the data using the symbol as the key
7676
```
7777

78-
What's the benefit over using `Symbol("id")` over a string `"id"`?
78+
What's the benefit of using `Symbol("id")` over a string `"id"`?
7979

8080
Let's make the example a bit deeper to see that.
8181

0 commit comments

Comments
 (0)