Blog Archives

Jul 25 2013

My First Open Source Contribution

A couple weeks ago, while I was working on Reddit Insight, I was using an open source jQuery plugin called Superscrollorama to create an animated info-graphic on the front page of the site. Superscrollorama gives you a ton of cool text and image transition effects that fire as the user scrolls down the page. I wanted to spice up the way our site looked as we presented it on the big screen in front of the whole school at Hack Reactor, and this jQuery plugin was perfect for that.

While working on Reddit Insight, the team kept running into a bug that it “cannot read the property ‘top’ of undefined”. The Chrome console let us know that Superscrollorama was the cause of this error.

superscrollorama_bug

This basically means that Superscrollorama was trying to bind a scroll event to an element on our page that didn’t exist, or was hidden. Since Reddit Insight is built as a single-page, dynamic web app, we are showing and hiding different page elements as the user navigates around the site. When the user navigates from the homepage, all of the info-graphic elements are hidden, but Superscrollorama was still trying to animate them as the user scrolls down the page. This is a problem.

Because Superscrollorama is an open source project, anyone can view the complete codebase and use it in their projects. This also means that the authors allow people to contribute to the project by making their changes, and submitting those changes for review. The industry standard for monitoring these changes is a service called Github.

I used the Chrome JavaScript debugger tool to isolate the bug to a section of the code starting on line 98.

if (typeof(target) === 'string') {
    targetOffset = $(target).offset();
    startPoint = superscrollorama.settings.isVertical ? targetOffset.top + scrollContainerOffset.y : targetOffset.left + scrollContainerOffset.x;
    offset += offsetAdjust;
} else if (typeof(target) === 'number')  {

I wrote just a few characters of JavaScript to fix the line where targetOffest is defined, by declaring a default value when $(target) is not available on the page (like in our case when the target element is hidden).

I committed my changes using Git, then documented the issue so the authors would know what I had fixed. I then submitted a Pull Request through GitHub, which lets the authors of Superscrollorama know that I have made some changes to be reviewed. I have used this workflow extensively over the past few months in all of my projects at Hack Reactor, but this was the first time I had submitted a Pull Request to a large project that thousands of people use. Pretty exciting stuff.

It took about 2 weeks for the authors to check out my changes and make sure they pass their tests, which is not that long for the open source community from what I hear. Today I received an email letting me know my code had been merged! And so begins my open source journey.

superscrollorama_merge

I hope to have some free time after Hack Reactor is finished, so that I can work on some other open source projects that I use frequently.

Read more
Apr 12 2013

Hack Reactor Prep Work

I spent the last few days visiting San Francisco to check out Hack Reactor in person, and to secure housing for the next three months. I was able to find a great place to live bordering the Presidio Park in Richmond, which should be a fairly easy bike ride downtown to Union Square and Hack Reactor. I also met a few of the Hack Reactor instructors in person. Marcus took the time to work with me one-on-one to answer some questions I had about the prep work, which was super cool of him to do.

The prep work for Hack Reactor is designed to bring all of the students up to speed on some building block topics we will be covering during our first week. It is designed to be completed over 2 weeks, with Skype check-ins along the way to monitor our progress and help us out with sections where we may be stuck. Over these weeks I easily spent 100 hours on research, online tutorials, and writing the code for each section. The three main projects are to be submitted via a GitHub pull request so that the instructors can go over our code with us.

The first major component of the prep work included an introduction to Git, the version control software used in most professional environments. It allows engineers to work on separate sections of the same code base at the same time, and then merge their changes together without conflicts (hopefully). I worked through a number of online tutorials, the most helpful of which was the Git Real course on Code School. This course really cemented in what Git was, and how to use it.

Next up was re-building the popular underscore.js library components using JavaScript. I learned about all kinds of basic JS programming structures like loops, functions, callbacks, arguments, and conditional statements. This was the section I most struggled with because some of the underscore components are quite tricky. If you’re not familiar with underscore.js, go check it out and run through the wiki. I guarantee it will save you tons of time versus writing these building-block components from scratch.

The next major component of the prep work was building a more advanced version of the Twitter clone I built for my entrance exam. This one is called Twittler, and it required quite a bit of jQuery DOM manipulation. I completed both of the Code School jQuery courses to become more familiar with how to use selectors, animations, and DOM insertion/deletion. You can check out the my final version of Twittler online, which uses randomly generated tweets from a javascript function.

The third component was a basic computer science module where we learned about recursion and how to use it in JavaScript. Once I wrapped my brain around what was involved with recursion, the actual assignment did not take too much time to complete. However, there is still much to learn about this topic and how to leverage it in more powerful ways.

I just got back to Utah, but I’m looking forward to being in SF next week!

Read more