yandex-shri-ekb · sameoldmadness · Sep 21, 2013 · Sep 25, 2013 · greyevil · Sep 26, 2013
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+    <meta charset="UTF-8">
+    <title>1-introduction</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<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>
+
+<pre><code>&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;body&gt;&lt;script&gt;
+
+<span class="comment">// this is a comment about a specific part of the code</span>
+var foo = <span class="string">'calling out this part of the code'</span>;
+
+&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</code></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 the <code>Object()</code> constructor function (i.e <code>var cody = new Object()</code>) is not really different from a string object created via the <code>String()</code>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. <code>console.log</code>) 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/what-is-console-log-and-how-do-i-use-it">usage and purpose</a> of <code>console.log</code>.</p>
+
+<p>In situations where jsFiddle &amp; Firebug lite-dev caused complications with the JavaScript code <a href="http://jsbin.tumblr.com/about">JS Bin</a> &amp; 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>
+
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+body {
+    margin: 0 auto;
+    max-width: 670px;
+}
+
+h1, h2 {
+    border-bottom: 3px solid #eaeaea;
+    color: #444;
+}
+
+h1 {
+    margin: 46px 0 104px;
+    padding-bottom: 7px;
+    text-align: right;
+    font: normal 39px "Arial Narrow", sans-serif;
+}
+
+h2 {
+    margin: 56px 0 18px;
+    padding-bottom: 9px;
+    border-width: 2px;
+    font: bold 17px "Tahoma", sans-serif;
+}
+
+p {
+    margin-bottom: 22px;
+    font: 14px/25px "Helvetica", sans-serif;
+}
+
+pre {
+    margin: 28px 0 25px;
+    padding-bottom: 11px;
+    border-bottom: 2px solid #ffd966;
+    font-size: 12px;
+
+}
+
+pre:before {
+    display: block;
+    margin-bottom: 16px;
+    height: 20px;
+    background: #ffd966;
+    background: linear-gradient(to bottom, #fff2c5 0%, #ffdd66 100%);
+    content: "";
+}
+
+pre code {
+    color: #34581e;
+}
+
+pre .comment {
+    color: #7a7a7a;
+}
+
+pre .string {
+    color: #b45f06;
+}
+
+code {
+    color: #b45f06;
+    font: bold 1em "Courier New", monospace;
+}
+
+em {
+    color: #5f5f5f;
+}
+
+@media print {
+    body {
+        max-width: none;
+    }
+
+    a, code, em, h1, h2, pre code, pre .comment, pre .string {
+        color: #000;
+    }
+
+    pre {
+        border: none
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    a:after {
+        content: ' (' attr(href) ')';
+    }
+}