Nowadays we have devices coming out the yin yang.  People work in different places and it is no easy task to keep things organized.  Between email, files, photos, settings and everything else, using multiple devices can be a challenge.  One thing we all want to avoid is having to do the same work twice, or really doing anything manually at all.  Although there really is no silver bullet solution, there are methodologies that will help in a big way.

I am a web developer and the following is my setup and workflow which allows me to easily work from various locations without worrying about manually keeping the right files up to date in the right place.

First thing’s first.  I am going to list all the tools I use so you have a quick overview of all the crap that I run.  Later on I will break it out differently to better explain the functions in context.

My Toolset

Hardware

  • iMac – at home
  • Time Capsule – at home (backups automatically via Time Machine)
  • MacBook Pro – Everywhere (backup up to a 1TB drive via Time Machine)
  • Windows PC – Office – For testing browser crapability and for accounting (Quickbooks is not available for Mac)
  • iPhone – for phoning people and playing Euchre on the subway
  • iPad – for Animoog and FL Studio

Production and deployment – Stuff that I use to make stuff

  • Adobe Creative Cloud – Design and development software – $50 per month subscription
  • Git and Github – Version control software and a collaborative service for sharing code.  I will not be going into detail about version control in this article because it will unduly raise the nerd quotient.
  • Xampp – For local web development (sets up a server on your computer so you can build sites without hosting them online)

File Management and Synchronization

  • Dropbox – Free storage for 2GB.  Get up to 16GB by referring friends (yes click my link there and sign up thanks)
  • iCloud – For calendar and contacts
  • Time Machine – Backup

Communication

  • Skype
  • Toktumi – toll free number to make me more businessy
  • iMessage
  • Google Apps for Business
  • Mac Mail

Overview of my workflow

So in general I divide my time between working from home and working out of my office.  The challenge is to be able to have the same data on my MacBook and my iMac at the same time so I can easily switch between the two and keep my work up to date.  This means if I have been away from home using my MacBook, I can get home and just fire up the iMac and leave the MacBook in the bag.  The reverse is also true.  If I have been on a coding bender for 3 days and have not left the house, the last thing I want to do is start organizing all the files that have changed before I head to the office or to a client.  As a web developer, I deal with hundreds and often thousands of files for one project.  Often I may be working on a controller that is buried 4 folders deep.  So I need to know that when I change a file on one computer, the other computer will automatically be updated.

The core of my web development work happens in a folder called /Sites on Mac OS.  First let me say that I have identical software on my MacBook and my iMac as well as the same user account name.  This means that local file paths are also identical which comes in very handy for configuration.  Now I will give you an overview of how I sync and work with the various functional elements.  I will start with the more common elements so people other than nerds can get some benefit from the post without reading through the whole thing.

WorkFlow

Email

IMAP email is relatively new for some people but I have been using it for quite a few years.  IMAP email is a setting choice you have when you set up a new email account on a device or on your computer’s email client (you probably used to always choose POP).  The difference between IMAP and POP is that IMAP stores all your messages on your email server and your email devices (your computer, your phone, web browser) simple access the the mail on the server.  POP downloads copies of the emails and works with them locally.  So that means that the read status of an email is known by the server.  This means if you read an email on your iPhone, and then view it on your Laptop, the message will already be shown as read on both devices.  With sent items, if you set up your email client to store them on the server, it means when you send an email from your PC, it will show up in the sent items of your iPad.  For joy!  So my email set up is IMAP and that basically takes care of everything.

More specifically I use Google Apps for business as my email provider.  This gives me some other perks including the gmail web interface, and really easy set up on most devices.  iPhone and iPad for example have a setup button just for gmail so it works great.  The other reason I have Google Apps is because I think it is important to decouple your email service from your web service.  Many companies get a hosting account that includes email and they have their website and email hosted in the same place.  Separate them.  It makes everything better.  Especially moving hosting companies which you will likely do.  Also if your web server goes down your email will still be alive.

Contacts and Calendar

I use Google Apps for email and a lot of people use it for Calendar and Contacts as well.  I do not.  I use iCloud.  Its a personal choice because my devices are all Apple so its just better for me.  So all my contacts and my calendar live in the cloud and thus automatically are in Sync with all my devices.  Amazingtastic.

General Files

I have tried many things over the years but Dropbox  wins.  They are the winner.  Its just too easy.  I am still using a free account but eventually I will have to pay a small fee for more storage.  Worth it.  Dropbox integrates with everything, I can view the files on my iPhone and iPad, and everything is synced.

Web development

Website Files

So as I mentioned above, the bulk of my work takes place in a place called ~/username/Sites.  The files consist of folder for each site I work on.  Now here it gets a little geeky so try to stick around.

Developing web sites and applications requires a local server.  I use a tool called Xampp to set up the local environment.  Xampp by default uses the username/Sites folder in Mac OS and if you use it, things just seem to work nicely and percolate with the reckless abandon of child on a … sorry. Basically using the SItes folder means almost no additional configuration of Xampp. Now it would be easy enough to create a sites folder in my Dropbox and then modify my http configuration in Xampp to look at the dropbox/Sites folder but I don’t want to do that.  I like to stick with defaultness whenever I can.  So enter Symbolic Links.

A symbolic link is a computery operating systemy concept that lets you create a virtual link between 2 directories on a computer.  That means you can edit the files from either location and to the computer they are the same.  So all I do is fire up Terminal, cd into my dropbox folder, and  create a link in my Dropbox folder to the Sites folder and voila.  I do this on both my iMac and my MacBook and now no matter where the file gets changed, it is updated in the same damn place.  Its amazing and life changing if you are a guy like me.  If you want to learn how to Symlink please google it.  Screwing around in your Terminal can cause catastrophic results if you don’t know what you are doing.  Keep in mind if you are a developer and you have a lot of sites in your Sites folder, you will likely have a lot of files to sync.  I specialize in WordPress which has thousands of files.  When I did my first sync the file count was in the hundreds of thousands.

So let me explain… wait there is too much… Let me sum up.  I edit files on either computer, and it instantly updates the other computer via dropbox.  I can immediately fire up a local version of the site for testing via my web browser and I know that I am looking at the latest work.  I like simple pleasures.

Development Databases

Dealing with your local mySQL databases can get a little hairy as well.  So on my iMac I would have a test site connected to a local database (localhost).  Given the theme of this article, I want my environments to be perfect mirror images of each other.  Well if I have 2 different databases (one on the iMac and one on the MacBook) for the same app (which shares the same files because of Dropbox), then I am creating a pain point for myself.  Syncing mySql via Dropbox is possible but not easy and requires some annoying configurations and scripts.  The better solutions is using a remotely hosted test mySql database.  So the apps are configured to look at a server for the database rather than the local host.  The downside to this is latency and not being able to access the DB without the internet.  But in fairness, I don’t know a situation where I am not connected to the internet.  In the worst case I can tether my MacBook to my iPhone.  Not to mention any app or site I am developing will likely rely heavily on web services and thus won’t work without an internet connection anyway.

IM

I use Skype mainly for IM and for telephony.  By its nature it is all synced up no matter what device you use so thats that.

Music

For music I use iTunes in the cloud.  Pretty simple.  All my devices have access to all my music.  If you don’t use that you could sync with Dropbox by moving your music files to Dropbox and then changing your settings in iTunes to look at the Dropbox folder instead of the default folder.

Photos etc…

I am not going to go into syncing photos and videos etc…  there are plenty of tutorials on that online and I personally don’t care about syncing photos.

So thats it!  Thats how I work in multiple places without the need to think about file syncing and organization.  Now it helps that I use all Apple products but it is not absolutely required.  Post any questions or comments and I will be happy to answer them!