slight style changes, new entry, new draft

src/assets/js/main-011.js

@@ -1,53 +1,16 @@
 /*! main-011.js: Staydecent.ca website enhancements. (c) Adrian Unger. Public Domain. */
 jQuery(document).ready(function($) {
-
-    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-    * Animated Scroll to Menu                                                *
-    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-
-    var menu_selector = window.location.hash;
-    if (menu_selector) {
-        $("html,body").animate({scrollTop:$(document).height()}, 800);
-    }
-
-    $('#menu-anchor').click(function(e){
-        $("html,body").animate({scrollTop:$(document).height()}, 800);
-        e.preventDefault();
-    });
 
 
     /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
-    * Trigger Scale Animations                                               *
+    * Image Captions                                                         *
     * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
-    $(window).bind('scroll load', function(event) 
-    {
-        var fold = $(window).height() + $(window).scrollTop();
-
-        $('.scale').each(function(i) 
-        {
-            var e = $(this);
-
-            if (fold >= e.offset().top + 100) 
-            {
-                window.setTimeout(function() {
-                    e.addClass('animate');
-                }, i*100);
-            }
-        });
-
-        $('.invisible').each(function(i) 
-        {
-            var e = $(this);
+    $('img[title]').each(function(i,e) {
+        console.log(i,e);
 
-            if (fold >= e.offset().top + 100) 
-            {
-                window.setTimeout(function() {
-                    e.css({
-                        visibility:'visible'
-                    });
-                }, i*300);
-            }
-        });
+        var title = $(e).attr('title');
+        $(e).after('<div class="caption">'+title+'</div>');
+        $(e).next('.caption').fadeIn(500);
     });
 
 });

src/assets/sass/layout.scss

@@ -62,6 +62,12 @@ article .aside,
 .post-navigation {
   margin-top:4em;
   margin-bottom:4em;
+  border-left:4px solid $grayLighter;
+  padding-left:1em;
+
+  .styled {
+    padding-left:1.4em;
+  }
 }
 
 #author {
@@ -261,17 +267,6 @@ blockquote > p {
   font-style:italic;
   color:$gray;
   margin:0;
-
-  &:before {
-    position:absolute;
-    content:"\275D";
-    left:-10px;
-  }
-
-  &:after {
-    content:"\275E";
-    margin-left:4px;
-  }
 }
 
 strong {
@@ -349,4 +344,8 @@ dl {
 
 img {
   max-width:100%;
+}
+
+iframe {
+  border:1px solid $grayLight;
 }

src/assets/sass/modules.scss

@@ -15,6 +15,13 @@
     -webkit-animation:scale 0.6s;
 }
 
+.caption {
+  display:none;
+  font-size:75%;
+  font-style:italic;
+  color:$gray;
+}
+
 // AND SHAPES
 // ----------
 .tag {

src/entries/drafts/2011-12-08-jquery-multiline-text-input/content.txt → src/entries/bits/2012-04-20-jquery-multiline-text-input/content.txt

@@ -1,30 +1,28 @@
 title: jQuery Multiline Text Input
 ---
 
-<p class="intro">A jQuery plugin that replaces a textarea with multiple text inputs, automatically appending a new input when the last is filled with content. On submit, the inputs are combined into a single textarea.</p>
+<p class="big">A jQuery plugin that replaces a textarea with multiple text inputs, automatically appending a new input when the last is filled with content. On submit, the inputs are combined into a single textarea.</p>
 
 I created this plugin as part of a provisionary coding task for an unnamed startup. The idea is to simplify server-side processing while having more control of the user input&mdash;And, hopefully, a better experience for the user. 
 
-![Inspired by Google Profiles](google+screen.png)
+![Screenshot of a similar implementation by Google](http://i.imgur.com/ZBxbt.png "Inspired by Google Profiles")
 
 ## The Concept
 
-Instead of asking a user to enter each item (Ex. Places lived) on a new line or comma separating them within a textarea, each item is entered in an individual text input. But, we want to allow an indefinite amount of items and asking the user to click a button (to add another input) would be annoying =P. So, the plugin intelligently appends an empty text input as soon as the user starts typing the last input.
+Instead of asking a user to enter each item (Ex. Places lived) on a new line or comma separating them within a textarea, each item is entered in an individual text input. But, we want to allow an indefinite amount of items and asking the user to click a button (to add another input) would be annoying. So, the plugin intelligently appends an empty text input as soon as the user starts typing the last input.
 
 *But, how do you know how many inputs need to be processed on the server-side?*
 
 Good question! This is handled by the plugin on the client-side; the plugin combines all of the single line inputs back into a single textarea, with each item on a newline, before submitting the data.
 
 ## Demonstration
 
-Select the "Result" tab in the belwo JSFiddle frame to test-drive a basic example.
+Select the "Result" tab in the below JSFiddle frame to test-drive a basic example.
 
 <iframe style="width: 100%; height: 380px" src="http://jsfiddle.net/dQSNP/5/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 ## Usage
 
-    // Replace a single textarea with multiple text inputs,
-    // each representing a new line.
-    $('textarea.multiline').multilineText();
+`$('textarea.multiline').multilineText();`
 
 Check out the [GitHub Repo](https://github.com/staydecent/jQuery-MultilineText) for more information and to grab the code.

src/entries/drafts/2012-04-19-same-apps-different-marketing/content.txt

@@ -0,0 +1,42 @@
+title: Same Apps, Different Marketing
+---
+
+<p class="big">I recently came across two apps whose core products seemed almost identical, while the marketing was drastically different. Let's take a look!</p>
+
+## Same apps
+
+[Dropmark](//dropmark.com/?ref=staydecent) and [Gimmebar](//gimmebar.com/) both start by saving content from the web. A JavaScript bookmarklet pops open a frame, where you can drag recognizable media from the page. Both, Dropmark and Gimmebar, have private and public *collections*. And, it appears you can have as many collections as you wish.
+
+<div><img src="http://i.imgur.com/gjqyb.png" alt="Comparing the bookmarklets for Dropmark and Gimmebar"></div>
+
+The apps do differ at a closer look: Dropmark can integrate with some desktop apps, and Gimmebar has more organizational features.
+
+## Different marketing
+
+So, hopefully we agree that these apps are pretty darn similar. But, what's *fascinating* is how different their copy is. Dropmark's homepage:
+
+> Dead simple collaboration in the cloud.
+
+And Gimmebar's:
+
+> Save the Web
+
+I'm no copywriter, but there is a *huge* difference here. Gimmebar talks directly about their product and its' features. Dropmark talks about its' targeted user&mdash;They use an interactive slider to showoff the features.
+
+<div><img src="http://i.imgur.com/cm0Cp.png" alt="Dropmark does some namedropping"></div>
+
+After getting passed my initial confusion, Dropmark's slick homepage and targeted copy got me excited about, well, collaborating with clients!
+
+### Let's looks at Gimmebar's copy
+
+I consider pricing as part of a products marketing&mdash;at least for this blog post&mdash;so let's talk about pricing! Both Gimmebar and Dropmark have *pro accounts*. Dropmark offers increased storage (25gb up from 1gb) for $4/month, seems like a good deal. With Gimmebar, you don't get anything in terms of increased storage. Well, not yet at least. Again, Gimme's snarky copy tells us:
+
+> Want to look cool but don’t have access to sunglasses or a popped collar? Why not try our pro badge on for size. Yeah, that looks nice.
+
+You also get a *first-look* at new features and *Mystery Love*. Oh yeah, and that's $2/month.
+
+What's the take-away?
+
+Fuck, no idea. Perhaps, highlights the importance of marketing. Specifically copywriting. Gimmebar being light-hearted, snarky, perhaps silly. But, service is serious. Dropmark talks in direct, business way: they speak to *productive people and teams*.
+
+In any case, both Dropmark and Gimmebar are worthwhile apps. I personally stuck with Gimmebar as it has more organizational prowess.