updates

author: Thomas Davis <thomasalwyndavis@gmail.com> 2014-11-14 09:02:55 +1000
committer: Thomas Davis <thomasalwyndavis@gmail.com> 2014-11-14 09:02:55 +1000
commit: 5fe3d858830a88dbcd54fd53ff08f225e48e45cc (patch)
tree: 8cd27c5b65f460f83f40f458d1392797aacb8231 /_site/infinite-scrolling
parent: 3d6bba78f9c0799f88b710809090770f53f3bb75 (diff)
download: backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.zip
backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.tar.gz
backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.tar.bz2
1 files changed, 50 insertions, 80 deletions
diff --git a/_site/infinite-scrolling/index.html b/_site/infinite-scrolling/index.html
index 0351080..1b61fde 100644
--- a/_site/infinite-scrolling/index.html
+++ b/_site/infinite-scrolling/index.html
@@ -5,71 +5,54 @@
    <title>Lightweight Infinite Scrolling using Twitter API - Backbone.js Tutorials</title>
 <link href="/atom.xml" rel="alternate" title="backbone tutorials" type="application/atom+xml">
    <meta name="author" content="Backbone Tutorials" />
-
    <!-- syntax highlighting CSS -->
 
    <!-- syntax highlighting CSS -->
    <link rel="stylesheet" href="/css/syntax.css" type="text/css" />
    
-  <link rel="stylesheet" href="http://cdn.moot.it/1.1/moot.css"/>
    <!-- Homepage CSS -->
-   <link rel="stylesheet" href="/css/bootstrap.css" type="text/css" media="screen, projection" />
+   <link rel="stylesheet" href="//bootswatch.com/sandstone/bootstrap.min.css" type="text/css" media="screen, projection" />
    <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen, projection" />
-   
+   <link href="https://fonts.googleapis.com/css?family=Arvo:400,700&subset=latin" rel="stylesheet" type="text/css">
 
 
    <!-- Typekit -->
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
  
   
-    <script type="text/javascript">
-/* <![CDATA[ */
-    (function() {
-        var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
-        s.type = 'text/javascript';
-        s.async = true;
-        s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
-        t.parentNode.insertBefore(s, t);
-    })();
-/* ]]> */
-</script>
-     <!-- (1) Moot depends on jQuery v1.7 or greater -->
-      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+   
 
 </head>
 <body>
-<div class="container">
 
   <div class="row">
-    <div class="col-lg-12">
-      <div class="navbar" style="margin-top:10px;">
-        <div class="container">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="/">Backbone Tutorials</a>
-          <div class="nav-collapse collapse navbar-responsive-collapse">
-            <ul class="nav navbar-nav">
-              <li class=""><a href="/">Home</a></li>
-             
-            </ul>
-            <ul class="nav navbar-nav pull-right">
-              <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li>
-              <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li>
-            </ul>
-          </div><!-- /.nav-collapse -->
-        </div><!-- /.container -->
-      </div>
 
+      <div class="navbar navbar-default">
+      <div class="container">
+  <div class="navbar-header">
+    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+      <span class="icon-bar"></span>
+    </button>
+    <a class="navbar-brand" href="/">Backbone Tutorials</a>
+  </div>
+  <div class="navbar-collapse collapse navbar-responsive-collapse">
+    <ul class="nav navbar-nav">
+              <li class=""><a href="/">Home</a></li>
 
-    </div>
+    </ul>
+    <ul class="nav navbar-nav navbar-right">
+       <li><a href="http://prerender.io"><strong>Need SEO?</strong></a></li>
+      <li><a href="http://feeds.feedburner.com/BackboneTutorials">Subscribe</a></li>
+      <li><a href="https://leanpub.com/backbonetutorials">Download eBook (.pdf, .MOBI, .ePub)</a></li>
+    </ul>
   </div>
 </div>
 
+</div>
+
 
-<div style=""></div>
 <div class="container">
 <div class="row">
   <div class="col-lg-4">
@@ -79,12 +62,14 @@
       </div>
     
     <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p>
-    </div>
+<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>   
+ </div>
   </div>
   <div class="col-lg-8">
         <h3 >Backbone.js Beginner Video Tutorial</h3>
       <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free.   It is 70mins long and covers everything you need to know when getting started.</p>
-      <a href="http://gum.co/backbone-beginner-screencast" class="btn btn-primary">Watch Video</a>
+      <a href="https://www.youtube.com/watch?v=FZSjvWtUxYk" class="btn btn-primary">Watch Video</a>
   </div>
 </div>
   <div class="container">
@@ -96,9 +81,9 @@
 
 
 <div id="post">
-<h1>Lightweight Infinite Scrolling using Twitter API</h1>
+<h1 id="lightweight-infinite-scrolling-using-twitter-api">Lightweight Infinite Scrolling using Twitter API</h1>
 
-<h2>Getting started</h2>
+<h2 id="getting-started">Getting started</h2>
 
 <p>In this example we are going to build a widget that pulls in tweets and when the user scrolls to the bottom of the widget Backbone.js will re-sync with the server to bring down the next page of results.</p>
 
@@ -108,15 +93,15 @@
 
 <p><em>Note: This tutorial will use <a href="http://backbonetutorials.com/organizing-backbone-using-modules">AMD</a> for modularity.</em></p>
 
-<h2>The Twitter Collection</h2>
+<h2 id="the-twitter-collection">The Twitter Collection</h2>
 
-<p>Twitter offers a jsonp API for browsing tweets.  The first thing to note is that we have to append '&amp;callback?' to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p>
+<p>Twitter offers a jsonp API for browsing tweets.  The first thing to note is that we have to append ‘&amp;callback?’ to allow cross domain Ajax calls which is a feature of <a href="http://en.wikipedia.org/wiki/JSONP">jsonp</a>.</p>
 
-<p>Using the 'q' and 'page' query parameters we can find the results we are after.  In the collection definition below we have set some defaults which can be overridden at any point.</p>
+<p>Using the ‘q’ and ‘page’ query parameters we can find the results we are after.  In the collection definition below we have set some defaults which can be overridden at any point.</p>
 
-<p>Twitter's search API actually returns a whole bunch of meta information alongside the results.  Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection.</p>
+<p>Twitter’s search API actually returns a whole bunch of meta information alongside the results.  Though this is a problem for Backbone.js because a Collection expects to be populated with an array of objects. So in our collection definition we can override the Backbone.js default parse function to instead choose the correct property to populate the collection.  </p>
 
-<div class="highlight"><pre><code class="javascript"><span class="c1">// collections/twitter.js</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// collections/twitter.js</span>
 <span class="nx">define</span><span class="p">([</span>
   <span class="s1">&#39;jquery&#39;</span><span class="p">,</span>
   <span class="s1">&#39;underscore&#39;</span><span class="p">,</span>
@@ -136,24 +121,20 @@
   <span class="p">});</span>
 
   <span class="k">return</span> <span class="nx">Tweets</span><span class="p">;</span>
-<span class="p">});</span>
-</code></pre></div>
-
+<span class="p">});</span></code></pre></div>
 
 <p><em>Note: Feel free to attach the meta information returned by Twitter to the collection itself e.g.</em></p>
 
-<div class="highlight"><pre><code class="javascript"><span class="nx">parse</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">resp</span><span class="p">,</span> <span class="nx">xhr</span><span class="p">)</span> <span class="p">{</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="nx">parse</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">resp</span><span class="p">,</span> <span class="nx">xhr</span><span class="p">)</span> <span class="p">{</span>
   <span class="k">this</span><span class="p">.</span><span class="nx">completed_in</span> <span class="o">=</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">completed_in</span>
   <span class="k">return</span> <span class="nx">resp</span><span class="p">.</span><span class="nx">results</span><span class="p">;</span>
-<span class="p">},</span>
-</code></pre></div>
-
+<span class="p">},</span></code></pre></div>
 
-<h2>Setting up the View</h2>
+<h2 id="setting-up-the-view">Setting up the View</h2>
 
-<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is '.twitter-widget'. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p>
+<p>The first thing to do is to load our Twitter collection and template into the widget module. We should attach our collection to our view in our <code>initialize</code> function. <code>loadResults</code> will be responsible for calling fetch on our Twitter collection. On success we will append the latest results to our widget using our template. Our Backbone.js <code>events</code> will listen for <code>scroll</code> on the current <code>el</code> of the view which is ‘.twitter-widget’. If the current <code>scrollTop</code> is at the bottom then we simply increment the Twitter collections current page property and call <code>loadResults</code> again.</p>
 
-<div class="highlight"><pre><code class="javascript"><span class="c1">// views/twitter/widget.js</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// views/twitter/widget.js</span>
 <span class="nx">define</span><span class="p">([</span>
   <span class="s1">&#39;jquery&#39;</span><span class="p">,</span>
   <span class="s1">&#39;underscore&#39;</span><span class="p">,</span>
@@ -200,28 +181,24 @@
     <span class="p">}</span>
   <span class="p">});</span>
   <span class="k">return</span> <span class="nx">TwitterWidget</span><span class="p">;</span>
-<span class="p">});</span>
-</code></pre></div>
-
+<span class="p">});</span></code></pre></div>
 
 <p><em>Note: <code>triggerPoint</code> will allow you to set an offset where the user has to scroll to before loading the next page</em></p>
 
-<h2>The widget template</h2>
+<h2 id="the-widget-template">The widget template</h2>
 
-<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore's <code>each</code> method.</p>
+<p>Our view above passes into our underscore template the variable tweets which we can simply iterate over with using underscore’s <code>each</code> method.</p>
 
-<div class="highlight"><pre><code class="javascript"><span class="c">&lt;!--</span> <span class="nx">templates</span><span class="o">/</span><span class="nx">twitter</span><span class="o">/</span><span class="nx">list</span><span class="p">.</span><span class="nx">html</span> <span class="o">--&gt;</span>
+<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c">&lt;!--</span> <span class="nx">templates</span><span class="o">/</span><span class="nx">twitter</span><span class="o">/</span><span class="nx">list</span><span class="p">.</span><span class="nx">html</span> <span class="o">--&gt;</span>
 <span class="o">&lt;</span><span class="nx">ul</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&quot;tweets&quot;</span><span class="o">&gt;</span>
 <span class="o">&lt;%</span> <span class="nx">_</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">tweets</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">tweet</span><span class="p">)</span> <span class="p">{</span> <span class="o">%&gt;</span>
 
   <span class="o">&lt;</span><span class="nx">li</span><span class="o">&gt;&lt;%=</span> <span class="nx">tweet</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">&#39;text&#39;</span><span class="p">)</span> <span class="o">%&gt;&lt;</span><span class="err">/li&gt; </span>
 
 <span class="o">&lt;%</span> <span class="p">});</span> <span class="o">%&gt;</span>
-<span class="o">&lt;</span><span class="err">/ul&gt;</span>
-</code></pre></div>
-
+<span class="o">&lt;</span><span class="err">/ul&gt;</span></code></pre></div>
 
-<h2>Conclusion</h2>
+<h2 id="conclusion">Conclusion</h2>
 
 <p>This is a very lightweight but robust infinite scroll example. There are caveats to using infinite scroll in UI/UX so make sure to only use it when applicable.</p>
 
@@ -241,7 +218,8 @@
         <a href="https://plus.google.com/101608559187380638042?rel=author">Google Profile</a>
         <a href="https://twitter.com/neutralthoughts">Twitter</a>
         <a href="https://github.com/thomasdavis">Github</a>
-
+<a href="https://twitter.com/neutralthoughts" class="twitter-follow-button" data-show-count="true">Follow @neutralthoughts</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 </div>
 <div class="panel panel-info">
       <div class="panel-heading">
@@ -264,17 +242,9 @@
   </div>
 
 </div>
-<!-- AddThis Button BEGIN -->
-<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
-<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
-<a class="addthis_button_tweet" tw:count="vertical"></a>
-<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
-<a class="addthis_counter"></a>
-</div>
-<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-520b31815dc3cdc8"></script>
-<!-- AddThis Button END -->
 <script src="//static.getclicky.com/js" type="text/javascript"></script>
 <script type="text/javascript">try{ clicky.init(66406579); }catch(e){}</script>
 <noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66406579ns.gif" /></p></noscript>
+
 </body>
 </html>
author	Thomas Davis <thomasalwyndavis@gmail.com>	2014-11-14 09:02:55 +1000
committer	Thomas Davis <thomasalwyndavis@gmail.com>	2014-11-14 09:02:55 +1000
commit	5fe3d858830a88dbcd54fd53ff08f225e48e45cc (patch)
tree	8cd27c5b65f460f83f40f458d1392797aacb8231 /_site/infinite-scrolling
parent	3d6bba78f9c0799f88b710809090770f53f3bb75 (diff)
download	backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.zip backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.tar.gz backbonetutorials-5fe3d858830a88dbcd54fd53ff08f225e48e45cc.tar.bz2