Posted 10.13.10

Setting up Subversion :: Textmate   Versions   Beanstalk

I finally got subversion set up yesterday. It’s been a daunting task. It wasn’t hard once I finally found the right resources and wrapped my head around what needed to happen. I’m not going to pretend that I know everything, but I thought it would make a good blog post for someone in the same boat I am. Besides, it fits perfectly into the next step of our Code Igniter project.

My toolbox

…just to give you an idea of the tools I use, so you know what I have to work with…


Textmate Screenshot

When I’m coding, I write everything by hand in TextMate. When I first started using TextMate I didn’t understand what the fuss was all about. After all, it’s just a text editor. They’re asking me to pay money for what Notepad (TextEdit) does for free, right? …well, not exactly.

The power of TextMate comes in its bundles. You can think of bundles like packages of code or various scripts you can run. For example, when if I’m writing a php conditional, I can type “if [tab]”, and the PHP bundle will automatically generate

if (condition{
# code...

“Condition” will be highlighted. I type in my statement. Hit Tab, and “# code…” is highlighted ready to be replaced.

Another example: say I’m writing a blog post in Markdown. I can highlight everything and type Ctr+Shift+H and everything is converted to HTML.

If you download GetBundle, it will help download and manage bundles.

There are tons of other little key commands that I’m so used to now, that I forget about until I try to work in another editor.

If I select a word, type Ctr+Shift+W it will wrap my selection with a p tag. The “p” is highlighted and I can easily type a replacement tag. Textmate even changes the closing tag to match my new opening tag.

I also highly recommend ProjectPlus, which swaps the project pane for a drawer, supports finder color labels, and lots of other great little features that totally add up.

I think if you were to start using TextMate you’d never go back.

If you’re interested, Tom Cunningham at Paramore|Redd wrote an excellent post on Textmate’s (more important) efficiencies.

As much as I love Textmate, that wasn’t the point of this post… grin


Transmit Screenshot

I FTP using Transmit. I like it better than Fetch and Cyber Duck because it keeps all my local files in the left panel and remote files on the right. Plus, I’m a designer at heart and Panic’s stuff is always well designed and thought out.

If that wasn’t enough, Transmit also offers WebDav and Amazon S3 support, which is helpful.

Navicat Screenshot

I have phpMyAdmin set up locally on my machine, but I love Navicat. It’s perfect for a GUI interface for building and viewing databases. Sequel Pro is a good alternative. I have that installed too, but keep coming back to Navicat. Besides, if you have the premium version of Navicat, you can sync databases and visually build SQL statements. Trust me, so much easier than the command line!


Like any good web developer, I have a plethora of web browsers installed on my Mac. I love Firefox, especially with Firebug and the Web Developer Toolbar extensions installed. However, recently I’ve been disappointed with the speed of the browser and the lack of the support for CSS3. I feel like I’m missing part of the web experience. Recently, I’ve shifted to Chrome with the Developer Tools activated and some help from the Pendule extension.

PHP and mySQL

I know PHP and (mySQL)[]. I have everything installed locally on my machine. I went through some complicated process trying to make it all work and launching the Terminal, blah blah blah. Honestly, I did it once and forgot how I did it. If you’re trying to set up your computer for local development, my recommendation? Take a look at Mamp. So much easier! It’s quick install with an on and off button (literally).

what we came to talk about…subversion

Part of my problem was I didn’t know where to start with subversion. A quick Google search reveals thousands of results.

Hands down, the best resource I found was over at Think Vitamin: Subversion for Designers.. As a designer, I never bothered with subversion because (1) it intimidated me, (2) generally, I’m the only one working on my files, and (3) I back up my stuff. I figured, worse case scenario, I could go back on Time Machine and get what I needed. But this post makes an excellent point:

Each time a new change is made, the previous code or files disappear forever…With Subversion, you don’t have to worry about overwriting files or losing code. Subversion will keep a constant history of revisions for every file in your project. Each time changes are made to your code or files, they are preserved forever. Subversion allows you to view the changes to specific code, review with your team, and even roll back changes to previous versions. Think of it as a never-ending “undo” for the life of your projects.

I have lines (plural) of code that are commented out because I’m afraid to delete them in case — they’re “just in case I need to revert.”

More tools


Beanstalk Screenshot

You need a server to store all the versions/revisions of your files.

I set up a free account at Beanstalk. The only thing that confused me at first is you can have an account for a repository and then another account to post on their forums and knowledge base. Other than that, their site is easy to navigate and looks fantastic. (We all know I’m superficial when it comes to websites and looks grin Yes, I do judge a book by it’s cover.)

There are other options out there: Springloops and Unfuddle. I can’t really speak to either of those options, other than the fact that I know they exist.


Versions Screenshot

Now, you need a way to get updates to your files and commit changes. (Those words are bolded because their SVN terms)

I also bought a license to Versions. Another beautiful site. You can try it for free before buying (which I did.)

Beanstalk has a well written tutorial on their site that shows how to get the two (Versions and Beanstalk) to talk to each other. I’ll let you follow the link. I’d only be repeating what they already said.—and it really is well written.

What next?

This was the hold up for me.

I found Beanstalk and Versions. I followed the Beanstalk tutorial, but I didn’t know where to go from there. There was a new set of vocabulary that I wasn’t familiar with: update, commit, branches, tags, trunk what?

The Think Vitamin post, that I mentioned earlier, helped significantly.

I also found some other resources:

To answer my questions though:

How do I keep developing locally?

Right, wrong, or indifferent (meaning correct me if I’m wrong), I have the server on my computer set up to read out of my Library > WebServer > Documents folder. If I create a folder there called “amyhaywood”, then I can go to http://localhost/amyhaywood/ to view any site files. So, I placed a folder there called BEANSTALK. It has my repository there called “my-super-secret-project” that contains the folders you see in Versions: branches, tags, and trunk. Now, in order to view my site, I go to http://localhost/BEANSTALK/my-super-secret-project/trunk/

How does Textmate fit into the picture?

Again, right, wrong, or indifferent, I pulled that trunk folder (BEANSTALK > my-super-secret-project > trunk) into TextMate and saved it as a project file. I make changes to my code, as necessary and then, go back to Versions, select the updated files and click on the “Commit” button in the top left.

There are several developers out there, using Coda. It’s part of the Panic family (I mentioned Transmit earlier) so I can’t complain. Coda actually has SVN support built in! There are several resources out there as far as getting that set up to work. However, you can tell from rabbit trail earlier, I can’t seem to pull myself away from Textmate.

What’s the difference between an update and commit?

Update means that you are grabbing the updated files off the server. If you’re working with a team of people, this is probably something you want to do often to ensure you have the most updated files on your computer. However, with my freelance work, I’m it. So, I don’t envision needing to do that too terribly often.

Commit means that you are committing to the files that you updated. Submit makes a little more sense in my head. I’m submitting the files to the server to be updated.

What’s a branch?

The free eBook that I mentioned earlier does a good job of explaining a branch. It uses an example with paper. If I’m working on a manuscript and need people to review it, I would print off a copy for everyone, I’ll say 5. Five copies for five people. Each person marks up the manuscript. Well, I now have 5 versions with various edits. I have 5 branches. When I get ready to update my manuscript, I have to compile all of the edits to make it work.

Same thing with subversion. Each section of code that I pull out and develop by myself becomes a branch.

a trunk?

A trunk is your main line of development. To go back to the manuscript metaphor, it’s the compiled manuscript, the master.

a tag?

A tag is a marker that highlights revisions. In English? It’s notes that you’ve written to yourself so you’ll remember what you updated. It could be “released in version 1.0” or “fixed the notifications.”

Actually, Beanstalk has an activity tab that displays a log of each time you committed along with the appropriate tags.

Beanstalk Activity Screenshot

Additionally, Versions has a tab called Timeline that does the same thing.

Versions Timeline Screenshot

Hopefully this is enough to get you started. Let me know if you have any questions or if you’ve found other programs, tips and tricks.

(2) Comments :: Leave a Comment :: Permalink

2 Responses

ON 12.18.2010 Justin THOUGHT:

this is my first time working through Versions / beanstalk as well. The concept is new to me and i’m a bit confused. Do you have a folder or repo bookmark for every project you are working on? Are these bookmarks (in versions) just subfolders of BEANSTALK on your mac?

so you have:

localhost/beanstalk/super-secret project
localhost/beanstalk/   etc…

am i just way off?

ON 12.23.2010 Amy THOUGHT:

@Justin you are exactly right! Each project has its own bookmark in Versions. Is there anything else that I can help clarify?

Leave a Reply

Powered by Wordpress