Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 26 2013


Marvel: Free Website Prototyping Tool for Photoshop-Dropboxers


If you are anything like me, you fire up your Photoshop to create a first visual prototype of your next client’s website. And if you’re anything like me, you’re not bound to change that in the foreseeable future. All the clients I had over the last 20 years wanted to see a visual prototype before coding started. If you could create a clickable one, the better. A fresh web app named Marvel enters the stage with the promise to achieve just that. Are you a user of Photoshop, Fireworks, Gimp or any other pixel-editor and do you rely on Dropbox? Great, still, if you don’t design websites, you need not read further ;-)

September 06 2013


Dropbox Datastores and Drop-Ins

Recently, Dropbox announced its new Datastore API and Drop-ins, a couple of great new features aimed to leverage the power of accessing files and (now with Datastores) other general information from any device and keep that data synced across all platforms, painlessly.


Today, the Datastore API only supports single-user use-cases, but multi-user scenarios are in future plans for Dropbox.

Let’s begin by discussing what datastores are. You can think of them as a small database to keep key/values pairs of information. Now, you may say that your application could use a web service with a database and your data will be the same across all devices, and while this is true, by using the Datastore API, we are taking away the overhead of handling a back-end service.

With this in mind, applications that don’t need to store a large amount of user data and don’t require heavy processing, can delegate the database management to Dropbox and forget about handling it manually. Take for instance a multi-platform game. You would want to allow the user to play it on their iPad in the morning, head to work and while in the traffic, continue playing on their iPhone. In this scenario you’d normally need that user to log into the system, play, and then save their progress.

Now with the Datastore API you can forget about the whole login process and the overhead of handling the progress data, you just use the provided SDK and store the information you want to store, later that day when your user is opening your application from another Dropbox connected device, you can easily retrieve their information. In this case, Dropbox handles the storage, security, and privacy of the information.

Although, as of right now the Datastore API only supports single-user use-cases. According to Dropboxer Steve M., multi-user scenarios are in future plans for Dropbox.

Persistent TODOs App

If you have ever used a JavaScript framework/library and came across example applications, chances are that in one of those apps there was a TODO app of some kind. So, in the spirit of keeping things consistent and to demonstrate some of the most common features, let’s build a TODO app using the Dropbox Datastore API.

Since this is a tutorial on the Dropbox functionalities offered to developers, I’m not going to be explaining the HTML nor the CSS in the application, you can find those in the files accompanying this tutorial.

Step 1 – Setting Up the Application

First of all, like with most public APIs, we need to create a new application within the system. To do this, log into your Dropbox account and head to the App Console. Click on “Create app”, select “Dropbox API app” and “Datastores only” and finally give your app a name.


You may be tempted to select “Files and datastores”, however if your application is not actually using this permission, when you request production status, it will be denied, adhere to the Dropbox policies for every application you create.

Now you have a new application in Dropbox and you can start making use of the Datastore API (and other resources). In order to do this, you’d need your App Key. If you use the JavaScript SDK, as we will in this tutorial, you don’t need your App Secret (keep this string secret).

Step 2 – Adding the SDK

We’re going to be using the JavaScript SDK provided by Dropbox to interact with the Datastore API. To install it, simply add the following script declaration to your HTML document above the script for your application.

<script src=""></script>

Step 3 – Creating Our Application

Our application will be a single JavaScript file under the "js" folder. Create a new "app.js" file with the following code:

var client      = new Dropbox.Client({ key: YOUR_DROPBOX_APP_KEY }),
    TodosApp    = TodosApp || {

        todosList: null,

        init: function() {},

        checkClient: function() {},

        createTodo: function( e ) {},

        updateTodos: function() {}
$( 'document' ).ready( TodosApp.init );

What this does is create a new Dropbox Client object using the App key obtained from the app console. It then defines our application object and when everything is ready, we call the init method.

Checking the User’s Session

The first thing our application should do is check if we have an access token for the user of our application. Add the following code to the init method:

        interactive: false
}, function( error, response ) {
    if ( error ) {
        console.log( 'OAuth error: ' + error );


Here we are trying to authenticate the app’s user to the Dropbox API server. By setting the interactive option to false, we are asking the method to not redirect the user to the Dropbox site for authentication, this way our application can continue its normal flow. We are going to manually send the user there later on.

Now we need to check if the user is authenticated and if so, proceed to load in their data. Add the following code to your checkClient method:

checkClient: function() {
    if ( client.isAuthenticated() ) {
        $( '#link-button' ).fadeOut();
        $( '#main' ).fadeIn();
    } else {
        $( '#main' ).fadeOut();

Here we are updating our interface accordingly, based on whether the user has been authenticated or not.

Authenticating the User

So far we have our application interface being updated accordingly, if the user is authenticated or not. Now we are going to handle the process of authenticating the user in the system. Add the following code to the else statement of the checkClient method:

$( '#link-button' ).click( function() {

This is merely a callback which is called when the user clicks the “Connect Dropbox” button in the interface. Note that we are not setting the interactive option this time, thus allowing the redirection. If the user is not logged into Dropbox, a login form will be shown and the system will ask the user to allow the application.


Retrieving User Data

Once the user has been granted access to the application, it will redirect back to us. In this case, the call to the isAuthenticated method will return true, at this point we need to retrieve the user’s Dropbox stored data. Add the following code to the if statement of the checkClient method:

client.getDatastoreManager().openDefaultDatastore( function( error, Datastore ) {
    if ( error ) {
        console.log( 'Datastore error: ' + error );
    todosList   = Datastore.getTable( 'todos' );

    Datastore.recordsChanged.addListener( TodosApp.updateTodos );

This method retrieves the authenticated user’s Datastore and accesses the todos table. Contrary to an SQL table, the table structure doesn’t have to be defined prior to usage, as a matter of fact, the table doesn’t even exist until we add data to it.

What this also means is that the table can contain any data, and one record doesn’t have to have the same data as the others. However, it is a good practice to preserve a similar, if not equal structure, amongst records.

Rendering Records

At this point we have the user’s todos information, however it is not displayed to the user. In order to do this, just add the following code to the updateTodos method:

var list    = $( '#todos' ),
    records = todosList.query();


for ( var i = 0; i &lt; records.length; i++ ) {
    var record  = records[i],
        item    = list.append(
            $( '&lt;li&gt;' ).attr( 'data-record-id', record.getId() ).append(
                $( '&lt;button&gt;' ).html( '&amp;times;' )
                $( '&lt;input type="checkbox" name="completed" class="task_completed"&gt;' )
                $( '&lt;span&gt;' ).html( record.get( 'todo' ) )
            ).addClass( record.get( 'completed' ) ? 'completed' : '' )

        if ( record.get( 'completed' ) ) {
            $( 'input', item ).attr( 'checked', 'checked' );

This method simply sets a container element for the HTML tag that will contain our list of todos, then we retrieve the records in our todos table by calling the query method from the Datastore API. Next, we clear the list of items and finally we render every record to the screen.

Deleting a Record

Now that we have the ability to retrieve the user’s stored TODOs on application startup, let’s work on deleting those records. In our render method, we’ll create an X button. Add the following code to the bottom of the updateTodos method:

$( 'li button' ).click( function( e ) {

    var id  = $( this ).parents( 'li' ).attr( 'data-record-id' );
    todosList.get( id ).deleteRecord();

In this code we just get the id of the record to delete, retrieve the actual record by calling the get method, and delete it by calling deleteRecord on the obtained object. Since we previously set the recordsChanged callback, our interface will update like magic.

Updating a Record

So far so good, we can retrieve a list of tasks from the user’s Datastore and we can delete a record from it. Now how about updating a record? For this new feature we are going to add in the ability to mark a record as completed or not. Add the following code to the bottom of the updateTodos method:

$( 'li input' ).click( function( e ) {
    var el  = $( ),
        id  = el.parents( 'li' ).attr( 'data-record-id' );

    todosList.get( id ).set( 'completed', ':checked' ) );

Like with the delete method, we retrieve the id of the object to update, retrieve the record object itself, and set its completed property according to its current state.

Creating a Record

Finally, we need to be able to create new records in the user’s Datastore. In order to do this, we need to react to the form submission event that the add-todo form will trigger. Add the following code to the bottom of the if statement in our checkClient method:

$( '#add-todo' ).submit( TodosApp.createTodo );

This is simply a listener for the submit event on the add-todo form. Now for the actual record creation. Add the following code to the createTodo method:


    todo: $( '#todo' ).val(),
    created: new Date(),
    completed: false
$( '#todo' ).val( '' );

With this, we have completed our example application. As you can see, the CRUD operations for our data have become really simple and we can access it across multiple devices. While using this service, we don’t have the need to create a full back-end service to store the user’s information.

Datastore Extras

As an extra service to developers, Dropbox let’s you explore the data inside your Datastores. To check this, go to the App console and select Browse datasores from the submenu, select the application you want to check the Datastores for and you’ll be presented with a list of the existing tables and each record in the table.


Space Limits

When creating Datastores, you have to take into account the amount of information you plan on storing. Every application has up to five MBs per user, to use across all datastores. As long as your data doesn’t hit this limit, the Datastore won’t contribute to the user’s Dropbox quota. Keep in mind that any data over this limit will count towards the user’s Dropbox storage quota, and writing operations may be limited.

Field Types

Datastore records can be seen as JSON objects, however there are certain constraints about the data that a field can contain, for instance, even though you can see a record as a JSON document, you can’t have embedded documents. The types of data you can store are as follows:

  • String
  • Boolean
  • Integer – 64 bits signed
  • Floating Point
  • Date – POSIX-like timestamp
  • Bytes – Arbitrary binary data up to 100 KBs
  • List

A list is a special kind of value that can contain an ordered list of other values, but not lists themselves.


Another great feature added to Dropbox for developers are Drop-ins. There are two types of Drop-ins, the Chooser and the Saver. With these new features you can add support to your application to either select (for sharing or some other purpose) files directly from Dropbox with the Chooser and to directly store files to Dropbox with the Saver.

So continuing with our example, lets add Drop-ins to our TODOs application.

Step 1 – Setup

As with the Datastore API, we need to create an application for Dropins, head to the App console, select Create new, choose Drop-in app and give it a name.

Now we have a new application, contrary to the applications for other Dropbox APIs, this one doesn’t need production access, so once you’re ready, you can offer it to your users with no hassle.

Now the only thing we need to do to add Drop-ins support to our application is add the SDK, add the following code to the scripts declarations in the HTML file, above the script for your application:

<script src="" id="dropboxjs" data-app-key="YOUR_DROPBOX_APP_KEY"></script>

Note the id with a value of dropboxjs, if you remove or change this, Dropbox won’t be able to get your application key, hence breaking the Drop-in functionality.

Step 2 – Chooser

OK, so now we have the Drop-ins API in place, let’s begin with the Chooser Drop-in. To add the Choose from dropbox button, use the following code.

<input type="dropbox-chooser" id="dp-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" />

This will generate the button for you and when you click it, it’ll open a window allowing you to select files from the user’s Dropbox. To style this element, use the class dropbox_choose. In my case, I’ll simply center it on screen. The data-link-type attribute specifies if the obtained link will be a direct link to the file (useful for download, or display) or preview, in which case going to the link will take you to the Dropbox interface.

Both links have disadvantages, for instance a direct link will expire within four hours of its creation, and a preview link may stop working if the user owning the file removes or changes it. The preview link type is the default used by the chooser.

Working With the Result

Adding the code above will generate a “Choose from Dropbox” button, which when clicked will show us a window to select the desired file. To retrieve the selected file(s), yes it supports multiple selection, your application needs to respond to the DbxChooseSuccess event in the input element. Add the following method to your JavaScript application:

listenChooser: function() {
    document.getElementById( 'dp-chooser' ).addEventListener( 'DbxChooserSuccess', function( e ) {
        $( '#selected-image' ).attr( 'src', e.files[0].link ).fadeIn();
    }, false );

After creating the event listener, you need to add it to the application, at the bottom of your init method, add the following line of code:


This event will give us a payload containing, among other things, an array of files selected by the user. In this case, we are selecting a single file and appending its link property to an image tag already in the DOM. Each file in the array contains some other fields, like the file size, its name, etc. For a full list of the properties in each file go to the Chooser Drop-in documentation.

Step 3 – Saver

Last but not least, we have the Saver Drop-in. This Drop-in let’s you save files directly to the user’s Dropbox folder. Just like with the Chooser, you need a Drop-in application to use the API. Fortunately, we already created one and working with this Drop-in is even easier than everything else so far, simply create a link as follows:

<a href="http://.../" class="dropbox-saver"></a>

The href and class parameters are required for the Drop-in to work. The href is the file that will be saved to the user’s Dropbox folder, and the class tells the application that it is a Saver Drop-in. Additionally, you may add a third parameter: data-filename which will be used as a user-friendly name for the file to save. If you don’t specify one, the name will be taken from the href parameter.

As with the Chooser, there are a couple of more advanced things you can do with the Saver Drop-in, but for a reference on those check the official documentation.


As you can see with these new features in the Dropbox Developer Services, we can add powerful data storage capabilities to our web and mobile applications easily. This frees us from the overhead of creating a back-end service when little data processing is needed.

Hopefully by now you feel comfortable adding CRUD support to your application using the Datastore API and adding the capabilities to read and write from your user’s Dropbox accounts, using the Drop-ins API. Please note that both APIs are really new, the Datastore API is still in Beta version, however you can see the potential they represent. Be sure to check the official Dropbox documentation for further information on these and other great services the platform has to offer.

Sponsored post
you are awesome!
Reposted bysirthomasbolton sirthomasbolton

July 30 2013


Hojoki: The (no longer) Missing Link Between Your Cloud Apps


If you are anything like me, you will find it tedious to keep in sync with the dozen(s) of cloud apps you use on a daily basis. Some of the work is coordinated via Trello, texts and spreadsheets are written using Google Drive, creative work is stored in Dropbox, notes are captured in Evernote, short communication is done using Twitter. And this is only the beginning of my list. Would it not be great, if there were one service to rule them all? One stream to aggregate all the information scattered throughout loads of logins? Well, actually, there is…

August 03 2012


How to Backup WordPress Sites to Dropbox

What would happen if all of the hard work you put into your website was all wiped away by a hacker or malicious virus of some kind? It would be difficult to find the motivation to start all over unless you have a backup of some kind. Using your already established Dropbox account, several options are available to Backup WordPress Sites to Dropbox.

To take out some of the work out of backing up your site, below we will show some ways to automate the process and save the backup to Dropbox. The easier and more hands off the process is, the better, right? Below are some WordPress plugins and other options to help you easily backup your WordPress site.

Note: Depending on the size of your site and how much you use your Dropbox account, opening a dedicated Dropbox account for these backups might be a good idea.

1. WordPress Backup to Dropbox

WordPress Backup to Dropbox saves you the hassle of using your FTP client and making a total backup of your WordPress site. The first backup will take some time to complete because everything is being backed up: files, media, and database are all included. WordPress Backup to Dropbox creates a folder in Dropbox. This folder is the only folder this plugin can access.

After the initial full backup, each backup from then on will be an incremental backup. The incremental backups can be scheduled as frequently as daily. The scheduled backups can exclude different file types if desired.

2. BackWPup

BackWPup offers a few features beyond backing up WordPress files. Being a Dropbox user is not required to use BackWPup, other services such as Amazon S3, SugarSync and RackSpaceCloud are also supported.

Exporting the WordPress XML file, Checking, repairing and optimizing the Database are not common features among WordPress backup plugins. Choosing the backup file type (zip, tar, tar.gz, tar.bz2 format) is a nice touch too.

3. Cloudsafe365

Cloudsafe365 is more than just a WordPress backup solution. The backup portion allows for backing up to local servers and Dropbox. The backups will consist of your WordPress Database, Plugins, Current Theme and your Files and Images.

Additionally, Cloudsafe365 offers protection against hacking and Malware. The ability for automated mining and info scraping is removed and your content and images are protected (in plus version). People won’t even be able to right-click on your images to download them. They will need to share your whole post or page, not just the image. The plus version is $15 a month.

4. WordPress SQL Backup

WordPress SQL Backup is not an automated backup. However, the backup is easily created right from your WordPress Dashboard. The backup file is the files in your /wp-content/ folder. The .tar or .gzip files can be downloaded or saved right to your Dropbox account.

5. ManageWP


ManageWP is a full-fledged tool for managing one or multiple WordPress sites. The cost of the service (starting at $6.30 per month) is minimal for the amount of awesome you get. The Standard Package offers security, on click updates of WordPress, Themes and Plugins. Managing all of your sites from one dashboard makes backing them up super easy. Create a backup task, choose the sites to back up and the output destination such as Dropbox. Restoring from a backup is also just as easy.

6. XM Backup

XM Backup is a simple choice to back up and save the files in the /wp-content/uploads folder and the WordPress Database. These are the bulk of the files, including your images and theme .zip, you’ll need if something catastrophic happens. When a backup is created using XM Backup, you can choose the destination of a Dropbox account, Email (of smaller files) or FTP.

Creating a WordPress Backup

To eliminate any doubt as to the difficulty of creating a backup, below is walk-through of the WordPress Backup to Dropbox plugin. Only a few steps are needed to create an initial backup and to schedule future backups. I’ll assume you already have a Dropbox account and the WordPress Backup to Dropbox plugin installed to your WordPress site.

In the left sidebar in your WordPress Dashboard, mouse over or click on the WPB2D tab to show the 3 options. Choose Backup settings

The first step is to link your Dropbox account to the plugin. Near the top left of the window, click the button to link the two.

You will be taken to the Dropbox site.

Enter in your Dropbox login credentials and authorize WordPress Backup to Dropbox. You should be taken back to your WordPress site when access is granted.

You will see when the next backup is scheduled (which there shouldn’t be anything scheduled), the backup history and settings. If you are using this plugin on several sites and backing up all of the sites to the same Dropbox account, you should check the box and use the subfolder option.

Next you can set the day and time to schedule the future backups. Remember, after the initial backup, only new and changed files are saved. This means choosing the daily backup isn’t all that bad of a choice.

The last part of the setup is choosing any folders to exclude from the backup. It may take a minute for all of the folders to display here so don’t get antsy right away of you don’t see what you’re looking for.

Once everything is set up and scheduled, it’s time to create the initial backup. Go to the left sidebar again and click on Backup Now. Click on the Start Backup button.

Give it a little time and check your Dropbox folder to make sure everything is there. Remember, the initial backup will likely be large and take some time to create.

While these are plugins are built with the purpose of backing up multiple aspects of your WordPress site, if the site has a really large database using the plugin will use considerable system resources. Keep an eye on your site to see if you notice any slowing down or even a crash. This will let you know you might want to look at a more robust server. Every bit of automation helps. The more you can automate the tasks you hate to do, the more money making work you will be able to do.

How have you been backing up your WordPress site?

September 06 2011


The Burden of File Synchronization

First world problem alert! If you have the luxury of using two computers for your day-to-day coding – for example, a desktop for the office, and a laptop for home – you’ve likely found yourself complaining (or cursing) when your files aren’t syncing correctly.

Why can’t my laptop be an exact mirror of my desktop?

I know I have! I’ve even thought to myself, “Why can’t my laptop be an exact mirror of my desktop?” Well, there are ways to accomplish this, but, they’re time consuming and aren’t as consistent as you might hope. Nonetheless, let’s review a few ways that we can sync two computers.

Sync your Home Directory with Dropbox

It’s likely that all of us use Dropbox to some extent. The default installation will create a ~/Dropbox directory; however, we can also use “Selective Sync” to define which folders should be watched.

Selective Sync

Now, we could sync our entire home directory, as exemplified in the image above. There are still potential concerns with this method though:

1 – Space ain’t free, yo!

The basic free Dropbox plan offers 2GB of space – in other words, not very much. If you intend to sync your entire Home directory, you’ll need to commit to either the 50GB or 100GB plans, which will run you $120 or $240 a year, respectively. Yikes! Even worse, if you’re like me, you’ll find that even 100GB isn’t enough.

Dropbox Plans

2 – Endless Syncage

If you do choose to sync your entire home/ directory, you may find that, seemingly at all times, Dropbox is syncing. Download an iTunes movie on your laptop, and, when you turn your desktop computer on, it’ll take an hour to download that one large file. This can be incredibly irritating. Also, while, as I understand things, the process of downloading a large file shouldn’t interfere with small documents being synced at the same time, I’ve found that it often does. If I save a Word document on my laptop, sometimes it can be a good wait before it shows up on my other computer.

All of these small irritations quickly add up.

3 – CPU Intensive?

I must admit that this one is a bit odd. I’ve noticed that, at some points, Dropbox can be a bit hard on my CPU. After checking my computer’s Activity Monitor, I’ve found Dropbox taking up as much as 30% of my CPU, dramatically reducing my computer’s performance.

All that said, this seems to be a sporadic effect. As I write this article, while syncing, Dropbox is using less than 1% of my CPU. It’s certainly odd. Maybe you guys have some notes in the comments?

Use Synchronization with GoodSync


If you require a cheaper way to sync your files, you might look into GoodSync, which allows you to create any number of jobs (free edition is limited to three). For example, I could create a job which, each day, copies all of the files from a particular directory on my desktop over to my laptop. Alternatively, I could also instruct GoodSync to actively watch my Desktop directory and copy files over in real-time. If you choose this route, note that it can affect your computer’s performance a bit.

The obvious advantage to using GoodSync is that you’re not paying a monthly fee.

The service even makes the process of locating the various computers in your local network as easy as possible. If you sign into GoodSync on each computer, your file system will automatically be available across all computers.

Up until now, this is the method that I had been using. It certainly works, but, again, there are sporadic hiccups. Most notably, I still have to wait for the necessary files to copy over, and, again, from time to time, the app seems to falter and miss certain triggers.

It’s Difficult to Sync Settings

While some apps allow us to sync configuration settings and databases, via Dropbox, others do not. For instance, let’s consider an app that allows you to save commonly used snippets (Snippets in my case). You’ve likely found frustration in the fact that a snippet you save to your laptop’s version of Snippets will not be available on your desktop.

Snippets specifically allows you to sync your XML database via MobileMe, but most of us don’t use it – so, back to the drawing board.

The Common Solution

On the Mac specifically, the frequently advertised solution is to create a symlink.

So let’s do one together; our job is to sync the database for Snippets across our two computers with Dropbox. This database XML file will be stored within ~/Library/Application\ Support/Snippets.

First, cd/ to the Application Support directory, mentioned above.

 cd ~/Library/Application\ Support

Next, we’ll copy the Snippets directory over to Dropbox. If you’re not syncing your entire home directory, keep things clean and create an Application Support directory in the root of your Dropbox folder.

 mv Snippets ~/Dropbox/Application\ Support

Now, we’ll create a symlink. Make sure you’re still within the ~/Library/Application\ Support/Snippets directory, and type:

 ln -s ~/Dropbox/Application\ Support/Snippets Snippets

To better understand this line, think of it as: ln -s [path/to/directory/to/sync] [path/to/new/folder].. This code creates a symbolic link, which allows us to store Snippets’ database on Dropbox, but still function as expected. The app will want to find these files in the Application Support/ directory, and this method allows for that.

Repeat these steps for each computer, and then test it! Create a new snippet on your laptop, and watch it show up on your desktop, after Dropbox syncs the file.

So sure, this method works; but it’s not perfect.

  1. It’s time consuming. Will you do this for each app, or symlink your entire Application Support directory?
  2. Not all apps can be synchronized this way. For example, Quicken will kick up a fuss if you use this technique. I’ve yet to find a way to get Quicken to play nicely across multiple computers. There are countless forum threads on this particular topic. It’s easier to use, if it’s available where you live.

Why Complicate Things?

One day, not more than a week ago, as I found myself, again, wishing that my laptop was a mirror for my desktop, I realized that I was complicating things. Why do I need two separate harddrives? How much time have I wasted researching synchronization tools?

From today on, I am now a “one computer” man. I’ve sold my iMac and laptop, and have replaced them with a 15 inch Macbook Pro and a Thunderbolt display. When I’m in my office, I connect the laptop to my monitor, work in the glorious 27 inch fashion that I’ve grown accustomed to. And when, I’m on the couch, or – gasp… in bed working – the laptop is disconnected, and it’s business as usual.

No more synchronization, no more complaining, no more hassles. It took me years to choose the most obvious solution.

My Question for You Is…

If you are in a similar position, how do you personally deal with the burden of file synchronizing?

September 01 2011


Using Dropbox Like a Pro: Tips and Tricks

Dropbox is a free service that allows you to store all of your documents, photos, and videos online. It is an excellent and free tool for helping you securely store files that are crucial to your business or your life. It allows you to store just about any type of file you can imagine, and Dropbox gives you a generous amount of storage space to keep your files.

Before you start using Dropbox, there are two things you need to do:

First, you want to sign up for an account. It’s absolutely free. (If you decide later that you want to upgrade your account, you may upgrade and get even more storage. Just check the website for further details.)

Now click the link that says Log In. At the bottom of this box you will find a link that says “Create Account.” Click this link and follow the instructions.


Next, you’ll want to download the Dropbox utility and create a “Dropbox” on your computer. This is really simple, and you may use Dropbox on a PC, Mac, or even a mobile phone. Download the proper application for your technology and then install it. (You’ll need your username and password for this to log into your account.)

Once you get set up, then open your Dropbox folder and start dragging files into the folder to synchronize with your online account and store your files. Every time you drop a file into this folder it will sync with your files and folders online as long as you have your Dropbox turned on. (The easiest way to make sure this happens is to set your Dropbox application to load when you start-up your computer.)

Getting Started

After you’ve set up your account and added your files, now it’s time to log into your online account and understand all the features available to you.

Your first step here is to click on the Getting Started tab and follow the instructions. This will allow you to make sure you have completed all the steps in setting up your account. You are also offered an opportunity to make referrals and earn more storage space.


On this tab you’ll find your files. Check to make sure you have loaded all of your files, as well as loading them in the right folders. Unless you want others to have access your files, load your files outside of the public folder but inside of the Dropbox folder. Since you can customize this area as you like, create and name your folders anything you want and then load your files appropriately.


Track all your account activity in the Events tab. With the Events tab, you can use it to help you if you accidentally delete files or you lose track of them. Use this tab to help you track down the files and decide where your files went. Event is also an excellent way to decide if any unauthorized activity has taken place in your account. You won’t use this tab much, if at all, but you’ll be glad you have it if you misplace anything.


One of my favorite tools on Dropbox is the Sharing tab. The sharing tab makes it super easy to share files and folders with your friends. In fact, there are actually two different ways to do this.

First, you can generate a link to the folder you want to share. To do this, move the folder you want to share to the Public Folder within your Dropbox. Once you have moved the folder, go to the Public Folder and right-click on the file or folder you want to share. This allows you to generate a direct link to the file.

The second way to share files is to email the link to those you want to share them with. Just click “Share a Folder.” Choose the folder you want to share. Follow the prompts on the menu. When you are ready to send, enter the email addresses of those you want to share the files with. Those receiving your email will get a link to the folder and can download the contents.


One of the things I like best about Dropbox, besides its flexibility, is that it offers an extensive help file. Get all your questions answered here. You will also find more applications for your mobile phones. This includes the Blackberry, iPhone, iPad, and Android. (If you are using Dropbox on your computer, you will find applications for Windows, Mac, and Linux.)

Different Ways to Use Dropbox

1. Store your business files and folders. (I store my manuscripts for my books.) With this option, consider storing your files according to purpose or type.

For example, if you have a lot of marketing software you need to back up, then create a folder for it. You may also consider function. I store all the files for website updates I want to complete inside of a folder by that name. I also have a folder for tasks I complete. By creating these folders, it saves me a lot of time locating projects I’m working on.

2. Store videos or any other files you sell. You can even send your buyers directly to the folder where you have stored their purchased files.

Heres’ how you do it: Create an autoresponder and download page. Add the subscription box to your download page so your customers can subscribe. Write an email for your autoresponder and make it the first email in your autoresponder series. Include the download link inside of this email.

3. Keep backups of your backups. If you delete a file, it’s not a problem. Dropbox maintains a copy of all deleted files for up to one month. All you have to do is log into your account and “undelete” the appropriate file. Your files will sync back into your folder on your computer.

4. Take everything with you. It doesn’t matter whether you are using these files on your computer or on your mobile phone, you’ll always have access to them even when you are offline. As I mentioned are apps for iPhone, iPad, Android, and BlackBerry. Download the free app and install it on your phone. This is especially useful if you shoot photos with your camera in your phone.

One consideration: if you are using your mobile phone to get access to your files, you can’t upload files from your phone to your Dropbox. (You can only download.) In this situation, I would recommend you sync your phone and computer. Dropbox allows multiple devices so you will always have access to your files no matter where you are.

Whether you are taking a trip, or you simply want to share photos with friends and families, you can use Dropbox. For example, you are planning a trip out the country. You have an itinerary and other documents related to your trip. You also want a place to store any photos you make so you can share them with family and friends.

By installing Dropbox on all of your devices, this problem is easily solved. Sync your devices every time you make an update, and you’ll have everything you need when you need it and where you need it.

January 30 2011


Build a Dropbox-like File Sharing Site with Ruby on Rails: Premium

In this massive and advanced Premium Nettuts+ tutorial, we’ll learn how to build a file-sharing web application, like Dropbox, using Ruby on Rails. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Sign Up Page
Folder Deleted
Invite Form
Shared Folder View
Sign Up Page

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

January 02 2011


20 Great Web Applications Alternatives to Usual Desktop Software

Desktop Software has been a great help in our computer work purposes. They serve as our working tool on our projects, designs, hobbies, interest etc. But web apps have set a great trend over the web. Developers of web applications created applications that are likely powerful as the desktop software but create more great output and easiness.  The best thing is that you don’t need to install any of these web apps to use. Just browse over the web and visit these great web applications.

In this article, I’ll be presenting 20 great web applications alternatives to your usual desktop software. Hope you will love it.

1. Google Docs

Google Docs serves as your online productivity tool. It will let you create your documents, spreadsheets, presentations and more online writing tool.


Alternative for :

  • Microsoft Office
  • Open Office

2. Meebo

Meebo is a web platform for your mostly chat applications. You can login your IM accounts at the same time or individual accounts.


Alternative for:

  • Facebook Chat
  • Yahoo Messenger
  • AIM
  • Windows Live Messenger

3. Slide Rocket

Presentations are really vital tool for business, education , projects and more. With Slide Rocket, a web presentation tool that allows you to create your own presentation. It presents some of the features in PowerPoint.


Alternative for:

  • Microsoft PowerPoint
  • OpenOffice Impress

4. Aviary

Aviary is a powerful web creation tools for photo editing, logos, web templates, color palettes , audio editing and more.  There list includes Phoenix: Image Editor, Toucan: Color Editor, Myna: Audio Editor, Peacock: Effects Editor, Raven: Vector Editor, Falcon: Image Markup and Roc: Music Creator.


Alternative for:

  • Adobe Photoshop
  • Adobe Illustrator
  • Soundbooth

5. Mint

Are you having a hard time to manage your money? Then Mint is all you need. It is a web tool to access to your free personal financial and online management tool.  It will help you to organize your financial accounts, set your budgets needs, and put up your savings.


Alternative for:

  • Quicken

6. JayCut

JayCut is a web video editing software. With a user-friendly environment, it will let you create your videos, add and edit clips, transitions, effects, audio, download, export in Youtube and more.


Alternative for:

  • Windows Movie Maker
  • Ulead
  • Other Video Editing Software

7. WobZip

Wobzip is an online tool that makes you uncompressed your files on the fly. It supports different compression format such as ZIP, RAR, and more zip formats. It has also an active scanner that scan your compressed files before unzipping it.


Alternative for:

  • Unzipping Softwares

8. Zamzar

Zamzar is a powerful online file conversion tool. It converts various formats for documents, image, music, video, e-book, compressed files, cad formats. Just follow 4 easy steps to convert your files instantly.


Alternative for:

  • File Conversion Software

9. Hulu

Hulu is a video/TV streaming website that lets you watch your favorite tv shows right at your computer. If you missed some of your favorites episode you can just tune in here and enjoy watching.  Hulu is a US exclusive website, but if you are outside the US and trying to access it, you can try this link.


Alternative for:

  • TV Tuner Software

10. TokBox

If you love to video chat, TokBox is a great online video chatting applications. For free users, you can chat up to 20 people. Just simply sign up,invite your friends and start video chatting.


Alternative for:

  • Video Chat

11. Moof

Moof is an online web streaming music online for your favorite music. It is like bringing your all favorite music rolled into one place. One of the great feature is you can export your iTunes library and put it into web so you will never missed out your favorite tune.


Alternative for:

  • iTunes
  • Music Streaming Software

12. ESET Online Virus Scanner

Everyone wants to be secure in terms of viruses and malware. ESET Online Virus Scanner deep scan your PC using your web browser.  The good thing is that you don’t need to install the software and it is always up to date.


Alternative for:

  • Anti Virus Software

13. Bitlet

Bitlet is a web application that lets you download your torrents. Just upload .torrent file on your computer or direct Bitlet to torrent and Bitlet will do it for you.


Alternative for:

  • BitTorrent Client

14. icloud

icloud is a web operating system over the web. It is like bringing your own desktop and files running in your web browser that includes an office suite, media player, chat client, games, productivity tool, utility applications and more. Now you won’t worry that you are working in a different PC.


Alternative for:

  • Operating System

15. Splashup

Splashup is a powerful editing tool and photo manager.  It will let you manage your images and save it in different format. Various features that are likely with Photoshop.


Alternative for:

  • Image Editing Tool

16. Wufoo

Wufoo is a great building tool for your forms, invitations and survey applications. It makes your collecting of data much easier and in customize way.


Alternative for:

  • Survey Creating Tool

17. Google Voice

Google Voice makes a huge deal in international calling communication. It delivers various features such as voicemail transcription, one number calling, sms to email, block callers, screen callers, conference call and more. Bringing your all phone into your gmail account given that you are in US and Canada.


Alternative for:

  • Skype

18. movavi

movavi is an online video files converter. It supports multiple formats that you need for your videos. In just 3 simple step, you will get your converted video file and watch.


Alternative for:

  • Videora
  • Xilisoft Video Converter
  • Other Video Converter Tool

19. HootSuite

HootSuite is a web apps for your social  networking experience. Updating and monitoring your social activities such as Twitter, Facebook, LinkedIn, WordPress and will be easy.It is also good for businesses that tracks statistics of their business over the web.


Alternative for:

  • Social Network Tool
  • Statistics Tracking Tool

20. Balsamiq

Balsamiq is a web wireframing tool that is great for web designer and developers. It will make your drawing more in detailed and rearrange it easily.  It is a great tool to collaborate your team work.


Hope you will enjoy this great web applications. If there are more great web apps that we missed, please tell us so and we will love to update it.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
No Soup for you

Don't be the product, buy the product!

YES, I want to SOUP ●UP for ...