The online home of John Pollard

Making a JQuery Slideshow

I've been trying to learn more about jQuery recently, and had an opportunity to try to figure out how to make a slideshow on my friend Josie's web site.

Josie has been trying to show how she paints her fantastic pictures by taking a photo every hour during the creation process. We've been thinking for a while on how best to show this on the website, and decided on making a slideshow to animate the images as there are over 60 in the set!

Searching on the web, there are a lot of JQuery slideshows out there of differing quality, so I was very happy when I found a fantastic article by Jonathan Snook, that not only documented a simple but effective slideshow, but also explained how it worked.

You can see the complete code in the slideshow at http://www.josiemccoy.co.uk/gallery/hourlypictures.aspx, but basically it can all be done in a couple of lines of code which reorders the stack of images (which have been all placed on top of each other) dynamically.

I amended the code slightly by adding in a "pause" and "play" button via a simple boolean variable, and am pretty happy with the results.

I added the code to Gist if you want to use, improve, extend - and it turns out Posterous will automatically embed inline if I just include the Gist URL:

 

Jonathan's code is very elegant, so as well as coming up with a pretty simple solution I also learnt a lot about image handling and transitions in JQuery.

Just for fun, here's the completed picture of LeeLoo - Milla Jovovich from The Fifth Element:

Moving from Mercurial to Git

For a while now I've been keeping my personal code repositories on BitBucket - which I'm really happy with - and using Mercurial as my source control tool of choice.

However since Bitbucket started also supporting Git - and that's what all the cool kids seem to be using nowadays - I'd thought I'd switch all my code over to Git to see what all the fuss is about.

Converting from Mercurial to Git

There are plenty of tools that in theory should help to export Mercurial changelist details to Git. However most of them didn't seem work very well on Windows, and the couple of things I tried didn't really work, so I was a bit stymied.

It's also slightly surprising that BitBucket don't offer tools to do Mercurial->Git the conversion, but to be honest I haven't drilled into the details and maybe it's not so straightforward?

After pondering for a bit, I decided to recreate my existing Mercurial repositories in Git by manually creating a new Git repository, then simply adding in the latest version of all the files.

There's an obvious drawback in what I did - I lost all of the change history of the existing Mercurial projects. However I decided there was really little of value for me as I'm really using Bitbucket just as an offsite backup right now, so it was OK to make the switch.

Using Git for Windows

The main reason I decided to take the plunge and move to Git was the release of what is a great new GitHub for Windows app released recently.

Phil Haack - ex-MSFT and now at GitHub - has a great blog post about what GitHub for Windows does, and another one about how to get it working for non-GitHub repositories, obviously useful for getting setup with the BitBucket repositories.

Other than a few issues with initialising the local repositories using the drag and drop functionality from Explorer which intermittently crashed the program - I think it was because they were initially empty - it all worked very smoothly.

The tool is very simple to use, and much easier than the command-line utilities I was used to in Mercurial, although power tools are there under the covers if necessary.

If you're using Git on Windows already I'd definitely recommend trying out the GitHub for Windows app, and a couple of days in I'm very happy I've made the move from Mercurial.

My first project on GitHub

Now I was all set, I decided to release my "Bing Translate to English Chrome Extension" on GitHub, just in case anyone was interested in how it worked or wanted to extend how it works. In the unlikely event that's you, feel free to drop me a line as I'm very happy to help in any way I can.

A new app a month? Who was I kidding!

At the start of the year I set myself the ambitious task of trying to ship an app a month for the whole of 2012.

Seeing as it's the start of June and I can just about at a stretch say I've "shipped" two projects I think we can safely say this isn't going to happen.

I've been extremely busy as ever in my day job, and to be honest there just aren't enough hours in the day - well not enough I'm willing to spend! - to be able to ship something of quality every single calendar month.

Therefore I'm calling a halt to this fruitless quest, more to take the pressure off me so I can get on with doing some interesting things without any artificial deadlines in place.

I have been doing a few quite interesting bits and pieces in the last few months I will share on here, and for certain try to blog more regularly on what I'm up to.

 

Shipped Weight Tracker Facebook App

It's now nearly at the end of February and it's abundantly clear that it's really hard to keep shipping apps at the rate of one a month whilst working in the evenings :-(

Anyway, what I have done this month - which I'm going to claim in a loophole sort of way - is shipped my Weight Tracker Facebook App

The app is very simple; it uses Facebook's Open Graph to record your weight in pounds on the date you specify. I've also added a page where you can retrieve all your entries so you can see the progress of your diet (or not), and use the Google Chart Tools to make a nice graph of the figures.

Why it's a bit of a cheat in the app-per-month stakes is I did most of the work a few weeks ago, but had to wait for Facebook to approve the Open Graph extensions before the world could see the results on my timeline - and of course use the app themselves if they want. After one false start where I hadn't registered the correct icons for the app on the developer website, it went live this week.

The Open Graph development environment was pretty straightforward to both use and setup once I'd read through the documentation. The whole point of the app was really to learn about the capabilities of the platform, but also to make sure I keep sharing information about my ongoing diet!

I also like the way it was pretty easy to add in summary views on the data, so I can see both the latest weight and the lowest weight on my Facebook timeline with very little extra effort.

A whole load of useful dev resources

I've been thinking hard about which out of my long list of half-baked ideas to commit to next. I do have a reasonable plan now - more of which next week - but this week has been more about learning about several very useful open source frameworks I'll be using in the future.

Windows Phone Resources

Most useful of all was a fantastic post by Scott Hanselmann on his first Windows Phone app, which had loads of interesting tidbits, in particular the following resources:

Little Watson

A great generic error handling library to help report issues in the app, as the error reports on the Create MSDN site can be a little obscure sometimes.

YourLastAboutDialog

A beautiful framework for creating simple but useful about dialog pages. Will definitely be using this.

If you're doing any Windows Phone development at all, you should definitely check out the whole of Scott's post.

Agfx App and Data Caching Framework

Many of the ideas I've had involve using data from the Internet in some way, and the occasionally connected nature of such devices means a reliable caching layer essential.

I'd been thinking of writing my own such store, but happily before I really got started I found the AgFx Windows Phone App and Data Caching Framework on Codeplex, which looks like exactly what I need. I'll let you know how that works out in later posts.

Other Cool Things I've Learnt This Week

Bootstrap Update

The Brave Location website is built using the Bootstrap Framework, an excellent set of resources built by some developers from Twitter.

The only downside I found was that the layouts weren't particularly responsive, so didn't look fantastic on mobile phones.

However the latest version (2.0) has added much better support for adjusting the page based on the current size, and apart from a few ongoing glitches with the navbar, the site now works very well on smaller resolutions now.

Markdown and MarkdownPad

I also just realised that Posterous - where I'm hosting this bog - supports Markdown, an easy text-based way of writing than can easily be turned into simple HTML.

My posts both on here and on my personal blog are tending to be a bit longer than usual, and to be honest I haven't found a web-based HTML editor yet that isn't a bit painful to use.

Therefore using Markdown makes it much easier to use any text-based editor to write the posts offline, and I'm also trying out the so far very useful MarkdownPad to do my writing in (using it right now for this post)

Week 5 Summary

To be honest I'm finding it hard - as expected - to keep up the momentum of an app a month when I'm pretty much maxed out in my day job. However I do like my next app idea - especially as it could provide a framework for a whole class of similar apps going forward.