yandex-shri-ekb · pkolt · Sep 23, 2013 · Sep 25, 2013 · Sep 25, 2013 · Sep 27, 2013
diff --git a/css/print.css b/css/print.css
@@ -0,0 +1,66 @@
+html, body
+{
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    color: #000;
+}
+
+/* Блок страницы */
+.page ~ .page
+{
+    page-break-before: always;
+}
+
+.page__number
+{
+    display: none;
+}
+
+/* Блок типографики */
+.typo
+{
+    font: 10.5pt/1.7 Arial, Helvetica, sans-serif;
+}
+
+.typo h1,
+.typo h2
+{
+    border-bottom: 1px solid #000;
+    padding-bottom: 13px;
+}
+
+.typo h1
+{
+    margin: 25px 0 100px;
+    font: normal 28pt/1 Arial, Helvetica, sans-serif;
+    text-align: right;
+    border-width: 2px;
+}
+
+.typo h2
+{
+    margin: 60px 0 21px;
+    font: bold 12pt/1 Tahoma, Geneva, sans-serif;
+}
+
+.typo p a:after
+{
+    text-decoration: underline;
+    content: " <" attr(href) "> ";
+}
+
+/* Блок программного кода */
+.code
+{
+    margin: 28px 0 26px;
+    padding: 20px 0 12px;
+    border-top: 22px solid #ccc;
+    font: bold 8.5pt/1.35 "Courier New", Courier, monospace;
+    border-bottom: 2px solid #ccc;
+}
+
+.code__comment
+{
+    color: #777;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,96 @@
+html,
+body
+{
+    margin: 0;
+    padding: 0;
+    color: #000;
+}
+
+body
+{
+    background-color: #ddd;
+}
+
+/* Блок страницы */
+.page
+{
+    position: relative;
+    margin: 10px 15%;
+    padding: 57px 76px;
+    border: 1px solid #333;
+    background-color: #fff;
+}
+
+.page__number
+{
+    position: absolute;
+    bottom: 1.25em;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+
+/* Блок типографики */
+.typo
+{
+    font: 14px/1.7 Arial, Helvetica, sans-serif;
+}
+
+.typo h1,
+.typo h2
+{
+    border-bottom: 1px solid #ebebeb;
+    padding: 0 0 13px;
+}
+
+.typo h1
+{
+    margin: 25px 0 100px;
+    font: normal 37px/1 Arial, Helvetica, sans-serif;
+    text-align: right;
+    border-width: 2px;
+}
+
+.typo h2
+{
+    margin: 60px 0 21px;
+    font: bold 16px/1 Tahoma, Geneva, sans-serif;
+    color: #444;
+}
+
+.typo strong
+{
+    font-weight: normal;
+    color: #b45f06;
+}
+
+.typo em
+{
+    color: #606060;
+}
+
+.typo a
+{
+    color: #021eaa;
+}
+
+/* Блок программного кода */
+.code
+{
+    margin: 28px 0 26px;
+    padding: 42px 0 12px;
+    font: bold 11px/1.35 Arial, Helvetica, sans-serif;
+    color: #34581e;
+    border-bottom: 2px solid #ffd966;
+    background: url("../img/code__line-gradient.png") top repeat-x;
+}
+
+.code__str
+{
+    color: #b45f06;
+}
+
+.code__comment
+{
+    color: #7a7a7a;
+}
diff --git a/img/code__line-gradient.png b/img/code__line-gradient.png
diff --git a/index.html b/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>JavaScript Enlightenment</title>
+    <link rel="stylesheet" href="css/styles.css" media="screen">
+    <link rel="stylesheet" href="css/print.css" media="print">
+</head>
+
+<body>
+
+<div class="page typo">
+<h1>Preface</h1>
+
+<p>Before you begin, it is important to understand various styles employed in this book. Please do not skip
+this section, because it contains important information that will aid you as you read the book.</p>
+
+<h2>More code, less words</h2>
+
+<p>Please examine the code examples in detail. The text should be viewed as secondary to the code itself.
+It is my opinion that a code example is worth a thousand words. Do not worry if youʼre initially confused
+by explanations. Examine the code. Tinker with it. Reread the code comments. Repeat this process
+until the concept being explained becomes clear. I hope you achieve a level of expertise such that well-
+documented code is all you need to grok a programming concept.</p>
+
+<h2>Exhaustive code and repetition</h2>
+
+<p>You will probably curse me for repeating myself and for being so comprehensive with my code
+examples. And while I might deserve it, I prefer to err on the side of being exact, verbose, and
+repetitive, rather than make false assumptions authors often make about their reader. Yes, both can be
+annoying, depending upon what knowledge you bring to the subject, but they can also serve a useful
+purpose for those who want to learn a subject in detail.</p>
+
+<h2>Color-coding Conventions</h2>
+
+<p>In the JavaScript code examples (example shown below), orange is used to highlight code directly
+relevant to the concept being discussed. Any additional code used to support the orange colored code
+will be green. The color gray in the code examples is reserved for JavaScript comments (example
+shown below).</p>
+<div class="page__number">1</div>
+</div>
+
+<div class="page typo">
+<pre class="code">
+&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;body&gt;&lt;script&gt;
+
+<span class="code__comment">// this is a comment about a specific part of the code</span>
+var foo = <span class="code__str">&#39;calling out this part of the code&#39;</span>;
+
+&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
+</pre>
+
+<p>In addition to code examples being color-coded, the text in this book is colored so as to denote
+JavaScript words/keywords v.s. JavaScript code v.s. regular text. Below, I take an excerpt from the
+book to demonstrate this coloring semantic.</p>
+
+<p>"Consider that the <em>cody</em> object created from <strong>the Object()</strong> constructor function (i.e <strong>var cody = new
+Object()</strong>) is not really different from a string object created via <strong>the String()</strong> constructor function. To
+drive this fact home, examine the code below:"</p>
+
+<p>Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and
+regular black text for everything in-between.</p>
+
+<h2>jsFiddle, JS Bin, and Firebug lite-dev</h2>
+
+<p>The majority of code examples in this book are linked to a corresponding <a href="http://jsfiddle.net/">jsFiddle</a> page, where the code
+can be tweaked and executed online. The jsFiddle examples have been configured to use the <a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js">Firebug
+lite-dev</a> plugin so that the log function (i.e. <strong>console.log</strong>) will work in most any modern browser
+regardless of if the browser has its own console. Before reading this book make sure you are
+comfortable with the <a href="http://stackoverflow.com/questions/4743730/javascript-what-is-console-log-and-how-do-i-use-it">usage and purpose</a> of <strong>console.log</strong>.</p>
+
+<p>In situations where jsFiddle & Firebug lite-dev caused complications with the JavaScript code <a href="http://jsbin.tumblr.com/about">JS Bin</a> &
+Firebug Lite-dev will be used. I've tried to avoid a dependency on a browser console by using Firebug
+lite-dev but with certain code examples the solution itself gets in the way of code execution. In these
+situations the console built into your web browser will have to be leveraged to output logs. If you are not
+using a browser with a built in JavaScript console I would suggest <a href="http://browsehappy.com/">upgrading or switching browsers</a>.</p>
+
+<p>When JS Bin is used, keep in mind that the code has to be executed manually (clicking 'Render') which
+differs from the page load execution done by jsFiddle.</p>
+<div class="page__number">2</div>
+</div>
+</body>
+</html>