From 318757494f183b4245adcf37ffe1c5cb7496e930 Mon Sep 17 00:00:00 2001 From: trubnikov-ea Date: Sun, 29 Sep 2013 18:47:31 +0600 Subject: [PATCH 1/3] =?UTF-8?q?=D0=A1=D0=B5=D0=BC=D0=BF=D0=BE=D1=82=D0=B8?= =?UTF-8?q?=D1=88=D0=BD=D0=B8=D0=BD=D1=8C=D0=BA=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WebApp/index.html | 64 ++++++++++++++++++++++++ WebApp/style.css | 111 +++++++++++++++++++++++++++++++++++++++++ WebApp/style_print.css | 101 +++++++++++++++++++++++++++++++++++++ 3 files changed, 276 insertions(+) create mode 100644 WebApp/index.html create mode 100644 WebApp/style.css create mode 100644 WebApp/style_print.css diff --git a/WebApp/index.html b/WebApp/index.html new file mode 100644 index 0000000..97d1e7a --- /dev/null +++ b/WebApp/index.html @@ -0,0 +1,64 @@ + + + + + Document + + + + +
+
+

Preface

+

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.

+ +

More code, less words

+

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.

+ +

Exhaustive code and repetition

+

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.

+ +

Color-coding Conventions

+

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).

+

<!DOCTYPE html><html lang="en"><body><script>

+
+
13
+
+
+
+

// this is a comment about a specific part of the code

+

var foo = 'calling out this part of the code';

+

</script></body></html>

+

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.

+

"Consider that the cody object created from the Object() constructor function (i.e + var cody = new Object()) is not really different from a string object created via the + String() constructor function. To drive this fact home, examine the code below:" +

+

Notice the use of gray italic text for code references, orange text for JavaScript words/keywords, and regular black text for everything in-between.

+ +

jsFiddle, JS Bin, and Firebug lite-dev

+ +

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. + console.log) 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 + console.log. +

+ +

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. +

+

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.

+ +
+
14
+
+ + \ No newline at end of file diff --git a/WebApp/style.css b/WebApp/style.css new file mode 100644 index 0000000..b508816 --- /dev/null +++ b/WebApp/style.css @@ -0,0 +1,111 @@ +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 +} + +.top-border +{ + border-style: solid; + border-width: 15px 0 0; + border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAPCAMAAAASwVXLAAAALVBMVEX/5Ij/5ZD/4Xr+77j/8sX/6Z3/5IH/7bH/3mr/6qb/7Kv/33L/6JX/8b7/7bNcG1SzAAAAIElEQVR42gXABQ0AMAwAsJ75/uUuqqcYtqW5ErrsmH4ABhEAalDdeJMAAAAASUVORK5CYII=') 15 0 0 fill repeat +} + +.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 +} + +h2 +{ + 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-top: 1.79cm; + padding-bottom: .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-bottom: .33cm; + margin-bottom: .6cm +} \ No newline at end of file diff --git a/WebApp/style_print.css b/WebApp/style_print.css new file mode 100644 index 0000000..b6aa79a --- /dev/null +++ b/WebApp/style_print.css @@ -0,0 +1,101 @@ +body, +.page +{ + margin: 0; + padding: 0 +} + +.page +{ + position: relative; + overflow: hidden; + background: #fff; + border: none; + height: 297mm +} + +img +{ + width: 100%; + height: .55cm; + padding-top: 1.5cm +} + +.list +{ + display: none +} + +.content +{ + margin: 0; + padding: 0 +} + +p +{ + font: 10pt 'Helvetica'; + line-height: .67cm; + margin: .29cm 0 0; + padding: 0 +} + +h1, +h2 +{ + color: #444 +} + +h2 +{ + margin: 0; + padding: 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-top: 1.79cm; + padding-bottom: .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-bottom: .33cm; + margin-bottom: .6cm +} \ No newline at end of file From 0e98c4d08759e639c0ef37e066ac072eda0232cd Mon Sep 17 00:00:00 2001 From: trubnikov-ea Date: Sun, 29 Sep 2013 19:40:37 +0600 Subject: [PATCH 2/3] =?UTF-8?q?Chromium=20=D0=B1=D1=80=D0=B0=D1=83=D0=B7?= =?UTF-8?q?=D0=B5=D1=80=D1=8B=20=D0=BF=D0=B5=D1=87=D0=B0=D1=82=D0=B0=D1=8E?= =?UTF-8?q?=D1=82=20=D0=BF=D0=BE=D1=87=D1=82=D0=B8=20=D0=B8=D0=B4=D0=B5?= =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WebApp/index.html | 3 ++- WebApp/pic.png | Bin 0 -> 146 bytes WebApp/style.css | 19 ++++-------------- WebApp/style_print.css | 44 +++++++++++++++++++++++------------------ 4 files changed, 31 insertions(+), 35 deletions(-) create mode 100644 WebApp/pic.png diff --git a/WebApp/index.html b/WebApp/index.html index 97d1e7a..9c205e6 100644 --- a/WebApp/index.html +++ b/WebApp/index.html @@ -20,7 +20,8 @@

Exhaustive code and repetition

Color-coding Conventions

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).

-

<!DOCTYPE html><html lang="en"><body><script>

+ +

<!DOCTYPE html><html lang="en"><body><script>

13
diff --git a/WebApp/pic.png b/WebApp/pic.png new file mode 100644 index 0000000000000000000000000000000000000000..22eb55db7a633a1d7d1fee08c5a766d46f8c1d40 GIT binary patch literal 146 zcmeAS@N?(olHy`uVBq!ia0vp^j6lrK!3-pY4u+lvQn~>?A+G Date: Sun, 29 Sep 2013 19:42:45 +0600 Subject: [PATCH 3/3] =?UTF-8?q?Chromium=20=D0=B1=D1=80=D0=B0=D1=83=D0=B7?= =?UTF-8?q?=D0=B5=D1=80=D1=8B=20=D0=BF=D0=B5=D1=87=D0=B0=D1=82=D0=B0=D1=8E?= =?UTF-8?q?=D1=82=20=D0=BF=D0=BE=D1=87=D1=82=D0=B8=20=D0=B8=D0=B4=D0=B5?= =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- WebApp/style.css | 2 +- WebApp/style_print.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/WebApp/style.css b/WebApp/style.css index 42e07a3..9f2acdf 100644 --- a/WebApp/style.css +++ b/WebApp/style.css @@ -95,6 +95,6 @@ a .code-end { border-bottom: .08cm solid #f5d86e; - padding-bottom: .33cm; + padding: 0 0 .33cm; margin-bottom: .6cm } \ No newline at end of file diff --git a/WebApp/style_print.css b/WebApp/style_print.css index 0ec58ec..7aeca6a 100644 --- a/WebApp/style_print.css +++ b/WebApp/style_print.css @@ -102,6 +102,6 @@ a .code-end { border-bottom: .08cm solid #f5d86e; - padding-bottom: .33cm; + padding: 0 0 .33cm; margin-bottom: .6cm } \ No newline at end of file