In week 2 we expanded on instantiation patterns to creating classes, got our hands dirty with algorithms and started using an open sourced charting library (d3). We are settling into a regulated pace where each week is broken down to 3 sprints. Each sprint covers an overarching theme and is tied to a project that we execute in pairs. In addition to sprints, we start off every morning with toy problems (these are typically common interview questions) and we start off every week with a self-assessment. These are a lot of fun and have been great for tracking personal progress even though we don’t get graded.

What we covered this week:

Sprint 1: Subclassing

A class is any construct that can produce a fleet of similar instances–objects that conform to the same interface. @mracus

Classes are blue prints from which objects are created. In addition to that, classes can be used to create hierarchies where a subclass inherits properties from a parent class. Kind of like biological classification: a polar bear shares all of the properties of a mammal plus additional properties of its own. This can be done using the techniques described in last week’s post. There is large debate in the JavaScript community on using prototypal versus pseudoclassical instantiation. By nature, JS is a prototype language (where relationships are created through delegation) but because people attributed JS to Java, the writers were pressured into creating a mask for JS to make it look more like Java, a class-based language. Thus pseudoclassical was born and to date, remains the industry standard. More on what prototype vs pseudoclassical instantiation is here and a visual representation here. Important note on pseudoclassical: This style utilizes the keyword “this”. You cannot assign anything to it because JS does this internally, but you can use it to reference a context in your code. Here are the 2 most important rules to keep in mind when you use or see “this”:

The keyword this generally refers to the object to the left of the dot AT CALL TIME of the function referencing ‘this’. The keyword ‘’this’ can’t possibly mean anything until the function it appears within is running. @mracus

Sprint 2: Algorithms

This was one of my favorite sprints, we explored how to create a fast algorithm by building a solution to the classic n Queens problem. This is an example of a problem that requires so much computing power that it can only generate answers for up to 26 queens. In order to even get up to 26, you need to use a variety of techniques (some listed below). Here are some lessons learned from this sprint:

1. Start building an algorithm by creating the most naive solution and optimizing from there
2. Whenever you recurse on a function, think about the input and output of the function each time it is run. Try to pass in only what is needed. For example: my partner and I started off passing in an array of 1’s and 0’s to indicate the queen chess pieces on the row, this can actually be done by just passing in one number who’s bits represent the array and using bitwise operators to manipulate the number.
3. Prune branches: your function will likely run down a decision tree of paths, optimize by eliminating branches when you are certain none of the children from those branches can be valid answers.
4. Use web workers to divide up the work that needs to be done by the algorithm and execute the pieces in parallel.

Sprint 3: D3

D3 (Data Driven Documents) is a Javascript library for manipulating DOM nodes based on data. This allows developers to easily create charts and other data visualizations in HTML and interact with them. D3 is structured a lot like jQuery so I’d recommend doing the jQuery tutorial I mentioned in the last post before diving into this.

Here is a list of tutorials by the creator of D3. Make sure you understand the basics of how to bind data with DOM nodes using selectors and how the .enter and .exit functions allow you to quickly add and remove data pairs from the page. I recommend starting with this great low level explanation by my classmate Davis Kim, this circle tutorial does a particularly good job with these concepts. I also recommend the bar chart tutorial for beginners, and this post on animations and transitions for learning how to make the data dynamic.

A note on D3: learning D3 felt a lot like learning HTML/CSS and jQuery for me. There are tons of functionality and great examples available but it was hard to focus on D3 and learn all the concepts until I found something I was interested in building with it. Tip: find a project you want to build! Some ideas to get you started: visualize startup stats with AngelList or Mattermark data or visualize government spending with publicly reported information like this Bart employee salary example.

Curious what to dive deeper into? Definitely get a good grasp on classing then branch into D3 if you are interested in “front-end”/visual programming and algorithms if you like the nitty-gritties of the ‘back-end’. Happy hacking 🙂