diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..723ef36 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..cab8534 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3aacd78 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + SHRI2013 :: HomeWork :: PDF + + + + + + + +
+
+

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 + welldocumented + 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/js/main.js b/js/main.js new file mode 100644 index 0000000..1e50e64 --- /dev/null +++ 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(); \ No newline at end of file