yandex-shri-ekb · mrsamo · Sep 26, 2013 · Sep 30, 2013 · Sep 30, 2013 · greyevil
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,106 @@
+/* base */
+html {
+    font: 16px/1.4 Helvetica,sans-serif;
+}
+
+body {
+    background-color: #565656;
+    color: #000;
+}
+
+.l-wrapper {
+    margin: 1rem 3rem 0;
+}
+
+.b-page {
+    padding: 5.5rem 7.5rem 3rem;
+    background-color: #fff;
+    min-height: 94rem;
+    position: relative;
+}
+
+.b-page + .b-page {
+    margin: 1rem 0 0 0;
+}
+
+.b-page-number {
+    font-size: 1.4rem;
+    text-align: center;
+    position: absolute;
+    bottom: 1rem;
+    left: 0;
+    width: 100%;
+}
+
+/* content */
+h1, h2 {
+    border-bottom: 0.5rem solid #ebebeb;
+    color: #444;
+}
+
+h1 {
+    margin: 0.5rem 0 9rem;
+    padding: 0 0 1.2rem;
+    text-align: right;
+    font: 3.4rem/1 "ArialNarrow", Arial, sans-serif;
+}
+
+h2 {
+    margin: 6.3rem 0 0;
+    padding: 0 0 1rem;
+    font: 700 1.7rem/1 "TahomaBold",Tahoma,sans-serif;
+    border-width: 0.3rem;
+}
+
+h2 + p {
+    margin-top: 1.8rem;
+}
+
+a {
+  color: #0F0;
+}
+
+p {
+    font-size: 1.5rem;
+    line-height: 2.2rem;
+    margin: 2.6rem 0;
+}
+
+code {
+    font-family: "Courier", monospace;
+    color: #c25f06;
+}
+
+pre {
+    white-space: pre-line;
+    font: 700 1.2rem/1.4rem "Courier", monospace;
+    color: #34581e;
+    margin: 1rem 0.3rem;
+}
+
+pre > hr {
+    background-color: #ffe398;
+    height: 0.3rem;
+    margin: 1rem 0 0;
+    border: none;
+}
+
+pre > hr:first-child {
+    height: 2.6rem;
+    margin: 0 0 0.5rem;
+
+    background: -moz-linear-gradient(top, #fff1c1 0%, #ffdd64 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff1c1), color-stop(100%,#ffdd64));
+    background: -webkit-linear-gradient(top, #fff1c1 0%,#ffdd64 100%);
+    background: -o-linear-gradient(top, #fff1c1 0%,#ffdd64 100%);
+    background: -ms-linear-gradient(top, #fff1c1 0%,#ffdd64 100%);
+    background: linear-gradient(to bottom, #fff1c1 0%,#ffdd64 100%);
+}
+
+pre > code {
+    color: #b45f06;
+}
+
+.b-pre-comment {
+    color: #7a7a7a;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>SHRI2013 :: HomeWork :: PDF</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+<div class="l-wrapper">
+    <div class="b-page">
+        <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
+            welldocumented
+            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>
+            <hr>
+            &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;body&gt;&lt;script&gt;
+
+        </pre>
+        <div class="b-page-number">13</div>
+    </div>
+    <div class="b-page">
+        <pre>
+            <span class="b-pre-comment">// this is a comment about a specific part of the code</span>
+            var foo = <code>&#39;calling out this part of the code&#39;</code>
+
+            &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;
+            <hr>
+        </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 cody object created from the <code>Object()</code> constructor function (i.e <code>var cody = new
+            Object()</code>) is not really different from a <code>string</code> object created via the String() 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 jsFiddle page, where the code
+            can be tweaked and executed online. The jsFiddle examples have been configured to use the Firebug
+            lite-dev 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 usage and purpose of <code>console.log</code>.</p>
+        <p>In situations where jsFiddle & Firebug lite-dev caused complications with the JavaScript code JS Bin &
+            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 upgrading or switching browsers.</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="b-page-number">14</div>
+    </div>
+</div>
+
+<script src="js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,8 @@
+function resize () {
+    var scale = 88,
+        rootFontSize = Math.floor(document.body.offsetWidth / scale);
+    document.getElementsByTagName('html')[0].style.fontSize = rootFontSize + 'px';
+}
+
+window.onresize = resize;
+resize();