Day 16, carpool and more chat client

Life is good today.  Only spent a hour commuting to classroom and half a hour back. Yeah!!! With the help of Zak, we managed to take the last entrance into the bay bridge. With Zak’s fasttrak and with 3 people inside the car, we were able to zip through the toll plaza. Awesome!!!

Ok, now coding.

We did the week2 self-assessment today. It had four components, covering algorithm, layout, pseudo classical and d3. It wasn’t hard, and I finished on time. However, I realized that I did make a couple of mistakes when Savannah and I reviewed each other’s code in the evening. The most obvious one was when extending from a super class, I forgot the following two lines:

SubClass.prototype = new Class();

SubClass.prototype.constructor = SubClass;

God. Never forgot about them again.

Other small tips are:

– string.split(”) will split by character and put each of them as an element of an array

– $(‘selector1, selector2’) is the correct syntax for multiple selectors in jQuery

About the chatroom sprint, my pair Savannah and I were able to finish all basic requirements on time. I was fairly satisfied with our progress.

What went well:

– We planned ahead, and used OOP as much as possible. Both of them made adding features such as chat rooms straightforward. After writing a couple hundred lines of code and implemented several features, the logic was still clear and the code was easy to read.

– Savannah was a great partner, a quick learner with great work ethics. I enjoyed having hardworking co-workers.

What went ok:

– Didn’t spend enough time hacking other people’s chat rooms. Missed so much fun 😦

– Current code could be refactored more but didn’t have enough time to do it. I can image my previous pair Max would just can’t stand it and refactor to its full potential.

– Don’t have time to apply enough styling to the page.


Day 10, N queens

Today, we started working on N queens problem. I don’t even know the rules of rooks or queens, so when I was asked to answer a question from Marcus, I totally bluffed.

Our toy problem is an interesting one. In short, you are supposed to use Math.random to write a random1to5 function that returns a random integer of 1 to 5. Then, you are supposed to use random1to5 to write a random1to7 function that returns a random integer of 1 to 7. My initial thought was fairly naive because I forgot about the integer requirement. I scaled the number space between 1 to 5 to the number space between 1 to 7. That was easy, I thought. When I started writing the test, I realized I answered the wrong question. The real question is similar to: given a dice, how to generate a random integer between 1 and 7. My short answer is that you just need to throw the dice 7 times.

We also learned about jQuery. It is ridiculous that I have been using jQuery without understanding the difference between the jQuery collection object and the DOM objects.

What is jQuery?

The short answer is jQuery is a function that produces jQuery collection object.

What is a jQuery collection object?

– It is an array-like container.

– It contains zero or more DOM nodes.

– It also contains tons of jQuery methods, which are functions that attach to the jQuery collection object and allows easy interaction with the wrapped DOM nodes.

– $node[index] will return a DOM node WITHOUT any jQuery methods.

Three ways to generate a jQuery object:

1. jQuery(‘<p>dd</p>’);

2. jQuery(‘.name’);


4. Note: jQuery collections don’t update dynamically. (I miss you, Meteor)

What can jQuery methods do?

– CRUD + more. Create; read such as $node.parent(), $node.each(callback); update such as $node.animate(), $node.on(‘click’, callback), $node.appendTo(target); delete;

Other lessons:

– Elements panel in Chrome is the actual DOM object represented in HTML. That is why they are perfectly indented.

– Any object has a splice() method will be treated by Chrome console as an array like object.


Day 8, dancer party sprint

We started a new sprint, with the purpose of using jQuery, CSS and HTML5. The assignment is fairly straight forward. There is a Dancer class that we need to extend to a subclass and the subclass are supposed to do all kinds of random stuff.

The biggest challenge is to convert the Dancer class and its subclass from the original functional form to the industry standard pseudo classical form. It takes a very long time for us to figure it out.  The syntax is not very intuitive. For example, we had Dancer class and BlueDancer subclass.

To establish the class-subclass relationship, we need to do:

BlueDancer.prototype = new Dancer(); // or BlueDancer.prototype = Object.create(Dancer.prototype);

BlueDancer.prototype.constructor = BlueDancer;

Inside the BlueDancer class definition, we need to add one line:, arguments);

A couple of lessons:

– When a class creates its instance, the instance’s constructor property is automatically pointed back to the class.

– As soon as a function is declared, its prototype property and its prototype.constructor property come to existence. This is before any call to this function has been made.

– Mixin. They seems to be a cool way to modify objects efficiently. Mixin is more like a graph, while subclassing is more like a tree. When the constructors are mostly empty, they can just use Mixins.

– The difference between Mixin and subclassing is that Mixin works on existing objects and subclassing are creating new objects.

– We talked about whether ‘this’ would be part of the _.each()’s interface. The conclusion is that if the understanding of ‘this’ is required to use the function correctly, then ‘this’ is part of the interface.

– We also learned about pseudo classical, prototypal and functional