Project: Read It Later Dashboard Prototype

Me and @bennedich decided to make a prototype of the Reading Statistics idea while keeping it fully hosted in Dropbox. That means pure HTML, CSS and JavaScript (although we wrote the JS using CoffeScript). For fancy graphs we picked Google Chart Tools. Here’s a shot of the final prototype:

Screenshot of the RIL-Dashboard prototype

First we took a look at what the ReadItLater API offered, as we both use the service for our reading. It’s fairly simple and just gives you a list of all the articles, where each article has:

  • Item ID: unique id identifying the url
  • URL: the article url
  • Title: page title
  • Time updated: Unix timestamp of when the item was last added/changed
  • Time added: Unix timestamp of when the item was added to list
  • Tags: user entered, comma-seperated
  • State: read or unread

We thought of a few specific stats we could easily calculate and drew some sketches. Basically some kind of big line chart, and then some numbers around it.

Then we looked at all the chart types provided by Google, grabbed screenshots of them, and ordered them into potential dashboards.

For our first prototype we picked the easiest one just to get all the pieces in place. A simple bar-type distribution chart of how many articles are read after a set amount of time (i.e. X articles on the same day, Y after 1 day, Z on after 2 days, etc). The three main numbers below the chart were average articles added per day, average read per day, and average time between adding an article and reading it.

Parsing and calculating the stats was the easy part. A problem we have is that RIL doesn’t support JSONP. To get around that we used Yahoos YQL service. A potential new project would be a JSON tunnel.

Finally we added a small login-screen, on the same page, put the data in the REST-call and blam! Done!

Now, try it out!

Advertisements

4 software developer uses for Dropbox

1) Static website host

You can use your dropbox to host small websites. They’re great for showing of concept mockups in pure HTML/CSS, just put the files in your public folder and you’re done. If you do some JavaScript you can even get applications running, like aggregating Twitter. You can even use it to create a start-page for your browser [2].

There are some frameworks you can “install” to get even more power on your dropbox site, like Drop Pages and TiddlyWiki.

2) Synchronize applications

There are two ways to keep some of your apps synced. One is just putting the config-files, chatlogs, etc in Dropbox. 

You can even synch your game saves! Some even support it out of the box, like Broken Sword for the iPhone.

The other way is using packaged apps for USB sticks (PortableApps), and putting the whole app in Dropbox. Personally I keep a copy of FileZilla with my sites in case I need to access one of my FTP’s. Others keep password apps like KeePass. I’ve tried having a browser synced, but noticed that the tabs I have open on one computer (work) isn’t what I want to see on another (home). Notepad++ with custom settings works great too.

3) Source control repository

Quite simply you can put a repository in Dropbox, in a shared folder with your team. It’ll work like a hosted repository and you’ll get free redundancy. The downside is that it doesn’t handle simultaneous checkins very well as it’s synching between computers.

4) Wireless transfer files to mobile devices

The Dropbox iPhone app can send files to apps that are registered for the file extension. So any .epub will prompt to send it to iBooks, which I use a lot on my iPad. The same with PDF and other files. I’m not a big fan of iTunes and I’m an even lesser fan of cables, so just putting a file in Dropbox and opening it in my iDevice is perfect. Most publishers will give you several filetypes if you buy an ebook directly from them. O’Reilly have good deals that include ePub, Mobi, PDF, APK and Daisyj, which is great since Microsoft Press works with them. Here’s a good tutorial.

Some extra tips: