Lots of things going on in my life lately and the blog was put on the back burner but nevertheless a friend asked me for an explanation of a technology which inspired me to post (which I plan on doing more of).

I was asked by a designer friend recently if I had heard of Subversion and if I thought it was useful. He had read some things about it and didn’t get the point of it.  I am by no means an expert but my former company was using it and I’m currently using it at the office so I shared my experience. I’ll bold key Subversion (SVN) terms throughout the article so the lingo gets included as well.

I will say that Subversion is not new, it has been around for a number of years but I think this post might be important to either new designers or maybe designers that avoided subversion in the past because it seemed more of a programmer’s thing.

At the end of the day SVN is like having a remote server (Repository) that you store your text based files ( html, css, js, php, as, etc) and every time you store (make a Commit) them to the repository it stores the changes in the file as individual snapshots (Revisions). 

When you start a project in svn you usually build the repository and import any existing files you have ( so if you have your sliced images and folder structure you would bring that in). Then on your local computer you setup a working directory, this is where SVN will monitor changes. So you can make changes in this directory ( I use a subdirectory in my localhost) and edit the files with Coda or DW or whatever you fancy.

Now in the past you had to have SVN running on a server and it had to be setup properly, I could see how this probably turned most designers off. Now there are a couple of Hosted SVN systems, I use Beanstalk but there are a few others Springloops, Google Code and Warehouse these make setting up a repository a breeze. 

So for an example you and a colleague are working on a WordPress theme or a new client site but you are nearing the end of the dev cycle and both have the CSS file(s) open making changes for different parts of the project. What SVN prevents is you overwriting their changes while helping you merge your changes all the while keeping a history of each file.

So you make the changes and try to commit to the repository you will get a conflict, as I said I use Beanstalkapp.com as the repository, Versions for my SVN client, and an app called Changes to merge conflicts. Changes will help you view the file in the repository and your working copy side by side and pull from the left or right to resolve the conflict. My app choices are based on me using OS X, but at the end of this post I mention some Windows based tools that work just as well. It should be noted that Beanstalk is OS independent, you simply connect to it with your SVN client.

Now say for example you are working on a huge app with a ton of people and you are about to push it live when you look at the latest build you have an error, if the error is not easily identifiable you can roll a whole repository back to a certain revision or even individual files. Another thing that also pretty cool, is you can branch your app out. Which basically mean you have a version you are happy with and you want to keep making small changes with it but you are ready to move on to phase two of the project. You would branch out the original to preserve it and you can work on the other branch.

So Beanstalk stores the revisions… Versions Commits/Updates the repository… and Changes helps clear any conflicts

In Versions and in SVN for that matter there are a few basic terms to understand Update, Commit, Conflict, Add and Resolve.

– Update this one for me was a little tricky to understand but when you update you are downloading all the files that have changed since the last time you grabbed them.

– Commit is where you would upload the changes you have made, when you setup the working copy it will know what has changed so you don’t even have to remember all the files you modified.

– Conflict is basically where you made a change and your colleague did as well, they committed to the repository and when you went to commit it said you were about to overwrite his changes.

– Add, say you add a new image during your dev process the repository doesn’t know to watch that file for changes so you need to Add the file to the respository so it physically adds it but also it knows to watch it now.

–Resolve is what you would click after you have cleared up a conflict, some SVN clients won’t let you commit without all the files being resolved.

If you are looking to get your feet wet try the apps I mentioned they all have trials. If you want to try SVN on a PC a good subversion client is TortoiseSVN and for a File Compare app on the PC try WinMerge.

There is something else that I have heard is better than SVN called GIT. I haven’t played with it enough yet to know if it is good for web development, I’ll be sure to update this post once I have given it a run through.

Hope this helps, SVN is pretty simple to pick up once you start using it and I think the revision history it provides is indispensable.