Distributed Collaboration – Building a Website Remotely

Just recently, a great friend, and an even better visual designer, Brendan Finlayson (@brendanfin) and I have been working on helping each other out with some side projects we both have to complete. Namely, I would like him to skin me a new UI for my site and he would like me to assist in developing his online portfolio. Nothing Shocking there except that I live in Austin and he lives in Oakland. Before the days of high-speed connections and standards-compliant browsers this sort of scenario could take weeks to complete.

Not anymore, with applications like Dropbox, XAMPP, Digsby, and Skype, and using them together in methods that exploit their awesome utility when combined.

Dropbox

For those of you that aren’t familiar with Dropbox, in a nutshell, Dropbox is the easiest way to share and store your files online. It works on any platform as well. Brendan has a Mac and I have a PC and it works flawlessly on both of our machines. Let’s say you have a home desktop computer, a personal laptop, a work laptop, and a work desktop computer. Once you install Dropbox’s application on each of those computers, you will have access to any files you store in your “My Dropbox” folder on any of the computers. For example, say you have a TPS Report that you save in your “My Dropbox” folder on your work desktop computer. With Dropbox running on each of the other three computers, they each will automagically have that same file stored in their “My Dropbox” folder as well. Moreover, say you get home and on your personal laptop you make a change to the file. The delta (the difference or change to the file) is the only thing uploaded to your Dropbox account and a revision is created for that save (or in subversion terms “commit”). Now, that file on every other computer is automagically updated with the new version of the file. If you need to revert back to a previous file version, just open up the revision that you need. Simply brilliant.

Now, one of the coolest features for Dropbox is that you can create a folder and share that entire folder with anyone you invite. For example, I created a folder called “joe_paddy” (Paddy is Brendan’s nickname), right-clicked on the folder and under the Dropbox menu selected “Sharing Options”.

My browser then immediately opened up my Dropbox account page where this folder, “joe_paddy”, resides. On this page, there is a box where I simply add Brendan’s email address to invite him, but, I could have invited as many people as I wanted to have access to the folder, granted they each have a Dropbox account. Upon accepting my invitation, the folder “joe_paddy” was instantly created on his computer.

The beauty of this is now Brendan, the visual designer, can work directly out of the “joe_paddy” folder and I will receive any/all files and changes to those files in nearly real-time. On the flip side, since I’m the one building out the web pages (HTML via PHP, CSS, and JavaScript), any changes I make are reflected immediately on his computer as well. But Joe, he can’t just open a PHP file and it render in a browser, it needs to be served up from a well, server! That’s where XAMPP comes in.

XAMPP

XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use – just download, extract and start. Currently, XAMPP is available for Windows, OS X, Linux, and Solaris. XAMPP assists with a distributed collaboration environment when it is coupled with the use of Dropbox.

For example, Brendan and I are collaborating on a website right now. He is handling the design composition in Photoshop, slicing up images, and creating a style guide. If you don’t currently use a style guide in your projects, I highly recommend you do. In a nutshell, it is a document combining all typefaces, typeface sizes, and typeface colors and colors for other elements (e.g. background color) used in the design composition so the developer doesn’t have to refer to anything but the style guide when hashing out the CSS. Okay, so back to the example, Brendan is doing the visual stuff and I am building out the pages in PHP. Now, if I am making a change to the PHP file and I want Brendan to be able to open a browser and see the webpage in its current state, he can’t do this without a server running. He installs XAMPP for his platform, OS X, and he now has a “local” server up and running, http://localhost/. However, the default httpd.conf file has the document root set to the htdocs folder under the XAMPP install folder. On Windows, that location is here: C:\xampp\htdocs. Unfortunatey, we don’t want to see XAMPP’s local site that is bundled with the application, we want to see our site that we are working on.

At this point, I opened the httpd.conf file and found the lines that I needed to modify in order to point the document root to the directory of where I’m building the site out. First line is of course, the DocumentRoot setting. The value for the DocumentRoot should be the full path to the folder that is where I am building the web pages. This path contains my “My Dropbox” folder.

The only other line I needed to change was the <Directory> setting as it was pointing to the htdocs folder under the XAMPP install directory and instead needs to be pointing

After making these two changes to my httpd.conf file, I save it, close it, and restart Apache using XAMPP’s slick control panel. Simply stop Apache…

…then start it,

…then navigate to http://localhost/ in your browser and voilà, I am now able to see the website on my local server.

In most cases, trying to get a designer to modify an httpd.conf file can be very difficult, mainly because they are not as technical as developers. Not a problem in our case, for using Digsby as my instant messenger client I am easily able to direct Brendan on what lines in the httpd.conf file need to be modified.

Digsby (and Adium and Skype)

Digsby is an all encompassing instant messaging, email, and social networking client that I have found to be incredibly stable and abundantly useful for not only instant messaging, but keeping up with new emails in my Gmail account, new message on Facebook, LinkedIn, Myspace, etc. Digsby is a one stop shop for all of my communication needs.

After adding my GTalk account to Digsby (and after Brendan installed XAMPP on his Mac), I was able to communicate directly with Brendan and guide him through the httpd.conf file in order for him to modify the two lines of code needed to point to the folder we were sharing to build the website. Moreover, we were then actually able to collaborate and make changes in near real-time. For example, if we are looking at the “About” page of this particular website, he can tell me that the border of an image needs to be red. I simply make the change in the proper CSS file, save that CSS file, then have Brendan reload his browser and BAM, the image has the border. The magic lies in the fact that Dropbox only uploads and subsequently downloads the delta (what was saved in the CSS file), not the entire file!

If you’re on a Mac, I hear Adium is a great instant messaging solution.

Now, if you’re more of a vocal and visual person or just prefer to talk on the phone with folks, Skype may be an even better solution that Digsby. Skype is great Video Chat and VOIP phone service that not only has an instant messaging client, but has the ability for you and another person to physically chat with one another and even see the person as well! All you need to do is install Skype and hook up your web camera and microphone. Me and my three brothers have the following camera, which is in HD and has a microphone built in: Logitech QuickCam Pro 9000. Super easy to install and use; I highly recommend this one.

Conclusion

So the combination of the aforementioned resources has enabled myself and Brendan to successfully build out the website plus, it has enabled us to confidently take on any additional projects with which we may be presented. The best part about it? All of these resources are FREE. Moreover, I believe I’ve only scratched the surface here with this concept of “distributed collaboration” as I’m sure many out there have their own tricks and tips. So share them in the comments!

6 Comments / Aug 31.09 / Posts / by joemccann

An Even Simpler and Shorter URL Shortening Bookmarklet Using 3.ly

After creating my tr.im bookmarklet I came across 3.ly (pronounced “Three-lee”) which is probably the shortest url for a website name, but they also provide a URL shortening service. So of course, I had to make a 3.ly bookmarklet.

Click the following link to test it out:

3.ly Bookmarklet

You can also drag that link to your bookmarks to make use of it for later.  As usual you can find this and other projects I’ve completed to improve your browsing experience on my Projects page.

No Comments / Jul 04.09 / Posts / by joemccann

A Simple URL Shortening Bookmarklet Using Tr.im

So if you’re like me you send people a lot of links to stuff and sometimes they can be absurdly long (think a link to Google Maps with directions from Puget Sound, Washington to Bayou La Batre, Alabama). However, I hate having to actually GO to a URL shortening site like bit.ly or tr.im, type in the URL, wait for the page to reload and then copy the URL from there. Why not just have a simple bookmarklet that you can fire open on any page you are browsing and get a short url right there? Well, I’ve created a bookmarklet that does just that.

Click the following link to test it out:

Tr.im Bookmarklet

You can also drag that link to your bookmarks to make use of it for later.  As usual you can find this and other projects I’ve completed to improve your browsing experience on my Projects page.

No Comments / Jul 03.09 / Posts / by joemccann