Yesterday Scott Downe, Matthew Schranz, Dave Seifried, and I participated in HackTO, the Toronto event of HackDays. The idea was to create an application in only 7 hours using these APIs:
There was prizes for the top 3 apps ($2000, $1500, and $500) as well as separate prizes for the best use of an API. The hackday was held at the Freshbooks HQ, which was a great location. Plenty of tables, chairs, power, and the wifi worked! Beautiful office too, reminded me of the Mozilla Toronto office:
App demos
Our idea, planned out over email beforehand was to use the TinEye MultiColor API to build a composite image. We wanted something iconic, something that represented who we are:
The day started off with presentations by all of the API representatives. We were pretty set on using the TinEye API, but we also looked at integrating Popcorn playback into the creation process. Since SoundCloud was one of the APIs available, Scott started using to create a Popcorn plugin that would display images in a 2D grid. I started on slicing the logo into many different slices, Dave worked on interfacing with the TinEye Multicolor API, and Matt worked on analyzing colours with Web Workers.
At lunch, we had lasagna and garlic bread. The perfect food to keep hackers fueled. I finished up my image slicing work, and started to help Dave with the API. There were two problems with the API:
- It was not CORS-enabled, so we needed a same-origin proxy
- The extract_colors method required uploading a binary PNG
The first problem was solved with a nodejs proxy; the tricky part was also getting node to host the static site content.
Solving the second problem was difficult, until we did a bit of reading. Everyone knows that you can create PNG data URIs from canvas tags, but we weren’t sure how to send data in a form that the API would accept. After some failed attempts at encoding data and some more reading, I stumbled upon the Building an HTML Image Uploader article on hacks.m.o and Using FormData on MDN.
After we solved these fundamental problems we were on a mad dash to polish our demo as best we could. We ended up dropping the Popcorn Soundcloud integration in favour of simply having the image be composited live. In the final half hour before the bell, the network and TinEye APIs conspired to make us as stressed as possible. This is what we get for breaking David Humphrey’s golden rule, never rely on the network. In the end, I closed the lid of my laptop, and we left it to fate to decide whether our demo would work.
And it did.
Hilariously, there were three other teams that implemented the *exact* same idea. And one of them even used the Firefox logo! We used the TinEye API better (extract_colors and color_search), but the other teams had better looking composite images. Our heavy reliance on the TinEye API meant that we couldn’t make an image as detailed as the other two teams.
If you’re interested in seeing all of our code, it’s available in my GitHub account.
We didn’t end up winning any prizes, but we built an app in 7 hours, got some great swag (I got *5* t-shirts!), and had a great time seeing all the apps people built. It was great comparing notes with the other TinEye API users, to see how they built their version of the app. I’ll definitely be going to the next HackTO. And I hope that you, dear reader, will come too!
Pingback: HackTO: Boom! « HackDays