edit

Author: iliakan

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

@@ -1,9 +1,9 @@
 
-# Using the latest features now 
+# Using the latest features now
 
 The [latest standard](http://www.ecma-international.org/publications/standards/Ecma-262.htm) was approved in June 2015.
 
-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/).
+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/>.
 
 ## Single-engine app
 
@@ -13,7 +13,7 @@ Most notably, V8 supports many of the new features only if the code is running i
 
 You will find most code in this tutorial using this directive and, because of that, runnable in Chrome.
 
-But what if we're writing a cross-browser application? Different browsers support different subsets of ES-2015. 
+But what if we're writing a cross-browser application? Different browsers support different subsets of ES-2015.
 
 Here comes Babel.JS.
 
@@ -23,30 +23,27 @@ Here comes Babel.JS.
 
 Actually, there are two parts in Babel:
 
-<ol>
-<li>The transpiler program, which rewrites the code. 
+1. The transpiler program, which rewrites the code.
 
-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>
-<li>JavaScript library.
+    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.
+2. JavaScript library.
 
-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>
-</ol>
+    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.
 
 There is a special "play" mode of Babel.JS which merges both parts in a single in-browser script.
 
 The usage looks like this:
 
-```html
-<!--+ run -->
+```html run
 *!*
 <!-- browser.js is on my server please don't hotlink -->
 <script src="https://en.js.cx/babel-core/browser.min.js"></script>
 */!*
 
 <script type="text/babel">
-  let arr = ["hello", 2]; 
+  let arr = ["hello", 2];
 
-  let [str, times] = arr; 
+  let [str, times] = arr;
 
   alert( str.repeat(times) ); // hellohello
 </script>
@@ -57,16 +54,15 @@ Script `browser.min.js` is attached to the top of the page. It automatically tra
 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.
 
 Also:
-<ul>
-<li>There is a "try it" page on [](https://babeljs.io/repl/) which allows to run snippets of code.</li>
-<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>
-</ul>
+
+- There is a "try it" page on <https://babeljs.io/repl/> which allows to run snippets of code.
+- [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.
 
 # Examples on this site
 
-[warn header="Browser support is required"]
+```warn header="Browser support is required"
 Examples that use ES-2015 will work only if your browser supports it.
-[/warn]
+```
 
 Sometimes it means that when running an example in a non-supporting browser, an error is shown.
 
@@ -80,7 +76,7 @@ And even if your browser does not support some code, you can run it through Babe
 
 That would be fine, because on production everyone's using Babel anyway.
 
-Once again, let's note that the most up-to-date situation with support is reflected on [](https://kangax.github.io/compat-table/es6/).
+Once again, let's note that the most up-to-date situation with support is reflected on <https://kangax.github.io/compat-table/es6/>.
 
 Now we can go coding, but we need a good code editor for that. That is discussed in the next session.
 

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

@@ -4,12 +4,10 @@ For the comfortable development we need a good code editor.
 
 It should support at least:
 
-<ol>
-<li>Syntax highlight.</li>
-<li>Autocompletion.</li>
-<li>Folding -- collapsing/opening blocks of code.</li>
-<li>...the more features -- the better.</li>
-</ol>
+1. Syntax highlight.
+2. Autocompletion.
+3. Folding -- collapsing/opening blocks of code.
+4. ...the more features -- the better.
 
 [cut]
 
@@ -21,13 +19,11 @@ An IDE operates on a "whole project": loads it and then can navigate between fil
 
 If you haven't considered selecting an IDE, pleae look at the following variants:
 
-<ul>
-<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>
-<li>Visual Studio is fine if you're a .NET developer.</li>
-<li>Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.</li>
-<li>[Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).</li>
-<li>[Netbeans](http://netbeans.org/)</li>
-</ul>
+- 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.
+- Visual Studio is fine if you're a .NET developer.
+- Eclipse-based products, like [Aptana](http://www.aptana.com/) and Zend Studio.
+- [Komodo IDE](http://www.activestate.com/komodo-ide) and it's lightweight free version [Komodo Edit](http://www.activestate.com/komodo-edit).
+- [Netbeans](http://netbeans.org/)
 
 All of them with the exception of Visual Studio are cross-platform.
 
@@ -45,22 +41,19 @@ In practice, "lightweight" editors may have a lot of plugins including directory
 
 The following options deserve your attention:
 
-<ul>
-<li><a href="http://www.sublimetext.com">Sublime Text</a> (cross-platform, shareware).</li>
-<li><a href="https://atom.io/">Atom</a> (cross-platform, free).</li>
-<li><a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, free).</li>
-<li>Vim, Emacs are cool. If you know how to use them.</li>
-</ul>
+- <a href="http://www.sublimetext.com">Sublime Text</a> (cross-platform, shareware).
+- <a href="https://atom.io/">Atom</a> (cross-platform, free).
+- <a href="http://sourceforge.net/projects/notepad-plus/">Notepad++</a> (Windows, free).
+- Vim, Emacs are cool. If you know how to use them.
 
 ## My favorites
 
 I believe one should have both an IDE for projects and a lightweight editor for quick and easy file editing.
 
 I'm using:
-<ul>
-<li>[WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.</li>
-<li>As a lightweight editor -- <a href="http://www.sublimetext.com">Sublime Text</a>.</li>
-</ul>
+
+- [WebStorm](http://www.jetbrains.com/webstorm/) for JS, and if there is one more language in the project, then I switch to other Jetbrains editors like [PHPStorm](http://www.jetbrains.com/phpstorm/) (PHP), [IDEA](http://www.jetbrains.com/idea/) (Java), [RubyMine](http://www.jetbrains.com/ruby/) (Ruby). There are editors for other languages too, but I didn't use them.
+- As a lightweight editor -- <a href="http://www.sublimetext.com">Sublime Text</a>.
 
 If you don't know what to choose -- you can consider these ones.
 

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

@@ -20,53 +20,48 @@ Developer tools are really powerful, there are many features, but on this stage
 
 [cut]
 
-## Google Chrome   
+## Google Chrome
 
-Open the page [bug.html](bug.html). 
+Open the page [bug.html](bug.html).
 
 There's an error in the JavaScript code on it. An ordinary visitor won't see it, so let's open developer tools.
 
-Press the key [key F12] or, if you're on Mac, then [key Cmd+Opt+J].
+Press the key `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
 
 The developer tools will open on the Console tab by default.
 
 It looks somewhat like this:
 
-<img src="chrome.png">
+![](chrome.png)
 
 The exact look depends on your Chrome version. It changes from time to time, but should be similar.
 
-<ul>
-<li>Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.</li>
-<li>On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.</li>
-</ul>
+- Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.
+- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.
 
-Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press enter to run them ([key Shift+Enter] to input multiline commands).
+Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press enter to run them (`key:Shift+Enter` to input multiline commands).
 
-Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter [](/debugging-chrome).
+Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
 
 ## Safari
 
 For Safari, we need to enable the "Develop menu" first.
 
 There's a checkbox for that at the bottom of the "Advanced" pane of the preferences:
 
-<img src="safari.png">
+![](safari.png)
 
-Now [key Cmd+Opt+C] can toggle the console. Also note that the new top menu item has appeared with many useful options.
+Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item has appeared with many useful options.
 
 ## Other browsers
 
-Most other browsers use [key F12] to open developer tools.
+Most other browsers use `key:F12` to open developer tools.
 
 The look & feel of them is quite similar, once we know how to use one of them (can start with Chrome), can easily switch to another.
 
 ## Summary
 
-<ul>
-  <li>Developer tools allow us to see errors, run commands, examine variables and much more.</li>
-<li>They can be opened with [key F12] for most browsers under Windows. Chrome for Mac needs [key Cmd+Opt+J], Safari: [key Cmd+Opt+C] (need to enable first).
-</li>
-</ul>
+  - Developer tools allow us to see errors, run commands, examine variables and much more.
+- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
 
 Now we have the environment ready. In the next section we get down to JavaScript.

1-js/1-getting-started/4-devtools/article.md

@@ -1,9 +1,12 @@
-# Show an alert
+importance: 5
+
+---
 
-[importance 5]
+# Show an alert
 
 Create a page that shows a message "I'm JavaScript!".
 
 Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
 
 [demo src="solution"]
+

1-js/2-first-steps/1-hello-world/1-hello-alert/task.md

@@ -3,20 +3,20 @@
 In this chapter we'll create a simple script and see it working.
 
 [cut]
+
 ## The "script" tag
 
-[smart header="What if I want to move faster?"]
-In the case if the reader of these lines has developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to [](/javascript-specials). There he can find an essense of important features.
+```smart header="What if I want to move faster?"
+In the case if the reader of these lines has developed with JavaScript already or has a lot of experience in another language, he can skip detailed explanatins and jump to <info:javascript-specials>. There he can find an essense of important features.
 
 If you have enough time and want to learn things in details then read on :)
-[/smart]
+```
 
 JavaScript programs can be inserted in any place of HTML with the help of the `<script>` tag.
 
 For instance:
 
-```html
-<!--+ run height=100 -->
+```html run height=100
 <!DOCTYPE HTML>
 <html>
 
@@ -37,57 +37,48 @@ For instance:
 </html>
 ```
 
-[online]
+```online
 You can run the example clicking on a "Play" button in it's right-top corner.
-[/online]
+```
 
 The `<script>` tag contains JavaScript code which is automatically executed when the browser meets the tag.
 
 Please note the execution sequence:
 
-<ol>
-<li>Browser starts to parse the document and display the page.</li>
-<li>When the browser meets `<script>`, it switches to the JavaScript execution mode. In this mode it executes the script.</li>
-<li>The `alert` command shows a message and pauses the execution.</li>
-<li>*Note that a part of the page before the script is shown already at this moment.*</li>
-<li>When the script is finished, it gets back to the HTML-mode, and *only then* it shows the rest of the document.</li>
-</ol>
+1. Browser starts to parse the document and display the page.
+2. When the browser meets `<script>`, it switches to the JavaScript execution mode. In this mode it executes the script.
+3. The `alert` command shows a message and pauses the execution.
+4. *Note that a part of the page before the script is shown already at this moment.*
+5. When the script is finished, it gets back to the HTML-mode, and *only then* it shows the rest of the document.
 
 A visitor won't see the content after the script until it is executed. In other words, a `<script>` tag blocks rendering.
 
-
 ## The modern markup
 
 In the past, `<script>` had a few necessary attributes.
 
 We can find the following in the old code:
 
-<dl>
- <dt>The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code></dt>
+ The `type` attribute: <code>&lt;script <u>type</u>=...&gt;</code>
 
- <dd>The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
-</dd>
+ : The old standard HTML4 required a script to have the type. Usually it was `type="text/javascript"`. The modern HTML standard assumes this `type` by default, no attribute is required.
 
- <dt>The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code></dt>
-  <dd>This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.</dd>
-<dt>Comments before and after scripts.</dt>
-<dd>In really ancient books and guides, one may find comments inside `<script>`, like this:
+ The `language` attribute: <code>&lt;script <u>language</u>=...&gt;</code>
+  : This attribute was meant to show the language of the script. As of now, this attribute makes no sense, the language is JavaScript by default. No need to use it.
 
-```html
-<!--+ no-beautify -->
-<script type="text/javascript"><!--
-    ...
-//--></script>
-```
+Comments before and after scripts.
+: In really ancient books and guides, one may find comments inside `<script>`, like this:
+
+    ```html no-beautify
+    <script type="text/javascript"><!--
+        ...
+    //--></script>
+    ```
 
-These comments were supposed to hide the code from an old browser that did't understand a `<script>` tag. But all browsers born in the past 15 years know about `<script>`, so that's not an issue. So if you see such code somewhere you know the guide is really old and probably not worth looking into.
-</dd>
-</dl>
+    These comments were supposed to hide the code from an old browser that did't understand a `<script>` tag. But all browsers born in the past 15 years know about `<script>`, so that's not an issue. So if you see such code somewhere you know the guide is really old and probably not worth looking into.
 
 ## Summary
 
-<ul>
-<li>We can use a `<script>` tag without attributes to add JavaScript code to the page.</li>
-<li>A `<script>` tag blocks page rendering. Can be bad. Later we'll see how to evade that.</li>
-</ul>
+- We can use a `<script>` tag without attributes to add JavaScript code to the page.
+- A `<script>` tag blocks page rendering. Can be bad. Later we'll see how to evade that.
 

1-js/2-first-steps/1-hello-world/article.md

@@ -1,7 +1,6 @@
 JavaScript-code:
 
-```js
-//+ demo run
+```js demo run
 let name = prompt("What is your name?", "");
 alert( name );
 ```
@@ -16,7 +15,7 @@ The full page:
 
   <script>
     'use strict';
-    
+
     let name = prompt("What is your name?", "");
     alert( name );
   </script>

1-js/2-first-steps/10-uibasic/1-simple-page/solution.md

@@ -1,8 +1,10 @@
-# A simple page
+importance: 4
+
+---
 
-[importance 4]
+# A simple page
 
 Create a web-page which asks for a name and outputs it.
 
-[demo /]
+[demo]