Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Whatever

  • Loading branch information...
commit 16937986e489a1dec52963452af07adf97c02fab 1 parent 6c5b8ae
@thomasdavis authored
Showing with 3,783 additions and 911 deletions.
  1. +17 −45 _layouts/default.html
  2. +2 −13 _layouts/post.html
  3. +23 −135 _site/2011/02/01/backbone-introduction.html
  4. +20 −62 _site/2011/02/05/backbone-views-and-templates.html
  5. +35 −141 _site/2011/02/07/making-a-restful-ajax-app.html
  6. +21 −75 _site/2011/03/04/jquery-create-your-own-deferred.html
  7. +19 −108 _site/2011/03/07/anonymous-functions.html
  8. +21 −71 _site/2011/07/05/is-the-internet-an-extension-of-human-memory.html
  9. +17 −67 _site/2011/07/07/the-elevator-scene.html
  10. +20 −69 _site/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html
  11. +17 −44 _site/about.html
  12. +328 −0 _site/css/debugCSS.css
  13. +280 −0 _site/css/grid.css
  14. +15 −0 _site/css/icons.css
  15. +269 −0 _site/css/normalize.css
  16. +4 −0 _site/css/styles.css
  17. +66 −0 _site/css/theme.css
  18. BIN  _site/img/backbone.png
  19. BIN  _site/img/cdnjs.png
  20. BIN  _site/img/inflicted.png
  21. BIN  _site/img/protosal.png
  22. BIN  _site/img/whitediamond.png
  23. +63 −58 _site/index.html
  24. +1,489 −0 _site/packages.json
  25. +23 −3 _site/slides/requirejs/index.html
  26. +24 −4 _site/slides/requirejs/index.md
  27. +328 −0 css/debugCSS.css
  28. +280 −0 css/grid.css
  29. +15 −0 css/icons.css
  30. +269 −0 css/normalize.css
  31. +4 −0 css/styles.css
  32. +66 −0 css/theme.css
  33. BIN  img/backbone.png
  34. BIN  img/cdnjs.png
  35. BIN  img/inflicted.png
  36. BIN  img/protosal.png
  37. BIN  img/whitediamond.png
  38. +47 −16 index.html
  39. +1 −0  thomas
View
62 _layouts/default.html
@@ -1,55 +1,27 @@
-<!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>{{ page.title }}</title>
- <meta name="author" content="Thomas Davis" />
+
- <!-- syntax highlighting CSS -->
- <link rel="stylesheet" href="/css/syntax.css" type="text/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>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
-<div style="float: right; width: 400px;">Editing today, don't judge =D</div>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- {{ content }}
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+{{ content }}
</div>
</div>
View
15 _layouts/post.html
@@ -1,7 +1,8 @@
---
layout: default
---
-<div id="post">
+<a href="/">Back to home</a>
+<br />
{{ content }}
<div id="disqus_thread"></div>
@@ -19,15 +20,3 @@
<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">
- {% for post in site.related_posts limit:3 %}
- <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li>
- {% endfor %}
- </ul>
-</div>
--->
View
158 _site/2011/02/01/backbone-introduction.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>
@@ -63,42 +36,14 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>Liquid error: undefined method `join&#8217; for #<String:0x1016544e0></p>
<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>Liquid error: undefined method `join&#8217; for #<String:0x101654030></p>
<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>
@@ -106,52 +51,11 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
+<p>Liquid error: undefined method `join&#8217; for #<String:0x101653ba8></p>
<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>
+ <a href="https://github.com/thomasdavis/thomasdavis.github.com/tree/master/examples/backbone-101">Source</a><br />
+ <br />
+h3. Conclusion</h2>
<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>
@@ -174,22 +78,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
82 _site/2011/02/05/backbone-views-and-templates.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>
@@ -57,8 +30,9 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>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.<br />
+ <br />
+h3. passing parent objects to deferred objects</p>
<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>
@@ -79,22 +53,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
176 _site/2011/02/07/making-a-restful-ajax-app.html
@@ -1,61 +1,36 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>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.<br />
+ <br />
+ <br />
+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><br />
+ <br />
+h3. Benefits of Thin Server Architecture</p>
<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>
@@ -66,93 +41,28 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>Possibly one of the funnest parts is choosing an ajax loading graphic, I always use this <a href="http://ajaxload.info/">site</a>.<br />
+ <br />
+h3. Understanding the hash tag</p>
<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>Liquid error: undefined method `join&#8217; for #<String:0x10157ffb0></p>
+<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><br />
+ <br />
+h3. Controlling the Controller</p>
<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>
+<p>Liquid error: undefined method `join&#8217; for #<String:0x10157fb28></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>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 />
+<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.<br />
+ <br />
+ <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()
@@ -174,22 +84,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
96 _site/2011/03/04/jquery-create-your-own-deferred.html
@@ -1,71 +1,33 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>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.<br />
+ <br />
+ 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>Liquid error: undefined method `join&#8217; for #<String:0x10154e960></p>
<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>
@@ -86,22 +48,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
127 _site/2011/03/07/anonymous-functions.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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 />
@@ -59,47 +32,7 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
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>
+<p>Liquid error: undefined method `join&#8217; for #<String:0x10153f5a0></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>
<h3>Conclusion</h3>
@@ -109,13 +42,7 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>Liquid error: undefined method `join&#8217; for #<String:0x10153f118></p>
<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>
@@ -135,22 +62,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
92 _site/2011/07/05/is-the-internet-an-extension-of-human-memory.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>
@@ -56,23 +29,16 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
+<h3>My dilemma<br />
+ <br />
+p. Now this can be most convenient in some circumstances because I can quickly find huge repositories of quality information.</h3>
<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>
+<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></p>
<div id="disqus_thread"></div>
<script type="text/javascript">
@@ -90,22 +56,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
84 _site/2011/07/07/the-elevator-scene.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>
@@ -65,13 +38,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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">
@@ -89,22 +55,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
89 _site/2011/07/10/a-moral-dilemma-on-forgiveness-and-hatred.html
@@ -1,66 +1,33 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <div id="post">
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<a href="/">Back to home</a
<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>
+<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. <br />
+ <br />
+<em>Is there anything I&#8217;m missing?</em></p>
<div id="disqus_thread"></div>
<script type="text/javascript">
@@ -78,22 +45,6 @@ <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
<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>
View
61 _site/about.html
@@ -1,54 +1,27 @@
-<!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 rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" />
- <!-- Typekit -->
- <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
+<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
+<head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>Thomas Davis</title> <meta name="author" content="Thomas Davis" />
+ <link rel="stylesheet" href="/css/styles.css" type="text/css" />
</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">
- <img src="http://en.gravatar.com/userimage/9083995/edbb5edbf89b58bfecd99e3452986f05.jpg?size=70" style="float: left;" />
- <div style="float: left; width: 300px; margin-left: 20px; margin-top: 15px;">
- <h1 style="margin-bottom: 5px;"><a href="/">Thomas Davis</a></h1>
- <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
- </div>
-<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
- <div style="clear: both;"></div>
- </div>
- <div id="content">
- <ul>
+<div class="container">
+ <div class="wrapper span-22 push-1">
+ <div class="header span-20 push-1">
+ <div class="span-14">
+ <h1><a href="http://thomasdavis.github.com">Thomas Davis - Front End Developer</a></h1>
+ <a href="https://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a>
+<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
+ </div>
+ </div>
+ <div class="page span-20 push-1">
+<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>
View
328 _site/css/debugCSS.css
@@ -0,0 +1,328 @@
+/***********/
+/* LICENSE */
+/***********/
+
+/* Copyrights for code authored by Yahoo! Inc. is licensed under the following terms:
+ MIT License
+ Copyright (c) 2011 Yahoo! Inc. All Rights Reserved.
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+/*****************/
+/* WHAT IS THIS? */
+/*****************/
+
+/* debugCSS is meant to be loaded on an existing page to highlight potentially
+ broken, malformed or legacy (X)HTML. Not all "errors" are created equally,
+ so they are color coded to highlight severity. Green is "probably not a big
+ problem", yellow is "worth looking at" and red is "you really should fix
+ this." Red severity is currently not used, but can be made available for
+ future revisions.
+
+ Red: #FF8888;
+ Yellow: #FFFF88;
+ Green: #88FF88;
+*/
+
+/******************/
+/* ERROR MESSAGES */
+/******************/
+
+/* All errors should try to post a message explaining the problem. */
+table:not([summary]):after,
+table > tr:after,
+table th:not([scope]):after,
+table thead td:after,
+table > tbody:first-child:after,
+table > tbody + tfoot:after,
+table > tr:first-child:last-child:after,
+table > tbody > tr:first-child:last-child:after,
+table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):after,
+table[align]:after,
+table[bgcolor]:after,
+table[border]:after,
+table[cellpadding]:after,
+table[cellspacing]:after,
+table[width]:after,
+img:not([alt]):after,
+a:not([href]):after,
+a[href="#"]:after,
+a[href*=javascript\:]:after,
+a[onclick]:after,
+a[onmouseover]:after,
+a[onmouseout]:after,
+label:not([for]):after,
+nav:not([role]):after,
+div[role="img"]:not([aria-label]):after,
+h1 div:after,
+h2 div:after,
+h3 div:after,
+h4 div:after,
+h5 div:after,
+h6 div:after,
+a div:after,
+span div:after,
+html[xmlns] a h1:after, /* Try to select only in XHTML documents (thanks, Thierry). */
+html[xmlns] a h2:after,
+html[xmlns] a h3:after,
+html[xmlns] a h4:after,
+html[xmlns] a h5:after,
+html[xmlns] a h6:after,
+ol > *:not(li),
+ul > *:not(li),
+dl > *:not(dt):not(dd):after,
+form > *:not(fieldset):after,
+fieldset > *:not(legend):first-child:after,
+iframe:not([title]):after,
+center:after,
+u:after,
+font:after,
+map:after,
+b:after,
+i:after,
+blink:after,
+marquee:after {
+ border: 1px solid #000;
+ color: #000;
+ display: block;
+ font-family: helvetica;
+ font-size: 12px;
+ font-style: normal;
+ font-weight: bold;
+ line-height: 1.3em;
+ padding: .1em .3em;
+ position: absolute;
+ text-decoration: none;
+ text-transform: none;
+ z-index: 99999;
+}
+
+/* Each error message will have a color for severity (green, yellow, red) and a
+ message. Even if the content isn't able to be displayed (such as with
+ images), they're used so you can quickly see the message when inspecting the
+ element.
+*/
+
+table:not([summary]):after {
+ background: #88FF88;
+ content: 'Should you have a SUMMARY attribute on your TABLE?';
+}
+
+table > tr:after {
+ background: #FFFF88;
+ content: 'TABLE does not have a TBODY.';
+}
+
+table th:not([scope]):after {
+ background: #88FF88;
+ content: 'Should TH have a SCOPE attribute (ROW or COL)?.';
+}
+
+table thead td:after {
+ background: #88FF88;
+ content: 'Cells in THEAD should be TH.';
+}
+
+table > tbody:first-child:after {
+ background: #88FF88;
+ content: 'Do you need a THEAD or TFOOT?';
+}
+
+table > tbody + tfoot:after {
+ background: #FFFF88;
+ content: 'TBODY should come after TFOOT.';
+}
+
+table > tr:first-child:last-child:after,
+table > tbody > tr:first-child:last-child:after {
+ background: #88FF88;
+ content: 'Only one TR in TABLE. Are you using it for layout?';
+}
+
+table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption):after {
+ background: #FFFF88;
+ content: 'Only THEAD/TFOOT/TBODY/COLGROUP/CAPTION/TR can be children of a TABLE';
+}
+
+table[align]:after,
+table[bgcolor]:after,
+table[border]:after,
+table[cellpadding]:after,
+table[cellspacing]:after,
+table[width]:after {
+ background: #FFFF88;
+ content: 'Element has inline style.';
+}
+
+img:not([alt]):after {
+ background: #FFFF88;
+ content: 'Image does not have an ALT attribute.';
+}
+
+a[href="#"]:after,
+a:not([href]):after {
+ background: #FFFF88;
+ content: 'Anchor tag is # or does not exist - does not degrade gracefully.';
+}
+
+a[href*=javascript\:]:after,
+a[onclick]:after,
+a[onmouseover]:after,
+a[onmouseout]:after {
+ background: #FFFF88;
+ content: 'Inline JS on anchor.';
+}
+
+label:not([for]):after {
+ background: #FFFF88;
+ content: 'Should LABEL have a FOR attribute?';
+}
+
+nav:not([role]):after {
+ background: #FFFF88;
+ content: 'NAV element should have a ROLE attribute.';
+}
+
+div[role="img"]:not([aria-label]):after {
+ background: #FFFF88;
+ content: 'DIV used as image should have ARIA-LABEL.';
+}
+
+h1 div:after,
+h2 div:after,
+h3 div:after,
+h4 div:after,
+h5 div:after,
+h6 div:after,
+a div:after,
+span div:after,
+html[xmlns] a h1:after,
+html[xmlns] a h2:after,
+html[xmlns] a h3:after,
+html[xmlns] a h4:after,
+html[xmlns] a h5:after,
+html[xmlns] a h6:after {
+ background: #FFFF88;
+ content: 'Block level element within inline element.';
+}
+
+ol > *:not(li):after,
+ul > *:not(li):after {
+ background: #FFFF88;
+ content: 'Only LIs can be children of UL or OL';
+}
+
+dl > *:not(dt):not(dd):after {
+ background: #FFFF88;
+ content: 'Only DT/DD can be children of a DL';
+}
+
+form > *:not(fieldset):after {
+ background: #88FF88;
+ content: 'Should you be using a FIELDSET?';
+}
+
+fieldset > *:not(legend):first-child:after {
+ background: #88FF88;
+ content: 'Should your FIELDSET be using a LEGEND?';
+}
+
+iframe:not([title]):after {
+ background: #88FF88;
+ content: 'IFRAME lacks TITLE attribute.';
+}
+
+center:after,
+u:after,
+font:after {
+ background: #FFFF88;
+ content: 'Deprecated tag used.';
+}
+
+/* These may not be "wrong", but let's bug you anyway. */
+map:after {
+ background: #88FF88;
+ content: 'Is MAP appropriate here?';
+}
+
+b:after,
+i:after {
+ background: #88FF88;
+ content: 'Should you be using STRONG or EM?';
+}
+
+blink:after,
+marquee:after {
+ background: #FFFF88;
+ content: 'Should you be using STRONG or EM?';
+}
+
+/******************/
+/* ERROR OUTLINES */
+/******************/
+
+/* In addition to printing the error message next to the element, outline the
+ element so it's easy to spot. Use outline instead of border to avoid
+ messing with the document flow.
+*/
+
+table:not([summary]),
+table th:not([scope]),
+table thead td,
+table > tr:first-child:last-child,
+table > tbody > tr:first-child:last-child,
+table > tbody:first-child,
+form > *:not(fieldset),
+fieldset > *:not(legend):first-child,
+map,
+b,
+i {
+ outline: 5px solid #88FF88;
+}
+
+table > tr,
+table > tbody + tfoot,
+table > *:not(thead):not(tfoot):not(tbody):not(tr):not(colgroup):not(caption),
+table[align],
+table[bgcolor],
+table[border],
+table[cellpadding],
+table[cellspacing],
+table[width],
+img:not([alt]),
+a:not([href]),
+a[href="#"],
+a[href*=javascript\:],
+a[onclick],
+a[onmouseover],
+a[onmouseout],
+label:not([for]),
+nav:not([role]),
+div[role="img"]:not([aria-label]),
+h1 div,
+h2 div,
+h3 div,
+h4 div,
+h5 div,
+h6 div,
+a div,
+span div,
+html[xmlns] a h1,
+html[xmlns] a h2,
+html[xmlns] a h3,
+html[xmlns] a h4,
+html[xmlns] a h5,
+html[xmlns] a h6,
+ol > *:not(li),
+ul > *:not(li),
+dl > *:not(dt):not(dd),
+iframe:not([title]),
+center,
+u,
+font,
+blink,
+marquee {
+ outline: 5px solid #FFFF88;
+}
View
280 _site/css/grid.css
@@ -0,0 +1,280 @@
+/* --------------------------------------------------------------
+
+ grid.css
+ * Sets up an easy-to-use grid of 24 columns.
+
+ By default, the grid is 950px wide, with 24 columns
+ spanning 30px, and a 10px margin between columns.
+
+ If you need fewer or more columns, namespaces or semantic
+ element names, use the compressor script (lib/compress.rb)
+
+-------------------------------------------------------------- */
+
+/* A container should group all your columns. */
+.container {
+ width: 950px;
+ margin: 0 auto;
+}
+
+/* Use this class on any .span / container to see the grid. */
+.showgrid {
+ background: url(src/grid.png);
+}
+
+
+/* Columns
+-------------------------------------------------------------- */
+
+/* Sets up basic grid floating and margin. */
+.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
+ float: left;
+ margin-right: 10px;
+}
+
+/* The last column in a row needs this class. */
+.last { margin-right: 0; }
+
+/* Use these classes to set the width of a column. */
+.span-1 {width: 30px;}
+
+.span-2 {width: 70px;}
+.span-3 {width: 110px;}
+.span-4 {width: 150px;}
+.span-5 {width: 190px;}
+.span-6 {width: 230px;}
+.span-7 {width: 270px;}
+.span-8 {width: 310px;}
+.span-9 {width: 350px;}
+.span-10 {width: 390px;}
+.span-11 {width: 430px;}
+.span-12 {width: 470px;}
+.span-13 {width: 510px;}
+.span-14 {width: 550px;}
+.span-15 {width: 590px;}
+.span-16 {width: 630px;}
+.span-17 {width: 670px;}
+.span-18 {width: 710px;}
+.span-19 {width: 750px;}
+.span-20 {width: 790px;}
+.span-21 {width: 830px;}
+.span-22 {width: 870px;}
+.span-23 {width: 910px;}
+.span-24 {width:950px; margin-right:0;}
+
+/* Use these classes to set the width of an input. */
+input.span-1, textarea.span-1, input.span-2, textarea.span-2, input