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