Winston{yw}

Google Ajax Libraries API which hosts a few of the common open source frameworks like jQuery (and UI), Prototype, MooTools and others was launched earlier this year, and I was excited about the performance boost which it promised.

Basically, the libraries are hosted on the Google infrastructure and common obstacles such as caching and gzipping of these Ajax libraries are handled by the Google engineers. The API is also kept up-to-date with the latest stable release of each Ajax library, and by default, serves the minified version. Of course, there’s also an option to use an uncompressed version for development purposes.

As my WordPress is on shared hosting, I don’t have the luxury of setting up a cache or gzipping my files, and so there’s always been a performance issue with my blog. Therefore, any form of optimization could go a long way in making my blog’s loading experience more pleasant, and so I figured that the Google Ajax Libraries API should be able to help in some way; moreover, Google has a wide CDN and their servers are fast.

To use Google’s Ajax Libraries API is simple, as illustrated on Google’s Ajax Search API blog and Ajaxian, and I made the switch in just 5 minutes for the jQuery framework which I am using on this blog.

Previously, I was including the jQuery packed script which was hosted on my domain, but now I am including the Google’s Ajax Libraries API:

<!-- Previously -->
<!-- <script type="text/javascript" src="js/jquery-1.2.6.pack.js"> -->

<!-- Google's Ajax API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Why was I using the packed version? Because, I cannot do gzip on my shared hosting and without that, the packed version is smaller in size as compared to the minified version.

In my other external javascript file that contains my jQuery codes, this was how it looked like:

$(function(){
  //Line 1
  //Line 2
  //...
})

Now, I need to first load jQuery using the API which has smart versioning feature, then replace jQuery’s DOM ready function with Google’s on page load function. The internals, or codes, remain the same.

google.load("jquery", "1");
google.setOnLoadCallback(function(){
  //Line 1
  //Line 2
  //...
});

That’s it! I am done! Testing the response time via YSLOW with Firebug:

• jQuery on www.winstonyw.com: Average of 700ms, 31K (No gzip)
• jQuery on Google: Average of 150ms, 16.7K (With gzip)

Are you going to make the switch and improve your users’ experience?

A few days ago, I found a JQuery selector that can be used to select the first visible form input element on a page:

$(':input:visible:enabled:first')

This selector can further be used to focus on the first form input element on page load, as seen in the following code snippet:

$(function () {
  $(window).load(function () {
    $(':input:visible:enabled:first').focus();
  });
})

In the code snippet above, I placed the focus event call inside the load function (bounded to the window element) so that the focus event fires when the browser finishes loading all content within a document, including window, objects and images. Initially though, I had excluded the load function and had placed the focus event call within only the DOM ready function, but it failed to work.

This simple trick is great for usability, as the user can start filling up a form right away without any additional mouse clicks or key strokes, since the cursor would appear in the first form input element once the page has finished loading.

Google and Yahoo, for example, focus the user’s cursor in their search box on page load so that the user can start a search conveniently. In their industry where every search counts towards achieving their business goals, such usability enhancement, though small and subtle, can make a difference.

However, do note that this may only be good for pages that need to focus the user’s attention on a form’s input field, or for pages whose primary content is a form. Else, it becomes more of an annoyance to find the cursor focused on some obscure form input field on every page load.

Background

During the conceptualization stages of Winston{YW}, I was inspired by Antonio and so, I wanted my WordPress blog to have a Delicious Count Button on each post too. Ideally, this Delicious Count Button could be used to bookmark the post in Delicious, and at the same time, display the number of times the post has been bookmarked on Delicious.

By referring to the new Delicious API, I managed to build this Delicious Count Button with JQuery, and I even styled it to match the looks of the Digg button. Now, I shall go through the process of building this Delicious Count Button for your WordPress blog. See a DEMO here.

Step 1: The Button Image

Browse to the image on Digg’s website. “Right Click” the image, and “Save Image As”. Place the image in your theme’s IMAGES directory.

Step 2: The HTML

You should be familiar with The Loop in WordPress. Copy this snippet of HTML into The Loop; place it where you would like to have this Delicious Count Button.

<div class='post_delicious'>
  <span class='md5hash'><?php echo md5(get_permalink()); ?></span>
  <a href='http://del.icio.us/post?v=4&amp;noui&amp;jump=close&amp;url=<?php the_permalink() ?>&amp;title=<?php echo urlencode(the_title('','',FALSE)) ?>' target='_blank'>Del.icio.us</a>
</div>

This snippet of code sets up a DIV that contains a SPAN and an ANCHOR. The SPAN is where the magic occurs as the content would be replaced by a count of the number of times your post has been bookmarked on Delicious through the use of JQuery. The content in the SPAN tag is actually a MD5 hash of the permalink of the post, which is used as an unique key to query the Delicious API for details of this post. The ANCHOR is a link which contains the necessary parameters, populated by the details of each post, to submit the post to Delicious.

Step 3: The CSS

Copy this snippet of CSS into the CSS file, which should be styles.css for most WordPress themes. This would style the DIV which you copied in Step 2, and make it look like the Digg button.

.post_delicious {
  display: block;
  background: url('images/tiny-submit.gif') no-repeat top right;
  height: 20px;
  width: 85px;
  padding: 2px 45px 0px 0;
  font-family: arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.md5hash {
  display: none;
}

.post_delicious a, .post_delicious a:visited {
  float: right;
  color: #444444;
  text-decoration: none;
}

.post_delicious a:hover {
  color: #0000000;
  text-decoration: underline;
}

Step 4: The JQuery Package

Proceed to download the latest version of JQuery, or use a Google-hosted version of JQuery by reading more about it on the Google AJAX Libraries API. Insert the link to the JQuery package in the HEAD tags of your HTML.

<head>
  <!-- Misc Stuff -->
  <script type='text/javascript' src='<directory_to>/jquery-1.2.6.pack.js'></script>
</head>

Step 5: The JQuery Code

Copy this snippet of JQuery code. Place it either in the HEAD tags of your HTML, or at the bottom of your HTML, just before the closing HTML tag.

<script type='text/javascript'>
  $(function() {

    $.each($('span.md5hash'), function () {
      var elem = $(this);
      $.ajax({ type:      'GET',
               dataType:  'jsonp',
               url:       'http://feeds.delicious.com/v2/json/urlinfo/'+$(this).html(),
               success:   function(data){
                            if (data.length > 0) {
                              elem.next().prepend(data[0].total_posts + ' ');
                            }
                          }
            });
    });

  })
</script>
</script>

This is the MAGIC! Once your blog is loaded in a browser, this snippet of code scans for all the SPAN tags that has the class “md5hash”, and for each SPAN tag found (which should be one per post), it issues an AJAX request to the new Delicious API to obtain details of the post.

On the return of the AJAX request, the content in the SPAN tag (which is the MD5 hash of the permalink) is then replaced with a count of the number of times the post has been bookmarked on Delicious.

Conclusion

Finally, upload your changes and with that, you have successfully placed a Delicious Count Button on each of your posts! I hope you find this post useful, and do let me know in the comments if you have any questions or encounter any problems.