Brought to you by LEAP™ 5 and Lasso 9

Twitter, jQuery and LEAP™ 5

Published on

Today I was reminded again about the quiet revolution for the web - jQuery. 

A lot of you might not realize, but so much of the "new web experience" that has made the net so much more accessible for Jane & Joe Public has come about by the widespread adoption of better JavaScript techniques and libraries.

I was reminded because this morning I was looking at the page load times of this blog, and realized it was not set to cache the twitter feed on the right, so it was getting it fresh every time... server-side. That means the server is doing all the work *before* giving the browser the page.

So rather than just turn on the cache, I wanted to add an option to the plugin to get the twitter feed after the page loads.

And here's the beauty of jQuery.

You don't have to reinvent the wheel.

Background

Back in the early days of the "Web 2.0" revolution people started talking about this "xmlhttprequest" thing. It meant that in JavaScript (i.e. in-page) you could go get data from a server somewhere withough having to reload the page all over again. COOL! However if you wanted to use it you had to write your own libraries - this was before jQuery, Prototype, YUI and so on. So I wrote the "AJAX Grail" library. AJAX stands for "Asynchronous Javascript And XML". Worked well, if a little clunky.

Then came along JS libraries like jQuery and Prototype. Libs like jQuery helped with not just AJAX but with cross-browser safe slide-reveals and such - but a lot of us "traditional" coders had seen so many tools make a spash and then fade to dust, never reaching their potential. So we continued to code many of our functions the long way.

I don't know when it really changed for me, but for a long time now the first thing I do when I start a solution is link in a jQuery library, and it will feel strange if I write a function without leveraging jQuery in some way.

So why does all this matter?

The reason is simplicity. 

So the way LEAP™ 5 content plugins work is this: on the admin view of the content you ask for input for values of variables, and then on the public side you use those variables to present the plugin content to the user. Easy.

However often changing the way a plugin will operate on those vars can be a lot of work... The server-side processing and logic choices for presenting interpreting a Twitter feed is actually quite long-winded.

Instead I was blown away at how easy it was to sort this out.

  1. Do the research. It took me longer to research which jQuery Twitter plugin I wanted to use than to do anything else but write this blog post. I found several, so I looked at the examples, the options they gave me, the speed of the libs... and ended up going for the one that had the nicest looking website - how shallow is that?
  2. Include the options in the plugin (things like class, avatar size etc)
  3. Include in the public output the logic to output the JavaScript for the jQuery plugin instead of the server-side. This was a total of 7 lines of code.
  4. Compile and deploy to LEAP™

So the moral of the story is this: Just because it works, doesn't mean it couldn't be better, and if it can be simpler then in the words of Captain Jean-Luc Picard, "Make it so!"

You can see the result on the right-side sidebar of this blog. Might need some CSS cleanup but I'll do that tomorrow :)

comments powered by Disqus