masonry post

brack3t · Dec 3, 2012 · 9dabea6 · 9dabea6
1 parent 1df659b
commit 9dabea6
Show file tree

Hide file tree

Showing 12 changed files with 749 additions and 4 deletions.
diff --git a/archives.html b/archives.html
@@ -118,6 +118,13 @@ <h3>November</h3>
 
             </ul>
 
+            <h3>December</h3>
+            <ul>
+
+                <li><a href="masonry-infinite-scrolling-and-django.html">Masonry, Infinite Scrolling, and Django</a></li>
+
+            </ul>
+
 
 
             </div>

diff --git a/author/kenneth.html b/author/kenneth.html
@@ -107,6 +107,18 @@ <h2>Kickstarting</h2>
 <p>Starting a Kickstarter takes a lot longer than most ...</p></div> <a class="" href=".././getting-started-with-django-kickstarter.html">more &rarr;</a>
     </article>
 
+    <article>
+        <header>
+            <h1><a href=".././masonry-infinite-scrolling-and-django.html" class="slabtext">Masonry, Infinite Scrolling, and Django</a></h1>
+            <h6><span class="permalink">Published: <a  href=".././masonry-infinite-scrolling-and-django.html">12-03-2012</a></span>
+<span class="author">by <strong>Kenneth</strong></span>
+<span class="tags">tags: <a href=".././tag/django.html">django</a> <a href=".././tag/javascript.html">javascript</a> </span>
+
+</h6>
+        </header>
+        <p>For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the <a class="reference external" href="http://masonry.desandro.com">Masonry</a> jQuery plugin ...</p> <a class="" href=".././masonry-infinite-scrolling-and-django.html">more &rarr;</a>
+    </article>
+
     <article>
         <header>
             <h1><a href=".././not-exactly-tim-the-enchanter.html" class="slabtext">Not Exactly Tim the Enchanter</a></h1>

diff --git a/category/posts.html b/category/posts.html
@@ -65,6 +65,18 @@ <h1><a href="/">Brack3t</a></h1>
 
 
 
+    <article>
+        <header>
+            <h1><a href=".././masonry-infinite-scrolling-and-django.html" class="slabtext">Masonry, Infinite Scrolling, and Django</a></h1>
+            <h6><span class="permalink">Published: <a  href=".././masonry-infinite-scrolling-and-django.html">12-03-2012</a></span>
+<span class="author">by <strong>Kenneth</strong></span>
+<span class="tags">tags: <a href=".././tag/django.html">django</a> <a href=".././tag/javascript.html">javascript</a> </span>
+
+</h6>
+        </header>
+        <p>For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the <a class="reference external" href="http://masonry.desandro.com">Masonry</a> jQuery plugin ...</p> <a class="" href=".././masonry-infinite-scrolling-and-django.html">more &rarr;</a>
+    </article>
+
     <article>
         <header>
             <h1><a href=".././getting-started-with-django-kickstarter.html" class="slabtext">Getting Started with Django Kickstarter</a></h1>

diff --git a/feeds/all-en.atom.xml b/feeds/all-en.atom.xml
diff --git a/feeds/all.atom.xml b/feeds/all.atom.xml
diff --git a/feeds/posts.atom.xml b/feeds/posts.atom.xml
diff --git a/index.html b/index.html
@@ -65,6 +65,18 @@ <h1><a href="/">Brack3t</a></h1>
 
 
 
+    <article>
+        <header>
+            <h1><a href="./masonry-infinite-scrolling-and-django.html" class="slabtext">Masonry, Infinite Scrolling, and Django</a></h1>
+            <h6><span class="permalink">Published: <a  href="./masonry-infinite-scrolling-and-django.html">12-03-2012</a></span>
+<span class="author">by <strong>Kenneth</strong></span>
+<span class="tags">tags: <a href="./tag/django.html">django</a> <a href="./tag/javascript.html">javascript</a> </span>
+
+</h6>
+        </header>
+        <p>For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the <a class="reference external" href="http://masonry.desandro.com">Masonry</a> jQuery plugin ...</p> <a class="" href="./masonry-infinite-scrolling-and-django.html">more &rarr;</a>
+    </article>
+
     <article>
         <header>
             <h1><a href="./not-exactly-tim-the-enchanter.html" class="slabtext">Not Exactly Tim the Enchanter</a></h1>

diff --git a/masonry-infinite-scrolling-and-django.html b/masonry-infinite-scrolling-and-django.html
diff --git a/posts/django-masonry-infinite-scrolling.rst b/posts/django-masonry-infinite-scrolling.rst
@@ -4,7 +4,6 @@ Masonry, Infinite Scrolling, and Django
 
 :author: Kenneth
 :tags: django, javascript
-:status: draft
 
 For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the Masonry_ jQuery plugin and infinite scrolling, in the vein of Pinterest_. Turns out, this is remarkably easy with Django's ListView_ and the `Infinite Scroll`_ plugin from Paul Irish.
 

diff --git a/tag/django.html b/tag/django.html
@@ -65,6 +65,18 @@ <h1><a href="/">Brack3t</a></h1>
 
 
 
+    <article>
+        <header>
+            <h1><a href=".././masonry-infinite-scrolling-and-django.html" class="slabtext">Masonry, Infinite Scrolling, and Django</a></h1>
+            <h6><span class="permalink">Published: <a  href=".././masonry-infinite-scrolling-and-django.html">12-03-2012</a></span>
+<span class="author">by <strong>Kenneth</strong></span>
+<span class="tags">tags: <a href=".././tag/django.html">django</a> <a href=".././tag/javascript.html">javascript</a> </span>
+
+</h6>
+        </header>
+        <p>For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the <a class="reference external" href="http://masonry.desandro.com">Masonry</a> jQuery plugin ...</p> <a class="" href=".././masonry-infinite-scrolling-and-django.html">more &rarr;</a>
+    </article>
+
     <article>
         <header>
             <h1><a href=".././not-exactly-tim-the-enchanter.html" class="slabtext">Not Exactly Tim the Enchanter</a></h1>

diff --git a/tag/javascript.html b/tag/javascript.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>brack3t</title>
+    <meta name="description" content="">
+    <meta name="author" content="Brack3t, aka Kenneth Love and Chris Jones">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/ico" href=".././brack3t-theme/assets/favicon.ico">
+    <link href=".././feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="brack3t ATOM Feed">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <!-- Le styles -->
+    <link href="http://fonts.googleapis.com/css?family=Exo:200,300,500,700,900,200italic,300italic,500italic,700italic,900italic" rel="stylesheet">
+    <link href=".././brack3t-theme/assets/bootstrap/css/bootstrap.css" rel="stylesheet">
+    <link href=".././brack3t-theme/assets/github.css" rel="stylesheet">
+    <link href=".././brack3t-theme/assets/bootstrap/css/brack3t.css" rel="stylesheet">
+    <script>
+    var _gaq = _gaq || [];
+    _gaq.push(["_setAccount", "UA-4642386-4"]);
+    _gaq.push(["_trackPageview"]);
+
+    (function() {
+        var ga = document.createElement("script"); ga.type = "text/javascript"; ga.async = true;
+        ga.src = ("https:" == document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js";
+        var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ga, s);
+    })();
+</script>
+
+  </head>
+
+  <body>
+
+    <div class="container">
+        <div class="row-fluid">
+            <div class="span8">
+                <header id="logo" role="banner">
+                    <h1><a href="/">Brack3t</a></h1>
+                    <p>Two guys&hellip; and Python.</p>
+                </header>
+            </div>
+            <aside class="span2" id="sidebar" role="complementary">
+                <nav>
+                    <ul class="unstyled">
+
+
+
+
+                        <li><a href=".././pages/projects.html">Projects</a></li>
+                        <li><a href=".././archives.html">Archives</a></li>
+                        <li><a href=".././tags.html">Tags</a></li>
+                    </ul>
+                </nav>
+            </aside>
+        </div>
+
+        <div class="row-fluid">
+            <div class="span7 offset1" id="main" role="main">
+
+
+
+
+
+    <article>
+        <header>
+            <h1><a href=".././masonry-infinite-scrolling-and-django.html" class="slabtext">Masonry, Infinite Scrolling, and Django</a></h1>
+            <h6><span class="permalink">Published: <a  href=".././masonry-infinite-scrolling-and-django.html">12-03-2012</a></span>
+<span class="author">by <strong>Kenneth</strong></span>
+<span class="tags">tags: <a href=".././tag/django.html">django</a> <a href=".././tag/javascript.html">javascript</a> </span>
+
+</h6>
+        </header>
+        <p>For my current client, we needed a home page that would support a large number of products (it's an ecommerce startup) and, in our first iteration of the new design, deal with content blocks of various sizes. To me, this was a perfect use-case for the <a class="reference external" href="http://masonry.desandro.com">Masonry</a> jQuery plugin ...</p> <a class="" href=".././masonry-infinite-scrolling-and-django.html">more &rarr;</a>
+    </article>
+
+
+
+
+
+
+            </div>
+        </div>
+        <footer><p>&copy; Brack3t. All rights reserved. <a href=".././feeds/all.atom.xml">ATOM feed</a></p></footer>
+    </div> <!-- /container -->
+
+    <!-- Le javascript
+    ================================================== -->
+
+    <!-- Placed at the end of the document so the pages load faster -->
+    <script src=".././brack3t-theme/assets/jquery-1.8.2.min.js"></script>
+    <script src=".././brack3t-theme/assets/modernizr.js"></script>
+    <script src=".././brack3t-theme/assets/jquery.slabtext.min.js"></script>
+    <script src=".././brack3t-theme/assets/jquery.fittext.js"></script>
+    <script src=".././brack3t-theme/assets/highlight.pack.js"></script>
+    <script>
+        $(function() {
+            $(".slabtext").slabText({
+                "maxFontSize": 200,
+                "viewportBreakpoint": 768
+            });
+            $(".highlight pre").each(function(i, e) {hljs.highlightBlock(e, "    ")});
+        });
+    </script>
+  </body>
+</html>
diff --git a/tags.html b/tags.html
@@ -76,6 +76,8 @@ <h1><a href="/">Brack3t</a></h1>
 
         <li><a href="./tag/django-crispy-forms.html">django-crispy-forms</a></li>
 
+        <li><a href="./tag/javascript.html">javascript</a></li>
+
         <li><a href="./tag/tip.html">tip</a></li>
 
         <li><a href="./tag/CBVs.html">CBVs</a></li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -118,6 +118,13 @@ <h3>November</h3> @@
                 </ul>
+                <h3>December</h3>
+                <ul>
+                    <li><a href="masonry-infinite-scrolling-and-django.html">Masonry, Infinite Scrolling, and Django</a></li>
+                </ul>
                 </div>
@@ Expand Down @@