I spent my Saturday with some awesome people, hacking together an HTML5 webapp.
We were at the Ottawa Google Hackathon; a Google-sponsored event held at the University of Ottawa. Here’s a run-down of how it went from my perspective:
Free Bagels!
This was the first thing I (everyone) saw when they walked in: a table full of about a dozen kinds of bagels, with a dozen different cream cheeses. It was heaven. I instantly forgot that it was barely past 8am on a Saturday.
And it was delicious! Serious kudos to the organizers for deciding that this was a good idea, because it absolutely was.
Lightning Talks
Not everyone at the hackathon had the same level of experience with HTML5. The organizers had sent out a survey ahead of time to gauge what the least-known technologies were, and prepared a few quick and simple demonstrations of each.
Here’s what was covered:
- Web workers
- Canvas
- Web sockets
I’ve always found talks or blog posts about canvas to be especially boring because there’s really nothing to learn. It’s a canvas. You can draw on it. You’re going to have to look up the API to do any real work with it anyway, a Hello World in canvas isn’t going to teach you anything. But alas, it’s what the people demanded.
That’s not to say it was a bad talk. The speaker (someone from Google) was very entertaining. In fact, all three presentations were easy to absorb and fun to watch. The highlight was when one Google employee was explaining what to do if you get stuck on an HTML5 problem: Just do a Bing-search, he said. We all had a good laugh.
Not much Twitter action.
I always tell people that conferences are about the only time that I become an average Twitter user. I’m not around much most of the time, but at any sort of large techie gathering, I’m all over the event’s hashtag.
This time around, though, it seemed like only a handful of us had Twitter accounts. I’m not sure if that’s due to the demographic (hardcore programmers are too anti-social media?) or simply because everyone was super-busy trying to bring their apps to fruition (we’ll get to that in a sec). Anyway, just something I wanted to see more of.
Take Tetris, and turn it on its side.
After the lightning talks, everyone kind of broke up into groups and started talking about ideas for a fun app. That heading up there was my pitch; I wanted to make a Tetris game where pieces come from the left and right, and two players have to work together to build lines in the middle of the screen.
Sounds pretty awesome, right? Yeah. It does. But “we” decided to make a LightCycle game instead. Not that I was bitter, it was still a fun idea.
The premise for our LightCycle game was that there’s no real reason why it must be restricted to two players, and no reason why the players can only move in straight lines. We decided to make the board a circle, and have the left/right arrows control rotation, so the cycles travel in curves. Neat, eh?
Anyway, the fancy HTML5 technologies we needed here were web sockets for the multiplayer, and canvas for the drawing. We also needed a lightweight server (we chose NodeJS) and some basic HTML/CSS/Javascript to tie it all together.
Time to git us some source control!
(sorry)
About half the table was in love with git, and the other half had never used it before. I was pretty adamant about git, because I was one of the git-versions git-virgins, and I wanted to see the light. So our team spent a solid 45 minutes unlocking it’s gitsteries.
You know… Mysteries. Regarding git.
Yeah, I’ll stop.
Ad-hoc Organization
Have you ever seen seven developers with little-to-no management experience self-organize on a seven-hour project? That’s one developer for each hour in the project schedule. Clearly, we had no time to waste on overhead.
Since we were all sitting at the same table, discussions were held aloud with participants drifting in and out as needed. We also had a Google Doc set up for things that were hard to remember, or things that we copy/pasted a lot. And I think at one point we drew something on an actual sheet of paper, so that was cool too.
This worked remarkably well. We were all very focused, and at no point did I ever feel like the tools at our disposal were insufficient or in the way. It was nothing short of ideal collaboration.
Final Products
I’m sad to say that our game didn’t quite make it to the finish line. We had some trouble with our web sockets; the connection would arbitrarily drop every now and then, but far too often to ignore. This seriously hampered our efforts, but we all resolved to continue the project after the fact. So we’ll see how that goes.
Most of the other groups were at about the same point we were: an hour or two away from being able to demo. A couple of teams did make it to the final stage, though, the most notable being this awesome HTML5 pong implementation.
There was also an Angry Birds parody. Apparently we all made games.
Oh, and the swag!
No sponsored event is complete without a bunch of awesome free stuff.
The coolest thing we all got was a pad of absolutely epic graph paper, marked as 768 pixels wide and with a little Chrome browser heading. It even came with a ruler that measured in pixels!
They also gave away some books during a brief trivia period (I forget which one/s, something about HTML5 and CSS3) and a few shirts (I got one!) and some remarkable posters (we scored one for the office).
All in all, it was a really fun day. A huge thanks to the volunteers, especially event organizer extraordinaire @mohamedmansour for actually referring to me as a VIP while we were in line. And of course my team, working with whom was the highlight of the event.
LightCycle forever! And all that jazz.
HackOTT
If this all sounded very appealing to you, you’re in luck: there will be a similar event in town in February. HackOTT promises to be “an awesome gathering of the very best of Ottawa’s technology hackers and developers”. I’ll be there, and so will a lot of other really cool people!