April 2013

JavaScript Basics and the Keyword “this”

I just finished day 3 of Hack Reactor and thought I would go over some of the topics I’ve learned so far. I will not have much free time from here on out, but I want to get down all of the important ideas I learn every few days.

Our main instructor, Marcus, has spent much of the last two days going over the basic building block of JavaScript in great detail. I’ve been using some of these JS structures for about a month now, but it’s been great to learn more about each one, and how they relate to other elements. We spent quite a bit of time on objects and methods, along with data types.

Null vs. Undefined
The two value types that cause the most confusion where undefined and null. What I took away is:

null: The language has checked, and this does not exist.
undefined: The language does not know anything about the object you are asking about.

Here is a deeper explanation of null vs undefined on StackOverflow:
http://stackoverflow.com/questions/801032/why-is-null-an-object-and-whats-the-difference-compared-to-undefined

Ternary Operators
Another topic I learned a lot about that I had never seen before is JavaScript ternary operators. It is another way to succinctly express an if/else statement in just one line. The basic ternary operator framework:

test ? option1 : option2

Test is any boolean expression that will be true or false. Option1 is an expression that will be returned if the test is true, while option2 will be returned if the test is false.

This
The JS this keyword is often misunderstood, but is very useful when constructing objects and methods. Basically, the keyword “this” is bound dynamically to the object found to the left of the “.” at call time. There a a couple exceptions to this, but if you look to the left of the “.”, you can easily see what this will refer to. A quick example:

person = {
  location: ‘SF’,
  locate: function(){
    alert(this.location);
  };
};
person.locate(); //alerts “SF

In this example, it is plain to see how “this” inside of the method relates to the person object when the method was called on line 7.

The first major exception to watch out for with “this” is instances where there is no “.” before the function or method call. In this case, “this” refers to the global object, which is the window. The next exception is when it is called with the “new” keyword, in which case “this” will be undefined (ex. new person.located //alerts undefined). The third exception is when it is used in conjunction with .apply or .call, both which are specifically designed to bind a function to whatever argument they are passed.

We also spent the last couple days going over our pre-course projects and the refactored solutions to see the best methods for completing each assignment. It was very eye-opening to see an experienced programmer solve these problems in real time in just a few minutes, instead of the many, many hours it took me to complete each one. I now have something to strive for!

Read more

Hack Reactor: Day 1

I made it to SF on Wednesday with a couple of suitcases and my new MacBook Air, ready to kick off the 12 weeks of programmer development at Hack Reactor. Today was the first day of class, and I finally met all of the other fellow students I will be sharing this experience with. There are about 20 students in this April 2013 class of varying ages, but the majority are in their mid to late 20′s. Backgrounds range from finance, to front-end web development, to biology.

Most of the day today was spent going over policies and procedures (free breakfast every day!), along with the basic Git workflow for Hack Reactor projects. They really stressed the importance of committing your code in Git about every 10 lines you write, or every time you fix a bug or add functionality. These frequent commits will make it easy for our future co-workers to figure out what we did, along with the ability to roll back the code to very specific points of the development in case there are future bugs or conflicts.

We also went over pairing, which we will be doing for many of our learning sprints. This basically involves working with another student on the same computer that has two monitors, two keyboards, and two trackpads. Both monitors show the same screen, and only one person can be typing or controlling the pointer at any time. This forces one person to be driving (writing the code), while the other person navigates (tells them what to type). It will be interesting to see how pairing works out for the more complicated projects that are in our future.

Class went from 9am until just after 8pm today, which is the standard schedule. However, all of the instructors mentioned that many students will be staying later to finish up projects and have one-on-one sessions with the teachers. First day down!

Read more

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

Starting the Journey

On March 30th I found out my life would officially be changing course from my previous path. That was the day I heard from Hack Reactor about my acceptance into their very intense program for creating software engineers over the span of only 12 weeks.

Let’s back up to the end of November 2012. I had decided that I no longer wanted to pursue a sales or purchasing career at the company I had worked at for the last 4 years, SoftwareMedia.com. My time there had been amazing, and I was given the opportunity to lean a lot of new skills by advancing through different departments. However, I was spending more and more of my free time building websites and adding new features to sites I had built over the last few years, and I had decided to become a web devloper/engineer.

After leaving SoftwareMedia, I focused 100% of my energy towards learning web development technologies, best practices, and basic design techniques. I bought books as entry-level primers, then moved on to video learning through sites like Team Treehouse. The curriculum at Treehouse is perfect for anyone looking to start building their first website right away. The guided projects hold your hand through the steps required to get your first site launched. You can then move onto building more complicated sites using responsive CSS, interactivity with JavaScript, and even using frameworks like Ruby on Rails.

My main learning environment for techniques outside of the books and online videos was trial and error with a site my wife and I had started in 2008 called Ski Town Restaurants. Using techniques I was learning for writing HTML, CSS, and PHP, I would decide to build a feature, spend a few hours on Google trying to figure out how to begin, then hacking away at the code until it worked.

I had also begun building websites for friends to put my newly learned skills into practice, and to force myself to problem-solve on the fly. This worked great to expand my knowledge further and to put into practice everything I was reading about online. You can check out Northwest Represents and the wedding website of Janine Reinhart to see what I’ve been working on the last couple of months. Both are fairly simple website based on a WordPress back end, but it was good to get experience with working with clients that have their own expectations and design requirements. It was also eye-opening to see what the feedback/revision cycle is like.

Learning online by yourself can definitely have its challenges. The shear size of all the information online about learning web development is especially daunting. It is hard to figure out what to focus on and what a good path through all of the material looks like. I started doing research around going back to a traditional university or maybe a web-specific four year program, but neither option was appealing because of the time commitment required.

I was listening to a podcast on the 5by5 network one day and they were interviewing a student from Dev Bootcamp, who was talking about their 10-week program for Ruby on Rails. I did some research, and realized that there were many other schools offering similar bootcamp-style learning experiences for learning how to program, in a variety of languages. I spent the next week filling out applications and doing Skype interviews for a few different schools, including: Dev Bootcamp, Hack Reactor, Launch Academy, and App Academy. The entrance process for Hack Reactor was especially tough, with an online application, a first Skype interview, followed by an online class, a technical interview, and finally a take-home JavaScript project.

The Hack Reactor entrance project was the first time I had written any real application in JavaScript, and it was a very tough undertaking. I spent about 30 hours on it over 3 days, which included tons of online research. The goal of the project was to re-create a basic Twitter feed using tweets generated by Parse, and accessed through their API. It was also my first  introduction to writing jQuery from scratch. I completed the project and submitted it to Hack Reactor, feeling good about what I had learned and about my chances of being accepted.

After hearing back from all of these schools, I ended up deciding to attend Hack Reactor. Their program of having class 6 days a week, 11 hours per day, for 12 weeks included way more classroom time than any of it’s competitors. My goal is to become as much of a full-stack developer as I can, and that means being to exposed to more than just Ruby and Rails like most of the other schools. Hack Reactor focuses on JavaScript to teach the basics of programming and computer science, and then branches out into Git, Backbone.js, Node.js, Ruby and Rails, jQuery, TDD with Jasmine, and much more. One of the founders of Hack Reactor, Shawn Drost, had a great post about the future of JavaScript and the goals of Hack Reactor, if you are interested in learning more: http://www.quora.com/Dev-Bootcamp/Im-interested-in-attending-a-Programming-Bootcamp-How-do-I-decide-between-Dev-Bootcamp-and-Hack-Reactor?share=1.

I am heading to SF next week to check out some housing options, and then I’ll be going back on the 24th to get moved in before class starts on the 26th. This blog will chronicle my time at Hack Reactor, and all of the concepts I’ll be learning along the way.

Read more