DubHacks 2016

Screen shot of the 2016 DubHacks website

Timeline: Jun - Aug 2016

Project Type: Hackathon Website

My Role: Web Developer, Sponsorship Director, Executive Organizer

Tools: HTML, CSS, Javascript, jQuery, Flexbox, Sketch

Skills: Web Development


A social hackathon. And a life experience.

Over the course of 6 months, a team of 16 UW students (ranging from undergrad Freshman to PHD students) and I put on a social hackathon for UW's 3rd annual DubHacks. The goal of this hackathon was to promote the intersection between technology and social good. We believed that hackathon projects should go beyond just being "cool" and actually strive to address real world problems.

DubHacks's mission statement: Believe. Connect. Build.

These are DubHack's values.

DubHacks has been a massive part of my life in the past year. This project page will only talk about a small sliver of my overall experience with DubHacks and my role as Sponsorship Director but I think it's worth highlighting how much I learned from this 6 months. Everything from hopping on sponsor calls during lunch breaks at my summer internship to having deep talks about the values of DubHacks, I have built so many "soft skills" that I know will be extremely useful for the work force.

Interested in sponsoring? I'm heading up sponsorship again for DubHacks 2017. Let's chat ;)

My Contribution

While I wish I could take credit for it, the design and branding of DubHacks was crafted by my incredibly talented friend. My job, though, was to bring her designs to life. I lead the construction of the website, delegating which parts to build, and which parts I would construct myself. I built out the My Mission, Sponsors, Footer, and Team Page sections.

We also had a splash page that we used to gather student emails and generate presence before we opened up applications. It was a simple one pager that was meant to be a sneak peak into this year's DubHacks.

DubHacks's initial splash page.

In the live version, the clouds would slowly drift sideways.

What I Learned From This Project

While I could go on and on about all the things I learned from DubHacks as a whole, I will try to keep it focused on the website and teamwork dynamics.

  • Becuase everyone was in different states or even countries over the summer, we had to work remotely via Slack (bae), GDrive, and weekly Google Hangout calls. This required an incredible amount of communication and organization.
  • Taking initative was a huge part of how I was successful in my role. This was my first time organizing DubHacks but despite that, I was given a very large role. As Sponsorship Director, I lead our team to raise $100,000 from over 20 comapnies.
  • Working with the tech team to build the website was a very collaboritive effort and we used GitHub to help us out with version controll, branches for each website section, and GitHub Issues for bug testing. This was my first introduction to GitHub and while I was scared at first to use the Terminal, I quickly overcame that unease.
  • Of the 5 team members working on the website, one of them had 0 prior experience doing web development and was also new to programming in general. Since I had the most web dev knowledge on the team, I volunteered to teach her the basics. This experience was invaluable for me as a web developer. It made me rethink about the relationship between HTML and CSS and I realized the many concepts I took for granted. At the end, I managed to teach her the fundamentals of HTML/CSS and I came out feeling much more confident in my abilities to explain and talk about those languages.
  • Now, back to web development: Scroll height listeners.
  • Animations and keyframes.
  • :before and :after tags for more fancy animations.

What I'd Do Differently

My role was pretty straight forward since I was just implementing the design given to me. Although there are still many changes I would have tried to make given more time (we built the site in ~2 weeks).

  • I would have seriously considered looking into ways to speed up the page loading time. Currently, you watch the website dance around as it loads various CSS files and pieces itself together. I would have added a loading screen to help make the experience more seemless.
  • Text reability was a big issue in our website and one that we addressed but not well. I would try to find ways to increase contrast by making the button backgrounds a less opaque white in front of the carousel.
  • I would also check to see if those colors followed the Web Accessibility Guide on color.
  • I would also give more padding to some of the boxed titles and buttons. An overall design guide line for things such as grid, font sizing, etc. would have been really useful.
  • On the team page, I would have used a trick I learned about image loading to get rid of the image flicker when hovered over. What you do is include the two different images in the same image file and simply change the background position so that there's no flicker at all.
Photo from DubHacks.
Photo from DubHacks.
Photo from DubHacks.
Photo from DubHacks.

Overall, I'm so happy I decided to organize DubHacks last year. All the connections I made and the skills I learned are truly invaluable.

Interested in sponsoring? I'm heading up sponsorship again for DubHacks 2017. Let's chat ;)

Thanks for scrolling!