Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Partial updating master to 1.5.2

  • Loading branch information...
commit 4352cfb17e0ec035bbfe86cc8675de2b04ab0ece 1 parent 785a028
@addyosmani authored
View
11 README.md
@@ -1,9 +1,14 @@
+
#### Introduction
-This is the repo for an in-progress creative-commons book I've written called 'Essential JavaScript Design Patterns' - due out to purchase via O'Reilly Media in Summer 2012. Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. You can read the latest version [online](http://addyosmani.com/resources/essentialjsdesignpatterns/book/ "Read Online") at
+This is the repo for an in-progress book I'm writing called 'Learning JavaScript Design Patterns' - due out to purchase via O'Reilly Media in Summer 2012.
+
+Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. You can read the latest version [online](http://addyosmani.com/resources/essentialjsdesignpatterns/book/ "Read Online") at
any time.
-Version 1.5.2 of the book is currently over 165 A4 pages in length and 1.0 was downloaded approximately 260,000 times (rounded) during 2011. Additional formats of the book are available in the 'formats' directory.
+Version 1.5.2 of the book is currently over 150 A4 pages in length and 1.0 was downloaded approximately 260,000 times during 2011. Additional formats of the book are available in the 'formats' directory.
+
+For readers interested in purchasing the book, this can be done from the [O'Reilly](http://shop.oreilly.com/product/0636920025832.do) website.
#### Why is this book needed?
@@ -19,6 +24,6 @@ There are a lot of requests to translate this project into other languages. Plea
###License
-**This book is released under a Creative Commons Attribution-Noncommercial- No Derivative Works 3.0 United States License. What this means it that the project is free to read and use, but the license does not permit commercial use of the material (i.e you can freely print out the book for your own use, but you can't sell it). I'm trying to best to publish all of my books in a free + purchased (if you would like to support these projects) form so I would greatly appreciate it if you would respect these terms.**
+This book is released under a Creative Commons Attribution-Noncommercial- No Derivative Works 3.0 United States License. What this means it that the project is free to read and use, but the license does not permit commercial use of the material (i.e you can freely print out the book for your own use, but you can't sell it). I'm trying to best to publish all of my books in a free + purchased (if you would like to support these projects) form so I would greatly appreciate it if you would respect these terms.
Copyright Addy Osmani, 2011-2012.
View
763 book/css/base.css
@@ -0,0 +1,763 @@
+/* reset */
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
+body {line-height:1.5;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;}
+table, td, th {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:"";}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+
+/* typography */
+body,
+input[type="text"],
+input[type="submit"],
+.search {
+ font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
+}
+
+html {font-size:100.01%;}
+h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#000;}
+h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2 {font-size:2em;margin-bottom:0.75em;}
+h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
+h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
+h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
+h6 {font-size:1em;font-weight:bold;}
+h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
+p {margin:0 0 1.5em;}
+p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
+p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
+a:focus, a:hover {color:#000;}
+a {color:#009;text-decoration:underline;}
+blockquote {margin:1.5em;color:#666;font-style:italic;}
+strong {font-weight:bold;}
+em, dfn {font-style:italic;}
+dfn {font-weight:bold;}
+sup, sub {line-height:0;}
+abbr, acronym {border-bottom:1px dotted #666;}
+address {margin:0 0 1.5em;font-style:italic;}
+del {color:#666;}
+li ul, li ol {margin:0;}
+ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
+ul {list-style-type:disc;}
+ol {list-style-type:decimal;}
+dl {margin:0 0 1.5em 0;}
+dl dt {font-weight:bold;}
+dd {margin-left:1.5em;}
+table {margin-bottom:1.4em;width:100%;}
+th {font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tr.even td {background:#e5ecf9;}
+tfoot {font-style:italic;}
+caption {background:#eee;}
+
+/* custom styles */
+body {
+ font-size: 100%;
+ color: #000;
+ background: #F6f6F6 url(../img/base.png) repeat 0 0;
+}
+
+h3 {
+ border-bottom: 1px solid #CCC;
+ margin-bottom: .5em;
+ padding-bottom: .5em;
+}
+/* paragraphs */
+
+.lead {
+ font-size: 1.5em;
+}
+
+.stage_links {
+ color: #777;
+}
+
+
+/* links */
+a,
+a:link,
+a:visited {
+ color: #906;
+ text-decoration: none;
+}
+
+a:hover,
+a:active,
+a:focus {
+ color: #E106B2;
+ text-decoration: underline;
+}
+
+/* horizontal rule */
+hr.space {
+ background: #fff;
+ color: #fff;
+ visibility: hidden;
+}
+
+hr {
+ background: #CCC;
+ color: #CCC;
+ clear: both;
+ float: none;
+ width: 100%;
+ height:.1em;
+ margin: 0 0 1.45em;
+ border: none;
+}
+
+hr.bold {
+ height: 1px;
+ background-color: #906;
+ color: #906;
+}
+
+/* blockquotes */
+blockquote {
+ overflow: hidden;
+ margin: 0 0 1.5em 0;
+ padding: 0 1.5em;
+ color: #000;
+ font-style: normal;
+}
+
+blockquote p {
+ margin-bottom: .5em;
+}
+
+.attribution {
+ font-style: italic;
+ text-align: right;
+ color: #777;
+}
+
+/* tables */
+table {
+ width: 100%;
+}
+
+
+
+/* table and code blocks */
+
+code{
+ padding: 2px 4px;
+ color:
+ #D14;
+ background-color:
+ #F7F7F9;
+ border: 1px solid
+ #E1E1E8;
+ font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+ font-size: 12px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+
+}
+.caption,
+caption {
+ caption-side: bottom;
+ background: none;
+ font-style: italic;
+}
+tr.even td {
+ background: #F4F4F4;
+}
+tfoot td {
+ border-top: 1px solid #EAEAEA;
+ font-weight: bold;
+ font-style: normal;
+}
+
+/* Abbreviations */
+abbr, acronym {
+ border: none;
+}
+abbr[title]:hover {
+ border-bottom: 1px dotted #666;
+ cursor: help;
+}
+
+/* helpers */
+.red {
+ background: red;
+}
+
+.highlight {
+ background: #EEC3C3;
+}
+
+
+/* LAYOUT */
+/*
+container = 940px, 8px padding
+inner = 932px = 100%
+unit: 60px = 6,4655%
+gutter: 16px = 1em = 1,7241%
+container: 12*60px (unit) + 13*16px (gutter) = 928px = 58em = 100%
+*/
+
+/* container */
+
+/* clearfix */
+.edition_list:after, .inner:after, .editions:after, .blocks:after, .clearfix:after, .container:after {
+ content:"\0020";
+ display:block;
+ height:0;
+ clear:both;
+ visibility:hidden;
+ overflow:hidden;
+}
+.edition_list, .inner, .editions, .blocks, .clearfix, .container {
+ display:block;
+}
+.clear {
+ clear:both;
+}
+
+
+.container {
+ max-width: 940px;
+ width:expression(document.body.clientWidth > 940? "940px": "auto" );
+ margin: 0 auto;
+ padding: 0 16px;
+ text-align: left;
+}
+
+/* grid */
+.gttr {
+ margin-right: 2.9%;
+ float: left;
+}
+.last {
+ float: left;
+ margin-right: 0;
+}
+
+
+
+/* sidebar */
+.sidebar {
+ width: 32%;
+ float: right;
+ margin-right: 0;
+}
+
+/* content footer with prev/next links */
+.content_footer {
+ clear: both;
+}
+
+
+/* layout */
+
+/*
+2cols = 4.6341%
+6cols = 48.7805%
+4cols = 31.7073%
+3cols = 23.1707%
+8cols = 65.853658%;
+10cols = 73.17073%
+*/
+
+.span2, .span3, .span4, .span6, .span8, .span10 {
+ margin-right: 2.3%; /* this is a bit smaller than it should be due to IE's rounding bug */
+ float: left;
+}
+
+.span2 {
+ width: 14.6341%;
+}
+.span3 {
+ width: 23.1707%;
+}
+.span4 {
+ width: 31.7073%;
+}
+.span6 {
+ width: 48.7805%;
+}
+.span8 {
+ width: 65.853658%;
+}
+.span10 {
+ width: 73.17073%;
+}
+
+.blocks,
+.editions {
+ margin: 1.5em 0;
+ clear: both;
+}
+
+.editions {
+ margin-bottom: 0;
+}
+
+.last {
+ margin-right: 0 !important;
+}
+
+.lyt_img {
+ max-width: 100%;
+}
+/* header */
+.page_header {
+ overflow: hidden;
+ padding: 0 0 .2em 0;
+ margin: 1.5em 0;
+}
+
+/* logo */
+.logo {
+ width: 49.5%;
+ float: left;
+ margin-bottom: 0;
+}
+
+.logo span {
+ display: block;
+ font-style: italic;
+ font-size: .5em;
+}
+
+.logo a,
+.logo a:link,
+.logo a:visited {
+ color: #000;
+}
+
+.logo a:hover,
+.logo a:active,
+.logo a:focus {
+ color: #906;
+ text-decoration: none;
+}
+
+
+/* search */
+.search_box {
+ width: 50%;
+ float: right;
+}
+
+.search {
+ width: auto;
+ float: right;
+ vertical-align: middle;
+}
+
+/* modules */
+.stage,
+.info_bubble,
+.edition_list,
+.inner {
+ padding: 1em 1.5em 1em 1.5em;
+ background: #FFF;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ -moz-box-shadow: 0px 0px 8px #999;
+ -webkit-box-shadow: 0px 0px 8px #999;
+ box-shadow: 0px 0px 8px #999;
+}
+
+/* startpage welcome box */
+.stage {
+ margin-bottom: 1.5em;
+ padding: 3em 50% 1.5em 3em;
+}
+
+/* bold list of editions on startpage */
+
+.edition_list {
+ margin: 0 0 1em 0;
+ clear: both;
+ overflow: hidden;
+}
+
+.edition_list p {
+ margin-bottom: 0;
+ font-style: italic;
+}
+
+.edition_list h2 {
+ margin-bottom: 0;
+ font-size: 1.8em;
+ line-height: 1.5;
+ font-weight: bold;
+}
+
+.edition_list ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: inline;
+}
+
+.edition_list ul li {
+ display: inline;
+ margin-right: 1em;
+ padding-right: 1em;
+ border-right: 1px solid #F6f6F6;
+}
+
+.edition_list ul li:last-child {
+ margin-right: 0;
+ padding-right: 0;
+ border-right: none;
+}
+
+/* info bubble */
+.info_bubble {
+ padding-bottom: 1em;
+ color: #FFF;
+ text-shadow: 1px 1px 0 #000;
+ background: #906;
+ position: relative;
+ overflow: visible;
+}
+
+.info_bubble p {
+ margin-bottom: 0;
+}
+
+/* info bubble on startpage */
+.info_bubble.startpage {
+ padding-bottom: 1em;
+ min-height: 9em;
+ height: auto !important;
+ height: 9em;
+ z-index: 0;
+}
+
+.info_bubble.startpage span {
+ position: absolute;
+ display: block;
+ bottom: 1em;
+ left: -2em;
+ width: 40px;
+ height: 40px;
+ z-index: 100;
+}
+
+/* blocks */
+.blocks > div {
+ margin-bottom: 1.5em;
+}
+
+/* footer */
+.footer {
+ margin: 1.5em 0 0 0;
+ padding: 1.5em 0 0 0;
+ overflow: hidden;
+}
+
+
+/* buying options */
+
+#buy {
+ position: relative;
+}
+
+#offers {
+ position: absolute;
+ bottom: 0;
+ font-size: .625em;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: none;
+}
+
+.save_a_tree h3 {
+ display: none;
+}
+
+.save_a_tree h3 {
+ line-height: 1.5;
+ border-bottom: none;
+}
+
+#offers li {
+ display: inline;
+ margin-right: 1em;
+ padding-right: 1em;
+ border-right: 1px solid #F6f6F6;
+}
+
+#offers li:last-child {
+ margin-right: 0;
+ padding-right: 0;
+ border-right: none;
+}
+
+.shopping_cart_button_line_bottom,
+.shopping_cart_button_line {
+ border-top: 1px solid #CCC;
+ margin-top: .5em;
+ padding: .5em 1px 0 1px;
+ overflow: hidden;
+ clear: both;
+}
+
+.shopping_cart_button_line_bottom {
+ margin-bottom: 7em;
+}
+
+
+.shopping_cart_button_line:first-child {
+ border-top: none;
+}
+
+
+div.header {
+ font-size: 1.5em;
+ line-height: 1;
+ border-bottom: 1px solid #CCC;
+ margin-bottom: .5em;
+ padding-bottom: .5em;
+ color: #000;
+ text-shadow: 1px 1px 0 #FFF;
+}
+
+.product_title {
+ font-style: italic;
+ margin-bottom: 1.5em;
+}
+
+.product_price {
+ float: left;
+}
+
+.price {
+ color: #666;
+}
+
+.product_buy_link {
+ float: right;
+ line-height: 1;
+}
+
+.safari_read_now,
+.ebook_formats,
+.whatisthis {
+ font-size: .75em;
+}
+
+.safari_read_now {
+ float: right;
+ line-height: 2;
+}
+
+
+
+/* search form */
+/* custom search form styles */
+
+/* search form */
+input[type="text"],
+input[type="submit"] {
+ font-size: 1em;
+
+ -moz-border-radius: .5em;
+ -webkit-border-radius: .5em;
+ border-radius: .5em;
+ vertical-align: middle;
+}
+
+input[type="text"] {
+ width: 140px;
+ margin: .5em 0;
+ padding: .5em .5em .3em;
+ border: 1px solid #F1F1F0;
+ color: #666;
+
+ -moz-box-shadow: inset 3px 3px 2px #999;
+ -webkit-box-shadow: inset 3px 3px 2px #999;
+ box-shadow: inset 3px 3px 2px #999;
+}
+
+input[type="text"]:focus,
+input[type="text"]:active,
+input[type="text"]:hover {
+ background: #FFF;
+ color: #000;
+ outline: none;
+}
+
+input[type="submit"] {
+ width: auto;
+ margin: 0;
+ padding: .28em .5em;
+
+ background: #906;
+ color: #FFF;
+ border: 0;
+ text-transform: uppercase;
+ cursor: pointer;
+
+ text-shadow: 1px 1px 0 #000;
+
+ -moz-box-shadow: 0px 0px 2px #999;
+ -webkit-box-shadow: 0px 0px 2px #999;
+ box-shadow: 0px 0px 2px #999;
+}
+
+input[type="submit"]:hover,
+input[type="submit"]:focus,
+input[type="submit"]:active {
+ color: #FFF;
+ background: #E106B2;
+
+ text-shadow: 1px 1px 0 #000;
+
+ -moz-box-shadow: 0px 0px 3px #333;
+ -webkit-box-shadow: 0px 0px 3px #333;
+ box-shadow: 0px 0px 3px #333;
+}
+
+
+/* hide .anchor links from regular links */
+
+a.anchor {
+ color: #000;
+}
+
+a.anchor:hover {
+ text-decoration: none;
+}
+
+/* fix up display of figures and captions */
+
+.figure {
+ padding-top: 1.5em;
+}
+
+.figure,
+.caption {
+ display: block;
+ margin-bottom: 1.5em;
+ text-align: center;
+}
+
+.figure * {
+ text-align: left;
+}
+
+.caption {
+ font-size: .875em;
+}
+
+.figure .caption {
+ text-align: center;
+}
+
+/* shrink large images to fit container */
+
+.figure img {
+ margin-bottom: .5em;
+ max-width: 100%;
+}
+
+/* remove unneeded em dash from attribution divs */
+
+.attribution::before {
+ content: "";
+}
+
+/* fix up sidebar TOC with shrinking font sizes */
+
+.sidebar ul {
+ font-size: 0.9em;
+ padding-left: 2em;
+ list-style-type: square;
+}
+
+/* add disabled class for inactive navigation links */
+
+.disabled {
+ color: #BBB;
+}
+
+/* make links stand out on dark background, as in info_bubble and footer */
+
+.footer a,
+.footer a:link,
+.footer a:visited,
+.info_bubble a,
+.info_bubble a:link,
+.info_bubble a:visited {
+ color: #BBB;
+}
+
+.footer a:hover,
+.footer a:active,
+.footer a:focus,
+.info_bubble a:hover,
+.info_bubble a:active,
+.info_bubble a:focus {
+ color: #BBB;
+}
+
+
+/* fix up iframe document styles */
+
+.buybuttonswidget {
+ padding-bottom: 10px;
+ background: #FFF;
+}
+
+/* fix up pre overflow */
+
+
+
+@media screen and (max-device-width: 680px), screen and (max-width: 680px) {
+
+ .span2, .span3, .span4, .span6, .span8, .span10 {
+ width: 100%;
+ margin-right: 0;
+ float: none;
+ }
+
+ .info_bubble.startpage {
+ min-height: 1em;
+ height: auto !important;
+ height: 1em;
+ margin-bottom: 1.5em;
+ }
+
+
+
+}
+
+@media screen and (max-device-width: 680px), screen and (max-width: 680px) {
+ .stage {
+ background-position: 50% -3.5em;
+ padding: 24em 1.5em 1.5em 1.5em;
+ }
+
+ .lead {
+ margin-bottom: 13em;
+ }
+
+ .content, .sidebar {
+ float: none;
+ width: 100%;
+ margin-right: 0;
+ }
+
+ input[type="text"] {
+ width: 100px;
+ }
+
+ iframe {
+ min-height: 400px;
+ height:auto !important;
+ height: 400px;
+ }
View
3  book/css/oreilly.css
@@ -0,0 +1,3 @@
+@import url("base.css");
+@import url("sausage.css");
+@import url("print.css") print;
View
21 book/css/print.css
@@ -0,0 +1,21 @@
+/* print.css */
+body {
+ line-height:1.5;
+ font-family: Palatino, "Palatino LT Std", "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
+ color:#000;
+ background:none;
+ font-size:10pt;
+}
+.container {background:none;}
+hr {background:#ccc;color:#ccc;width:100%;height:2px;margin:2em 0;padding:0;border:none;}
+hr.space {background:#fff;color:#fff;visibility:hidden;}
+h1, h2, h3, h4, h5, h6 {
+ font-family: Palatino, "Palatino LT Std", "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
+}
+code {font:.9em "Courier New", Monaco, Courier, monospace;}
+a img {border:none;}
+p img.top {margin-top:0;}
+blockquote {margin:1.5em;padding:1em;font-style:italic;font-size:.9em;}
+.hide {display:none;}
+a:link, a:visited {background:transparent;font-weight:700;text-decoration:underline;}
+a:link:after, a:visited:after {content:" (" attr(href) ")";font-size:90%;}
View
48 book/css/sausage.css
@@ -0,0 +1,48 @@
+.sausage-set {
+ position: fixed; right: 0; top: 0;
+ width: 15px; height: 100%;
+ border-left: solid 2px #fff;
+ border-right: solid 2px #fff;
+ background-color: #fff;
+ font-family: 'Helvetica Neue', 'Arial', 'sans-serif';
+}
+ .sausage {
+ position: absolute; left: 0;
+ width: 100%; height: 100%;
+ background-color: #f1f1f1;
+ text-decoration: none;
+ -moz-border-radius: 8px;
+ -webkit-border-bottom-left-radius: 8px;
+ -webkit-border-top-left-radius: 8px;
+ -webkit-border-bottom-right-radius: 8px;
+ -webkit-border-top-right-radius: 8px;
+ -moz-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
+ -webkit-box-shadow: inset 0px 1px 2px 4px rgba(0, 0, 0, 0.025);
+ cursor: pointer;
+ }
+ .sausage-hover,
+ .sausage-current {
+ background-color: #f2e4ed;
+ -moz-box-shadow: inset 0px 1px 2px 4px rgba(51, 63, 70, 0.025);
+ }
+ .sausage-span {
+ position: absolute; right: 24px; top: 5px; z-index: 2;
+ display: none;
+ width: 100px;
+ padding: 2px 3px;
+ color: #000;
+ background-color: #fff;
+ border: solid 2px #990066;
+ font-size: 10px; line-height: 12px; font-weight: bold; text-align: center;
+ -moz-border-radius: 7px;
+ -webkit-border-bottom-left-radius: 7px;
+ -webkit-border-top-left-radius: 7px;
+ -webkit-border-bottom-right-radius: 7px;
+ -webkit-border-top-right-radius: 7px;
+ -moz-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
+ -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.05);
+ }
+ .sausage-hover .sausage-span,
+ .sausage-current .sausage-span {
+ display: block;
+ }
View
19 book/css/style.css
@@ -1,13 +1,5 @@
@charset "UTF-8";
-body {
- font: 1.1em Georgia;
- line-height:1.4em;
- background: #fff;
- margin: 0;
- padding: 0;
- color: #000;
- text-align: left;
-}
+
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
@@ -22,7 +14,6 @@ h1, h2, h3, h4, h5, h6, p {
font-family:Georgia;
}
-
h1{
font-size: 32px;
line-height: 43px;
@@ -101,6 +92,8 @@ header {
font-size: 1px;
line-height: 0px;
}
+
+
.copyright {
text-align: left;
}
@@ -113,10 +106,8 @@ header {
font-size: 2.2em;
}
-.bookauthor{
- font-family:Helvetica,Arial,sans-serif;
- font-weight:bold;
- text-align:center;
+.booktitle.author{
+ font-size:24px;
}
View
BIN  book/img/base.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
11,807 book/index.html
6,966 additions, 4,841 deletions not shown
View
BIN  diagrams/command.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/constructor.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/facade.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/factory.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/flyweight.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/mediator.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/mixins.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/module.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/mvc.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/mvp.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/mvvm.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/observer.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
143 diagrams/positioning.md
@@ -0,0 +1,143 @@
+
+
+Below can be found details of where diagrams supplied (once redone by the art department at O'Reilly) should be placed in the book.
+
+
+Filename: constructor.png
+Section: The Constructor Pattern
+Placement: After the paragraph
+
+"Object constructors are used to create specific types of objects - both preparing the object for use and accepting arguments which a constructor can use to set the values of member properties and methods when the object is first created."
+
+========================
+
+Filename: module.png
+Section: The Module Pattern
+Placement: After the paragraph
+
+"In JavaScript, the module pattern is used to further emulate the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. What this results in is a reduction in the likelihood of our function names conflicting with other functions defined in additional scripts on the page."
+
+=========================
+
+Filename: singleton.png
+Section: The Singleton Pattern
+Placement: After the paragraph
+
+"Clasically, the singleton pattern can be implemented by creating a class with a method that creates a new instance of the class if one doesn't exist.In the event of an instance already existing, it simply returns a reference to that object.The singleton pattern is thus known because it restricts instantiation of a class to a single object."
+
+=========================
+
+Filename: observer.png
+Section: The Observer Pattern
+Placement: After the paragraph
+
+The Observer is a design pattern where an an object (known as a subject) maintains a list of objects depending on it (observers), automatically notifying them of any changes to state.
+
+=========================
+
+Filename: publishsubscribe.png
+Section: The Observer Pattern
+Plaecment: After the paragraph
+
+The Observer pattern requires that the observer (or object) wishing to receive topic notifications must subscribe this interest to the object firing the event (the subject).
+
+=========================
+
+Filename: mediator.png
+Section: The Mediator Pattern
+Placement: After the paragraph
+
+"A real-world analogy could be a typical airport traffic control system. A tower (Mediator) handles what planes can take off and land because all communications (notifications being listened out for or broadcast) are done from the planes to the control tower, rather than from plane-to-plane. A centralized controller is key to the success of this system and that's really the role a Mediator plays in software design."
+
+
+=========================
+
+Filename: prototype.png
+Section: The Prototype Pattern
+Placement: After the paragraph
+
+"We can think of the prototype pattern as being based on prototypal inheritance where we create objects which act as prototypes for other objects. The prototype object itself is effectively used as a blueprint for each object the constructor creates. If the prototype of the constructor function used contains a property called name for example (as per the code sample lower down), then each object created by that same constructor will also have this same property.."
+
+
+=========================
+
+Filename: command.png
+Section: The Command Pattern
+Placement: After the paragraph
+
+"Concrete classes are best explained in terms of class-based programming languages and are related to the idea of abstract classes. An abstract class defines an interface, but doesn't necessarily provide implementations for all of its member functions. It acts as a base class from which others are derived. A derived class which implements the missing functionality is called a concrete class."
+
+
+=========================
+
+Filename: facade.png
+Section: The Facade Pattern
+Placement: After the paragraph
+
+"When we put up a facade, we present an outward appearance to the world which may conceal a very different reality. This was the inspiration for the name behind the next pattern we're going to review - the Facade pattern. This pattern provides a convenient higher-level interface to a larger body of code, hiding its true underlying complexity. Think of it as simplifying the API being presented to other developers, something which almost always improves usability."
+
+
+
+=========================
+
+Filename: factory.png
+Section: The Factory Pattern
+Placement: After the paragraph
+
+"The Factory pattern is another creational pattern concerned with the notion of creating objects. Where it differs from the other patterns in its category is that it doesn't explicitly require us use a constructor. Instead, a Factory can provide a generic interface for creating objects, where we can specify the type of factory object we wish to be created."
+
+
+=========================
+
+Filename: mixins.png
+Section: The Factory Pattern
+Placement: After the paragraph
+
+"In JavaScript, we can look at inheriting from Mixins as a means of collecting functionality through extension. Each new object we define has a prototype from which it can inherit further properties. Prototypes can inherit from other object prototypes but can even more importantly, can define properties for any number of object instances. We can leverage this fact to promote function re-use and that's where Mixins come in."
+
+
+=========================
+
+Filename: decorator.png
+Section: The Decorator Pattern
+Placement: After the paragraph
+
+"Decorators can be used to modify existing systems where we wish to add additional features to objects without the need to heavily modify the underlying code using them. A common reason why developers use them is their applications may contain features requiring a large quantity of distinct types of object. Imagine having to define hundreds of different object constructors for say, a JavaScript game."
+
+
+=========================
+
+Filename: flyweight.png
+Section: The Flyweight Pattern
+Placement: After the paragraph
+
+"The Flyweight pattern is a classical structural solution for optimizing code that is repetitive, slow and inefficiently shares data. It aims to minimize the use of memory in an application by sharing as much data as possible with related objects (e.g application configuration, state and so on)."
+
+
+
+=========================
+
+Filename: mvc.png
+Section: The MVC Pattern
+Placement: After the paragraph
+
+"These frameworks include the likes of Backbone, Ember.js and AngularJS. Given the importance of avoiding "spaghetti" code, a term which describes code that is very difficult to read or maintain due to its lack of structure, it's imperative that the modern JavaScript developer understand what this pattern provides. This allows us to effectively appreciate what these frameworks enable us to do differently."
+
+
+=========================
+
+Filename: mvp.png
+Section: The MVP Pattern
+Placement: After the paragraph
+
+"The P in MVP stands for presenter. It's a component which contains the user-interface business logic for the view. Unlike MVC, invocations from the view are delegated to the presenter, which are decoupled from the view and instead talk to it through an interface. This allows for all kinds of useful things such as being able to mock views in unit tests."
+
+
+=========================
+
+Filename: mvvm.png
+Section: The MVVM Pattern
+Placement: After the paragraph
+
+"This facilitates UI and development work occurring almost simultaneously within the same codebase. UI developers write bindings to the ViewModel within their document markup (HTML), where the Model and ViewModel are maintained by developers working on the logic for the application."
+
View
BIN  diagrams/prototype.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/publishsubscribe.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  diagrams/singleton.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.