Skip to content

Commit 923db1d

Browse files
iliakaniliakan
committed
up
1 parent 157b521 commit 923db1d

19 files changed

Lines changed: 134 additions & 160 deletions

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,7 @@ There are ways to interact with camera/microphone and other devices, but they re
8080

8181
There are ways to workaround this, of course. But if two pages come from different sites (different domain, protocol or port), they require a special code on *both of them* allowing to interact.
8282

83-
84-
The limitation is again for user safety. A page from evilsite.com which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
83+
The limitation is again for user safety. A page from `http://evilsite.com` which a user has opened occasionaly will be unable to access other browser tabs and steal information from there.
8584
</li>
8685
<li>JavaScript can easily communicate over the net to the server where the current page came from. But it's ability to receive data from other sites/domains is crippled. Though possible, it requires the explicit agreement (expressed in HTTP headers) from the remote side. Once again, that's safety limitations.
8786
</li>
@@ -149,7 +148,7 @@ Modern browsers improve their engines to raise JavaScript execution script, fix
149148
The trend: JavaScript is becoming faster, gets new syntax and language features.
150149
[/summary]
151150

152-
## Languages over JavaScript
151+
## Languages "over" JavaScript
153152

154153
The syntax of JavaScript does not suit everyone's needs: some people think that it's too flexible, the others consider it too limited, the third ones want to add new features absent in the standard...
155154

@@ -169,7 +168,10 @@ Examples of such languages:
169168

170169
## Summary
171170

172-
As of now, JavaScript is unique due it's full integration with HTML/CSS and wide browser adoption.
171+
<ul>
172+
<li>JavaScript was initially created as a browser-only language, but now used in many other environments as well.</li>
173+
<li>At this moment, JavaScript as a unique position as a most widely adopted browser language with full integration with HTML/CSS.</li>
174+
<li>There are over languages that get "transpiled" to JavaScript and provide certain features. It is recommended to take a look at them, at least briefly, after mastering JavaScript.</li>
175+
</ul>
173176

174-
Other languages like TypeScript can help to write less bug-proof code. It is recommended to take a look at them, at least briefly, after mastering JavaScript.
175177

‎1-js/1-getting-started/2-es-modern-now/article.md‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11

2-
# Modern JavaScript now
2+
# Using the latest features now
33

44
The [latest standard](http://www.ecma-international.org/publications/standards/Ecma-262.htm) was approved in June 2015.
55

66
As it includes a lot of new features, most browsers implement them partially. You can find the current state of the support at [](https://kangax.github.io/compat-table/es6/).
77

8-
Sometimes the project is targeted to a single JavaScript engine, like Node.JS (V8). Then we can use only the features supported by V8 (quite a lot).
8+
If a project is developed for a single JavaScript engine, like V8 (Node.JS, Chrome), then we can use V8-supported features. That's a lot.
99

10-
But what if we're writing a cross-browser application?
10+
But what if we're writing a cross-browser application? Different browsers support different subsets of ES-2015.
11+
12+
Here comes Babel.JS.
1113

1214
## Babel.JS
1315

@@ -16,57 +18,63 @@ But what if we're writing a cross-browser application?
1618
Actually, there are two parts in Babel:
1719

1820
<ol>
19-
<li>The transpiler itself, which rewrites the code.</li>
20-
<li>An additional JavaScript library which adds the support for modern JavaScript functions to the browser.</li>
21-
</ol>
22-
23-
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily. One just needs to setup the build system itself.
24-
25-
Most syntax-level language features
26-
The JavaScript library if required if
21+
<li>The transpiler program, which rewrites the code.
2722

23+
The transpiler runs on a developer's computer. It rewrites the code, which is then bundled by a project build system (like [webpack](http://webpack.github.io/) or [brunch](http://brunch.io/)). Most build systems can support Babel easily. One just needs to setup the build system itself.</li>
24+
<li>JavaScript library.
2825

29-
Настройка такой конвертации тривиальна, единственно -- нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
26+
An additional JavaScript library with modern JavaScript functions for the browsers that do not have them built-in (yet). The library must be attached to each webpage which relies on these functions.</li>
27+
</ol>
3028

31-
Если же хочется "поиграться", то можно использовать и браузерный вариант Babel.
29+
There is a special "play" mode of Babel.JS which merges both parts in a single in-browser script.
3230

33-
Это выглядит так:
31+
The usage looks like this:
3432

3533
```html
3634
<!--+ run -->
3735
*!*
38-
<!-- browser.js лежит на моём сервере, не надо брать с него -->
39-
<script src="https://js.cx/babel-core/browser.min.js"></script>
36+
<!-- browser.js is on my server please don't hotlink -->
37+
<script src="https://en.js.cx/babel-core/browser.min.js"></script>
4038
*/!*
4139

4240
<script type="text/babel">
43-
let arr = ["hello", 2]; // let
41+
let arr = ["hello", 2];
4442
45-
let [str, times] = arr; // деструктуризация
43+
let [str, times] = arr;
4644
47-
alert( str.repeat(times) ); // hellohello, метод repeat
45+
alert( str.repeat(times) ); // hellohello
4846
</script>
4947
```
5048

51-
Сверху подключается браузерный скрипт `browser.min.js` из пакета Babel. Он включает в себя полифилл и транспайлер. Далее он автоматически транслирует и выполняет скрипты с `type="text/babel"`.
49+
Script `browser.min.js` is attached to the top of the page. It automatically transpiles and runs the scripts with `type="text/babel"`.
50+
51+
The size of `browser.min.js` is above 1 megabyte, because it includes the transpiler. Hence such usage is only for "playing" and not recommended for production.
5252

53-
Размер `browser.min.js` превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
53+
Also:
54+
<ul>
55+
<li>There is a "try it" page on [](https://babeljs.io/repl/) which allows to run snippets of code.</li>
56+
<li>[JSBin](http://jsbin.com) allows to use "ES6/Babel" mode for JS, see [this snippet](http://jsbin.com/daxihelolo/edit?js,output) as an example.</li>
57+
</ul>
5458

55-
# Примеры на этом сайте
59+
# Examples on this site
5660

57-
[warn header="Только при поддержке браузера"]
58-
Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
61+
[warn header="Browser support is required"]
62+
Examples that use ES-2015 will work only if your browser supports it.
5963
[/warn]
6064

61-
Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки...
65+
Sometimes it means that when running an example in a non-supporting browser, an error is shown.
66+
67+
That doesn't mean that the example is wrong! It's just the browser lacking the support for certain features yet.
68+
69+
[Chrome Canary](https://www.google.com/chrome/browser/canary.html) is recommended, most examples work in it.
6270

63-
Рекомендуется [Chrome Canary](https://www.google.com/chrome/browser/canary.html) большинство примеров в нём работает. [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные [let](/let-const) работают только при указании `version=1.7` в типе скрипта: `<script type="application/javascript;version=1.7">`. Надеюсь, скоро это требование (`version=1.7`) отменят.
71+
[Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/channel/#developer) is fine too, but it has certain glitches. Like: [let](/let-const) variables working only with when the script type contains `version=1.7` or `1.8`: `<script type="application/javascript;version=1.7">`. Most other browsers do not understand such script type. This site uses a special trick to workaround.
6472

65-
Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) -- почти все примеры вы можете запустить его при помощи Babel, на странице [Babel: try it out](https://babeljs.io/repl/). Там же увидите и преобразованный код.
73+
And in any case you can go [Babel: try it out](https://babeljs.io/repl/) page and run the example there!
6674

67-
На практике для кросс-браузерности всё равно используют Babel.
75+
On production everyone's using Babel anyway.
6876

69-
Ещё раз заметим, что самая актуальная ситуация по поддержке современного стандарта браузерами и транспайлерами отражена на странице [](https://kangax.github.io/compat-table/es6/).
77+
Once again, let's note that the most up-to-date situation with support is reflected on [](https://kangax.github.io/compat-table/es6/).
7078

71-
Итак, поехали!
79+
Now we can go coding, but we need a good code editor for that, right? That is discussed in the next session.
7280

‎1-js/1-getting-started/3-editor/article.md‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,73 @@
1-
# Редакторы для кода
1+
# Code editors
22

3-
Для разработки обязательно нужен хороший редактор.
3+
For the comfortable development we need a good code editor.
44

5-
Выбранный вами редактор должен иметь в своем арсенале:
5+
It must support at least:
66

77
<ol>
8-
<li>Подсветку синтаксиса.</li>
9-
<li>Автодополнение.</li>
10-
<li>"Фолдинг" (от англ. folding) -- возможность скрыть-раскрыть блок кода.</li>
8+
<li>Syntax highlight.</li>
9+
<li>Autocompletion.</li>
10+
<li>Folding -- hiding/opening blocks of code.</li>
1111
</ol>
1212

1313
[cut]
14+
1415
## IDE
1516

16-
Термин IDE (Integrated Development Environment) -- "интегрированная среда разработки", означает редактор, который расширен большим количеством "наворотов", умеет работать со вспомогательными системами, такими как багтрекер, контроль версий, и много чего ещё.
17+
The term "IDE" (Integrated Development Environment) -- denotes an editor which is extended by a number of plugins, can work with additional systems, such as bugtrackering, version control and much more.
1718

18-
Как правило, IDE загружает весь проект целиком, поэтому может предоставлять автодополнение по функциям всего проекта, удобную навигацию по его файлам и т.п.
19+
Usually IDE loads the "project" and then can navigate between files, provide autocompletion based on the whole project, do other "project-level" stuff.
1920

20-
Если вы ещё не задумывались над выбором IDE, присмотритесь к следующим вариантам.
21+
If you haven't considered selecting an IDE, pleae look at the following variants:
2122

2223
<ul>
23-
<li>Продукты IntelliJ: [WebStorm](http://www.jetbrains.com/webstorm/), а также в зависимости от дополнительного языка программирования [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) и другие.</li>
24-
<li>Visual Studio, в сочетании с разработкой под .NET (Win)</li>
25-
<li>Продукты на основе Eclipse, в частности [Aptana](http://www.aptana.com/) и Zend Studio</li>
26-
<li>[Komodo IDE](http://www.activestate.com/komodo-ide) и его облегчённая версия [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
24+
<li>IntelliJ editors: [WebStorm](http://www.jetbrains.com/webstorm/) for frontend development and [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/) and other if you need additional languages.</li>
25+
<li>Visual Studio is fine if you're a .NET developer.</li>
26+
<li>Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.</li>
27+
<li>[Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
2728
<li>[Netbeans](http://netbeans.org/)</li>
2829
</ul>
2930

30-
Почти все они, за исключением Visual Studio, кросс-платформенные.
31+
All of them with the exception of Visual Studio are cross-platform.
3132

32-
Сортировка в этом списке ничего не означает. Выбор осуществляется по вкусу и по другим технологиям, которые нужно использовать вместе с JavaScript.
33+
Most IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose what's most convenient.
3334

34-
Большинство IDE -- платные, с возможностью скачать и бесплатно использовать некоторое время. Но их стоимость, по сравнению с зарплатой веб-разработчика, невелика, поэтому ориентироваться можно на удобство.
35+
## Lightweight editors
3536

36-
## Лёгкие редакторы
37+
Lightweight editors are not as powerful as IDE, but they're fast and simple.
3738

38-
Лёгкие редакторы -- не такие мощные, как IDE, но они быстрые и простые, мгновенно стартуют.
39+
They are mainly used to instantly open and edit a file.
3940

40-
Основная сфера применения лёгкого редактора -- мгновенно открыть нужный файл, чтобы что-то в нём поправить.
41+
The main differenct between a "lightweight editor" and an "IDE" is that the latter works on a project-level, meaning it has to load a lot of data to start, and the former one opens just the files. That's much faster.
4142

42-
На практике "лёгкие" редакторы могут обладать большим количеством плагинов, так что граница между IDE и "лёгким" редактором размыта, спорить что именно редактор, а что IDE -- не имеет смысла.
43+
In practice, "lightweight" editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict frontier between a "lightweight editor" and an IDE. There's no point in argueing what is what.
4344

44-
Достойны внимания:
45+
The following options deserve your attention:
4546

4647
<ul>
47-
<li><a href="http://www.sublimetext.com">Sublime Text</a> (кросс-платформенный, shareware).</li>
48-
<li><a href="http://www.scintilla.org/">SciTe</a> простой, легкий и очень быстрый (Windows, бесплатный).</li>
49-
<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, бесплатный).</li>
50-
<li>Vim, Emacs. Если умеете их готовить.</li>
48+
<li><a href="http://www.sublimetext.com">Sublime Text</a> (cross-platform, shareware).</li>
49+
<li><a href="http://www.scintilla.org/">SciTe</a> (Windows, free).</li>
50+
<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, free).</li>
51+
<li>Vim, Emacs are cool. If you know how to use them.</li>
5152
</ul>
5253

53-
## Мои редакторы
54+
## My editors
5455

55-
Лично мои любимые редакторы:
56+
I believe one should have both an IDE for projects and a lightweight editor for quick-n-fast file editing.
5657

58+
I'm using:
5759
<ul>
58-
<li>Как IDE -- редакторы от Jetbrains: для чистого JavaScript [WebStorm](http://www.jetbrains.com/webstorm/), если ещё какой-то язык, то в зависимости от языка: [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). У них есть и другие редакторы под разные языки, но я ими не пользовался.</li>
59-
<li>Как быстрый редактор -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
60-
<li>Иногда Visual Studio, если разработка идёт под платформу .NET (Win).</li>
60+
<li>Jetbrains editors as IDE: [WebStorm](http://www.jetbrains.com/webstorm/) for JS and if I have other language in the project, then [PHPStorm (PHP)](http://www.jetbrains.com/phpstorm/), [IDEA (Java)](http://www.jetbrains.com/idea/), [RubyMine (Ruby)](http://www.jetbrains.com/ruby/). These guys provide editors for other languages too, but I didn't use them.</li>
61+
<li>As a lightweight editor -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
62+
<li>Visual Studio, sometimes very rarely if that's a .NET project (Win).</li>
6163
</ul>
6264

63-
Если не знаете, что выбрать -- можно посмотреть на них ;)
65+
If you don't know what to choose -- you can consider those.
66+
67+
## Let's not argue
6468

65-
## Не будем ссориться
69+
The editors listed above are those that me or my friends -- good developers use for a long time and happy with them.
6670

67-
В списках выше перечислены редакторы, которые использую я или мои знакомые -- хорошие разработчики. Конечно, существуют и другие отличные редакторы, если вам что-то нравится -- пользуйтесь.
71+
There are of course other great editors, please choose the one you like the most.
6872

69-
Выбор редактора, как и любого инструмента, во многом индивидуален и зависит от ваших проектов, привычек, личных предпочтений.
73+
The choice of an editor, like any other tool, is individual and depends on your projects, habbits, personal preferences.

0 commit comments

Comments
 (0)