diff options
| author | samot <thomasalwyndavis@gmail.com> | 2011-04-03 19:58:38 +1000 |
|---|---|---|
| committer | samot <thomasalwyndavis@gmail.com> | 2011-04-03 19:58:38 +1000 |
| commit | 464b6df44fbc7211f7976b4c10db78472dd4d1c2 (patch) | |
| tree | e024bdcaa1bb3ccec7859e57d337b0b28369f32b | |
| parent | 6bb7901a0de5777de8382cf065ed089dc7945ab3 (diff) | |
| download | backbonetutorials-464b6df44fbc7211f7976b4c10db78472dd4d1c2.zip backbonetutorials-464b6df44fbc7211f7976b4c10db78472dd4d1c2.tar.gz backbonetutorials-464b6df44fbc7211f7976b4c10db78472dd4d1c2.tar.bz2 | |
Getting there
| -rw-r--r-- | _config.yml | 1 | ||||
| -rw-r--r-- | _layouts/default.html | 66 | ||||
| -rw-r--r-- | _posts/2011-02-01-backbone-introduction.textile | 61 | ||||
| -rw-r--r-- | _site/CNAME | 1 | ||||
| -rw-r--r-- | _site/anonymous-functions/index.html | 175 | ||||
| -rw-r--r-- | _site/backbone-introduction/index.html | 253 | ||||
| -rw-r--r-- | _site/backbone-views-and-templates/index.html | 97 | ||||
| -rw-r--r-- | _site/css/reset.css | 260 | ||||
| -rw-r--r-- | _site/css/ribbon.css | 115 | ||||
| -rw-r--r-- | _site/css/stacklayout.css | 96 | ||||
| -rw-r--r-- | _site/css/style.css | 77 | ||||
| -rw-r--r-- | _site/css/syntax.css | 60 | ||||
| -rw-r--r-- | _site/index.html | 99 | ||||
| -rw-r--r-- | _site/jquery-create-your-own-deferred/index.html | 107 | ||||
| -rw-r--r-- | _site/making-a-restful-ajax-app/index.html | 192 | ||||
| -rw-r--r-- | css/reset.css | 260 | ||||
| -rw-r--r-- | css/ribbon.css | 115 | ||||
| -rw-r--r-- | css/stacklayout.css | 96 | ||||
| -rw-r--r-- | css/style.css | 77 | ||||
| -rw-r--r-- | css/syntax.css | 60 | ||||
| -rw-r--r-- | index.html | 21 |
21 files changed, 2267 insertions, 22 deletions
diff --git a/_config.yml b/_config.yml index 6d67c09..021f688 100644 --- a/_config.yml +++ b/_config.yml @@ -1,2 +1,3 @@ markdown: rdiscount pygments: true +permalink: /:title diff --git a/_layouts/default.html b/_layouts/default.html index d9853ce..f2cd3a5 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,28 +6,72 @@ <meta name="author" content="Backbone Tutorials" /> <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> <!-- Homepage CSS --> - <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" /> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> <!-- Typekit --> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + </style> </head> <body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork me on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/">about</a> + <a href="/">contribute</a> + <a href="/">contact</a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> + <hr> + {{ content }} + -<div class="site"> - <div class="title"> - <a href="/">Thomas Davis</a> - <a class="extra" href="/">home</a> - </div> - - {{ content }} - - -</div> + </div> + + </div> +</div> </body> </html> diff --git a/_posts/2011-02-01-backbone-introduction.textile b/_posts/2011-02-01-backbone-introduction.textile index 4479d74..7c6b9fa 100644 --- a/_posts/2011-02-01-backbone-introduction.textile +++ b/_posts/2011-02-01-backbone-introduction.textile @@ -1,10 +1,65 @@ --- layout: post -title: Backbone.js Tutorial - by noob for noobs +title: Why would you use backbone.js? +type: beginner --- -!/images/backbone.png! -h2. Backbone.js Tutorial - by noob for noobs +h2. Why would you use backbone.js? + +p. Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure. + +h3. So how does backbone.js help? + +p. Backbone.js was written by a beautiful man called Jash Kenas. Backbone.js supplies structure to heavy javascript applications. + +{% highlight html %} + +<!DOCTYPE html> +<html> +<head> + <title>I have a back bone</title> +</head> +<body> + <button id="add-friend">Add Friend</button> + <ul id="friends-list"> + </ul> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> + <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script> + <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> +</body> +</html> + +{% endhighlight %} + +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> p. The official "website":http://documentcloud.github.com/backbone/ describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives. diff --git a/_site/CNAME b/_site/CNAME new file mode 100644 index 0000000..0c9de91 --- /dev/null +++ b/_site/CNAME @@ -0,0 +1 @@ +backbonetutorials.com diff --git a/_site/anonymous-functions/index.html b/_site/anonymous-functions/index.html new file mode 100644 index 0000000..205bd91 --- /dev/null +++ b/_site/anonymous-functions/index.html @@ -0,0 +1,175 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>javascript - pass "this" to your anonymous functions</title> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork me on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/">about</a> + <a href="/">contribute</a> + <a href="/">contact</a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> + <hr> + <div id="post"> +<h2>javascript – pass “this” to your anonymous functions</h2> +<p>Update: The initial solution was wrong and I tricked my self into thinking it was working through something I was working on at the time. Sean and Joel have clarified in the comments<br /> +as to why it was wrong. I took down the hackernews post as it was getting far too much traffic for a wrong solution. Thanks guys!</p> +<p>There is now a working solution<br /> +(unchecked by a professional lol) and would undelete the hackernews post so others could see the useful comments but I am unable to.</p> +<p>Anonymous functions in javascript are extremely powerful and if you don’t understand them fully just yet I would highly recommend learning asap. A great guide can be found<br /> +<a href="http://helephant.com/2008/08/javascript-anonymous-functions/" target="_blank">here</a>. The problem with anonymous functions is that when declared the value of “this” changes<br /> +depending on the situation and generally points to the functions scope. <br /><br />This is generally not a desired effect and can cause people to use globals and other funky methods of accessing<br /> +parent objects in anonymous functions. Below I will show you a simple way to access the parent object. Always remember objects in Javascript are passed by reference!</p> +<h3>Passing “this” to the anonymous function</h3> +<p>This step is quite easy and I have used a famous alien robot for the example. The robot wants to access his main weapon system from one of methods. So the expected<br /> +output is for the robot to fire “this.weapon” but as you see in the first example he cannot access his properties which are returned as “undefined”.</p> +<h2><a href="http://thomasdavis.github.com/examples/anonymous-functions/">Demo</a><br /> + <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/anonymous-functions">Source</a></h2> +<div class="highlight"><pre><code class="javascript"><span class="c1">// Below is a simple function to find our autobots, </span> +<span class="c1">// just used for testing purposes</span> +<span class="kd">function</span> <span class="nx">findAutobot</span><span class="p">(){</span> + <span class="c1">// Locate the autobots!</span> + <span class="k">return</span> <span class="kc">true</span><span class="p">;</span> +<span class="p">}</span> + +<span class="c1">// noob_bot is an example of what happens when you </span> +<span class="c1">// don't pass this to your anonymous functions</span> +<span class="nx">noob_bot</span> <span class="o">=</span> <span class="p">{</span> + <span class="nx">weapon</span><span class="o">:</span> <span class="s2">"laser"</span><span class="p">,</span> + <span class="nx">kill</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// In the then statement we have declared an </span> + <span class="c1">// anonymous function and we want to access noob_bots properties</span> + <span class="nx">$</span><span class="p">.</span><span class="nx">when</span><span class="p">(</span> <span class="nx">findAutobot</span> <span class="p">)</span> + <span class="p">.</span><span class="nx">then</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">"Noob_bot: Fire the "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weapon</span> <span class="o">+</span> <span class="s2">"!!!#!"</span><span class="p">);</span> + <span class="p">});</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="c1">// Noob_bots weapon would have failed(undefined) because when</span> +<span class="c1">// you create anonymous functions the scope of "this"</span> +<span class="c1">// changes to the function. So we use $.proxy(function, this) </span> +<span class="nx">megatron</span> <span class="o">=</span> <span class="p">{</span> + <span class="nx">weapon</span><span class="o">:</span> <span class="s2">"laser"</span><span class="p">,</span> + <span class="nx">kill</span><span class="o">:</span> <span class="kd">function</span><span class="p">(){</span> + <span class="c1">// Megatron has direct access to his weapon systems</span> + <span class="c1">// because we have called .bind(this)</span> + <span class="nx">$</span><span class="p">.</span><span class="nx">when</span><span class="p">(</span> <span class="nx">findAutobot</span> <span class="p">)</span> + <span class="p">.</span><span class="nx">then</span><span class="p">(</span> <span class="nx">$</span><span class="p">.</span><span class="nx">proxy</span><span class="p">(</span> <span class="kd">function</span><span class="p">(){</span> + <span class="nx">alert</span><span class="p">(</span><span class="s2">"Megatron: Fire the "</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">weapon</span> <span class="o">+</span> <span class="s2">"!!!#!"</span><span class="p">);</span> + <span class="p">},</span> <span class="k">this</span><span class="p">);</span> + <span class="p">})</span> + <span class="p">}</span> +<span class="p">}</span> + +<span class="nx">noob_bot</span><span class="p">.</span><span class="nx">kill</span><span class="p">();</span> +<span class="nx">megatron</span><span class="p">.</span><span class="nx">kill</span><span class="p">();</span> +</code></pre> +</div><h2><a href="http://thomasdavis.github.com/examples/anonymous-functions/">Demo</a><br /> + <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/anonymous-functions">Source</a></h2> +<h3>Conclusion</h3> +<p>There are many other ways of passing “this” to an anonymous function and if you have any better suggestions I welcome you to post them. Hopefully this tutorial has been helpful to you! <br /> +Fork me on github, using the link in the top left.</p> +<h3>Other implementations</h3> +<p>Just posting a few solutions posted by others below.</p> +<p>From sisk on hackernews<br /> +<a href="http://news.ycombinator.com/item?id=2296064">http://news.ycombinator.com/item?id=2296064</a></p> +<div class="highlight"><pre><code class="javascript"><span class="nx">setTimeout</span><span class="p">(</span> +<span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">scope</span><span class="p">){</span> + <span class="k">return</span> <span class="kd">function</span><span class="p">(){</span><span class="nx">scope</span><span class="p">.</span><span class="nx">fire</span><span class="p">();};</span> +<span class="p">})(</span><span class="k">this</span><span class="p">),</span> <span class="mi">500</span> +<span class="p">);</span> +</code></pre> +</div><p>sisk : The short explanation is you return a function from an immediately-<br /> +executing anonymous function that takes the current scope as a parameter.</p> +<p><span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><br /> +<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article><br /> +<script type="text/javascript"> +SyntaxHighlighter.all() +</script> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id = "lasergun"; +var idcomments_post_url; +</script> +<span id="IDCommentsPostTitle" style="display:none"></span><br /> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> +</div> +</div> + +<div id="related"> + <h2>Related Posts</h2> + <ul class="posts"> + + <li><span>04 Mar 2011</span> » <a href="/jquery-create-your-own-deferred">Jquery Create Your Own Deferred</a></li> + + <li><span>07 Feb 2011</span> » <a href="/making-a-restful-ajax-app">Making A Restful Ajax App</a></li> + + <li><span>05 Feb 2011</span> » <a href="/backbone-views-and-templates">Backbone Views And Templates</a></li> + + </ul> +</div> + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/backbone-introduction/index.html b/_site/backbone-introduction/index.html new file mode 100644 index 0000000..d22d44d --- /dev/null +++ b/_site/backbone-introduction/index.html @@ -0,0 +1,253 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Why would you use backbone.js?</title> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork me on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/">about</a> + <a href="/">contribute</a> + <a href="/">contact</a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> + <hr> + <div id="post"> +<h2>Why would you use backbone.js?</h2> +<p>Building single page web apps or complicated user interfaces will get extremely difficult by simpling using jQuery or mooTools. The problem is standard javascript libraries are great at what they do and without realizing it you can build an entire application without any formal structure.</p> +<h3>So how does backbone.js help?</h3> +<p>Backbone.js was written by a beautiful man called Jash Kenas. Backbone.js supplies structure to heavy javascript applications.</p> +<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> +<span class="nt"><html></span> +<span class="nt"><head></span> + <span class="nt"><title></span>I have a back bone<span class="nt"></title></span> +<span class="nt"></head></span> +<span class="nt"><body></span> + <span class="nt"><button</span> <span class="na">id=</span><span class="s">"add-friend"</span><span class="nt">></span>Add Friend<span class="nt"></button></span> + <span class="nt"><ul</span> <span class="na">id=</span><span class="s">"friends-list"</span><span class="nt">></span> + <span class="nt"></ul></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"</span><span class="nt">></script></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"</span><span class="nt">></script></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"</span><span class="nt">></script></span> +<span class="nt"></body></span> +<span class="nt"></html></span> +</code></pre> +</div><p><br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /> +<br /></p> +<p>The official <a href="http://documentcloud.github.com/backbone/">website</a> describes Backbone.js as a library to supply structure to Javascript heavy web applications. After using Backbone.js for a week I could never see myself building any sort of Javascript functionality regardless of size without using Backbone.js or alternatives.</p> +<p>I have decided to write a quick introduction for those trying to grasp the mechanics behind it. I am only a beginner also and would love suggestions and tips to improve my code.</p> +<p>I am also very curious to hear what you think about how <span class="caps">MVC</span> ties into Javascript development and the most effective library you have used for logically organizing your Javascript.</p> +<p>Would be great to get a discussion on <span class="caps">MVC</span> vs <span class="caps">MVVM</span> vs others etc leave comments at the bottom!</p> +<p>Also could you implement this example better in another framework?</p> +<h3>Understanding the Model View Controller Paradigm</h3> +<p>I have used many frameworks which promote that they use <span class="caps">MVC</span>. I don’t think I have ever seen the same fundamental principals implemented the same way.</p> +<p>Backbone.js has 4 classes: Models, Views, Controllers and Collections. The Models and Collections class work hand in hand and when combined essentially make up the M(model) of <span class="caps">MVC</span>.</p> +<p>The main concept I follow when using Backbone.js is to make Views listen for changes in the Model and react accordingly. I would recommend bookmarking the homepage <a href="http://documentcloud.github.com/backbone/">documentation</a> and I perusing the annotated <a href="http://documentcloud.github.com/backbone/docs/backbone.html">source</a> code.</p> +<h3>Getting started</h3> +<p>I am going to run you through a basic tutorial that should get you on the right path if you are a bit lost like I was when I started.</p> +<p>First of all we are going to just setup a basic page and include Backbone.js and Underscore.js(a dependency of Backbone.js)</p> +<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span> +<span class="nt"><html></span> +<span class="nt"><head></span> + <span class="nt"><title></span>I have a back bone<span class="nt"></title></span> +<span class="nt"></head></span> +<span class="nt"><body></span> + <span class="nt"><button</span> <span class="na">id=</span><span class="s">"add-friend"</span><span class="nt">></span>Add Friend<span class="nt"></button></span> + <span class="nt"><ul</span> <span class="na">id=</span><span class="s">"friends-list"</span><span class="nt">></span> + <span class="nt"></ul></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"</span><span class="nt">></script></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"</span><span class="nt">></script></span> + <span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"</span><span class="nt">></script></span> +<span class="nt"></body></span> +<span class="nt"></html></span> +</code></pre> +</div><p>For those of you who are lazy the full example can be viewed <a href="http://thomasdavis.github.com/examples/backbone-101/">here</a> and downloaded <br /> +<a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">here</a></p> +<h3>Setting up the main view</h3> +<p>Each view has a <span class="caps">HTML</span> <span class="caps">DOM</span> element associated with it. You can read more about why <a href="http://documentcloud.github.com/backbone/#View-el">here</a> .<br /> +Because this is our master view we are just going to associate the view with our page body in this example.</p> +<p>If the el(element) specified does not exist, Backbone.js will attempt to create it.</p> +<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span> +<span class="nb">window</span><span class="p">.</span><span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> + <span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"body"</span><span class="p">),</span> + <span class="nx">events</span><span class="o">:</span> <span class="p">{</span> + <span class="s2">"click #add-friend"</span><span class="o">:</span> <span class="s2">"showPrompt"</span><span class="p">,</span> + <span class="p">},</span> + <span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> + <span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">"Who is your friend?"</span><span class="p">);</span> + <span class="p">}</span> +<span class="p">});</span> +<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span> +<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span> +</code></pre> +</div><p>So we just wrapped our Backbone code with jQuery to make sure the page has loaded correctly. Then we create our main application view by extending Backbone and passing a <span class="caps">JSON</span> object with our options. We specified “body” to be the associated element for this view.</p> +<p>The events property is very powerful and lets us attach listeners to our views. In the example above we have attached a click listener to our button with id “add-friend”. Read more about events <a href="http://documentcloud.github.com/backbone/#View-delegateEvents">here</a></p> +<p>After we have setup our AppView, we can just call to initiate it at anytime.</p> +<h3>Collecting the Models</h3> +<p>A Model in Backbone.js can represent any entity you like and in this case we want it to represent a friend. We can easily create friend Models but without any structure they become fairly useless to us because we can’t iterate through them unless they are grouped together. So Backbone.js implements the Collection class which allows us to order our models. Read more <a href="http://documentcloud.github.com/backbone/#Collection">here</a> .</p> +<p>Now we get to the fun part. You can bind listeners/events to Models and Collections. So whenever there are changes to the data we can call events to react accordingly.</p> +<p>We are going to add this code to our example which lets us add a friend Model to our friend Collection. We will then bind a listener to create a new list element when the data has changed.</p> +<div class="highlight"><pre><code class="javascript"><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">$</span><span class="p">)</span> <span class="p">{</span> + +<span class="nx">Friend</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Model</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> +<span class="c1">//Create a model to hold friend atribute</span> +<span class="nx">name</span><span class="o">:</span> <span class="kc">null</span> +<span class="p">});</span> + +<span class="nx">Friends</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Collection</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> +<span class="c1">//This is our Friends collection and holds our Friend models</span> +<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">models</span><span class="p">,</span> <span class="nx">options</span><span class="p">)</span> <span class="p">{</span> +<span class="k">this</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"add"</span><span class="p">,</span> <span class="nx">options</span><span class="p">.</span><span class="nx">view</span><span class="p">.</span><span class="nx">addFriendLi</span><span class="p">);</span> +<span class="c1">//Listen for new additions to the collection and call a view function if so</span> +<span class="p">}</span> +<span class="p">});</span> + +<span class="nx">AppView</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">View</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span> +<span class="nx">el</span><span class="o">:</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"body"</span><span class="p">),</span> +<span class="nx">initialize</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +<span class="k">this</span><span class="p">.</span><span class="nx">friends</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friends</span><span class="p">(</span> <span class="kc">null</span><span class="p">,</span> <span class="p">{</span> <span class="nx">view</span><span class="o">:</span> <span class="k">this</span> <span class="p">});</span> +<span class="c1">//Create a friends collection when the view is initialized.</span> +<span class="c1">//Pass it a reference to this view to create a connection between the two</span> +<span class="p">},</span> +<span class="nx">events</span><span class="o">:</span> <span class="p">{</span> +<span class="s2">"click #add-friend"</span><span class="o">:</span> <span class="s2">"showPrompt"</span><span class="p">,</span> +<span class="p">},</span> +<span class="nx">showPrompt</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> +<span class="kd">var</span> <span class="nx">friend_name</span> <span class="o">=</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">"Who is your friend?"</span><span class="p">);</span> +<span class="kd">var</span> <span class="nx">friend_model</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Friend</span><span class="p">({</span> <span class="nx">name</span><span class="o">:</span> <span class="nx">friend_name</span> <span class="p">});</span> +<span class="c1">//Add a new friend model to our friend collection</span> +<span class="k">this</span><span class="p">.</span><span class="nx">friends</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span> <span class="nx">friend_model</span> <span class="p">);</span> +<span class="p">},</span> +<span class="nx">addFriendLi</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">model</span><span class="p">)</span> <span class="p">{</span> +<span class="c1">//The parameter passed is a reference to the model that was added</span> +<span class="nx">$</span><span class="p">(</span><span class="s2">"#friends-list"</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">"<li>"</span> <span class="o">+</span> <span class="nx">model</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'name'</span><span class="p">)</span> <span class="o">+</span> <span class="s2">"</li>"</span><span class="p">);</span> +<span class="c1">//Use .get to receive attributes of the model</span> +<span class="p">}</span> +<span class="p">});</span> + +<span class="kd">var</span> <span class="nx">appview</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">AppView</span><span class="p">;</span> + +<span class="p">})(</span><span class="nx">jQuery</span><span class="p">);</span> +</code></pre> +</div><h2><a href="http://thomasdavis.github.com/examples/backbone-101">Demo</a><br /> + <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">Source</a></h2> +<h3>Conclusion</h3> +<p>I hope this helps anyone trying to pick it up. I don’t mind answering any questions that I have the ability to answer.</p> +<p>Would also love to hear to some optimization tips! <br /> + p.s. Would love some insight into <span class="caps">MVVM</span>, <span class="caps">MVC</span> etc</p> +<p>Update: Changed the code to append the elements from the view and not the Model/Collection. The <a href="http://news.ycombinator.com/item?id=2158011">problem</a> was described on ycombinator by emehrkay</p> +Update 2: A user called <a href="http://twitter.com/svenlito" target="_blank">svnlto</a> had a pull request to fix up the example code to implement better coding practises, he was spot on so I merged his request into the master branch. You can view the pull request <a href="https://github.com/thomasdavis/thomasdavis.github.com/pull/1" target="_blank">here</a>. +<p><span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><br /> +<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article></p> +<script type="text/javascript"> +SyntaxHighlighter.all() +</script><script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id = "backbone"; +var idcomments_post_url; +</script><p><span id="IDCommentsPostTitle" style="display:none"></span><br /> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> +</div> +</div> + +<div id="related"> + <h2>Related Posts</h2> + <ul class="posts"> + + <li><span>07 Mar 2011</span> » <a href="/anonymous-functions">javascript - pass "this" to your anonymous functions</a></li> + + <li><span>04 Mar 2011</span> » <a href="/jquery-create-your-own-deferred">Jquery Create Your Own Deferred</a></li> + + <li><span>07 Feb 2011</span> » <a href="/making-a-restful-ajax-app">Making A Restful Ajax App</a></li> + + </ul> +</div> + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/backbone-views-and-templates/index.html b/_site/backbone-views-and-templates/index.html new file mode 100644 index 0000000..a0b67e3 --- /dev/null +++ b/_site/backbone-views-and-templates/index.html @@ -0,0 +1,97 @@ +<p><!<span class="caps">DOCTYPE</span> html><br /> +<html><br /> +<head><br /> + <title>backbone.js beginners and underscore.js micro templating, thanks @neutralthoughts</title><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushJScript.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushXml.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script><br /> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><br /> + <style type="text/css"><br /> + body, ul { padding: 0; margin: 0; }<br /> + body { font-family: ‘Arial’; }<br /> + #container { width: 760px; margin: auto; }<br /> + h1 { font-size: 3em; }<br /> + h3 { color: #444; }<br /> + #topmenu { height: 15px; border-bottom: 1px solid #996699; padding: 5px; }<br /> + #topmenu ul { list-style: none; }<br /> + #topmenu li { float: left; margin-left: 15px; font-size: 13px;}</p> +</style> +</head> +<body> +<p><!--Survey code for sadsa--><br /> +<link rel="stylesheet" type="text/css" href="http://serve.poplytics.com/shadowbox.css"><br /> +<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script><br /> +<script type="text/javascript" src="http://serve.poplytics.com/shadowbox.js"></script><br /> +<script language="javascript" type="text/javascript" src="http://serve.poplytics.com/js/jquery.xdomainajax.js"></script><br /> +<script language="javascript" type="text/javascript"> +Shadowbox.init(); +$(document).ready(function() +{ +$.ajax({ +url: 'http://serve.poplytics.com/ads.php?uniq=148408611', +type: 'GET', +success: function(res) { +$('#poplytics').html(res.responseText); +} +}); +}) +</script> +<div id="poplytics"></div><br /> +<!-- End Survey code for sadsa--></p> +<div id="topmenu"> +<ul> + <li><a href="../index.html">home</a></li> + <li><a href="https://github.com/thomasdavis">my repos</a></li> + <li><a href="/about.html">about me</a></li> + <li><a href="http://twitter.com/?status=@iamjessicagomes,%20@neutralthoughts%20is%20a%20great%20guy,%20you%20should%20marry%20him" target="_blank" alt="will load in new window, please marry me">hot woman (<span class="caps">SFW</span>)</a></li> + <li><a href="http://protosal.com" target="_blank">my boot-strapped startup</a></li> +</ul> +<ul style="float: right; margin-right: 15px;"> +<p><li>thomas davis – <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don’t</li></p> +</ul> +</div> +<div id="container"> +<article class="blog"> + <div style="width: 385px; margin: auto; margin-top: 50px; "><img style="width: 150px;" src="images/templating.jpg" /></div> + <h2>backbone.js beginners and underscore.js micro templating</h2> + <p>Surprisingly I have received many request via the <a href="http://poplytics.com" target="_blank">poplytics.com</a> popup at the bottom of the window. A lot of the request have asked for more backbone tutorials. So I decided to share more of what I have learnt so far. </p> + <p>I decided to comment the code this time instead of a normal tutorial layout and hopefully my comments will be sufficient to help you.</p> + <h2><a href="http://thomasdavis.github.com/examples/backbone-underscore/" target="_blank">Demo</a></h2> + <h2><a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-underscore" target="_blank">Source</a></h2> + <p>Please leave comments for anything I am doing wrong =D</p> + <h3>underscore micro templating</h3> + <p>In the latest startup I have been working on, we decided to just use underscore.js templating as we reviewed <a href="http://www.viget.com/extend/benchmarking-javascript-templating-libraries/" target="_blank">benchmarks</a> of the different templating engines and none of them could really <br /> + be crowned king. Since then I have just learnt to use underscore.js micro templating engine as it works fine for us. </p> +<p> +<p>We place all our javascript templates which is basically 99% of our web app into an external file and host it on Amazon <span class="caps">CDN</span>. So our entire<br /> + app is cached and distrubuted through <a href="http://en.wikipedia.org/wiki/Content_delivery_network" target="_blank">edge locations</a><br /> + which increases the speed the site is served and also saves us money on bandwidth.</p> +</p> + <h3>passing parent objects to deferred objects</h3> + <p>in the example I needed to access the parent object which contains a $.then and $.when. To get the parent object (this) into<br /> + the anonymous $.when function I simply used jQuery.proxy(func, this). Has anyone else been experimenting with this and is there<br /> + an easier way to do it?</p> + <p>p.s. the picture is from search for backbone in google images, was too funky to not share =)</p> + <p>p.s.s everytime you tweet a kitten dies</p> +<span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span> +<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script></article> +<p></p> +<p><script type="text/javascript"> + SyntaxHighlighter.all() + </script> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id = "sexylady"; +var idcomments_post_url; +</script> +<span id="IDCommentsPostTitle" style="display:none"></span><br /> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> +</div> +<script src="http://static.getclicky.com/js" type="text/javascript"></script><script type="text/javascript">try{ clicky.init(66379121); }catch(err){}</script><noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66379121ns.gif" /></p></noscript> +</body> +</html>
\ No newline at end of file diff --git a/_site/css/reset.css b/_site/css/reset.css new file mode 100644 index 0000000..5b41bb7 --- /dev/null +++ b/_site/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/_site/css/ribbon.css b/_site/css/ribbon.css new file mode 100644 index 0000000..580b9d3 --- /dev/null +++ b/_site/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/_site/css/stacklayout.css b/_site/css/stacklayout.css new file mode 100644 index 0000000..149a432 --- /dev/null +++ b/_site/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/_site/css/style.css b/_site/css/style.css new file mode 100644 index 0000000..a73a2ea --- /dev/null +++ b/_site/css/style.css @@ -0,0 +1,77 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; } +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} diff --git a/_site/css/syntax.css b/_site/css/syntax.css new file mode 100644 index 0000000..2774b76 --- /dev/null +++ b/_site/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/_site/index.html b/_site/index.html new file mode 100644 index 0000000..eba624e --- /dev/null +++ b/_site/index.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8" /> + <title>Backbone Tutorials</title> + <meta name="author" content="Backbone Tutorials" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/reset.css" type="text/css" /> + + <!-- syntax highlighting CSS --> + <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> + + <!-- github ribbon CSS --> + <link rel="stylesheet" href="/css/ribbon.css" type="text/css" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" /> + + <!-- Homepage CSS --> + <link rel="stylesheet" href="/css/stacklayout.css" type="text/css" media="screen, projection" /> + + <!-- Typekit --> + <script type="text/javascript">try{Typekit.load();}catch(e){}</script> + + <style> + .container { + width: 760px; + margin: auto; + } + .menu { + margin-left: 40px; + padding-top: 10px; + padding-bottom: 10px; + } + .menu a { + margin-right: 10px; + } + p { + width: 720px; + margin: auto; + } + </style> +</head> +<body> + <div class="left ribbon-holder"> + <a href="#" class="red ribbon"> + <span class="text">Fork me on GitHub</span> + </a> + </div> +<div class="container"> + <div class="menu"> + <a href="/">home</a> + <a href="/">about</a> + <a href="/">contribute</a> + <a href="/">contact</a> + </div> + + + + + <div class="stack"> + <div class="stackContent"> + <h1>Backbone Tutorials</h1> + <p class="homepagedescription">This site is by no means the definite guide to backbone.js and all corrections and contributions are welcome.</p> + <hr> + <h2>Beginner</h2> +<ul class="tutorials"> + + + + + + + + + + + <li><a href="/backbone-introduction">Why would you use backbone.js?</a> » Thomas Davis</li> + + +</ul> + +<h2>Intermediate</h2> +<ul class="tutorials"> + <li>Tutorial 1</li> + <li>Tutorial 2</li> +</ul> + + + + + </div> + + </div> +</div> + +</body> +</html> diff --git a/_site/jquery-create-your-own-deferred/index.html b/_site/jquery-create-your-own-deferred/index.html new file mode 100644 index 0000000..1159a5d --- /dev/null +++ b/_site/jquery-create-your-own-deferred/index.html @@ -0,0 +1,107 @@ +<p><!<span class="caps">DOCTYPE</span> html><br /> +<html><br /> +<head><br /> + <title>jQuery 1.5 – create deferred object with callback parameters – thanks @neutralthoughts</title><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushJScript.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushXml.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script><br /> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><br /> + <style type="text/css"><br /> + body, ul { padding: 0; margin: 0; }<br /> + body { font-family: ‘Arial’; }<br /> + #container { width: 760px; margin: auto; }<br /> + h1 { font-size: 3em; }<br /> + h3 { color: #444; }<br /> + #topmenu { height: 15px; border-bottom: 1px solid #996699; padding: 5px; }<br /> + #topmenu ul { list-style: none; }<br /> + #topmenu li { float: left; margin-left: 15px; font-size: 13px;}</p> +</style> +</head> +<body> +<p><!--Survey code for sadsa--><br /> +<link rel="stylesheet" type="text/css" href="http://serve.poplytics.com/shadowbox.css"><br /> +<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script><br /> +<script type="text/javascript" src="http://serve.poplytics.com/shadowbox.js"></script><br /> +<script language="javascript" type="text/javascript" src="http://serve.poplytics.com/js/jquery.xdomainajax.js"></script><br /> +<script language="javascript" type="text/javascript"> +Shadowbox.init(); +$(document).ready(function() +{ +$.ajax({ +url: 'http://serve.poplytics.com/ads.php?uniq=148408611', +type: 'GET', +success: function(res) { +$('#poplytics').html(res.responseText); +} +}); +}) +</script> +<div id="poplytics"></div><br /> +<!-- End Survey code for sadsa--></p> +<div id="topmenu"> +<ul> + <li><a href="../index.html">home</a></li> + <li><a href="https://github.com/thomasdavis">my repos</a></li> + <li><a href="/about.html">about me</a></li> + <li><a href="http://twitter.com/?status=@iamjessicagomes,%20@neutralthoughts%20is%20a%20great%20guy,%20you%20should%20marry%20him" target="_blank" alt="will load in new window, please marry me">hot woman (<span class="caps">SFW</span>)</a></li> + <li><a href="http://protosal.com" target="_blank">my boot-strapped startup</a></li> +</ul> +<ul style="float: right; margin-right: 15px;"> +<p><li>thomas davis – <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don’t</li></p> +</ul> +</div> +<div id="container"> +<article class="blog"> + <h2>jQuery 1.5 – create your own deferred object with parameters</h2> + <p>jQuery has just recently released version 1.5 which now contains $.when and $.then, yay! There are many tutorials already<br /> + on how to use these new functions. All the examples used $.ajax calls which are setup by jQuery to be used as <br /> + deferred objects so I found it difficult to implement my own deferred objects. I found this <a href="http://www.erichynds.com/jquery/using-deferreds-in-jquery/" target="_blank">guide</a> which is great<br /> + and covers most of what you need to know.</p> + <p>The tutorial covers how to create your own deferred objects but doesn’t include passing parameters to $.then call backs.<br /> + So after playing around a little bit and reading the jQuery source I figured it out and have included it below.</p> + <p>I have seen some people asking on how to do this so hopefully it helps! As usual post any mistakes I made =D</p> + +<br /> +<pre class='brush: js'> +function myFunc(){ +return $.Deferred(function( deferred_obj ){ +$(“body”).css(“background”, “#ff0000”); // Example +deferred_obj.resolve( “these”, “are”, “my”, “parameters” ); +// Call resolve when you are ready to continue, in animation callbacks etc +}).promise(); +} + +$.when( myFunc() ) +.then(function(p1, p2, p3, p4){ +console.log( p1 + p2 + p3 + p4); +}); +</pre> + <p>So it’s pretty easy and you should start using them immediatly!</p> + <h2 style="margin-left: 15px;"><a href="http://thomasdavis.github.com/examples/jquery-deferred/" target="_blank">Demo</a></h2> + <h2 style="margin-left: 15px;"><a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/jquery-deferred" target="_blank">Source</a></h2> + + +<p><span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><br /> +<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article></p> +<p><script type="text/javascript"> + SyntaxHighlighter.all() + </script> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id = "jquerydeferred"; +var idcomments_post_url; +</script> +<span id="IDCommentsPostTitle" style="display:none"></span><br /> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> +</div> +<script src="http://static.getclicky.com/js" type="text/javascript"></script><script type="text/javascript">try{ clicky.init(66379121); }catch(err){}</script><noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66379121ns.gif" /></p></noscript> +<script type="text/javascript"> +document.write(unescape("%3Cscript src='" + ((document.location.protocol=="https:")?"https:":"http:") + "//snapabug.appspot.com/snapabug.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript"> +SnapABug.addButton('d2559443-bb0f-4ab8-80cc-3ebc411945e6',"0","55%"); +</script></body> +</html>
\ No newline at end of file diff --git a/_site/making-a-restful-ajax-app/index.html b/_site/making-a-restful-ajax-app/index.html new file mode 100644 index 0000000..b1ec003 --- /dev/null +++ b/_site/making-a-restful-ajax-app/index.html @@ -0,0 +1,192 @@ +<p><!<span class="caps">DOCTYPE</span> html><br /> +<html><br /> +<head><br /> + <title>restful ajax web app basics ( mimic gmail with backbone.js, <span class="caps">SOA</span>, <span class="caps">TSA</span> )</title><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushJScript.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shBrushXml.css" rel="stylesheet" type="text/css" /><br /> + <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script><br /> + <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script><br /> + <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><br /> + <style type="text/css"><br /> + body, ul { padding: 0; margin: 0; }<br /> + body { font-family: ‘Arial’; }<br /> + #container { width: 760px; margin: auto; }<br /> + h1 { font-size: 3em; }<br /> + h3 { color: #444; }<br /> + #topmenu { height: 15px; border-bottom: 1px solid #996699; padding: 5px; }<br /> + #topmenu ul { list-style: none; }<br /> + #topmenu li { float: left; margin-left: 15px; font-size: 13px;}</p> +</style> +</head> +<body> +<p><!--Survey code for sadsa--><br /> +<link rel="stylesheet" type="text/css" href="http://serve.poplytics.com/shadowbox.css"><br /> +<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script><br /> +<script type="text/javascript" src="http://serve.poplytics.com/shadowbox.js"></script><br /> +<script language="javascript" type="text/javascript" src="http://serve.poplytics.com/js/jquery.xdomainajax.js"></script><br /> +<script language="javascript" type="text/javascript"> +Shadowbox.init(); +$(document).ready(function() +{ +$.ajax({ +url: 'http://serve.poplytics.com/ads.php?uniq=148408611', +type: 'GET', +success: function(res) { +$('#poplytics').html(res.responseText); +} +}); +}) +</script> +<div id="poplytics"></div><br /> +<!-- End Survey code for sadsa--></p> +<div id="topmenu"> +<ul> + <li><a href="../index.html">home</a></li> + <li><a href="https://github.com/thomasdavis">my repos</a></li> + <li><a href="/about.html">about me</a></li> + <li><a href="http://twitter.com/?status=@iamjessicagomes,%20@neutralthoughts%20is%20a%20great%20guy,%20you%20should%20marry%20him" target="_blank" alt="will load in new window, please marry me">hot woman (<span class="caps">SFW</span>)</a></li> + <li><a href="http://protosal.com" target="_blank">my boot-strapped startup</a></li> +</ul> +<ul style="float: right; margin-right: 15px;"> +<p><li>thomas davis – <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don’t</li></p> +</ul> +</div> +<div id="container"> +<article class="blog"> + <div style="width: 450px; margin: auto; margin-top: 50px; "><img style="width: 450px;" src="images/js.jpg" /></div> + <h2>restful ajax web app basics ( mimic gmail with backbone.js, <span class="caps">SOA</span>, <span class="caps">TSA</span> )</h2> + <p>The goal is to build a small example of Service Oriented Architecture (<span class="caps">SOA</span>) and Thin Servier Architecture (<span class="caps">TSA</span>). We want our server to only produce raw data and never send <span class="caps">HTML</span>! ( We’re using <span class="caps">REST</span> not <span class="caps">SOAP</span>, no fighting).</p> + <p>This is a quick guide to get you started on building a one page web app that uses hashtag events and history to allow users to navigate your site without reloading the page ever. Don’t want to be <strong>circle</strong> jerking too hard but todays tutorial will be using Backbone.js again. </p> + +<br /> +<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script> + <h2 style="margin-left: 15px;"><a href="http://thomasdavis.github.com/examples/restful-app/" target="_blank">Demo</a></h2> + <h2 style="margin-left: 15px;"><a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app" target="_blank">Source</a></h2> + <h3>Benefits of <span class="caps">TSA</span></h3> + <p>Before I continue with the tutorial here are just a few pros I can think of for using a fully ajax app with a restful interface.<br /> + <ul style="margin-left: 40px;"><br /> + <li>Less <span class="caps">HTTP</span> request</li> + <li>Minimize the size of requested pages by always requesting <span class="caps">JSON</span></li> + <li>Lets you build ajax interfaces which are fast and responsive</li> + <li>Request are already <span class="caps">JSON</span> so if you ever need to build an <span class="caps">API</span>, it’s straight forward</li> + <li>Google invented #! aka the hashbang for <span class="caps">SEO</span></li> + <li>!flash</li> +<p></ul></p><br /> + <p>I was excited the first time I wrote a fully ajax app and I hope that some of you can feel the orgasmic feeling of dynamically loaded content. With the advent of the google <a href="http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content" target="_blank">hashbang</a>, you should be able to also build your websites/blogs with pure ajax calls now while still still reaping the benefits of google rankings. </p> <br /> + <p>Possibly one of the funnest parts is choosing an ajax loading graphic, I always use this <a href="http://ajaxload.info/" target="_blank">site</a>.</p><br /> + <h3>Understanding the hash tag</h3><br /> + <p>Backbone.js implements two classes called Controller and History. Using just these two classes we can construct<br /> + the entire backbone of our restful app.</p><br /> + <p>To make a fully ajax website we need to use the hashtag, which up until this point has been used predominatly for anchor tags.<br /> + Browsers don’t trigger any page refreshes with hashtags so using Javascript we can detect when the # location changes.<br /> + Instead of triggering the default behavior of finding an anchor, we instead load custom Javascript.</p><br /> + <p><br /> + Below is all the <span class="caps">HTML</span> we will be using today. Also note the inclusion of underscore.js, its a depdendecy of backbone.js and brings<br /> + alot of power to the table. I have simply set up four links that shall react accordingly and hopefully load data into our content pane div.</p><br /> + <pre class='brush: html js'><br /> + <!<span class="caps">DOCTYPE</span> html><br /> + <html><br /> + <head><br /> + <title>Hide your kids, hide your wife and hide your husbands</title><br /> + </head><br /> + <body></p> +<p><ul id="menu"><br /> + <li><a href=“#animals/dog”>Dogs</a></li><br /> + <li><a href=“#animals/cat”>cats</a></li><br /> + <li><a href=“#shop”>Shops</a></li><br /> + <li><a href=“#gangster”>Gangsters</a></li><br /> + </ul><br /> + <div id=“content-pane”>No content loaded</div></p> +<p><script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script><br /> + <script src=“http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js”></script><br /> + <script src=“http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js”></script><br /> + </body><br /> + </html></p> +</pre> + <p>For those of you who are lazy the full example can be viewed <a href="http://thomasdavis.github.com/examples/restful-app/" target="_blank">here</a> and downloaded <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app" target="_blank">here</a></p> + <h3>Controlling the Controller</h3> + <p>Below is the documented code that will run the restful ajax app. Note that I have included a service called <a href="http://openkeyval.org" target="_blank">openkeyval.org</a> which is simply<br /> + a free service for storing key pair values. It is a great example of <a href="http://www.slideshare.net/spacemonkeylabs/thin-server-architecture" target="_blank"><span class="caps">TSA</span></a> and saves me setting up a nginx/reddis server. </p><p>Hopefully the code below should be simply enough to understand. Most of you who have used a server side framework have probably experienced using Routes. Backbone.js implements <br /> + routes and you should quickly read the documentation <a href="http://documentcloud.github.com/backbone/#Controller-routes" target="_blank">here</a>. In the example I set up two types of routes<br /> + one to catch specific urls and a standard catch all urls route. Take note of the colon and asterisk, the appended string gets turned into a variable for convenient usage in your call back functions. </p> + <p>Using jQuery ajax call we specify the data type as “jsonp” to circumvent the foreign cross site policy.</p> +<pre class='brush: js'> +<p>(function ($) {</p> +var restfulApp = Backbone.Controller.extend({ +restfulUrl: “http://api.openkeyval.org/”, //This is a free service to store key pair values + +//Routes tell the app what to do +routes: { +“animals/:animal”: “animalAction”, //This matches app/animals/* and assigns * to a variable called “animal” +“*page”: “defaultAction”, //This simply matches any urls that weren’t caught above and assigns it to “page” +}, + +defaultAction: function( page ){ +if( page ) { +//Once the default action is called we want to construct a link to our restful service +var restfulPageUrl = this.restfulUrl + page + “page” //http://api.openkeyval.org/gangsterpage +//Now we have a url lets get the data +this.loadRestfulData( restfulPageUrl ); +} +}, +animalAction: function( animal ) { +//O +<br /> +<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>nce the default action is called we want to construct a link to our restful service +var restfulPageUrl = this.restfulUrl + animal + “page” //http://api.openkeyval.org/dogpage +//Now we have a url lets get the data +this.loadRestfulData( restfulPageUrl ); +}, +loadRestfulData: function( pageUrl ){ +//Set the content pane to a loading screen +$(“#content-pane”).text( “loading data…” ); +//Load the data in using jQuerys ajax call +$.ajax({ +url: pageUrl, +dataType: “jsonp”, +success: function(data){ +//Once we receive the data, set it to the content pane. +$(“#content-pane”).text( data ); +} +}); +} +<p>var app = new restfulApp;<br /> + //Initiate a new history and controller class<br /> + Backbone.emulateHTTP = true;<br /> + Backbone.emulateJSON = true <br /> + Backbone.history.start();</p> +})(jQuery); +</pre> +<br /> +<script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script> + <h2 style="margin-left: 15px;"><a href="http://thomasdavis.github.com/examples/restful-app/" target="_blank">Demo</a></h2> + <h2 style="margin-left: 15px;"><a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app" target="_blank">Source</a></h2> + <h3>Conclusion</h3> +<p> +Building fully ajax web apps/sites has never been easier. I cannot think of any reasons not to and I personally love the feel of a responsive non refreshing page. If you have built a hash tag web app or site before I’d love to see it so post it below. +</p> + <p>If you see any errors or bad practises please do a pull request or simply leave a comment.</p> + <p>For the last example tutorial I wrote many members of the community proposed solutions in other JS frameworks. I believe this is very important as the web starts releasing more and more Javascript frameworks.</p> +<p><span class="st_twitter_vcount" displayText="Tweet"></span><span class="st_facebook_vcount" displayText="Share"></span><span class="st_email_vcount" displayText="Email"></span><span class="st_sharethis_vcount" displayText="Share"></span><br /> +<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">stLight.options({publisher:'bdee6d8c-ed9a-4867-90f6-011704c29ee3'});</script> </article></p> +<p><script type="text/javascript"> + SyntaxHighlighter.all() + </script> +<script> +var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9'; +var idcomments_post_id = "restfulapp"; +var idcomments_post_url; +</script> +<span id="IDCommentsPostTitle" style="display:none"></span><br /> +<script type='text/javascript' src='http://www.intensedebate.com/js/genericCommentWrapperV2.js'></script></p> +</div> +<script src="http://static.getclicky.com/js" type="text/javascript"></script><script type="text/javascript">try{ clicky.init(66379121); }catch(err){}</script><noscript><p><img alt="Clicky" width="1" height="1" src="http://in.getclicky.com/66379121ns.gif" /></p></noscript> +<script type="text/javascript"> +document.write(unescape("%3Cscript src='" + ((document.location.protocol=="https:")?"https:":"http:") + "//snapabug.appspot.com/snapabug.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript"> +SnapABug.addButton('d2559443-bb0f-4ab8-80cc-3ebc411945e6',"0","55%"); +</script></body> +</html>
\ No newline at end of file diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..5b41bb7 --- /dev/null +++ b/css/reset.css @@ -0,0 +1,260 @@ +/** + * HTML5 ✰ Boilerplate + * + * style.css contains a reset, font normalization and some base styles. + * + * Credit is left where credit is due. + * Much inspiration was taken from these projects: + * - yui.yahooapis.com/2.8.1/build/base/base.css + * - camendesign.com/design/ + * - praegnanz.de/weblog/htmlcssjs-kickstart + */ + + +/** + * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) + * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark + * html5doctor.com/html-5-reset-stylesheet/ + */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +ins { background-color: #ff9; color: #000; text-decoration: none; } + +mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } + +input, select { vertical-align: middle; } + + +/** + * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/ + */ + +body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */ +select, input, textarea, button { font:99% sans-serif; } + +/* Normalize monospace sizing: + en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ +pre, code, kbd, samp { font-family: monospace, sans-serif; } + + +/** + * Minimal base styles. + */ + +/* Always force a scrollbar in non-IE */ +html { overflow-y: scroll; } + +/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ +a:hover, a:active { outline: none; } + +ul, ol { margin-left: 2em; } +ol { list-style-type: decimal; } + +/* Remove margins for navigation lists */ +nav ul, nav li { margin: 0; list-style:none; list-style-image: none; } + +small { font-size: 85%; } +strong, th { font-weight: bold; } + +td { vertical-align: top; } + +/* Set sub, sup without affecting line-height: gist.github.com/413930 */ +sub, sup { font-size: 75%; line-height: 0; position: relative; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + +pre { + /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; +} + +textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ + +.ie6 legend, .ie7 legend { margin-left: -7px; } + +/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ +input[type="radio"] { vertical-align: text-bottom; } +input[type="checkbox"] { vertical-align: bottom; } +.ie7 input[type="checkbox"] { vertical-align: baseline; } +.ie6 input { vertical-align: text-bottom; } + +/* Hand cursor on clickable input elements */ +label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + +/* Webkit browsers add a 2px margin outside the chrome of form elements */ +button, input, select, textarea { margin: 0; } + +/* Colors for form validity */ +input:valid, textarea:valid { } +input:invalid, textarea:invalid { + border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; +} +.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; } + + +/* These selection declarations have to be separate + No text-shadow: twitter.com/miketaylr/status/12228805301 + Also: hot pink! */ +::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; } +::selection { background:#FF5E99; color:#fff; text-shadow: none; } + +/* j.mp/webkit-tap-highlight-color */ +a:link { -webkit-tap-highlight-color: #FF5E99; } + +/* Make buttons play nice in IE: + www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ +button { width: auto; overflow: visible; } + +/* Bicubic resizing for non-native sized IMG: + code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ +.ie7 img { -ms-interpolation-mode: bicubic; } + +/** + * You might tweak these.. + */ + +body, select, input, textarea { + /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ + color: #444; + /* Set your base font here, to apply evenly */ + /* font-family: Georgia, serif; */ +} + +/* Headers (h1, h2, etc) have no default font-size or margin; define those yourself */ +h1, h2, h3, h4, h5, h6 { font-weight: bold; } + +a, a:active, a:visited { color: #607890; } +a:hover { color: #036; } + + +/** + * Primary styles + * + * Author: + */ + + + + + + + + + + + + + + + + +/** + * Non-semantic helper classes: please define your styles before this section. + */ + +/* For image replacement */ +.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; } + +/* Hide for both screenreaders and browsers: + css-discuss.incutio.com/wiki/Screenreader_Visibility */ +.hidden { display: none; visibility: hidden; } + +/* Hide only visually, but have it available for screenreaders: by Jon Neal. + www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ +.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */ +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } + +/* Hide visually and from screenreaders, but maintain layout */ +.invisible { visibility: hidden; } + +/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. + j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } +.clearfix:after { clear: both; } +/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; } + + + +/** + * Media queries for responsive design. + * + * These follow after primary styles so they will successfully override. + */ + +@media all and (orientation:portrait) { + /* Style adjustments for portrait mode goes here */ + +} + +@media all and (orientation:landscape) { + /* Style adjustments for landscape mode goes here */ + +} + +/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome) + consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */ +@media screen and (max-device-width: 480px) { + + + /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */ + /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */ +} + + +/** + * Print styles. + * + * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/ + */ +@media print { + * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; + -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */ + a, a:visited { color: #444 !important; text-decoration: underline; } + a[href]:after { content: " (" attr(href) ")"; } + abbr[title]:after { content: " (" attr(title) ")"; } + .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ + pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } + thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */ + tr, img { page-break-inside: avoid; } + @page { margin: 0.5cm; } + p, h2, h3 { orphans: 3; widows: 3; } + h2, h3{ page-break-after: avoid; } +} diff --git a/css/ribbon.css b/css/ribbon.css new file mode 100644 index 0000000..580b9d3 --- /dev/null +++ b/css/ribbon.css @@ -0,0 +1,115 @@ +@font-face { + font-family: Collegiate; + src: url("Collegiate.ttf"); +} + +.ribbon-holder { + position: absolute; + top: 0; + overflow: hidden; + height: 10em; +} + +.right.ribbon-holder { + right: 0; +} + +.left.ribbon-holder { + left: 0; +} + +.ribbon, +.ribbon:hover { + text-decoration: none; +} + +.ribbon { + font-family: Collegiate, sans-serif; + letter-spacing: -.1px; + opacity: 0.95; + + padding: 0.25em 0; + position: relative; + top: 2.5em; + + /* Defaults friendly for white pages. */ + -moz-box-shadow: 0 0 13px #888; + -webkit-box-shadow: 0 0 13px #888; + color: #FFF; + display: block; + line-height: 1.35em; +} + +.ribbon .text { + padding: 0.1em 3em; +} + +.right .ribbon { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + right: -2.6em; +} + +.left .ribbon { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + left: -2.6em; +} + +.white.ribbon { + color: #111; + background-color: #F5F5F5; + background: -webkit-gradient(linear, left bottom, left top, from(#f3f3f3), to(#fff)); + -moz-box-shadow: 0 0 13px #999; + -webkit-box-shadow: 0 0 13px #999; + text-shadow: 0 0 .05em; +} + +.white.ribbon .text { + border: 1px solid #cecece; +} + +.red.ribbon { + background-color: #9a0000; + background: -webkit-gradient(linear, left bottom, left top, from(#9a0000), to(#a90000)); +} + +.red.ribbon .text { + border: 1px solid #bf6060; +} + +.green.ribbon { + background-color: #006e00; + background: -webkit-gradient(linear, left bottom, left top, from(#006e00), to(#007200)); +} + +.green.ribbon .text { + border: 1px solid #6bac6b; +} + +.darkblue.ribbon { + background-color: #121621; + color: #ecedee; +} + +.darkblue.ribbon .text { + border: 1px solid #53565e; +} + +.orange.ribbon { + background-color: #E57504; + background: -webkit-gradient(linear, left bottom, left top, from(#dc7202), to(#ee7906)); +} + +.orange.ribbon .text { + border: 1px solid #ebaa65; +} + +.gray.ribbon { + background-color: #6d6d6d; + background: -webkit-gradient(linear, left bottom, left top, from(#6a6a6a) to(#6d6d6d)); +} + +.gray.ribbon .text { + border: 1px solid #a4a4a4; +} diff --git a/css/stacklayout.css b/css/stacklayout.css new file mode 100644 index 0000000..149a432 --- /dev/null +++ b/css/stacklayout.css @@ -0,0 +1,96 @@ +/* +* StackLayout by Campbell McGuiness +* +* http://stacklayout.com/ +* http://twitter.com/stacklayout +* http://www.decalcms.com/ +* http://workingsoftware.com.au/ +* +* This work is licensed under Creative Commons * Attribution-ShareAlike 3.0 Australia License * http://creativecommons.org/licenses/by-sa/3.0/au/ +* +* Please retain this credit and let us know if you use StackLayout for inclusion on http://stacklayout.com/who.html +* +* cam@workingsoftware.com.au +*/ +.stack, +.stack1of2, +.stack1of3, +.stack2of3, +.stack1of4, +.stack3of4, +.stack1of5, +.stack2of5, +.stack3of5, +.stack4of5, +.stackAuto +{ + display:inline-block; + font-family:'Courier New',monospace; + letter-spacing:-0.65em; + word-spacing:-0.65em; + text-align:center; + vertical-align:top; +} +.stackContent +{ + display:block; + letter-spacing:normal; + word-spacing:normal; + text-align:left; +} +.stackContent:after +{ + content:"."; + display:block; + height:0; + clear:both; + visibility:hidden; +} +.stackAuto .stackContent +{ + text-align:center; +} +.stackAuto +{ + width:auto; +} +.stack +{ + width:100%; +} +.stack1of2 +{ + width:50%; +} +.stack1of3 +{ + width:33.334%; +} +.stack2of3 +{ + width:66.667%; +} +.stack1of4 +{ + width:25%; +} +.stack3of4 +{ + width:75%; +} +.stack1of5 +{ + width:20%; +} +.stack2of5 +{ + width:40%; +} +.stack3of5 +{ + width:60%; +} +.stack4of5 +{ + width:80%; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..a73a2ea --- /dev/null +++ b/css/style.css @@ -0,0 +1,77 @@ + +body { font:1em/1.625em "lucida grande","lucida sans unicode", sans-serif; background-color:#FFFEF0; +font-size-adjust:none; +font-style:normal; +font-variant:normal; +font-weight:normal; +} + +p { padding:0 0 0.8125em 0; color:#111; font-weight:300;} + +p + p { text-indent:1.625em;} + +p.first:first-letter{ float:left;font-family: baskerville,"palatino linotype",serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; } +p img { float: left; margin: 0.5em 0.8125em 0.8125em 0; padding: 0; } +p img.right { float: right; margin: 0.5em 0 0.8125em 0.8125em } + + +h1,h2{ font-weight:normal; color: #333; font-family:Georgia, serif; } +h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, serif; } + + +h1 { font-size: 2.125em; margin-bottom: 0.765em; } +h2 { font-size: 1.9em; margin-bottom: 0.855em; } +h3 { font-size: 1.7em; margin-bottom: 0.956em; } +h4 { font-size: 1.4em; margin-bottom: 1.161em; } +h5,h6 { font-size: 1.313em; margin-bottom: 1.238em; } + + + +ul{list-style-position:outside;} +li ul, +li ol { margin:0 1.625em; } +ul, ol { margin: 0 0 1.625em 0; } + + +dl { margin: 0 0 1.625em 0; } +dl dt { font-weight: bold; } +dl dd { margin-left: 1.625em; } + +a { color:#005AF2; text-decoration:none; } +a:hover { text-decoration: underline; } + + +table { margin-bottom:1.625em; border-collapse: collapse; } +th { font-weight:bold; } +tr,th,td { margin:0; padding:0 1.625em 0 1em; height:26px; } +tfoot { font-style: italic; } +caption { text-align:center; font-family:Georgia, serif; } + + +abbr, acronym { border-bottom:1px dotted #000; } +address { margin-top:1.625em; font-style: italic; } +del {color:#000;} + + +blockquote { padding:1em 1em 1.625em 1em; font-family:georgia,serif;font-style: italic; } +blockquote:before { content:"\201C";font-size:3em;margin-left:-.625em; font-family:georgia,serif;color:#aaa;line-height:0;}/* From Tripoli */ +blockquote > p {padding:0; margin:0; } + +strong { font-weight: bold; } +em, dfn { font-style: italic; } +dfn { font-weight: bold; } +pre, code { margin: 1.625em 0; white-space: pre; } +pre, code, tt { font: 1em monospace; line-height: 1.5; } +tt { display: block; margin: 1.625em 0; } +hr { margin-bottom:1.625em; } + + + +.oldbook { font-family:"Warnock Pro","Goudy Old Style","Book Antiqua","Palatino",Georgia,serif; } +.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } +.mono { font-family:"Courier New", Courier, monospace; } + +.tutorials { + list-style: none; + margin-left: 20px; +} diff --git a/css/syntax.css b/css/syntax.css new file mode 100644 index 0000000..2774b76 --- /dev/null +++ b/css/syntax.css @@ -0,0 +1,60 @@ +.highlight { background: #ffffff; } +.highlight .c { color: #999988; font-style: italic } /* Comment */ +.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */ +.highlight .k { font-weight: bold } /* Keyword */ +.highlight .o { font-weight: bold } /* Operator */ +.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */ +.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */ +.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */ +.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ +.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ +.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */ +.highlight .ge { font-style: italic } /* Generic.Emph */ +.highlight .gr { color: #aa0000 } /* Generic.Error */ +.highlight .gh { color: #999999 } /* Generic.Heading */ +.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ +.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */ +.highlight .go { color: #888888 } /* Generic.Output */ +.highlight .gp { color: #555555 } /* Generic.Prompt */ +.highlight .gs { font-weight: bold } /* Generic.Strong */ +.highlight .gu { color: #aaaaaa } /* Generic.Subheading */ +.highlight .gt { color: #aa0000 } /* Generic.Traceback */ +.highlight .kc { font-weight: bold } /* Keyword.Constant */ +.highlight .kd { font-weight: bold } /* Keyword.Declaration */ +.highlight .kp { font-weight: bold } /* Keyword.Pseudo */ +.highlight .kr { font-weight: bold } /* Keyword.Reserved */ +.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */ +.highlight .m { color: #009999 } /* Literal.Number */ +.highlight .s { color: #d14 } /* Literal.String */ +.highlight .na { color: #008080 } /* Name.Attribute */ +.highlight .nb { color: #0086B3 } /* Name.Builtin */ +.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */ +.highlight .no { color: #008080 } /* Name.Constant */ +.highlight .ni { color: #800080 } /* Name.Entity */ +.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */ +.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */ +.highlight .nn { color: #555555 } /* Name.Namespace */ +.highlight .nt { color: #000080 } /* Name.Tag */ +.highlight .nv { color: #008080 } /* Name.Variable */ +.highlight .ow { font-weight: bold } /* Operator.Word */ +.highlight .w { color: #bbbbbb } /* Text.Whitespace */ +.highlight .mf { color: #009999 } /* Literal.Number.Float */ +.highlight .mh { color: #009999 } /* Literal.Number.Hex */ +.highlight .mi { color: #009999 } /* Literal.Number.Integer */ +.highlight .mo { color: #009999 } /* Literal.Number.Oct */ +.highlight .sb { color: #d14 } /* Literal.String.Backtick */ +.highlight .sc { color: #d14 } /* Literal.String.Char */ +.highlight .sd { color: #d14 } /* Literal.String.Doc */ +.highlight .s2 { color: #d14 } /* Literal.String.Double */ +.highlight .se { color: #d14 } /* Literal.String.Escape */ +.highlight .sh { color: #d14 } /* Literal.String.Heredoc */ +.highlight .si { color: #d14 } /* Literal.String.Interpol */ +.highlight .sx { color: #d14 } /* Literal.String.Other */ +.highlight .sr { color: #009926 } /* Literal.String.Regex */ +.highlight .s1 { color: #d14 } /* Literal.String.Single */ +.highlight .ss { color: #990073 } /* Literal.String.Symbol */ +.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */ +.highlight .vc { color: #008080 } /* Name.Variable.Class */ +.highlight .vg { color: #008080 } /* Name.Variable.Global */ +.highlight .vi { color: #008080 } /* Name.Variable.Instance */ +.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ @@ -1,13 +1,18 @@ --- layout: default -title: Thomas Davis +title: Backbone Tutorials --- - -<div id="home"> - <h1>Latest Posts</h1> - <ul class="posts"> +<h2>Beginner</h2> +<ul class="tutorials"> {% for post in site.posts %} - <li><span>{{ post.date | date_to_string }}</span> » <a href="{{ post.url }}">{{ post.title }}</a></li> + {% if post.type == "beginner" %} + <li><a href="{{ post.url }}">{{ post.title }}</a> » Thomas Davis</li> + {% endif %} {% endfor %} - </ul> -</div> +</ul> + +<h2>Intermediate</h2> +<ul class="tutorials"> + <li>Tutorial 1</li> + <li>Tutorial 2</li> +</ul> |