Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

ASD

  • Loading branch information...
commit 4e6f1a3e1a19b3e1e9dab134a27aa9d1100252f9 1 parent 233e7e3
@thomasdavis authored
Showing with 4,510 additions and 49 deletions.
  1. +15 −14 _layouts/default.html
  2. +16 −0 _layouts/post.html
  3. +239 −0 _site/2011/02/01/backbone-introduction.html
  4. +144 −0 _site/2011/02/05/backbone-views-and-templates.html
  5. +240 −0 _site/2011/02/07/making-a-restful-ajax-app.html
  6. +151 −0 _site/2011/03/04/jquery-create-your-own-deferred.html
  7. +200 −0 _site/2011/03/07/anonymous-functions.html
  8. +148 −0 _site/2011/07/05/is-the-internet-an-extension-of-human-memory.html
  9. +147 −0 _site/2011/07/07/the-elevator-scene.html
  10. +136 −0 _site/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html
  11. +20 −0 _site/README.md
  12. +99 −0 _site/about.html
  13. +266 −0 _site/css/screen.css
  14. +60 −0 _site/css/syntax.css
  15. +61 −0 _site/examples/anonymous-functions/index.html
  16. +56 −0 _site/examples/backbone-101/index.html
  17. +116 −0 _site/examples/backbone-underscore/index.html
  18. +29 −0 _site/examples/jquery-deferred/index.html
  19. +70 −0 _site/examples/restful-app/index.html
  20. BIN  _site/images/ajax.jpg
  21. BIN  _site/images/backbone.png
  22. BIN  _site/images/dark_mosaic.png
  23. BIN  _site/images/js.jpg
  24. BIN  _site/images/meagtron.jpg
  25. BIN  _site/images/r710808_5553650.jpg
  26. BIN  _site/images/templating.jpg
  27. +112 −0 _site/index.html
  28. +77 −0 _site/index.html2
  29. +54 −0 _site/random/canvas_rotated_textfill.html
  30. +42 −0 _site/slides/requirejs/css/keydown.css
  31. +1 −0  _site/slides/requirejs/css/requirejs.css
  32. +392 −0 _site/slides/requirejs/css/rocks.css
  33. +135 −0 _site/slides/requirejs/css/syntax_highlighting.css
  34. BIN  _site/slides/requirejs/images/cc.large.png
  35. BIN  _site/slides/requirejs/images/flickr.png
  36. +184 −0 _site/slides/requirejs/index.html
  37. +27 −0 _site/slides/requirejs/index.md
  38. +1 −0  _site/slides/requirejs/js/requirejs.js
  39. +415 −0 _site/slides/requirejs/js/rocks.js
  40. +171 −0 _site/tutorial/anonymous-functions.html
  41. +224 −0 _site/tutorial/backbone-introduction.html
  42. +109 −0 _site/tutorial/backbone-views-and-templates.html
  43. BIN  _site/tutorial/images/ajax.jpg
  44. BIN  _site/tutorial/images/backbone.png
  45. BIN  _site/tutorial/images/js.jpg
  46. BIN  _site/tutorial/images/meagtron.jpg
  47. BIN  _site/tutorial/images/r710808_5553650.jpg
  48. BIN  _site/tutorial/images/templating.jpg
  49. +119 −0 _site/tutorial/jquery-create-your-own-deferred.html.html
  50. +215 −0 _site/tutorial/making-a-restful-ajax-app.html
  51. +18 −34 css/screen.css
  52. BIN  images/dark_mosaic.png
  53. +1 −1  index.html
View
29 _layouts/default.html
@@ -42,6 +42,8 @@
</script>
</head>
<body>
+
+ <!--
<a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
@@ -59,21 +61,20 @@
<li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
</ul>
</div>
-<!-- ClickTale Top part -->
-<script type="text/javascript">
-var WRInitTime=(new Date()).getTime();
-</script>
-<!-- ClickTale end of Top part -->
-
-<div class="site">
- <div class="title">
- <a href="/">Thomas Davis</a>
- <a class="extra" href="/">home</a>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
</div>
- <p>Find me at <a href="http://webchat.freenode.net/?channels=cdnjs" target="_blank">#cdnjs</a>(new window) on freenode.net if you have any questions!</p>
-
- {{ content }}
-
+ <div id="content">
+ {{ content }}
+ </div>
+
+</div>
+
+
+
+
</div>
View
16 _layouts/post.html
@@ -3,6 +3,22 @@
---
<div id="post">
{{ content }}
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
</div>
<!--
<div id="related">
View
239 _site/2011/02/01/backbone-introduction.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Backbone.js Tutorial - by noob for noobs</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<p><img src="/images/backbone.png" alt="" /></p>
+<h2>Backbone.js Tutorial &#8211; by noob for noobs</h2>
+<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&#8217;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">&lt;!DOCTYPE html&gt;</span>
+<span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+ <span class="nt">&lt;title&gt;</span>I have a back bone<span class="nt">&lt;/title&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+ <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">&quot;add-friend&quot;</span><span class="nt">&gt;</span>Add Friend<span class="nt">&lt;/button&gt;</span>
+ <span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;friends-list&quot;</span><span class="nt">&gt;</span>
+ <span class="nt">&lt;/ul&gt;</span>
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+ <span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</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">&quot;body&quot;</span><span class="p">),</span>
+ <span class="nx">events</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s2">&quot;click #add-friend&quot;</span><span class="o">:</span> <span class="s2">&quot;showPrompt&quot;</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">&quot;Who is your friend?&quot;</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 &#8220;body&#8221; 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 &#8220;add-friend&#8221;. 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&#8217;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">&quot;add&quot;</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">&quot;body&quot;</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">&quot;click #add-friend&quot;</span><span class="o">:</span> <span class="s2">&quot;showPrompt&quot;</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">&quot;Who is your friend?&quot;</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">&quot;#friends-list&quot;</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;&lt;li&gt;&quot;</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">&#39;name&#39;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&quot;&lt;/li&gt;&quot;</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&#8217;t mind answering any questions that I have the ability to answer.</p>
+<p>Would also love to hear to some optimization tips!</p>
+<p>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>
+<p>Update 2: A user called <a href="http://twitter.com/svenlito">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>
+<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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
144 _site/2011/02/05/backbone-views-and-templates.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>backbone.js beginners and underscore.js micro templating</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>backbone.js beginners and underscore.js micro templating</h2>
+<p>Surprisingly I have received many request via the <a href="http://poplytics.com">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/">Demo</a><br />
+ <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-underscore">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 &#8220;benchmarks&#8221;:&quot;http://www.viget.com/extend/benchmarking-javascript-templating-libraries/ of the different templating engines and none of them could really be crowned king. Since then I have just learnt to use underscore.js micro templating engine as it works fine for us.</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 app is cached and distrubuted through <a href="http://en.wikipedia.org/wiki/Content_delivery_network">edge locations</a> which increases the speed the site is served and also saves us money on bandwidth.</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>
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "sexylady";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
240 _site/2011/02/07/making-a-restful-ajax-app.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>restful ajax web app basics ( mimic gmail with backbone.js )</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>restful ajax web app basics ( mimic gmail with backbone.js )</h2>
+<p>The goal is to build a small example of Service Oriented Architecture (<span class="caps">SOA</span>) and Thin Server Architecture (<span class="caps">TSA</span>). We want our server to only produce raw data and never send <span class="caps">HTML</span>! ( We&#8217;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&#8217;t want to be <strong>circle</strong> jerking too hard but todays tutorial will be using Backbone.js again.</p>
+
+<h2><a href="http://thomasdavis.github.com/examples/restful-app/">Demo</a><br />
+ <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app">Source</a></h2>
+<h3>Benefits of Thin Server Architecture</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.</p>
+<ul>
+ <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&#8217;s straight forward</li>
+ <li>Google invented #! aka the hashbang for SE</li>
+ <li>!flash</li>
+</ul>
+<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">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>
+<p>Possibly one of the funnest parts is choosing an ajax loading graphic, I always use this <a href="http://ajaxload.info/">site</a>.</p>
+<h3>Understanding the hash tag</h3>
+<p>Backbone.js implements two classes called Controller and History. Using just these two classes we can constructthe entire backbone of our restful app.</p>
+<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. Browsers don&#8217;t trigger any page refreshes with hashtags so using Javascript we can detect when the # location changes. Instead of triggering the default behavior of finding an anchor, we instead load custom Javascript.</p>
+<p>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 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>
+<div class="highlight"><pre><code class="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
+<span class="nt">&lt;html&gt;</span>
+<span class="nt">&lt;head&gt;</span>
+ <span class="nt">&lt;title&gt;</span>Hide your kids, hide your wife and hide your husbands<span class="nt">&lt;/title&gt;</span>
+<span class="nt">&lt;/head&gt;</span>
+<span class="nt">&lt;body&gt;</span>
+
+<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;menu&quot;</span><span class="nt">&gt;</span>
+<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#animals/dog&quot;</span><span class="nt">&gt;</span>Dogs<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#animals/cat&quot;</span><span class="nt">&gt;</span>cats<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#shop&quot;</span><span class="nt">&gt;</span>Shops<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+<span class="nt">&lt;li&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;#gangster&quot;</span><span class="nt">&gt;</span>Gangsters<span class="nt">&lt;/a&gt;&lt;/li&gt;</span>
+<span class="nt">&lt;/ul&gt;</span>
+<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;content-pane&quot;</span><span class="nt">&gt;</span>No content loaded<span class="nt">&lt;/div&gt;</span>
+
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">&quot;http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
+<span class="nt">&lt;/body&gt;</span>
+<span class="nt">&lt;/html&gt;</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/restful-app/">here</a> and downloaded <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app">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">openkeyval.org</a> which is simplya free service for storing key pair values. It is a great example of <a href="http://www.slideshare.net/spacemonkeylabs/thin-server-architecture"><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 routes and you should quickly read the documentation <a href="http://documentcloud.github.com/backbone/#Controller-routes">here</a>. In the example I set up two types of routes 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 &#8220;jsonp&#8221; to circumvent the foreign cross site policy.</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="kd">var</span> <span class="nx">restfulApp</span> <span class="o">=</span> <span class="nx">Backbone</span><span class="p">.</span><span class="nx">Controller</span><span class="p">.</span><span class="nx">extend</span><span class="p">({</span>
+ <span class="nx">restfulUrl</span><span class="o">:</span> <span class="s2">&quot;http://api.openkeyval.org/&quot;</span><span class="p">,</span> <span class="c1">//This is a free service to store key pair values</span>
+
+ <span class="c1">//Routes tell the app what to do </span>
+ <span class="nx">routes</span><span class="o">:</span> <span class="p">{</span>
+ <span class="s2">&quot;animals/:animal&quot;</span><span class="o">:</span> <span class="s2">&quot;animalAction&quot;</span><span class="p">,</span> <span class="c1">//This matches app/animals/* and assigns * to a variable called &quot;animal&quot;</span>
+ <span class="s2">&quot;*page&quot;</span><span class="o">:</span> <span class="s2">&quot;defaultAction&quot;</span><span class="p">,</span> <span class="c1">//This simply matches any urls that weren&#39;t caught above and assigns it to &quot;page&quot;</span>
+ <span class="p">},</span>
+
+ <span class="nx">defaultAction</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">page</span> <span class="p">){</span>
+ <span class="k">if</span><span class="p">(</span> <span class="nx">page</span> <span class="p">)</span> <span class="p">{</span>
+ <span class="c1">//Once the default action is called we want to construct a link to our restful service</span>
+ <span class="kd">var</span> <span class="nx">restfulPageUrl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">restfulUrl</span> <span class="o">+</span> <span class="nx">page</span> <span class="o">+</span> <span class="s2">&quot;page&quot;</span> <span class="c1">//http://api.openkeyval.org/gangsterpage</span>
+ <span class="c1">//Now we have a url lets get the data</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">loadRestfulData</span><span class="p">(</span> <span class="nx">restfulPageUrl</span> <span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">},</span>
+ <span class="nx">animalAction</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">animal</span> <span class="p">)</span> <span class="p">{</span>
+ <span class="c1">//Once the default action is called we want to construct a link to our restful service</span>
+ <span class="kd">var</span> <span class="nx">restfulPageUrl</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">restfulUrl</span> <span class="o">+</span> <span class="nx">animal</span> <span class="o">+</span> <span class="s2">&quot;page&quot;</span> <span class="c1">//http://api.openkeyval.org/dogpage</span>
+ <span class="c1">//Now we have a url lets get the data</span>
+ <span class="k">this</span><span class="p">.</span><span class="nx">loadRestfulData</span><span class="p">(</span> <span class="nx">restfulPageUrl</span> <span class="p">);</span>
+ <span class="p">},</span>
+ <span class="nx">loadRestfulData</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span> <span class="nx">pageUrl</span> <span class="p">){</span>
+ <span class="c1">//Set the content pane to a loading screen</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#content-pane&quot;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="s2">&quot;loading data...&quot;</span> <span class="p">);</span>
+ <span class="c1">//Load the data in using jQuerys ajax call</span>
+ <span class="nx">$</span><span class="p">.</span><span class="nx">ajax</span><span class="p">({</span>
+ <span class="nx">url</span><span class="o">:</span> <span class="nx">pageUrl</span><span class="p">,</span>
+ <span class="nx">dataType</span><span class="o">:</span> <span class="s2">&quot;jsonp&quot;</span><span class="p">,</span>
+ <span class="nx">success</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">){</span>
+ <span class="c1">//Once we receive the data, set it to the content pane.</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#content-pane&quot;</span><span class="p">).</span><span class="nx">text</span><span class="p">(</span> <span class="nx">data</span> <span class="p">);</span>
+ <span class="p">}</span>
+ <span class="p">});</span>
+ <span class="p">}</span>
+
+ <span class="kd">var</span> <span class="nx">app</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">restfulApp</span><span class="p">;</span>
+ <span class="c1">//Initiate a new history and controller class</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">emulateHTTP</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">emulateJSON</span> <span class="o">=</span> <span class="kc">true</span>
+ <span class="nx">Backbone</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">start</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/restful-app/">Demo</a><br />
+ <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/restful-app">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&#8217;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>
+
+<div id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
151 _site/2011/03/04/jquery-create-your-own-deferred.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>jQuery 1.5 - create deferred object with callback parameters</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>jQuery 1.5 &#8211; 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 on how to use these new functions. All the examples used $.ajax calls which are setup by jQuery to be used as 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/">guide</a> which is great and covers most of what you need to know.</p>
+<p>The tutorial covers how to create your own deferred objects but doesn&#8217;t include passing parameters to $.then call backs. 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</p>
+<div class="highlight"><pre><code class="javascript"><span class="kd">function</span> <span class="nx">myFunc</span><span class="p">(){</span>
+ <span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">Deferred</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span> <span class="nx">deferred_obj</span> <span class="p">){</span>
+ <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;body&quot;</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">&quot;background&quot;</span><span class="p">,</span> <span class="s2">&quot;#ff0000&quot;</span><span class="p">);</span> <span class="c1">// Example</span>
+ <span class="nx">deferred_obj</span><span class="p">.</span><span class="nx">resolve</span><span class="p">(</span> <span class="s2">&quot;these&quot;</span><span class="p">,</span> <span class="s2">&quot;are&quot;</span><span class="p">,</span> <span class="s2">&quot;my&quot;</span><span class="p">,</span> <span class="s2">&quot;parameters&quot;</span> <span class="p">);</span>
+ <span class="c1">// Call resolve when you are ready to continue, in animation callbacks etc</span>
+ <span class="p">}).</span><span class="nx">promise</span><span class="p">();</span>
+<span class="p">};</span>
+<span class="nx">$</span><span class="p">.</span><span class="nx">when</span><span class="p">(</span> <span class="nx">myFunc</span><span class="p">()</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">p1</span><span class="p">,</span> <span class="nx">p2</span><span class="p">,</span> <span class="nx">p3</span><span class="p">,</span> <span class="nx">p4</span><span class="p">){</span>
+ <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span> <span class="nx">p1</span> <span class="o">+</span> <span class="nx">p2</span> <span class="o">+</span> <span class="nx">p3</span> <span class="o">+</span> <span class="nx">p4</span><span class="p">);</span>
+<span class="p">});</span>
+</code></pre>
+</div>
+<p>So it&#8217;s pretty easy and you should start using them immediatly!</p>
+<h2><a href="http://thomasdavis.github.com/examples/jquery-deferred/">Demo</a><br />
+ <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/jquery-deferred">Source</a></h2>
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "jquerydeferred";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
200 _site/2011/03/07/anonymous-functions.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>javascript - pass "this" to your anonymous functions</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>javascript &#8211; pass &#8220;this&#8221; to your anonymous functions</h2>
+<p>Anonymous functions in javascript are extremely powerful and if you don&#8217;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 &#8220;this&#8221; 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 &#8220;this&#8221; 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 &#8220;this.weapon&#8221; but as you see in the first example he cannot access his properties which are returned as &#8220;undefined&#8221;.</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&#39;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">&quot;laser&quot;</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">&quot;Noob_bot: Fire the &quot;</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">&quot;!!!#!&quot;</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 &quot;this&quot;</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">&quot;laser&quot;</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">&quot;Megatron: Fire the &quot;</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">&quot;!!!#!&quot;</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 &#8220;this&#8221; 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>
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "lasergun";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
148 _site/2011/07/05/is-the-internet-an-extension-of-human-memory.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Is the Internet an extension of human memory?</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>Is the Internet an extension of human memory?</h2>
+<p><em>Just my rough thoughts on excessive computing and human memory. Possibly analogous to “are calculators bad for teaching math”. Would love to hear thoughts on the matter, sorry in advance for my poor articulation.</em></p>
+<h3>My observation</h3>
+<p>Lately I’ve noticed when I wish to recall facts/knowledge I without hesitation open a new tab and perform a quick search. Most of the time I find what I was after instantly. What I find humorous is that when I go to recall the information my brain tells me to search and what keywords to search for.</p>
+<p>So effectively what I have done is when I first acquired the information I associated the “search” action with the memory instead of what I actually found. Essentially creating a shortcut/middleman to a quality repository of information but possibly sacrificed through laziness my ability to actually absorb the information.</p>
+<p>Using my memory normally I would generally look straight for the fact or information I was after. This association of search terms is probably a symptom of laziness/convenience and I am unsure of whether it enhances or un-enhances my productivity.</p>
+<p>A simple/personal example would be when learning a programming language I sometimes don’t really bother learning the syntax or methods as I know I can simply search for them.</p>
+<h3>My dilemma</h3>
+<p>Now this can be most convenient in some circumstances because I can quickly find huge repositories of quality information.</p>
+<p>Though as a biological human having epiphanies is a fast way to let your conscious evolve. But to have a basic epiphany I believe humans by accident/coincidence put together premises they have acquired over an arbitrary amount of time. But due to me not really committing information directly to my memory I have less premises to call on when thinking.</p>
+<p>I feel that my ability to be creative is impaired because all I am turning my memory into is the “Contents Page” of what I know. So instead of a novel, I am a dictionary.</p>
+<h3>Conclusion</h3>
+<p>A practical solution could be to make a much more conscious effort when consuming information to store the ideas behind it first then store the path to the full repository. I presume this already happens quite a bit but realizing how many web sites I have visited makes me skeptical.</p>
+<p><em>I would love to hear what you have to say on the subject!</em></p>
+<p>Update: s2r2 from hacker news posted a link to an actual study and if you enjoyed this post, you will definitely enjoy <a href="http://consc.net/papers/extended.html">this</a></p>
+<p>Update 2: For anyone who doesn&#8217;t have enough time to read the above, xkcd made a joke out of this <a href="http://xkcd.com/903/">lol</a><br />
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "internetmemory";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>07 Mar 2011</span> &raquo; <a href="/2011/03/07/anonymous-functions.html">javascript - pass "this" to your anonymous functions</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
147 _site/2011/07/07/the-elevator-scene.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>The Elevator. Sexism or gender stereotyping?</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>The Elevator. Sexism or gender stereotyping?</h2>
+<p><em>This post is regarding the issue of Richard Dawkins commenting on a situation described by youtube character called &#8220;skepchick&#8221;. More information can be found <a href="http://www.blaghag.com/2011/07/richard-dawkins-your-privilege-is.html">here</a></em></p>
+<p>To save you time I agree with Dawkins and have no problem with the approach he took. A quick assumption I will make is that the audience replying to this controversy is full of atheist. I will also assume that atheist have used humour and mockery themselves when talking about the crazy belief that is religion. At the very least have laughed at Richard’s jokes concerning religion. So I will call a double standard for anyone arguing that he was too blunt.</p>
+<p>I believe there are two arguments going on here and premises are getting thrown around all in the wrong direction. I think “skepchick” was the first person to throw an incorrect premise at the wrong argument.</p>
+<p>I love the feminist movement and avidly pursue to advance it. Though I believe that modern man has also fell victim to society&#8217;s gender stereotyping. To clarify modern men suffer from symptoms such as;</p>
+<ul>
+ <li>“being a man” &#8211; frowned upon by peers, women and parents when he chooses battles. Often called a “push over” if he doesn’t think a fight is worth fighting</li>
+ <li>Approach anxiety &#8211; men are expected to approach women and often get advice to always be forward as to never waste a chance. For those men who aren’t forward they end up dwelling on what could have been if they had said something.</li>
+ <li><a href="http://www.maxdesign.com.au/2009/10/12/schrodingers/">Schrodinger&#8217;s Rapist</a> &#8211; I’d expect most men to have been in this situation where they are walking behind a lady at night or stuck in an elevator for example. They understand that they may be making the woman feel uncomfortable which makes them feel sick inside. There are no solutions for alleviating the stress either, if you walk faster or walk slower and disappear you will still induce fear into some women. In the elevator context you may be creepy if you don’t talk so you may lighten the situation by talking which makes you even more creepy.</li>
+</ul>
+<p>I feel as though the “elevator situation” is more of a problem with gender stereotyping then what feminist actually fight for. I would also list out some gender stereotypes women are forced into but my perspective isn’t great but would love to hear about them.(comment below)</p>
+<p>It would seem that “skepchick” thinks that the elevator scene was an attack on feminism whereas I would say it’s actually a matter of gender stereotyping. Which makes her video actually a mockery of feminism and perpetuates sexism when in fact it should address gender stereotyping that both men and women face.</p>
+<p>Men and women don&#8217;t experience the same things and may never have the same perspective but we can agree that societies expectations pressure us equally.</p>
+<p>Let’s <span class="caps">ALL</span> support the feminist movement and lets <span class="caps">ALL</span> support the abolishment of gender stereotyping.</p>
+<p><em>Would love to hear what you have to say!</em></p>
+<p><em>p.s. gender stereotyping also includes all the combinations of sexualities and genders</em></p>
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "genderstereotyping";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>10 Jul 2011</span> &raquo; <a href="/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html">A Moral Dilemma On Forgiveness and Hatred</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ <li><span>07 Mar 2011</span> &raquo; <a href="/2011/03/07/anonymous-functions.html">javascript - pass "this" to your anonymous functions</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
136 _site/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>A Moral Dilemma On Forgiveness and Hatred</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <div id="post">
+<h2>A Moral Dilemma On Forgiveness and Hatred</h2>
+<p>On Forgiveness and Hatred (and most everything else I suppose) my mind follows a dual path. On one hand I separate Action from Doer and can reason thus: I hate the Act of Murder but not <em>that</em> Murderer. In examples of Personal Hatred (possibly a too-strong word – Aversion is more on the money) I reason that it is not person A that I &#8216;hate&#8217; but simply his actions (many or all of them).</p>
+<p>On the other hand that sounds a little idealistic and a little like saying I don&#8217;t hate person A but simply what he Is (his actions&#8230;).</p>
+<p>When it comes to Forgiveness then I follow a strict All-Forgiving policy blaming no man for his actions ( being without &#8216;free will&#8217; and other nonsense). But this is again dependant on idealistic abstraction which (being a strict materialist) I am generally opposed to.</p>
+<p><em>Is there anything I&#8217;m missing?</em></p>
+<script>
+var idcomments_acct = 'e6c0e0096f8106ea52c674a85b26ecf9';
+var idcomments_post_id = "forgivenessandhatred";
+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 id="disqus_thread"></div>
+<script type="text/javascript">
+ /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+ var disqus_shortname = 'thomasdavis'; // required: replace example with your forum shortname
+ var disqus_developer = 1; // developer mode is on
+ var disqus_identifier = 'http://backbonetutorials.com/organizing-backbone-using-modules';
+ /* * * DON'T EDIT BELOW THIS LINE * * */
+ (function() {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ })();
+</script>
+<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
+
+
+</div>
+<!--
+<div id="related">
+ <h2>Related Posts</h2>
+ <ul class="posts">
+
+ <li><span>07 Jul 2011</span> &raquo; <a href="/2011/07/07/the-elevator-scene.html">The Elevator. Sexism or gender stereotyping?</a></li>
+
+ <li><span>05 Jul 2011</span> &raquo; <a href="/2011/07/05/is-the-internet-an-extension-of-human-memory.html">Is the Internet an extension of human memory?</a></li>
+
+ <li><span>07 Mar 2011</span> &raquo; <a href="/2011/03/07/anonymous-functions.html">javascript - pass "this" to your anonymous functions</a></li>
+
+ </ul>
+</div>
+-->
+
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
20 _site/README.md
@@ -0,0 +1,20 @@
+Looking for feedback on my latest startup Protosal(http://protosal.com) any and all would be great!
+
+**Contact:**
+
+* \#cdnjs on freenode
+* @neutralthoughts on twitter
+* thomasalwyndavis@gmail.com
+
+**Projects:**
+
+* Javascript Library CDN - http://cdnjs.com
+* Proposal Generation Start up - http://protosal.com
+* Backbone.js Tutorials - http://backbonetutorials.com
+* Technical Blog - http://thomasdavis.github.com
+* Github Account - https://github.com/thomasdavis
+* Freelance Blog - http://thomasalwyndavis.com
+* Quora - http://www.quora.com/Thomas-Davis
+* StackOverflow - http://stackoverflow.com/users/580675/thomas-davis
+
+Love you mum!
View
99 _site/about.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta name="readability-verification" content="vy47hkYexnjBxYJ62n4NseCxGUkPza7UP3enFJa3"/>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis - About me</title>
+ <meta name="author" content="Thomas Davis" />
+
+ <!-- syntax highlighting CSS -->
+ <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
+<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
+ <!-- Homepage CSS -->
+ <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
+
+ <!-- Typekit -->
+ <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+ <style type="text/css">
+ body, ul { padding: 0; margin: 0; }
+ body { font-family: 'Arial'; }
+ #container { width: 760px; margin: auto; }
+ h1 { font-size: 3em; }
+ h3 { color: #444; }
+ #topmenu { height: 27px; border-bottom: 1px solid #996699; padding: 5px; }
+ #topmenu ul { list-style: none; }
+ #topmenu li { float: left; margin-left: 15px; font-size: 13px;}
+ .FlattrButton {
+ position: absolute;
+ top: 53px;
+ right: 15px;
+ }
+ </style>
+ <script type="text/javascript">
+/* <![CDATA[ */
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ })();
+/* ]]> */
+</script>
+</head>
+<body>
+
+ <!--
+ <a class="FlattrButton" style="display:none;" href="http://thomasdavis.github.com"></a>
+<noscript><a href="http://flattr.com/thing/176991/Tutorials-by-Thomas-Davis" target="_blank">
+<img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0" /></a></noscript>
+<div id="topmenu">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="https://github.com/thomasdavis">my github</a></li>
+ <li><a href="/about.html">about me</a></li>
+ <li><a href="http://protosal.com" target="_blank">check out my startup</a> ( backbone.js, node.js and couchdb )</li>
+ <li><a href="https://docs.google.com/document/pub?id=1Cy643CNQvQYew42S3dXkmLlUypQioNttApG_hgjIiMQ" target="_blank">my resume</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 (SFW)</a></li>
+ </ul>
+ <ul style="float: right; margin-right: 15px;">
+
+ <li>thomas davis - <a href="http://twitter.com/neutralthoughts">follow me on twitter</a> or don't</li>
+ </ul>
+</div>
+-->
+<div id="container">
+ <div id="header">
+ <h1><a href="/">Thomas Davis</a></h1>
+ </div>
+ <div id="content">
+ <ul>
+ <li>co-founder of <a href="http://protosal.com">protosal.com</a></li>
+ <li>co-founder of <a href="http://cdnjs.com">cdnjs.com</a></li>
+ <li>founder of <a href="http://backbonetutorials.com">backbonetutorials.com</a></li>
+ <li>21 year old who lives in Cairns, Australia</li>
+ <li>currently single, which one of you ladies is keen?</li>
+ <li>currently in love with all things javascript(backbone.js, node.js and couchdb)</li>
+ <li>I am quite desperate for more twitter friends to make up for the lack of real life friends</li>
+ <li><a href="http://twitter.com/neutralthoughts">@neutralthoughts</a>, word</li>
+</ul>
+ </div>
+
+</div>
+
+
+
+
+
+</div>
+
+
+ <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
+
+ <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>
View
266 _site/css/screen.css
@@ -0,0 +1,266 @@
+/*****************************************************************************/
+/*
+/* Common
+/*
+/*****************************************************************************/
+
+/* Global Reset */
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+html, body {
+ height: 100%;
+}
+
+body {
+ background-color: white;
+ font: 13.34px helvetica, arial, clean, sans-serif;
+ *font-size: small;
+ text-align: center;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-size: 100%;
+}
+
+h1 {
+ margin-bottom: 1em;
+}
+
+p {
+ margin: 1em 0;
+}
+
+a {
+ color: #00a;
+}
+
+a:hover {
+ color: black;
+}
+
+a:visited {
+ color: #a0a;
+}
+
+table {
+ font-size: inherit;
+ font: 100%;
+}
+
+/*****************************************************************************/
+/*
+/* Home
+/*
+/*****************************************************************************/
+
+ul.posts {
+ list-style-type: none;
+ margin-bottom: 2em;
+}
+
+ ul.posts li {
+ line-height: 1.75em;
+ }
+
+ ul.posts span {
+ color: #aaa;
+ font-family: Monaco, "Courier New", monospace;
+ font-size: 80%;
+ }
+
+/*****************************************************************************/
+/*
+/* Site
+/*
+/*****************************************************************************/
+
+#container {
+ font-size: 110%;
+ text-align: justify;
+ width: 920px;
+ line-height: 1.5em;
+
+ padding: 20px;
+}
+
+#header h1 a {
+ color: #fff;
+}
+#header h1 a:active {
+ color: #fff;
+}
+#content {
+ background: #fff;
+ padding: 30px;
+}
+ .site .footer {
+ font-size: 80%;
+ color: #666;
+ border-top: 4px solid #eee;
+ margin-top: 2em;
+ overflow: hidden;
+ }
+
+ .site .footer .contact {
+ float: left;
+ margin-right: 3em;
+ }
+
+ .site .footer .contact a {
+ color: #8085C1;
+ }
+
+ .site .footer .rss {
+ margin-top: 1.1em;
+ margin-right: -.2em;
+ float: right;
+ }
+
+ .site .footer .rss img {
+ border: 0;
+ }
+
+/*****************************************************************************/
+/*
+/* Posts
+/*
+/*****************************************************************************/
+
+#post {
+
+}
+
+ /* standard */
+
+ #post pre {
+ border: 1px solid #ddd;
+ background-color: #eef;
+ padding: 0 .4em;
+ }
+
+ #post ul,
+ #post ol {
+ margin-left: 1.35em;
+ }
+
+ #post code {
+ border: 1px solid #ddd;
+ background-color: #eef;
+ font-size: 85%;
+ padding: 0 .2em;
+ }
+
+ #post pre code {
+ border: none;
+ }
+
+ /* terminal */
+
+ #post pre.terminal {
+ border: 1px solid black;
+ background-color: #333;
+ color: white;
+ }
+
+ #post pre.terminal code {
+ background-color: #333;
+ }
+
+#related {
+ margin-top: 2em;
+}
+
+ #related h2 {
+ margin-bottom: 1em;
+ }
+
+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 { 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; margin-bottom