Webby Tricks - JQuery

Since I’ve had such a positive experience with Webby, I’ve decided to blog a little about some stuff I’ve figured out when using webby. I know there are some amount of tutorial I’ve found only for Webby, so I’ll try to not repeat a lot of them. When I constructed this blog using webby, I wanted the dates to be in the format of “2 minutes ago” or “1 month ago,” instead of absolute dates. This cannot be achieved by using webby alone, since these dates can only be changed when the website is build. Thus, a little java script magic is needed. JQuery is a javascript library that allows plugins and has several AJAX functions. In particular, I’m using the Timeago plugin for JQuery. What this javascript does is turn any date you wish on your page into the “timeago” format. It also auto updates itself, so it’s perfect to be used with webby. First you want to follow the links above and download both the plugin and JQuery (go ahead and get the min version). In your main layout page (in the layouts folder), add the following lines between the <head> tags:

1<script src="/scripts/jquery.min.js" type="text/javascript"></script>
2<script src="/scripts/jquery.timeago.js" type="text/javascript"></script>
3<script type="text/javascript">
4  // initialize plugin code
5  jQuery(document).ready(function() {
6  jQuery("abbr.timeago").timeago();
7  });

When using webby, I created a scripts folder in my contents folder to hold my javascripts. That’s why the src of the <scripts> tag is /scripts/jquery.*. After doing this, then the javascript will find all the tags with the following format:

1<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>

into this:

1<abbr class="timeago" title="July 17, 2008">about a year ago</abbr>

which will yields the following: July 17, 2008. Notice the time format in the <abbr> tag must be in an ISO8691 timestamp. When using webby, since you can use the erb filter, there are several ways to turn dates into the correct format. Here I show one way i used:

 1<%  recent = @pages.find(
 2       :limit => 6,
 3       :content_type => 'tumblog',
 4       :sort_by => :created_at,
 5       :reverse => true
 6   )
 7   recent.each do |e| -%>;
 8<li><%= link_to_page(e); %>
 9<div class="date">[ <abbr class="timeago" title="<%= e.created_at.utc.strftime("%Y-%m-%dT%H:%M:%SZ") %>"><%= e.created_at.strftime("%b %d, %Y") %></abbr> ]</div></li>
10<% end -%>  

The above code is what I used for the right column recent entries section. I find all pages that are blog entries, and print out the linke and publish date. In particular, I used the following code to turn webby blog date format to the correct timestamp format. As you can see, all the dates on the right column are parsed into the “timeago” format.

1<%= e.created_at.utc.strftime("%Y-%m-%dT%H:%M:%SZ") %>

As usual, all the source code for this website can be found in my github repository. Feel free to check it out and play with it.

blog comments powered by Disqus

my pic Isaac Liu is currently a software engineer at Apple Inc. working on the iOS performance team. He received his Ph.D in Electrical Engineering and Computer Science at the University of California, Berkeley . His research focus was in real time systems, parallel architectures and programming models. His thesis can be found here
read more…

office 2 Infinite Loop, Cupertino, CA
email liu (dot) isaac (at) gmail (dot) com
cv html / pdf [ updated: 9/05/11 ]
others facebook linkedin twitter picasa github

Recent Blog Entries