Blog

iWeb CSS developers are now using CSS sprites for adding graphical buttons and headings to websites, including the National STEM Centre elibrary. STEM is also the first project which we have started extensively using SVN branches to allow simultaneous development of new functionality.  Here is what we have learnt about getting the two to play together nicely.

When new functionality requires a new button or heading to be added to a sprite it gets added to the image that is checked out in the CSS developers branch.  They will add the new image to the bottom, to prevent having to alter any CSS for the other images.  The work gets committed and all seems fine and dandy.  Meanwhile another developer, working on a different set of features on a different branch may also need to add some buttons and headings to the images.  They will add them to the bottom of their image and commit to their branch.

When these branches need to be merged together, the images should conflict.  However, as they are binary files, svn cannot compare them or attempt to merge them.  What actaually happens is it will overwrite the oldest one with the newest one.  If the person merging isn’t paying close attention, this can be missed and bits of the image go missing.

By carefully checking files after a merge, you can sport that there are, in fact, two versions of the same image.  There is no way to resolve this other than manually editing the image to add all the required headings from both versions.  Whichever way you do this, it is going to break someones CSS code – more headaches!

To protect my own sanity, I came up with the idea of making the images directory an svn external.  This means it is a separate svn checkout which is pointed to from the main checkout.  As soon as a change to an image is committed, is is available to all the other developers regardless of which branch they are working on.  Hurray, no more having to merge images!