Kevin SmithWeb Software Engineer

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

Backbone.js View DOM Events – Complete List

I have been working on a few different Backbone projects recently, and recently ran into a problem of binding a DOM event to a couple input radio buttons I was using as a toggle switch. For some reason, the standard click event was not binding to the correct elements when it came to these radio buttons.

After a few searches on Google and StackOverflow, I could not successfully find a complete list of all the DOM events that are allowed to be passed into the “events” hash inside a Backbone.js view. The Backbone.js documentation tells you how to use the delegateEvents method, but it does not give a complete list of all events.

It turns out that all jQuery events are valid events that can be used inside the “events” hash in a view. This makes total sense, but I had not seen this listed anywhere, until I found a short post on StackOverflow.

Here is the complete list of all jQuery events you can listen to in a Backbone.js view:
http://api.jquery.com/category/events/

More information on the Backbone View delegateEvents method and events hash:
http://backbonejs.org/#View-delegateEvents

I ended up using the “change” event combined with an if / else if statement to get the functionality I was looking for with this toggle switch. Here is a snippet of my toggle switch event listener code:

  //Backbone View delegateEvents hash
  events: {
    'change .toggle-switch .switch': function(e) {
      if ($('#live-game').is(':checked')){
        console.log('live game');
      } else if ($('#completed-game').is(':checked')) {
        console.log('completed game');
      }
    }
  }

I used a great CSS library called css-toggle-switch for these toggle switches. It comes with a few well styled themes, and it works great with the Backbone code above. Check it out if you’re looking for a mobile-style toggle switch that is pure CSS.

I am currently in the final phases of my latest personal project here at Hack Reactor. It is a cloud-based poker session tracking app, with a mobile first design. I am using Backbone.js, Node.js, Express, Parse.com, and D3 in my stack. Look for a blog post soon with a link to the live deployment of this app!

Read more

Hack Reactor Students Make Front Page of Wired.com

Today, Wired magazine’s featured article on their website front page tells the story of a group of Hack Reactor students in the March 2013 cohort!

Check out the article on Wired: Hackers Spawn Web Supercomputer on Way to Chess World Record

hack-reactor-n-queens-team

The N-Queens team (left to right): Tim, Shawn, CJ, Ruan, John, Cameron, Nathan. Photo courtesy Hack Reactor.

 

This group of Tim Sze, Ruan Pethiyagoda, John S. Dvorak, is in the Hack Reactor class above mine. They have been working on a group project called Smidge (formerly SuperComputerJS), that is attempting to break the world record for the N-Queens problem I wrote about last month.

This trio of students, along with a few of our instructors at Hack Reactor, will end up breaking the world record of N-26 for this N-Queens problem. I was able to talk to Ruan for quite a while about his approach to this algorithm, which ultimately helped me develop an optimized version of my original solution.

The group’s work is truly impressive, and press coverage of what we’re doing at Hack Reactor will help out all students in our future job searches. Keep up the good work guys!

Read more

A Typical Day at Hack Reactor and the Math of Poker

Where does the time go? It’s hard to believe I’ve been in San Francisco for an entire month already. I am at a point where the Hack Reactor routine feels normal, and my overall work ethic has increased by a few notches.

Any hint of laziness is immediately dismissed because there is just SO MUCH TO DO at all times. Just when you have an hour where you feel, “Hey, I think I’m getting comfortable with Backbone.js”, the instructors make you save your work, push it up to GitHub and move on to a completely new topic.

I have so many project ideas for cool apps I could build with all of this new-found knowledge, but no time to start any of them right now. I am hoping for some time off at the end of this course to pick a few of the best ideas and actually get them built as portfolio pieces.

I gave my student presentation this week, which had been weighing on me for the past few days. One student gives a 5 minute (most of the time longer) presentation each night after dinner. I had been debating on what to talk about for a couple week now, but ended up deciding on a talk about the math of poker.

I started my talk with the history of math in poker, and the explosion of new strategies and techniques in the last 10 years. I then gave an overview of Expected Value (EV), why it is one of the most important concepts to understand in any poker game, and how to calculate your EV for a sample situation while at the table.

the-math-of-poker-slide

One of the slides from my presentation on the math of poker.

Due to the number of questions I received during my presentation, I ended up talking for about 30 minutes. However, the class seemed to be really enjoying talking about poker strategy. I had many conversations with individual students throughout the week about different poker topics, and it turned out to be a good conversation starter. I’m hoping to get a weekly poker game started, if only we had more free time…

A Typical Day at Hack Reactor
I have been talking about how busy we are at all times, but maybe you’re wondering what a typical day at Hack Reactor is like? Here is a rundown of what a recent day of learning Node.js included:

8:45am – Arrive at the Hack Reactor building on Market Street. Lock up my bike and take the elevator to the top floor.

9am  - I grab some of the free breakfast items. My usual is greek yogurt, mixed berries and granola.

9:15am – The gong signals it’s time to start the day. After announcements it’s time to go over the solution to yesterday’s Toy Problem. These are short, complex problems that are designed to prepare us for technical interview questions.

9:30am – Time to pull down the Toy Problem repo and begin working on today’s problem: Given an array of 99,999 unique numbers ranging from 1 to 100,00 in a random order, find the one number that is missing from the list.

10am – Submit a pull request with your final Toy Problem solution. My class then meets in the presentation corner to begin a lecture about the basics of Node.js, the basics of a web server, and how to use HTTP event listeners in Node.

11:30am – Lecture ends, and it’s time to break into pairs. I join up with my classmate Charles and we dive into the Node.js curriculum that was just posted to the Hack Reactor curriculum site. This part of the learning process is designed to throw you into using a framework or language with minimal guidance. The instructors want us to struggle and find answers on our own. The project for this sprint is to implement a Node.js server that can handle requests from the client-side chat application we built in our AJAX sprint last week.

12:30pm – Charles and I wrote some code early on in the hour, but we were headed down a wrong path, so we scrapped it and started again with a clearer goal in mind. We were just making some progress, but now it’s time to break for lunch.

1:30pm – After lunch, the junior class meets up for a more in-depth lecture about the specifics of Node.js. Now that we’ve actually written some Node server code on our own, the concepts begin to make much more sense.

2:30pm – 5:30pm – This is the main block of time to explore the Node documentation and we start making some real progress on our Node server.

5:30pm – Dinner break, and time to explore some dining options in SF.

6:30pm – Both Hack Reactor classes join up for tonight’s student presentation. One student gives a 5-10 minute presentation each night, about almost any topic they are an expert in.

6:45pm – 8pm – This block of time can vary from student code review sessions, to guest lectures by engineers from companies like Uber and Facebook. Tonight we had a Q&A session with some recent Hack Reactor alumni. It was incredibly interesting to hear about their job search and hiring experiences. Based on the jobs the panel of alumni had secured, I am extremely optimistic about my future prospects.

8pm – 10pm – Most of the students at Hack Reactor stick around after the 8pm dismissal time to work on the sprint from that day some more, or to hack on a personal project.

Pretty much this entire week was focused on server-side scripting and dealing with different database structures. Topics we covered this week include Node.js, SQL databases, no-SQL databases like MongoDB, and an ORM (Object-Relational-Mapper) called Sequelize. We also learned about a great Node de-bugging tool called node-inspector, which I highly recommend looking into if you haven’t used it yet.

Next week we are moving on to Ruby and gems like Sinatra.

Read more

A One-Day Sprint with Backbone.js – Backbone Solitaire

Today we took a break from the regularly scheduled sprints. The idea was to focus on a topic you wanted to spend more time with, and to come up with an app idea you could implement quickly. This was a good exercise in project management, along with testing how much of a skill you could put into an app on your own.

I decided to build a simple solitaire game using the Backbone.js MVC framework I talk about in my Hack Reactor Week 3 blog post, along with CoffeeScript. I already had working deck-shuffling code that I could use from the blackjack game we built, so I figured it wouldn’t take too long to translate that into a new card game. I was definitely mistaken about this.

I started the project with a whiteboard session to draw up the game layout and initial deal of all the cards. This would help break up the app into smaller chunks that could be translated in the different models and views. I then sketched out all of the individual modules and organized them into their Backbone components. I ended up creating the following models and collections: Card, Deck, Column, GameBoard, and Game. I also created corresponding views for each of these modules.

Backbone-Solitaire

Rough styling of my solitaire views. Only the column and deck models have live data at this time.

 

Building a Backbone app from scratch was the biggest challenge of my day today. Laying out all of these models, collections, and views, and then making sure they can all talk to each other took much longer than I anticipated. Backbone takes a pretty big commitment of code before you can start to see your data rendered to the screen. I also spend lots of time in the Chrome JavaScript console to make sure all of my model data was in the correct place for each object.

After spending too much time diving into the details of Backbone, CJ came over to my workstation to see how things were coming along. I didn’t have much on the screen at this point, so he advised me to focus on the most simple task I could and completely get that model and view completed as my first deliverable. I decided to focus on the initial deal of the 28 cards in the main game board. This required focusing further on each individual column, and building a column model to grab the corresponding cards from the deck collection. I made some good progress once I was focused on this particular module.

Before I knew it, everyone was leaving for dinner break and I had just moved on to building the view for the 24 remaining cards in the deck after the initial board setup. This is when I realized that the project was going to take me quite a bit more time to complete, and I had been too ambitious in my project planning from the start. I should have chosen a much simpler concept, rather than a card game with complicated logic and drag-and-drop functionality. I will definitely remember this lesson when it comes to planning future projects.

My main takeaways from today:

  • Focus on the most simple version of a project.
  • A first build of an app is best accomplished by removing all features
  • Focus on small deliverables so you always have working code to commit every few hours or every day

Today was the first time we had been released on our own, to create a project from scratch. I was pleased with what I learned about Backbone.js, but I need to be less ambitious with my one-day goals at this point in my career. Hopefully I can find some time to work on this project more in the future!

I pushed my initial code to GitHub if you want to check it out, but it is most definitely a work in progress.

Read more

Backbone and CoffeeScript: Hack Reactor Week 3 in Review

On my day off this week, I decided to bike the Golden Gate bridge over to Sausalito. The views were incredible:

biking-the-golden-gate-single-speed

Time is really flying by now, and the weeks at Hack Reactor are starting to blur together. Week 3 was primarily focused on MVC (model-view-controller) architecture, and how to use Backbone.js to organize your application. MVC is used to separate different parts of your code into logical modules, and then to define how those models can interact with one another.

When laying out your code, the model consists of all of your data, along with the functions and logic used to control and manipulate that data. The view consists of the code used to display the model data on the screen. The controller is what handles user inputs, and it relays those inputs back to the model.

Backbone.js is a JavaScript framework that is used for developing single-page web applications. It is based on some components of MVC architecture, but substitutes a presenter for the controller. In Backbone, the Model class usually represents a single instance of an object. These models are then organized into Collections, where further logic can be applied to the entire group. View classes are used to display the data from the models on the screen, and View can also be organized into View Collections.

Our first dive into using Backbone was to create a simple browser music player called MyTunes. Unfortunately (fortunately for some?) the only mp3′s we were provided were old Aaliyah songs. The parameters were to have a library view of all available songs, and a playlist for organizing and playing these songs. Each song had its own Backbone Model class, and songs were grouped together into Model Collections.

The song models had events attached to them, which would trigger specific behaviors like “play”, “enqueue” in a playlist, “end of song” and so on. Each one of these triggered events would change the model data, and our views would listen for these changes, then update the display and music player function accordingly.

Once we were satisfied with the behavior and styling of our music player, we ventured into experimenting with the Backbone Router class. This allows your single-page app to have unique URLs for specific user navigation points, and also to allow the use of browser navigation controls like the Back button. We decided to give each song it’s own unique URL, which allows you to navigate to a specific song very quickly. I’ll definitely be using the Router extensively in future projects.

backbone-js-music-player

Only the Best, Only Aaliyah – ummm yeah…

The next Backbone project was designed to explore this framework further with a more complicated project that required deeper nesting of models and views, and more event listeners. Our task was to design an in-browser blackjack game using Backbone and CoffeeScript. We were all just starting to get familiar with the basics of Backbone, and now we had to write all of our code using this new language called CoffeScript that compiles down to JavaScript. The pace of learning is relentless at Hack Reactor!

My first hour with CoffeeScript was filled with a lot of “why are we using this” and “I will never use this again in the future”. CoffeScript is just JavaScript, but with a much more concise syntax that resembles something like Ruby or Python. There seems to be lots of controversy surrounding CoffeScript online. Some developers won’t use it, while others are strongly in favor of it, and this is a good example of the main points from both sides of the debate.

After two solid days of using CoffeScript, where do I stand? I have to say that I warmed up to it and after about 3-4 hours of working with the compiler, I began to prefer writing using its “syntactical sugar”. In fact, during our end of week assessment, I found myself writing in CoffeeScript by accident in a section where it wasn’t required!

Here is a sample of some CoffeeScript, and what the identical, compiled JavaScript looks like:

//This is the CoffeScript, just 5 lines!
if hasAce
      newScore = [score, score + 10]
      if @isDealer and @models[0].attributes.value == 1 then return [score]
      if newScore[1] > 21 then [score] else [score += 10]
    else [score]

//This is the compiled JS at 14 lines, with lots of brackets
var newScore;
if (hasAce) {
  newScore = [score, score + 10];
  if (this.isDealer && this.models[0].attributes.value === 1) {
    return [score];
  }
  if (newScore[1] > 21) {
    [score];
  } else {
    [score += 10];
  }
} else {
  [score];
}

How to get your computer set up to write in CoffeeScript
Interested in trying CoffeScript? I would suggest playing around with the Try CoffeScript tab on the .org website.

Once you have spent a few minutes there, go ahead and install CoffeScript on your machine. Step two is to get your text editor set up for CoffeScript syntax highlighting. Then, you can start compiling the .coffee files into .js files that your browser can read. You need to simply run this line of code from your terminal to start the compiler and continually update the compiled .js files as you edit your code:
coffee --output compiled --map --watch --compile .

My blackjack project is still a work in progress, but the basic functionality is all completed. The biggest challenge was to handle aces (1 or 11 depending on the situation), along with handling a dealer natural blackjack on the first two cards without revealing the dealer’s down card. My next steps are to implement more advanced features like splitting and re-splitting, doubling down, along with jQuery animations and styling.

We wrapped up the week with an intro to Node.js, which I will go into in further detail next week. We then took a Hack Reactor field trip to play laser tag out in Concord, which was a great way to end the week.

Read more

Hack Reactor Student Blogs

I have gathered up a selection of Hack Reactor student blogs and personal websites. You may be curious as to what past students have experienced, or what other students have built with their newly acquired web engineer skills. Enjoy browsing!

April 2013 Cohort:
Jake Seip: http://seip.io/
Evan Peelle: http://fullstackgrowthhacker.blogspot.com
Alex Gaputin: http://googamanga.tumblr.com/
Eric Levin: http://ericrius1.tumblr.com/
Dylan O’Carroll: http://banjolina-jolie.tumblr.com
Brian Chu: http://www.brianchu.com/
Bianca Gandolfo: http://bgando.tumblr.com
Elle Beal: http://ellebeal.tumblr.com
Patrick Stapleton: http://blog.gdi2290.com
Charles Holbrow: http://charlesholbrow.com
Eric Levin: http://ericrius1.tumblr.com
Combiz Salehomoum: http://combizs.tumblr.com

March 2013 Cohort
Andrew Magliozzi: http://pleasestealthisidea.com/
Selby Walker: http://selbywalker.com/
Blake Embrey: http://blakeembrey.com/
Mark Lee: http://markleeis.me/
Nima Mehanian: http://tumblr.mehanian.com/

January 2013 Cohort
Mark Wilbur: http://logicmason.com/
Mike Adams: http://mikeincode.com/
Coleman Foley: http://learningtocode.quora.com/
Howard Tang: http://howardtang.co.uk/
John Katsnelson: http://greenbunnybearrug.wordpress.com/
Tony Thomson: http://www.tonythomson.com/blog/
Gavin McDermott: http://gvnm.tumblr.com/
Andreas Nauleau: http://anauleau.tumblr.com/

November 2012 Cohort
CJ Winslow: http://youcanlearn.it/
Christen Thomson: http://whitepinedev.com/
Henry Zhu: http://henrycode.tumblr.com/

Let me know if you know of any others to add to the list!

Read more