081204 Small Web Team Collaboration with SVN: Creating Designer and Developer Love

Announcemnts & Ephemera


  • the inspiration for this has bee “as a developer, this is how I work with designers”
  • starting at pando, worked with a series of freelance designers ST came up with a set of best practices and it evolved. Lots of people said “thanks for teaching me version control”
  • that’s the inspiration for this talk.
  • Here’s what we found:
    • Rules Devs need to do to make their designers lives easier, and
    • Things designers need to learn

Best Practices

  • use a framework or a quality CMS
  • if yr using custom stuff, you want contextual config files. If yr running yr project on a production server, you’ll have a different base URL, SQL db, etc. The easier you make it to switch configs, the happier everyone is.
  • stole this from RoR: set an environment variable and then the config file can switch that, so you don’t change anything; you check out the project and it just works. Default to the designer’s config, so they don’t hav et oknow about it.
  • alternate option: don’t add the config file to the Version Control, and then sym-link to the config. (do this with drupal): make copies of settings.php and create a bunch of symlinks

  • manage yr SQL schema versions

  • devs should be doing this anyway, but the cleaner it is

  • site dumps (if the site is small enough)

  • if you want to be really fancy, make a test data set

  • if you (dev) do all these things, the collaborators (designers) don’t need to do to much to play along

Designers Need To Learn these Things

  • install yr local dev environment (eg MAMP or XAMPP on windows)
  • create a db and a user
  • import a db
  • use version control

  • devs need to use an MVC pattern so dev can make templates fro designers to work on

Setting up the local dev enviornment: MAMP

  • DL MAMP. Drag it to the “Applications” folder. Use it for anything besides RoR. (Use Locomotive for RoR)
  • What about Python? There’s probably something out there (especially w Google App Engine around). Go look for it
  • The document root is “/Applications/MAMP/htdocs”; if you put files in this folder, you can access them from “http://localhost:8888”

  • one of the first things ST does is make a shortcut to his app on the desktop so he can find it later

  • ST wrote a MVC app from scratch for demo purposes

Basic SVN

  • create a repository (place to keep files)
  • you can check copies out to “working copies”
  • when yr done making changes, you can COMMIT to the repository
  • every time someone makes a change, you can see what it was and revert back if necessary
  • this COMMIT pattern will catch multiple changes to the same doc, and mediate conflicting changes. If yr just using FTP, its easy to overwrite each other’s changes.

  • COMMAND: “svn info”: what the situation is; is it in version control? Where’s the repository?

  • repositories are basically just a URL somewhere. If you want to start playing with SVN, beanstalkapp.com is a good place to start. SVN needs to run on an SVN server. If you’ve used a wiki, you know about reversions. This is just like a wiki for yr code.

  • Q: Are there other Version Control systems? A: yes. Git is the cool new one, but it really shines with large distributed projects with lots of branches. It was written by Linus for the Linux project. For small teams you can work on one branch and SVN does a good job; its more mature, has better tools. There’s also CVS, which was the predecessor to SVN and is a little clunky.

  • COMMAND: “svn status”: shows us if there’s anything changed, weird, or funky. As usual on the command line, no news is good news.

  • making a change: ST goes into the template, changes a line of text, and then back to the command line. “svn status” returns an “M” (for “modified”) before the filename.

  • COMMAND: “svn diff”: shows a “-” before the line that was rm’d, and a “+” next to the line added

  • COMMAND: “svn commit”: type svn commit -m “changed a line”

  • COMMAND: “svn update”: update’s yr working copy from the repository. If no one’s changed, it just shows you the revision number. If a newer copy exists on the repository, it updates, yr working copy.

On Windows

  • using XAMMP and TortiseSVN
  • files live in C:xampphtdocs
  • right-click on a folder and you can get some Tortoise features, eg “checkout”
  • once TortoiseSVN is installed, files and folders will get a green checkmark when they’re up to date
  • Notepad++ is the file editor of choice. It deals with line endings without complaining and its free.
  • If you make a change, the icon will get a red badge
  • right-click to commit, you’ll be prompted for yr msg.

Create a conflict

  • change and commit on win
  • go to mac, don’t update, make a change, commit
  • warning: commit failed
  • so now you do “svn update” and see the conflict. If you browse to the directory, you can see all the versions, appended with “.r#”.
  • to resolve, do “svn resolved [winning-filename]”, then commit

  • 1. always update!

  • 2. test yr changes!
  • 3. commit them!


  • Q: What about absolute URLs? A: avoid absolute URLs. If yr using a framework, there’s always a helper. But if you have to, you can mess with apache and have it redirect the URLs in a Virtual Host Directive. PITA though.

  • Q: What about “files” in drupal? A: use “svn ignore” or just never add it, it doesn’t matter.

  • Q: why isn’t the DB in version control? A: “Version control is not backup”. But do nightly backups in the db. The schema can be in version control though.

Making a Database

  • go to phpMyAdmin
  • make a db called “demo”
  • import the “init.sql” db into “demo”
  • create a user, give him privs (not global)
  • neat trick: create the user first, and hit the “create a db w same name and grant all privs”

confiq file:

  • should just have an array with hosts, user, pass, db names and let the designer manage that

  • you can use SVN on fla’s too if you externalize all the actionscript


  • Pragmatic Programmers version control book is good
  • lighthouseapp.com is a bug-tracking hosted service that hooks into beanstalk so you can enter the bug ticket number into the message and it’ll address the bug ticket on the commit

  • google has free svn hosting, but only for open source

Mac SVN Clients

  • SVN X
  • Versions
  • coda has SVN
  • Cornerstone
  • finder scripts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s