nwHacks and the little Android app that could

I attended a second major hackathon this past term called nwHacks in March. nwHacks is western Canada’s largest hackathon, 24 hours of coding, and it really showed. Unlike the Vancouver Game Jam, where you just had to buy a ticket, nwHacks was a free event but it required an application something like two months in advance. I formed a team with 4 other students in my program back in January, but two weeks before the hackathon, nwHacks alerted us that only two of us were actually accepted to the event — the rest of my team was rejected.

The grading rubric for how applicants were accepted or rejected isn’t publicly available, although I think that the teammate and I who were accepted probably did have the most coding experience out of the five of us on the original team. Later I met several people who weren’t accepted — people that I thought were much more experienced and skilled than me. If you are applying to nwHacks, take the application seriously! We all thought it was just a formality so didn’t spend very much time on the application — boy, were we wrong. Go over your resume and your responses to their questions very carefully, especially if you’re a new programmer without a lot of experience or GitHub projects yet.

Fortunately, my teammate and I had other friends in the BCS program in the same boat — that is, their original team was broken up by a mix of acceptances and rejections. We formed a new team at the last minute with some other BCS students, and two days before the hackathon we decided to make an Android app that would display a list of available, personalized walking tours to the user based on the user’s location, and then guide them through the destination points on the selected tour and play the audio as the user approached.

… Yeah. We were ambitious.

When we arrived at nwHacks, the energy was already really high. It was a very different vibe from the game jam — you could tell some teams were really in it to win it, and the swag and sponsors at the event were on a whole new level. I got a t-shirt from Hootsuite that remains, to this day, my favourite pajama t-shirt (it’s so comfy), and I also got a great water bottle from Microsoft, annnnd of course tons of stickers for my laptop (yay!). On the one hand, that was pretty cool — we felt very important — but on the other hand, I definitely found it more intimidating!

Once we started coding, we quickly realized how out of depth we were. For one thing, we struggled a lot with version control. Using git came pretty easily to my team in the Game Jam, but this time around somehow we mangled up our file names and so every time one of us tried to commit, there were an endless number of merge conflicts. We didn’t fix this issue until the next morning.

We revised our plan to make it more manageable and decided to focus on getting a functional backend and frontend, so at least we could say we made an app (even if it didn’t do much). We used Google Maps and Yelp’s APIs to provide the data for three dummy walking tours (latitude/longitude, address, name of each destination point) and used one of the sponsors (CockroachDB — so friendly and helpful!) to store all the data. Then we had an Express Node.js server to handle requests and a JSON parser that finally fed all of this data to the frontend so it could be nicely displayed in the app. All of these concepts and terms were new to me at the hackathon — only one of our teammates had any experience building an app, so it was a pretty big accomplishment (especially considering all the version control hiccups) that we got as far as we did!

Our team naturally split into three sub-teams, without any real discussion on our part. Two of us did UI, two of us did the Google Maps and Yelp APIs + CockroachDB, one of us did the JSON parser. We all ended up troubleshooting the server issues, although primarily the database guys set it up initially. I ended up doing most of the UI on Android Studio, but then realized that the Android emulator kept crashing my laptop (!) so I couldn’t actually test my code. Six hours into the hackathon, I started pair-programming with another teammate so we could use her computer instead. My poor little laptop went back into my bag and stayed there for most of the day.

We were understandably cranky and tired the next day (three of my teammates stayed overnight, but luckily I had a place to crash on campus). nwHacks was a higher-pressure environment, 24 hours is a lot less than the Game Jam’s 48 hours, and the version control issues holding us back were a definite source of frustration. I probably only spent about 5-10 hours actually coding, and the rest of my time was spent learning how Android Studio worked, troubleshooting our version control problems, trying to fix the Android emulator on my laptop, and discussing with my team what features we should cut so that we’d have something to demo at the end of the hackathon.

Like every hackathon I’ve attended so far, we were in the depth of despair in the last 4-6 hours. Nothing was working, we couldn’t figure out why, we felt like so much of our precious time had been wasted on silly problems … But (also like every hackathon I’ve attended so far) in the last thirty minutes of the hackathon, the original teammate and I finally figured out how to get our front and backends correctly communicating with each other, and we had a functional, non-crashing, beautiful little app! Just in time! That success was one of the highlights of my year, for sure.

At the end of the day, our WalkyTalky app displayed a list of available walking tours and, after selecting one of the walking tours, displayed a detailed list of its destination points as well as a Google Map path. “Talky” never really happened.

We ended the weekend watching all the award recipients demo their truly fabulous projects. Many of them had to do with accessibility (hardware that could read a person’s ASL signing and then translate it to text, for example), which was pretty cool to see. The winning project overall was a grocery cart that followed its owner around, scanned items placed into it, and then allowed the store manager to track and analyze shoppers’ movements and purchases through the store.

I found the Game Jam more personally enjoyable, but nwHacks pushed me much further outside of my comfort zone. I would have liked to learn more about the backend stuff going on in our project; at this point, I’ve forked the repo on GitHub and I hope to do a bit of exploring on my own to see if I can piece together everything that happened. I think my biggest takeaway from nwHacks is that any hackathon team I’m on has to go to a GitHub workshop together before starting to code!

Jamming with squirrels at the Global Game Jam 2017

I wrote my last exam yesterday (April 25) and fully intended to write a new blog (seeing as it’s so out of date) … only to realize I drafted this one some time ago, but never published!

Tomorrow I’ll write about my experiences at nwHacks, preparing for co-op applications, and a term 2 review of the BCS program. Hope you find this helpful, future BCSers!


Squirrel Adventure screenshot
Our plucky protagonist perches on a platform, pondering what to plunder next. (It accidentally became alliterative and then I just went for it.)

I’ve officially completed my second hackathon! The Global Game Jam — I was at the one in Vancouver — is an amazing, 48-hour game dev bonanza in which artists, devs, designers, you-name-it all come together for a glorious weekend of coffee, coding, and calamity. (Calamity, like when my team and I realized that our game’s baddies defied the laws of physics and started flying uncontrollably around the screen when we accidentally adjusted the gravity settings.)

This hackathon was so. much. fun. A friend from the BCS program and I formed a team along with two other UBC students we randomly met in the registration line-up. None of us had much programming experience, the two other students weren’t even majoring in CS, but it was “ride or die” from about 7pm on Friday night until Sunday at 3pm.

We settled on using JavaScript and the Phaser game dev framework using the JetBrains WebStorm IDE. Phaser is a free open source HTML5 game dev framework that has a pretty fantastic community and regular newsletter that I’ve been reading ever since. They also have many cool, actual game examples of Phaser features, like how to use sprites, create scenes, do fun things with their arcade physics, and much more. I found these examples, and their quick tutorial, an intuitive and inspiring way to get to know the framework … at first. Unfortunately, Phaser’s biggest flaw is that its official documentation is quite sparse. Want to look up a method to see what it does and what its parameters are? Cool! Find it in the docs! … But frequently the docs would only give you the name of the method and the names of its parameters — no description of what it was for, what the parameters or options meant, etc. It made debugging a pretty frustrating experience at times — we essentially learned the entire platform by looking at the given examples and experimenting a lot.

The other downside to Phaser was that basically everyone else at the hackathon opted to use the Unity game engine instead, so we couldn’t ask others for help. There was one other group that used Phaser (and they came up with a fantastic and hilarious multiplayer game called Whales Hate Birds), but they were also new to the framework and, in fact, made up of fellow BCS students! So while we chatted a bit, we couldn’t help each other too much since both of our groups were new to Phaser.

On the other hand, I feel comfortable enough in Phaser — and its online community is friendly enough — that I think I could make my own game by myself now, which is neat! I don’t think of myself as a gamer (in spite of many years in middle and high school avoiding my problems with MMORPGs …), but game development requires such a fun combination of creativity, technical skill, and story-telling that I really got addicted. If I meet any artsy/designer friends in Vancouver (I now realize that good art and design is the key to a polished game — we had to get our sprite sheets from the web), I would totally make a game as a fun personal project.

The most fun part of all, though, was getting to know the other hackathon attendees and feeling inspired by their amazing creations. 48 hours allowed us enough time to mingle and explore other projects, and wow — they were all so cool! One game required the player to use the pitch/tone of their voice to navigate the character. Another game was a sumo wrestling simulation where the players had to shift their weight on a balance board to ‘bump’ off their opponent. A few teams also played with some neat virtual reality hardware. Everybody was so creative and had so much fun; the jam’s theme was “waves,” so some people ran with that, but others just did their own thing and rocked it anyway (like we did). There’s something really special about a ton of people giving up a whole weekend to create stuff with the sole purpose of spreading joy and silliness.

What was our game, you ask? We called it Squirrel Adventure: you play a perky little squirrel just trying to collect some acorns on UBC’s Main Mall (the busiest road on campus) while evil cyclists and longboarders are hellbent on running you over during classroom rush hour. In theory, sounds pretty cool; in practice, our graphics were preeeetty amateur since we didn’t have an artist, and our game mechanics accidentally turned into “Super Mario 2D platformer” because that was the easiest to implement. We bit off way more than we could chew!

Fortunately, my team decided to stay healthy and fresh, so we always went to bed at decent times and ate regularly. Other teams stayed overnight (I don’t think I could handle that). This meant I was ready to start up at school the following week without lagging too much.

We didn’t manage to deploy the game, so I can’t share it with you yet, although one of my team members and I plan to figure that out after we’re done our exams in April. Overall, I learned a lot more about JavaScript, working in a team of programmers, version control using git, and the importance of “planning first, coding later” (learned that the hard way this time around). I definitely plan on returning to Vancouver Game Jam 2018 — hopefully with a bigger skill set and maybe even a sleeping bag!

My very first hackathon: UBC Local Hack Day

After a wicked snow day resulting in a cancelled final exam, the unexpectedly highest GPA of my life (so much for “not being a math person”), and abandoning my darling doggo to a Vancouver kennel (my heart breaks for her), I am finally nestled in snowy Ontario with family for a short winter break. I promised in my last post that I would write a little more often while I had the chance, so I thought I’d share my experiences at my very first hackathon, UBC’s Local Hack Day on December 3, 2016.

UBC Local Hack Day is part of the Major League Hacking (MLH) Local Hack Days happening worldwide. Instead of the more typical grungy 24- or 48-hour coding sprint, MLH Local Hack Days are a humane 12 hours long — much better! The organizers provided us with free snacks and pizza, and I even got some shiny new stickers for my laptop:

GitHub and MLH stickers on my laptop.
Sweet stickery swag.

Major League Hacking (MLH) encourages high schools and universities around the world to organize their own Local Hack Day, and UBC hosted one of them. At the same time that I was plunking away at my laptop in Vancouver, BC, students all over the world were doing the same thing. MLH representatives were at some of the larger schools — I think they were in New York, for example — interviewing attendees and generally sharing upbeat quotations and photos. It was pretty fun and lighthearted.

I had the option of joining a team and presenting my final project at the end of the hackathon, but I chose not to. Part of the Hack Day’s appeal was its non-competitive, celebratory and beginner-friendly atmosphere — I wanted the chance to hunker down and work on a personal project in a dedicated environment, without any pressure to actually finish, so that I could continue working on it post-hackathon (indeed, I’ve spent most of today working on it! More on this later.). The introductory speeches included quite a lot of talk about the MLH code of conduct and kindness, which I appreciated.

A few speakers stopped by. Susan Ibach, a Tech Evangelist from Microsoft, was back to talk about Azure and, like the last time I saw her speak, was pretty hilarious. Some students from the UBC Game Developers’ Association gave a helpful talk about version control and GitHub.

In hindsight, I feel like I could have gotten even more out of the event, but I just got too excited by, well, coding. Instead of taking the time to learn from the talks, or chat with the professional mentors, I put my head down and worked for about 11 hours straight. My head was spinning by the end! I think an important aspect of these events, especially since I wasn’t aiming to win a competition, is simply found in the networking. I completely missed that part.

My biggest regret is not staying to hear my peers’ presentations, but I just couldn’t tolerate sitting in that auditorium any longer. Hack Day went from 9am to 9pm; I left at around 7:45pm, right before the presentations began. I needed a break (and a shower).

My next hackathon is the Vancouver Game Jam in January, which is more traditional in length (48 hours!) and definitely team-based. I hope to learn a lot at this one since I’ve never actually developed a game before, but after my experience at UBC Local Hack Day, I also know the importance of taking regular breaks.