Goodreads

Total page views:

Another weekend, another hackathon, this time only bigger and better. Angelhack was conducted on June 23 and June 24 simultaneously across four different cities in the country – Palo Alto, Seattle, Boston and New York. I was highly motivated for this one after we won the AWS track 2 weeks ago at AT&T hackathon. The morning of June 23 was a busy one at the Palo Alto AOL campus. Developers and start-up thinkers swarmed in as the day started. As I was entering, one of the geekster asked me – “Excited ?”, I nodded, he replied “me too”. It was very evident, everyone was.

Pitching sessions – About to start

Pitching sessions started, I heard some really awesome ideas. It made me wonder if it was even possible to build such things in 2 days at a hackathon, facial recognition for example. I had some ideas in mind, but somehow I did not see them happen at a hackathon. I was ready to help any team which had a good one. Michael Leonhard had an idea, it was about a product that would monitor web services and provide analytics for servers. Being a Java backend programmer for many years now, server analytics sounded like a comfortable idea to work on. Steve Wilmott, CEO of 3scale.net was also impressed with this idea. My good friend Harshit Chitalia was also looking for something to work on. The best part about teaming up with him is he is ready to learn and do anything. We were also representing the Blackberry dream team after our last win, where we won the awesome Playbooks. We teamed up.

Serverlytics team – Me, Steve, Michael and Harshit

The sponsors list at the event were huge – Blackberry, Windows Azure, Firebase, HTC, Google, Samsung, about.me, Facebook, Klout, Pearson, Singly and many others. We managed to get a huge room for ourselves, official enough to call it an office while others scampered around in a common hall. We put down the architecture on the white board. After going back and forth a lot on what to name our start up we descended on serverlytics.com (Analytics about servers). That is a very cool name! We distributed the tasks and the coding began. We put the repo on Github. I took up the task of displaying analytics on a graph using Javascript. Although Java server side is my strength, I am spending quite some time on Javascript these days. After-all hackathons are all about learning.

Product video submission guidelines

Why Raphael was my devil at the hackathon ?

I wanted to build the graphs using a Javascript library quickly and work on the server side which was both challenging and interesting. I had a fair bit of idea about Raphael.js as a javascript library for rendering graphs and charts. So that was my choice obviously. First look at Raphael.js library shows the demos which are colorful and nice, but it was missing examples. I looked around for some plugins or extensions of this library which were simple enough to be implemented for the hackathon and found g.Raphaeljs. After a little bit of poking around, the examples seemed pretty straight forward. Started putting it together for the application. The line and bar graphs did show up. And I was able to test it on Blackberry Playbook. The hover events rendered beautifully but with an issue in the library w.r.t to hover popup display. Another problem was, there was no data in the x and y axis in most of the demos. For graphs that is a very important component. This was where I started disliking the library a little bit. I had to push this to the next day.

June 24 morning I was back at the hackathon trying to get the data into x and y axis. Searched for every available help online about the axis data. There are mentions about using r.g.axis (a call on Raphael object and g Raphael object) to add x axis data. But the g.Raphael js gives an undefined object on this call and r.axis also errors out with the same issue. It was almost afternoon when I was still struggling to get the x-axis data. Why can’t there be a simple js library where you just provide the x-axis, y-axis and the data in an array to plot ? Google charts came to my rescue. It is simple, elegant and easy to follow. I got the line graphs up with the all the data just in time for the demo. The x-axis had the http response codes (200,404,500 etc.) and y-axis had the number of occurrences of these codes on the server over last one hour. It worked like a charm on the Blackberry Playbook.

Google graph library – Simple and elegant

In the meanwhile, Steve, Michael and Harshit built the backend, hosted it on a public domain, got the api up, generated unique keys for customers and also submitted the video for the judges explaining what our product does. In between all the fun we had, we missed some very key things. We had not used any APIs from the sponsors. But our product was live and ready to go right then. Anyone could sign up, download a client on their server and get their data through the api or see the data on the graph. The product was just awesome, however just was not suited enough to this specific hackathon. We did not make it to top 30, but we learnt a lot. Hail hackathons!

June 9 is a special day, because after more than 2 years I made myself go to a hackathon in AT&T Foundry, Palo Alto. The previous one was Google wave in 2009. June 8, Friday was the opening day of the “AT&T hackathon – Education” for networking and pitching the ideas. I myself did not have any idea but was open to teaming up with anyone who had a good one.

Opening session and ideas pitching

The pitching sessions opened with the keynote from AT&T developer evangelist Alex Donn. He mentioned about a recent report that one in four students drop out of high school. This hackathon produced by AT&T was supporting the cause and encouraged developers to bring out something good for the kids to motivate them to continue school and graduate. Alex Skidanov & Maria Skidanova from MemSql pitched a great idea of building Math and logic puzzles for kids. That way kids learn the subject and compete with each other over a game. I was very impressed with the idea. I went up and spoke to them after the session. Harshit Chitalia, a friend mine also agreed that it was a great idea. We quickly formed a team and decided to build the puzzle game for the hackathon the next day.

We all met in the morning on June 9, Harshit had grabbed a big nice table for us to work together. The discussion about the game design started. After some rigorous brainstorming we decided on the design. Now to implement it we wanted to use all the cool applications that were demoed at the hackathon – Tiggzi, Usergrid from Apigee and Mongolab. But we had to let that go with our design constraints. HTML5 and Javascript was in our minds for front end. So we scribbled the design on the paper towels and started working on the front end code. Alex fired up the base code and hacked an awesome animation to cause damage to the opponent when the opponent loses. Maria, Harshit and I had to work on three puzzles – Set difference, Linear expressions and Boolean logic. It was already 2pm, when we realized that we had very less time left and lot of unfinished work. Hacking the code for each of the puzzles began.

Hacking away the game

Coke, Gatorade and Red-bulls flowed with sandwiches and nachos. People asked us about our game. Larry McDonough from Blackberry promised us play books if we could make it work on BB playbook. We managed to push the puzzles code to Github by 4pm. Then we hit a roadblock, we needed a server to push responses to two clients who participate in this two player game. Alex hacked a quick PHP / MySql server on Amazon WebServices within 30 min. The code was integrated, minor glitches were fixed and it was all set for the submission – “ENGAGE!” , as Alex claims when everything starts working, our app ATTHACKGAME was ready for the demo at 7pm.

Screen shot of the game – ATTHACKGAME

After several apps, they called us on to demo. Harshit and Alex did the talk, while Maria and I demoed the game on the big screen live on iPad and Blackberry playbook. That was the best part of our game, it worked on several devices thanks to the compatibility of HTML5 and it was live. It rocked on Blackberry playbook and iPad. The audience responded with an applause, but we felt we could have done better. After nearly 2 hours of wait at 11 pm,we were announced winners in the AWS challenge category. The other winners are here.

Coders helping coders has opened up such an awesome community on the internet. If you want to play with some javascript there are abundant resources. Get an rss feed of a website and combine with a nice presentation layer, you can create wonders. I spent sometime looking into the jQuery RSS feed parsers, Zazar has some real good plugins worth mentioning – Zazar.net zRssFeed. Using this plugin is real simple, set these parameters and you get the feed

The twitter api provides access to individual timelines in this format – http://api.twitter.com/1/statuses/<username>.<format>

However when I tried to read my twitter feed using the above url, the feed did not render. Zazar has built a twitter jQuery plugin called zTwitterFeed that works like a charm. It is very easy to integrate twitter feed into your website. You should really check this plugin out – Zazar.net zTwitterFeed

Implementing a website with lots of hover-in and hover-out has a danger of running into a problem where even an unintentional hover and a random drag of the mouse pointer can trigger the hover events in javascript. That can make your website look like a radioactive experiment. The jQuery plugin I loved the most is hoverIntent.js, it delays the trigger of hover event based on the parameters you set. Basic and advanced configurations give you just the enough control on the hover behavior.

Coming to my website design, I combined all the above plugins and designed a few social media icons, and conceptualized my website - http://vinaynag.me . Though there are a lot of changes yet to be done, this is a beta version good enough to be released. I love it.

Just playing around a little bit of iOS prototyping tools, found Keynotopia application quite useful.

Keynotopia costs $0.99 on the app store and the templates cost around $9 each. Most of the buttons, scrollable menu, pop-up text box designs etc. are readily available which makes it easier to design. The app itself opens the prototype as a PDF. So A PDF builder such as Keynote or OpenOffice.org will help in building the prototype. All the UI elements are linked together as a hyperlink. So every object or page can be linked to the next resulting slide using a hyperlink. This is all saved as a PDF and you can add this PDF to the app on iTunes. I just loved the simplicity and design of creating prototypes. Quite a useful tool.

As I was going through some prototyping tools, found another tool called Interface which seems very easy. No hassle of PDFs , hyperlinks or slides and costs $9.99. This tools lets you create iPhone prototypes on iPhone. The Interface demo video is worth a watch. They say the ‘Live Preview’ feature shown in video is no longer available due to Apple’s SDK restriction, so not sure about what part of it you can build using only iPhone.