July 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
Reddit Insight Logo

Reddit Insight: My Hack Reactor group project was featured on TechCrunch

About three weeks ago, we started our group project sprint at Hack Reactor. The class broke up into teams of 4-5 students to work on a large project of our choosing, that would showcase our full-stack development skills. I was part of a team consisting of Patrick, Elle, Alex, and Bill, and we formed an idea to create an analytics suite for Reddit.com.

Our project is called Reddit Insight, and we launched our first version of the site 5 days ago. In that time, quite a lot has happened, and 100,000+ people (and counting!) have visited the site. The highlight of this experience so far is having TechCrunch pick up on the story and invite us to their offices to do an interview about our work.

Check out Elle and Alex on TechCrunch TV!

When we set out to create Reddit Insight, our goal was to create an app that would be interesting to the Reddit community, and would hopefully gain some traction. We also wanted to build an interesting app that would be exciting to talk about with future employers during job interviews.

Our first course of action with this project was to silo responsibilities, and then start working on the app framework. I decided to tackle the front-end MVC structure with Patrick, because that required extending skills I already had surrounding Backbone routers and controllers. We decided on a single-page structure, with dynamic views that would be shown/hidden based on the user navigation.

To help keep everything organized, we created a controller, which is typically not found in a Backbone application. We also created a global object with name-spacing, so that modules could be re-used throughout all areas of the application. We called this global object Redd, and we extended all of the Backbone events to this object, so that we could listen to all events from everywhere in the app. Some example app structure code:

//global Redd object
var Redd = _.extend({
  Views: {},
  Models: {},
  Collections: {},
  Templates: {},
  Controller: {},
  Router: {},
  d3: {},
  initialize: function() {
    Backbone.history.start();
    //more code here...
  }
}, Backbone.Events);

//part of the controller file
Redd.Controller = Backbone.Controller.extend({
  initialize: function() {
    this.navbar    = new Redd.Views.Navbar();
    this.header    = new Redd.Views.Header();
    //more instantiations here...
  }
});

While Patrick and I were building the client-side framework, Alex and Bill were busy using Reddit’s API to download over 240,000 posts and over 200,000 SubReddits worth of data. Once we had that data in our Mongo database, they starting using Python machine-learning scripts to analyze specific segments of the data to find interesting facts that Elle could model using a d3 graphing library.

After two weeks of working on this project, we had a working prototype to show to our classmates and instructors on presentation day. We made our index page an animated info-graphic, which worked well for large-screen presentations. We had also implemented real-time performance graphing of a specific post on Reddit, thanks to Elle’s work with dynamic d3 charts.

Last Saturday, we officially launched an unfinished version of the site on the r/JavaScript SubReddit to get some early feedback. The results were not good. Most users did not like our animated info-graphic, and the site completely broke for mobile users. Users on Reddit also complained of a bad navigation experience, and pointed out a few bugs in different areas of the site. This was exactly the feedback we were looking for.

All along, our instructors had been telling us to cut all features, and to get our app to market as quickly as possible. Having an unfinished website go live to a small set of users is way more valuable than waiting to launch until you think everything has been perfected. It is better to fail fast, then refactor, than to spend a lot of time building features that the public may not even like or use.

I took the user feedback we received to heart, and I completely refactored the homepage and navigation on Sunday. I made the site mobile friendly using a responsive grid, and I created much clearer calls to action and feature lists on the homepage. The site was now ready for the spotlight.

On Monday morning we posted a link to Reddit Insight on the SubReddit r/Technology, which was the section of Reddit we had identified as having a higher positive feedback rate than any other SubReddit. The user feedback was immense and immediate. As our post climbed higher and higher on Reddit, the number of users on Reddit Insight kept growing. Eventually, we got all the way up to the #4 post on Reddit Technology:

Reddit Insight on Reddit Technology

This is about when things started to get crazy. Gregg Finn, who writes for a marketing website called Marketing Land, saw our post on Reddit and wrote a blog post about us. He then sent it out to their 40k+ followers. This post was quickly picked up by Google Analytics, who sent it out to their 270,000 followers:

Google Analytics Reddit Insight

From that tweet, Reddit Insight exploded within the marketing community. We were re-tweeted and blogged about all over the world. Our traffic load started to strain our Heroku server, so we had to add 2 additional worker dynos to help with all of the traffic.

Our app really struck a chord with the professional marketing community. There seems to be a great need for a brand awareness and analytics tool for the black box that is Reddit. If we were to move forward with this project, I believe we could focus on the marketing community, and make a tool for them that could be monetized.

Reddit Insight concurrent users

536 active users on Reddit Insight at one time!

Our press coverage reached it peak when we were invited to the TechCrunch offices to do a video interview about Reddit Insight! We couldn’t believe it. They would only let 2 of us on camera, so we used the JavaScript random number generator to decide who would get the opportunity. Alex and Elle got lucky at the right time, and they ended up doing the interview with Colleen Taylor of TechCrunch TV. The TechCrunch team was great, and they really took the time to learn everything about our project and Hack Reactor.

reddit_insight_tech_crunch_tv_01

On set at TechCrunch TV

reddit_insight_tech_crunch_tv_02

L to R: Patrick, myself, Elle, our mentor Larry, Alex, Bill

The TechCrunch article came out yesterday afternoon, and we experienced another traffic spike while we were at the top of their homepage. The spike was not as large as on Monday, when we were at the top of r/Technology on Reddit, but the traffic from TechCrunch stayed on our site almost 4 times longer and was much more engaged with the content.

All of this has been an incredible experience in full-stack app development, marketing and launch promotion, and dealing with scaling issues. It is incredibly satisfying to have something you build be accepted and praised by the community you built it for. Reddit Insight has been used by over 100k people in 156 countries around the world in only 5 days! That right there is what is so incredible about being able to build things for the web. There simply is no other medium in which you can reach that many people, in such diverse areas of the planet, so quickly.

A few of the websites that covered Reddit Insight:
Tech Crunch
Marketing Land
Digital Trends
SocialTimes
The Slanted
DailyJS
PRWeb
Reddit – r/Technology Comments

We have a few more media interviews scheduled, so look for this list to be updated soon.

reddit-insight-team-hack-reactor

Check out RedditInsight.com or view the open-source code on GitHub.

Read more

Link ThreeSix – A Logic Game, Written in JavaScript

I have been working on a game called Link ThreeSix for a few weeks now. This is a personal project I built in my free time during lunch and after class at Hack Reactor ends for the day. It’s a challenging, strategy game to play against another person, and I have yet to figure out the optimal way to play it. There are distinct strategies for playing offensive or defensive, and I have mixed results with both.

This project originally started in the classroom at Hack Reactor, when our instructors gave us two days for a “make-up sprint”. These two days were set aside to let us catch up on any topics we felt like we needed more time with. I decided to jump into Backbone.js again to see if building some simple apps would help me learn this JavaScript library a little better. I originally set out to make a simple tic-tac-toe game, and I had a working prototype built in the first 6 hours. I had learned more about Backbone, but now I wanted to take the project further.

Once I had the tic-tac-toe scaffolding built, I began to think of ways to expand this project into a game that I would actually want to play. I started by increasing the board size to 6 x 6 squares. With a board this size, the typical tic-tac-toe rules do not work well, as it is trivial to block your opponent from scoring.

We had recently finished the N-Queens algorithm sprint, and I was interested in exploring this problem further. It made sense to apply similar scoring to my 6×6 board, and so Link ThreeSix was born.

Link ThreeSix

In this game, each player takes turns placing their mark on a single board square, until the board is filled. Your objective is to make links of 3 in a row, or more. Links can be made horizontally, vertically, or diagonally. The game is scored in real time, after every move, and the Game Score board highlights the current game leader.

Scoring is as follows:
3 in a row: 1 point
4 in a row: 3 points
5 in a row: 10 points
6 in a row: 20 points

After each game, the Total Wins board updates to reflect the winner of the current game, and keeps track of the entire match. The first player to win 3 single games, wins the match!

Once I had built out my application architecture using Backbone’s MVP, the biggest challenge of this project was to correctly score each player’s points, as they create connections of 3 or more in any direction. I began by creating two-dimensional arrays for each player, with numerical values representing the position of their marks on the board. These two-dimensional arrays make it easier to keep track of diagonal scores, which are the hardest to solve with an algorithm.

I used Backbone’s built in event listeners to detect when a player makes a move, and then I ran the scoring algorithm for that particular player. This scoring function checks every corresponding row, column, and diagonal for that player, after every move. The hard part was first checking for connections of six, then five, then four, then three in each possible scenario, for each direction, and then breaking out of that function for that particular line and direction once a match was found. However, all of the other lines and directions still have to be checked at that point, because many moves score points in multiple directions.

This scoring function proved to be much more complicated that I originally thought it would be, which is what kept me hacking away at this project in my free time. I would spend a few hours one day making significant progress, then get stuck on an issue. I would usually think of the solution at a random time a day or two later, and I would come back to the code to make more progress.

This game currently only supports 2 player mode, with both players on the same computer. I want to eventually incorporate the Facebook OAuth login with a Node server, to allow players to compete on separate computers from different locations.

I also plan on developing a computer opponent AI to enable single player mode. This will definitely be the next branch of this project, and I plan on learning all about game AI in the process. It would be great to develop the optimal strategy for this game, explore the computer decision tree, and to set up multiple difficulty levels. However, with all of the other projects I am working on, along with my upcoming job search, this will probably have to wait a while.

Let me know what you think about Link ThreeSix! It is open source on GitHub, so feel free to post any issues you find, or fork it on your local machine. I would also be interested in talking with anyone that has experience with programming game logic, or anyone that wants to help with coming up with an optimal strategy to play this game.

Read more

Overview of the Software Engineer Job Market

Are coders worth it? That’s the title of a very well written article by James Somers that I recently came across. His lengthy essay on the current state of the software engineer/web developer job market explains some of the many reasons why I chose to up-root my life to move to San Francisco to attend Hack Reactor.

This article goes into detail explaining why software engineering skills are so in demand right now, and why the perks of having the right skills are so good. James explains it this way:

In this particular gold rush the shovel is me. We web developers are the limiting reagent of every start-up experiment, we’re the sine qua non, because we’re the only ones who know how to reify app ideas as actual working software. In fact, we are so much the essence of these small companies that, in Silicon Valley, a start-up with no revenue is said to be worth exactly the number of developers it has on staff. The rule of thumb is that each one counts for $1 million.

James Somers - Are Coders Worth It?

From everything I have seen in San Francisco, James is definitely accurate when talking about our current prospects as Hack Reactor students. Hiring day is coming up this Friday, and we currently have about 15 companies that will be attending, with more potential last-minute additions. This number is especially high, considering there are only 19 students in my class, and not all of us are looking for jobs in San Francisco.

One of our instructors recently mentioned that Hack Reactor graduates are securing higher salaries than recent Stanford graduates. Hard to believe? Maybe. However, over 100% of students from first two classes before me have found jobs or are working for their own startups (most all of the recent graduating class have found jobs in the past couple weeks as well).

At the end of his article, James mentions some of the drawbacks to the coding profession, along with trivializing some aspects of the coding process. These are also accurate, but he follows it all up by re-stating just how much money he is being paid to have these skills.

I am very optimistic about my future at this point, and I can’t to see what the next chapter of my life brings.

Full article: Are coders worth it?

Read more