yandex-shri-ekb · egor-a-trubnikov-panov · Sep 29, 2013 · Sep 29, 2013 · Sep 29, 2013
diff --git a/WebApp/index.html b/WebApp/index.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link href="style.css" type="text/css" rel="stylesheet" media="screen">
+  <link href="style_print.css" type="text/css" rel="stylesheet" media="print">
+</head>
+<body>
+<div class="page">
+  <div class="content">
+    <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>
+    <img src="pic.png" alt=""/>
+    <p class="code">&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;body&gt;&lt;script&gt;</p>
+  </div>
+  <div class="list">13</div>
+</div>
+<div class="page">
+  <div class="content">
+    <p class="code grey">// this is a comment about a specific part of the code</p>
+    <p class="code">var foo = <span class="code brown">'calling out this part of the code'</span>;</p>
+    <p class="code code-end">&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</p>
+    <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 <span class="code grey">cody</span> object created from the <span class="code brown">Object()</span> constructor function (i.e
+      <span class="code brown">var cody = new Object()</span>) is not really different from a string object created via the
+      <span class="code brown">String()</span> 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 conﬁgured to use the
+      <a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js">Firebug</a>
+      <a href="http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug-lite-dev.js">lite-dev</a>
+      plugin so that the log function (i.e.
+      <span class="code brown">console.log</span>) 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
+      <span class="code brown">console.log</span>.
+    </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>
+
+  </div>
+  <div class="list">14</div>
+</div>
+</body>
+</html>
diff --git a/WebApp/pic.png b/WebApp/pic.png
diff --git a/WebApp/style.css b/WebApp/style.css
@@ -0,0 +1,100 @@
+body
+{
+   margin: 0;
+   padding: 0;
+   background: #929292
+}
+
+.page
+{
+   position: relative;
+   overflow: hidden;
+   margin: 10px auto;
+   background: #fff;
+   border: none;
+   width: 210mm;
+   height: 297mm;
+   box-shadow: 0 2px 6px #4b4b4b
+}
+
+img
+{
+   width: 100%;
+   height: .55cm;
+   padding-top: 1.5cm
+}
+
+.list
+{
+   position: absolute;
+   bottom: .57cm;
+   width: 100%;
+   text-align: center;
+   line-height: .25cm
+}
+
+.content
+{
+   margin: 1.47cm auto;
+   width: 17.78cm
+}
+
+p
+{
+   font: 11pt 'Helvetica';
+   line-height: .67cm;
+   margin: .29cm 0 0
+}
+
+h1, h2
+{
+   color: #444;
+   margin: 0
+}
+
+h1
+{
+   font: 28pt 'Arial Narrow';
+   text-align: right;
+   border-bottom: .07cm #eaeaea solid;
+   line-height: .71cm;
+   padding: 0 0 5mm;
+   margin: 0 0 2.51cm
+}
+
+h2
+{
+   font: 700 13pt 'Tahoma';
+   line-height: .35cm;
+   padding: 1.79cm 0 .37cm;
+   border-bottom: .03cm #eaeaea solid
+}
+
+.green, .code
+{
+   font: 700 9pt 'Courier';
+   color: #34581e
+}
+
+.grey
+{
+   color: #676767
+}
+
+.brown
+{
+   color: #b45f06;
+   font: 700 10pt 'Courier New'
+}
+
+a
+{
+   color: #0b2faa
+}
+
+.code-end
+{
+   border-bottom: .08cm solid #f5d86e;
+   padding: 0 0 .33cm;
+   margin-bottom: .6cm
+}
diff --git a/WebApp/style_print.css b/WebApp/style_print.css
@@ -0,0 +1,107 @@
+@page
+{
+   margin: 5mm
+}
+
+@-moz-document regexp('*')
+{
+   @page
+   {
+	  margin-top: 1cm;
+	  margin-bottom: 2cm
+   }
+}
+
+body
+{
+   margin: 1cm;
+   padding: 0
+}
+
+.page
+{
+   position: relative;
+   overflow: hidden;
+   background: #fff;
+   border: none;
+   height: 297mm;
+   margin-bottom: -3cm
+}
+
+img
+{
+   width: 100%;
+   height: .55cm;
+   padding-top: .8cm
+}
+
+.list
+{
+   display: none
+}
+
+.content
+{
+   margin: 0;
+   padding: 0
+}
+
+p
+{
+   font: 11pt 'Helvetica';
+   line-height: .67cm;
+   margin: .29cm 0 0
+}
+
+h1, h2
+{
+   color: #444;
+   margin: 0
+}
+
+h1
+{
+   font: 28pt 'Arial Narrow';
+   text-align: right;
+   border-bottom: .07cm #eaeaea solid;
+   line-height: .71cm;
+   padding: 0 0 5mm;
+   margin: 0 0 2.51cm
+}
+
+h2
+{
+   font: 700 13pt 'Tahoma';
+   line-height: .35cm;
+   padding: 1.79cm 0 .37cm;
+   border-bottom: .03cm #eaeaea solid
+}
+
+.green, .code
+{
+   font: 700 9pt 'Courier';
+   color: #34581e
+}
+
+.grey
+{
+   color: #676767
+}
+
+.brown
+{
+   color: #b45f06;
+   font: 700 10pt 'Courier New'
+}
+
+a
+{
+   color: #0b2faa
+}
+
+.code-end
+{
+   border-bottom: .08cm solid #f5d86e;
+   padding: 0 0 .33cm;
+   margin-bottom: .6cm
+}