From de03ddbf51bec7978e441a01c0463a32328c6f9b Mon Sep 17 00:00:00 2001
From: Ilya Kantor <iliakan@gmail.com>
Date: Tue, 14 Apr 2015 11:02:21 +0300
Subject: [PATCH] add inline styles

---
 .../2-external-script/article.md              | 14 ++--
 .../11-modifying-document/article.md          | 66 ++++++++++++++++---
 2 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/1-js/2-first-steps/2-external-script/article.md b/1-js/2-first-steps/2-external-script/article.md
index ea91445e..c228bfe8 100644
--- a/1-js/2-first-steps/2-external-script/article.md
+++ b/1-js/2-first-steps/2-external-script/article.md
@@ -93,13 +93,13 @@
 </html>
 ```
 
-Такое поведение называют "синхронным". Как правило, оно вполне нормально, но бывает беда.
+Такое поведение называют "синхронным". Как правило, оно вполне нормально, но есть один нюанс.
 
-Внешние скрипты `<script src="...">` блокируют отображение страницы не только на время выполнения, которое обычно небольшое, но и на время загрузки тоже!
+**Пока браузер не загрузит и не выполнит внешний скрипт, он не покажет часть страницы под ним.**
 
-В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу. По-хорошему, он не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
+В ряде случаев это совсем неуместно. Например, мы подключаем внешний скрипт, который показывает рекламу или вставляет счётчик посещений, а затем идёт наша страница. Конечно, неправильно, что пока счётчик или реклама не подгрузятся -- оставшаяся часть страницы не показывается. Счётчик посещений не должен никак задерживать отображение страницы сайта. Реклама -- это дополнение к странице, она не должна как-то тормозить сайт и нарушать его функционал.
 
-А представим на минуту, что сервер, с которого загружается внешний скрипт, перегружен и долго не отвечает? Тогда вся страница "подвиснет", пока он не загрузится. 
+А что, если сервер, с которого загружается внешний скрипт, перегружен? Посетитель в этом случае может ждать очень долго.
 
 Вот пример, с подобным скриптом (стоит искусственная задержка загрузки):
 
@@ -114,9 +114,11 @@
 
 В примере выше важная информация не покажется, пока не загрузится внешний скрипт. Но действительно ли он так важен, что мы хотим заставить посетителя ждать? Если это реклама или счётчик посещаемости, то вряд ли.
 
-Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку если какой-то один скрипт тормозит или завис, то последующие будут его ждать.
+Можно поставить все подобные скрипты в конец страницы -- это уменьшит проблему, но не избавит от неё полностью, поскольку скриптов может быть несколько, и если какой-то один скрипт тормозит или завис, то последующие будут его ждать. 
 
-Чтобы это обойти, можно использовать для скриптов атрибуты `async` или `defer`:
+Кроме того, когда скрипты в конце страницы -- то они начнут грузиться только тогда, когда вся страница загрузится. А это не всегда правильно, например счётчик посещений наиболее точно сработает, если загрузить его пораньше.
+
+Кардинально решить эту проблему помогут атрибуты `async` или `defer`:
 <dl>
 <dt>Атрибут `async`</dt>
 <dd>Поддерживается всеми браузерами, кроме IE9-. Скрипт выполняется полностью асинхронно. То есть, при обнаружении `<script async src="...">` браузер не останавливает обработку страницы, а спокойно работает дальше. Когда скрипт будет загружен -- он выполнится.</dd>
diff --git a/2-ui/1-document/11-modifying-document/article.md b/2-ui/1-document/11-modifying-document/article.md
index 00d3ad84..bcc4e419 100644
--- a/2-ui/1-document/11-modifying-document/article.md
+++ b/2-ui/1-document/11-modifying-document/article.md
@@ -10,15 +10,25 @@
 
 В качестве примера рассмотрим добавление сообщения на страницу, чтобы оно было оформленно красивее чем обычный `alert`.
 
-HTML-код для сообщения (с подключённой библиотекой стилей [bootstrap](http://getbootstrap.com/)):
+HTML-код для сообщения:
 
 ```html
 <!--+ autorun height="100" -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
-<div class="alert alert-success">
+*!*
+<div class="alert">
   <strong>Ура!</strong> Вы прочитали это важное сообщение.
 </div>
+*/!*
 ```
 
 ## Создание элемента
@@ -143,7 +153,15 @@ parentElem.appendChild(elem)
 
 ```html
 <!--+ height=150 run autorun -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
 <body>
   <h3>Моя страница</h3>
@@ -164,7 +182,15 @@ parentElem.appendChild(elem)
 
 ```html
 <!--+ height=150 run autorun -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
 <body>
   <h3>Моя страница</h3>
@@ -195,7 +221,15 @@ parentElem.appendChild(elem)
 
 ```html
 <!--+ height=200 run autorun -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
 <body>
   <h3>Моя страница</h3>
@@ -282,7 +316,15 @@ div.parentNode.insertBefore(div2, div.nextSibling);
 
 ```html
 <!--+ run -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
 <body>
   <h3>Сообщение пропадёт через секунду</h3>
@@ -315,7 +357,15 @@ div.parentNode.insertBefore(div2, div.nextSibling);
 
 ```html
 <!--+ run -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
+<style>
+.alert {
+  padding: 15px;
+  border: 1px solid #d6e9c6;
+  border-radius: 4px;
+  color: #3c763d;
+  background-color: #dff0d8;
+}
+</style>
 
 <script>
   var div = document.createElement('div');