Permalink
Browse files

slight style changes, new entry, new draft

  • Loading branch information...
1 parent 9ee79c4 commit add4853f197c7a1749d3c4b87e5f8ef40f1f56f3 @staydecent committed Apr 20, 2012

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -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);
});
});
@@ -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;
}
@@ -15,6 +15,13 @@
-webkit-animation:scale 0.6s;
}
+.caption {
+ display:none;
+ font-size:75%;
+ font-style:italic;
+ color:$gray;
+}
+
// AND SHAPES
// ----------
.tag {
@@ -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.
@@ -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.

0 comments on commit add4853

Please sign in to comment.