Anyway, creating the pipe was easy and using the interface was actually quite fun.  I’m pulling from almost 40 different feeds, filtering for mentions of the Company’s name in both the title, and the articles themselves, and now have one single feed I can now use.  On the web app end I’m using the ever-powerful and omnipotent jQuery to consume the feed in the JSON format.  Now, I’m not going to go in-depth in how this is accomplished, but rather I want to throw out this “gotcha” moment I experienced and hopefully, help at least one of the two people who will ever see this post avoid my mistake.

The JSON link I received from Pipes looked like this: http://pipes.yahoo.com/pipes/pipe.run?_id=[Some_ID]&_render=json.  Now in the jQuery documentation for the getJSON function, it says that in order for cross-domain JSON requests, you must use a JSONP callback by appending a variable to the url’s querystring, which is “callback=?”.  jQuery will then replace the question mark with the correct callback function that will then wrap the JSON object that comes back to your app.  So I created a link that looks like this: http://pipes.yahoo.com/pipes/pipe.run?_id=[Some_ID]&_render=json&callback=?.  That should work right?  Well, at least I thought it should.  (Others with more experience with JSONP callbacks will probably already see where I went wrong.)  Instead of my new aggregated feed in my web app, I got an error from Firebug instead.  The message said “INVALID LABEL”, followed by the JSON string.  Well, I can see that I’m making a JSONP call, or else the error from Firebug would have been “ACCESS TO RESTRICTED URI DENIED” and I wouldn’t be able to see the JSON data.  So the cross-domain call works.  So, then, what’s wrong?  Well, jQuery is trying to parse JSON data as JSONP.  Looking back at the Firebug error, the JSON data that’s returned isn’t wrapped in the JSONP callback, but I know that the callback is being appended to the Pipe’s JSON URL querystring.  What gives?!

Insert an hour or so of misery and woe, as I Google every possible combination of “jQuery”, “JSONP”, “callback”, and “JSONP is teh suxxorz”.  I never found the answer.  Instead, I ended up staring at the Pipe’s JSON URL and I notice something.  Each variable declaration in the Pipe’s URL querystring is prefixed with an underscore.  Could it be that easy?

Yes. We. It. Can.

Enter the new JSON request URL: http://pipes.yahoo.com/pipes/pipe.run?_id=[Some_ID]&_render=json&_callback=?.  Now the request works perfectly.  Why does the callback variable need to be prefixed with an underscore?  Who knows?  Something to do with Yahoo’s processing of the requests I’d guess.

Hopefully, this can help you avoid the sheer frustration this caused me.

It wasn’t until I attended An Event Apart in San Francisco last August that I decided to break down and join though I still didn’t make my first update until September.  One day I decided there had to be more to this web app phenomenon and delved a little deeper into the inner-workings of Twitter.  I found that Twitter is definitely more than meets the eye. [Insert Transformer sound.]  As soon as I read about the API, I absolutely wanted to feed my most recent update to my blog.  It was hardly an original idea, but for me it was a perfect extension to my blog!  Many things often prompt me to complain with never a computer in sight, but my cellphone is my ever constant companion.  With Twitter, my web-based mind-dump is only a few key presses away.  And both of my readers get to see up-to-the-minute updates as I send them.

Twitter’s allure doesn’t stop there however.  In my readings I’ve seen Twitter referred to as “the command line of the internet” by multiple sources.  That is a powerful thing.  It kicked off so many ideas in my head and hopefully I’ll get to make them at some point.  Who wouldn’t want to change their site stylesheet with just a text message?  I’ve also mapped out a mashup between Twitter and Google Charts.  It sounds weird, but really, it’s a good idea, trust me.  I’m also currently working on a Twitter widget for Dashboard, and it’s not exactly focused on the messages.  Stay tuned for that one.

In writing this post, I just wanted to share my love for this humble app.  I get mocked for my devotion to Twitter by my less-than-internet-savvy friends, but I don’t care.  Especially when I used the term “tweet” the other day.  Although now that I think of it, I almost made fun of myself for that one.  Not sure if I was ready for that.  Baby steps.

When I first saw the technique in action, I was blown away by both the simplicity of the technique, as well as the cleverness of it all.  Sometimes at the ol’ 9 to 5, I don’t think I’ll ever have opportunity, let alone the time, to devise and implement such innovation.  While the artistry is not lost on me, I felt the parallax effect could be used somewhere more visible to the masses in order to give a page’s design some sense of motion.  In order to do that, I wouldn’t be able to rely on CSS alone, so I turned to the all-powerful jQuery.

The images

The most important step to any parallax project is definitely the selection of the images.  Being a child of the 80’s with not much more than a Nintendo and big dreams, I had to go with a Super Mario Bros. scene.  Here are the three tranparent PNG images I used, starting with the “distant” sky and clouds, then moving to the “closer” hills and shrubs, and ending with the “nearer” ground, floating blocks and pipes.

The HTML

The HTML is straightforward.  I created a simple unordered list-based navigation with four items with the text of each navigation item being wrapped in a <span> tag.

1
2
3
4
5
6

<ul id="navigation">
    <li><a href="#1"><span>Home</span></a></li>
    <li><a href="#2"><span>About</span></a></li>
    <li><a href="#3"><span>Portfolio</span></a></li>
    <li><a href="#4"><span>Contact</span></a></li>
</ul>

The CSS

We begin first by styling the list and list-items.  Each list item will have the same dimensions as the images, 200 x 500, and since the list item is the most “distant” element in our pseudo-three-dimensional environment it will use the scene that occurs “furthest” from the viewer, the cloud scene.  All of the backgrounds are also repeated along the X-axis in order to give us infinite “scrollability” and animation time.

1
2
3
4
5
6
7
8
9
10

ul#navigation {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul#navigation li {
    width: 200px;
    height: 50px;
    background: url('CloudScene.png') repeat-x;
}

Next we style the next-closest element in our pseudo-three-dimensional environment, the link.  We’ll set the link to fill the entire list item, set the attributes for the link text, and finally, set the link background to the next closest scene, the hills and shrubbery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

ul#navigation li a:link,
ul#navigation li a:visited
ul#navigation li a:hover,
ul#navigation li a:focus,
ul#navigation li a:active {
    display: block;
    width: 200px;
    height: 50px;
    color: #1F1F1F;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    background: url('MiddleScene.png') repeat-x;
}

The final step in implementing the CSS is to style the span element that is nested within the link.  Here, we position the text within the link using padding, and adjust the size of the span to compensate for the padding in order to prevent the span from overstepping its boundaries.  Lastly, we apply the scene closest to the viewer to the background of the span, the ground, blocks, and pipes scene.

1
2
3
4
5
6
7
8

ul#navigation li a span {
    display: block;
    padding: 22px 0 0 30px;
    /* Correct sizing due to text placement */
    width: 170px;
    height: 28px;
    background: url('GroundScene.png') repeat-x;
}

So far…

So far, all we have is a regular navigation block with what appears to be a single image in the background of each item.

The Javascript, or Why I Love jQuery

Here’s where the magic happens, the Javascript.  I probably wouldn’t have even attempted this concept if it wasn’t for jQuery.  If you’re not familiar with jQuery, head on over to the documentation and have a look around.  If you use much Javascript in your projects, I promise, it’ll make your life a whole lot easier.  Let’s take a look at the javascript block and break it down.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<script type="text/javascript">
   $(document).ready(function(){
     $("#navigation > li > a > span")
       .css( {backgroundPosition: "0 0"} )
       .css( "cursor","pointer" )
       .mouseover(function(){
         $(this).stop().animate(
           {backgroundPosition:"-1000px 0"}, 5000);
         $("#navigation > li > a:contains('" + $(this).text() + "')").stop().animate(
           {backgroundPosition:"-500px 0"}, 5000);
         $("#navigation > li:contains('" + $(this).text() + "')").stop().animate(
           {backgroundPosition:"-200px 0"}, 5000);
       })
       .mouseout(function(){
         $(this).stop().animate(
           {backgroundPosition:"0px 0"}, 3000);
         $("#navigation > li > a:contains('" + $(this).text() + "')").stop().animate(
           {backgroundPosition:"0px 0"}, 3000);
         $("#navigation > li:contains('" + $(this).text() + "')").stop().animate(
           {backgroundPosition:"0px 0"}, 3000);
       })
  });
</script>

So we start by setting the span’s background-position CSS property to the coordinates 0,0 just to make sure that the background is where it should be.  I also set the CSS cursor property to pointer, just to make it clear that it’s a link in browsers that still display the default cursor when hovering over our navigation items… I’m looking at you, IE7.  Next, we add the mouse over behavior of our navigation items that animates the backgrounds of each of our layers.

It starts by stopping any animations that may currently be running.  The closest layer, the ground, blocks, and pipes scene then is animated by sliding the background image to the left by 1,000 pixels over a duration of five seconds (5,000 milliseconds).

The second animation that will be running simultaneously is the hills and shrubs scene, that is attached to the link tag.  We’ll use jQuery to select only the link tag that contains the text of the element that is currently in the mouseover state.  This prevents every middle layer throughout our navigation block from animating at the same time.  The background of this element uses the same duration as the top most layer, five seconds, but the background ends up only traveling a distance of 500 pixels, rather than 1,000 pixels, like the span element’s background.  This is where we get the parallax effect.  jQuery animates both layers at the same time, for the same duration, yet the layer “furthest” from the viewer will go more slowly than the the “closest” layer, because it is traveling less distance in the same amount of time.

Finally, we animate the list item layer, or the cloud scene.  Again, we use jQuery selectors to choose the correct list item, give the animation a duration of five seconds, and cause the background image to travel only 200 pixels.

To end the fun, once the mouse has left the navigation item, I’ve added a mouseout function that again ends any animation currently running on each of the navigation items and scrolls the background to it’s starting coordinates of 0,0 over three seconds.  Since they are all offset a different amount of pixels, scrolling back will also have the parallax effect.

Wrapping up

Here’s the final product:

• Home
• About
• Portfolio
• Contact

Does anyone think this effect is useful or necessary?  Or does it just add page bloat that doesn’t serve any useful purpose?  I’m interested to hear what you think, as there was quite the heated discussion over at Paul Annett’s Vitamin article.  At any rate, I think I’ve accomplished my goal of bringing the parallax effect out of the “shadows”, so to speak.