Hawaiʻi's Technology Community

Over the past year, the City and County of Honolulu and Code for America pushed to make the city's data open to the public. The city has a tight budget and can only dedicate a small amount of resources to the creation of applications using this data, so opening it up allows people in the community to work with this data. Recently, they published a list of their available datasets online. These datasets include traffic data, parking structures, and lots more.

One of the datasets that was recently made available is a list of HI-5 redemption centers. Personally, I don't go out and redeem my bottles and cans very often. Like most people, I have a bin for these redeemable cans and bottles and take them to a redemption center when the bin is full. In my area, the redemption centers aren't always open. Some are only there on certain days of the week. Using the city's data, I wanted to create an app where I could see where the nearby redemption centers are and their hours. I also took this opportunity to use technologies I haven't really used before. My goal was to create an web application that used CoffeeScript on both the front-end and the back-end.

If you haven't heard of CoffeeScript, it is a language that compiles to plain JavaScript. For starters, it cleans up some of the "ugly" parts of JavaScript like semicolons, the "var" keyword, and the need to use "===" and "!==". It also provides some additional features like string interpolation and list comprehensions. The main downside of CoffeeScript that it needs to be compiled to JavaScript in order for it to run in most browsers. So, if you see a JavaScript error in your browser, it can be tough to figure out what that corresponds to in your CoffeeScript code. Still, I prefer writing it over plain JavaScript and I haven't run into any major debugging problems yet.

The front-end uses a combination of jQuery Mobile and Backbone.js. While I have used jQuery Mobile before, this is the first project where I used Backbone.js. Even though I've done a few tutorials with Backbone, I had some early struggles with getting it set up. It turns out it also doesn't play well with jQuery Mobile because they both want to do routing their own way. Fortunately, I found a blog post that shows how to disable jQuery Mobile's routing in favor of Backbone's.

For the backend, I chose to use Node.js and MongoDB. While I could use Backbone.js to get the recycling centers directly from the API provided by the city, I wanted to be able to calculate distance from a location, which could be expensive to do on the user's browser. Fortunately, MongoDB has built-in support for geospatial indexing, so I set up an index when I import the data from the city's API. Then, a simple query can get me the locations sorted by distance from a provided latitude and longitude. The Node.js server is just there to set up the first page of the application and serve as an API.

The app is hosted on Nodejitsu and is available at The source code is also available on GitHub. Feedback is welcome. I already have a few features to work on when I have the time.

Views: 402


You need to be a member of TechHui to add comments!

Join TechHui

Comment by J. David Beutel on September 28, 2012 at 10:27am

I just tried the app.  It seemed to query my location, but now is stuck at "Loading".

Comment by Curtis J. Kropar on September 26, 2012 at 1:59pm

@George (@Daniel)
Correct : Referring to
Sorry, I should have been more clear in my original post.

Comment by Seth Ladd on September 25, 2012 at 3:06pm

Thanks Dan. @George, our JS-Dart interop lib is intended to help you use JavaScript libraries like Twitter API, Google Maps, Facebook, etc. We haven't tested if Backbone would work well yet. I love to see the new structured client-side frameworks gain traction for web apps. Dart is working on Web Components now to test how it works with Dart.

Comment by Daniel Leuck on September 25, 2012 at 1:43pm

@George Lee - They recently released a Dart / JavaScript interop library so it should be possible to integrate with Javascript libraries such as Backbone.

Note that I'm not advocating the use of Dart over Javascript in every scenario. I think Dart is particularly well suited to programming in the large (e.g. something like Google Apps.) The large and highly active Javascript community is certainly a huge asset for frameworks built in the language.

BTW - We have a speaker from Google coming to MIC next Monday to talk about Dart.

Comment by George Lee on September 25, 2012 at 7:57am

@Curtis - I'm guessing you're referring to I can see how that would happen on smaller screens. It's funny how the default sort order is "most relevant". What does that even mean?

@Dan Leuck - I'm interested in checking out Dart, but I don't have a good sense for how well it plays with Javascript libraries like Backbone. I find the Javascript community interesting because of all of the ideas and libraries that are being developed both on the front-end and the back-end.

Comment by Curtis J. Kropar on September 24, 2012 at 11:42pm

First thing I would say is poor website design to show the data sets
There is no vertical scroll bar. I am on a laptop and originally thought. "wow, only 10 data sets ? Not too impressive" then I realized there is no vertical scroll bar. I have to turn off my status bar and auto hide the task bar to see that there is navigation at the bottom of the screen.

Comment by Daniel Leuck on September 24, 2012 at 3:43pm

Its great to see new projects that use Honolulu's open data popping up on TechHui!

CoffeeScript is definitely a huge improvement over Javascript. My favorite Javascript alternative (i.e. language that can compile to Javascript) is Dart. In addition to being a class-based OO language with good tool support, it can run on the server in a Node.js-like fasion.

Comment by Joseph Lui on September 24, 2012 at 10:57am

Very cool.

Not directly related is also cool how "Current Location" works from a non-GPS device, though I am suspicious of how accurate those LAB reads and privacy issues are.


web design, web development, localization

© 2024   Created by Daniel Leuck.   Powered by

Badges  |  Report an Issue  |  Terms of Service