Dropbox and You

Posted September 19, 2011 by Brian Yuen Short URL: http://bcw.im/7

Dropbox over the years has been an indispensable tool in not only my web design/developer super-hero tool belt, but also in my off-time. If you haven't heard of Dropbox, or are new to it, we'll show you how this tool from the Internet Gods will "handy-fy" your workflow.

If you haven't already, go ahead and download and install Dropbox.  Use the link down below to get yourself a free 250mb of storage, on top of your free 2gb!!

This demonstration is done using OSX, but I'm sure things are very similar, if not identical to the other platforms Dropbox supports.

The basic concept behind Dropbox is that it will sync, and version your files which you can access across computers, phones, and any web browser.  That feature set is already pretty impressive, but they don't stop there.

Dropbox integrates with your operating system so you can easily share files with anyone with an internet connection.

Here's how:

• Drag a file that you want to share into your "Public" Dropbox folder.  This folder should be present after you installed Dropbox. For me, this folder lives in ~/Dropbox/Public
• Once you dropped in your file and the blue sync icon turns into a green checkmark next to your file icon, you're ready to share!
• Right click (or control + click) the file you just moved, and from the dropdown menu select Dropbox > Copy Public Link
• Once you've selected that option, the public link to the file has been copied.
• Go ahead and paste (command +v) that link into an email, text program, chat message, etc., etc
• The link should look something like this: http://dl.dropbox.com/u/121921/your-file.jpg

You've just shared your file! Anyone with an internet connection can click on that link and see or download the file you just moved into your Dropbox folder.  Neat right??

Browser Testing with Dropbox

Not only is Dropbox great for sharing files, it's a great way to browser test your HTML and CSS whether it's on the same machine, or different machine using a different OS. To do this, move your html file into the public Dropbox folder, copy the public URL, fire up the browsers you need to test in, paste in the URL, and voilà!!

Hosting Images with Dropbox

Whether you're a blogger, or would just like to host an image for whatever reason, Dropbox has you covered. Move your image to the "Public" Dropbox folder, copy the "Public URL", and drop it into your HTML.  Your HTML should look something like this:

<img src="http://dl.dropbox.com/u/121921/your-image-file.jpg" width="320" height="240" alt="Your description here" />

Collaboration with Dropbox

Need to work on an Word doc or Photoshop mockup with someone? You can easily collaborate any file with someone with Dropbox.  If the other person has Dropbox installed as well, you can share folders by simply logging into the Dropbox web interface, and clicking on the "Share a folder" button.  Enter in the person's email address to send him/her a note that you would like to share a Dropbox folder on your machine.  Once the email has been received and confirmed, the other person will be able to see the folder you selected to share on their machine.  Be careful to not work on the same file at the same time, otherwise you might overwrite the other person's changes, or vise versa.  If this ever happens, you can revert back to an earlier version by right clicking the file and viewing the past revisions.

All in all, Dropbox is a great, free service that has been indispensable in my workflow.

Download Dropbox using this link to get your extra 250mb of storage on top of your 2gb of free storage.