Danielle Pham

Computer Science & Biology student
& current Hacker Schooler (S'14)

Day 24

Today, 30 more people joined our summer batch. Everyone I talked to this morning was nice! The space is noticeably louder though. I’ll have to see what will help me stay focused.

In the morning, I read the free chapter of Functional JavaScript, read the docs for Underscore.js, and wrote a few READMEs for my previous projects. I then watched the week 4 videos on neural network representations and started the homework.

Day 22-23

Alan helped me out with combinations by talking me through the algorithm and implementing it in Haskell! Doing these things in JavaScript feels mighty unnatural.

Today I wrote a trie in JavaScript, and imported almost 80,000 valid Scrabble words into it! I had been struggling with my implementation of the trie until I asked Alex Jose and described what was going on. He suggested writing a function to find the lowest matching subtrie, and that got me unstuck. I can now draw a hand of Scrabble tiles from a bag and find all the valid words you could make with them! I might go all out with this Scrabble thing.

Day 21

Permutations and Scrabble tile representations! I’m having a hard time with combinations, so I’ll try to get more help tomorrow. I understand that some people can do the same thing in less time, but I’m moving at a pace where I think I’m making progress and understanding things better than I used to.

Day 20

Alex was in town so I didn’t come in last Friday to work on the challenge. (I’m secretly looking forward to learning Haskell after the batch is over, which I am not currently doing so I can focus on JavaScript.)

I’m going through the recursion exercises, and writing tests in Jasmine! When I first learned about recursion, I was confused. I definitely think it gets easier with practice, and it makes more sense when it’s decomposed. I’m attempting to write more functional JavaScript. I wonder if it’s reasonably straightforward to write a tail recursive interpreter.

I didn’t understand Node modules.

I tried to do a thing, but it didn’t work. I asked Mary to explain what happens when modules are required in Node. It turns out, I didn’t understand Node modules and I didn’t understand references in JavaScript. Here is the gist of what I learned about these two things, based on the examples Mary and I walked through together.

What I tried to do

I have an app module, wrapped in a self-executing function as shown below.

// app.js
;(function(exports) {
var app = {
get: function(str) { /* do something */ }
/* do other things */

In my other files, I want to be able to require the app module and call functions within the app object.

// other.js
;(function(exports) {
var app = require('./app');

Well, I thought I could just add this line inside my app module:

exports = app;

Oh no!

TypeError: undefined is not a function

That isn’t what I wanted, or expected, to happen.

Why didn’t that work?

The short answer is that references in JavaScript are immutable.

Mary gave me a simple example to start to understand this phenomenon:

var objA = { a: 'a' };

var fn = function(obj) {
var objB = { b: 'b' };
obj = objB;
console.log('obj', obj);
console.log('objB', objB);

console.log('objA', objA);

What happens here is not obvious to me. When objA is passed to fn, a reference to objA is named obj inside the fn scope. At this point, manipulating obj also changes objA.

In fn, a new object objB is created. Then when obj = objB, a new reference to objB is created and it is named obj. As a result, obj and objB contain b: 'b', but objA does not. The reference to objA is not accesible inside fn anymore.

Relation to Node modules

// app.js
;(function(exports) {
var app = {
get: function(str) { /* do something */ }
exports = app;

When app.js is required in other.js, it is included in the file and run with the self-invoking function wrapper, with exports passed in as an argument. In other words, the name exports inside the function is bound to this, Node’s exports object. I then created a new reference to the app object and named it exports, so the reference to Node’s exports object became inaccessible from within the function. Nothing changed in Node’s exports, but that makes sense!

The fix

// app.js
;(function(exports) {
var app = {
get: function(str) { /* do something */ }
exports = module.exports = app;

var thx = 'Thank you, Mary!';
exports.thx = thx;

Making a new reference to app with the name module.exports is accessible outside of app.js because Node can reach it through the module object. Also making a new reference to app with the name exports is used for convenience so other exports can go on normally.

"The headline is…"

References in JavaScript are immutable.

var app = require('./app');

Day 16-19

Sorry for the lack of updates! I don’t think I will maintain a daily log.

This week I have been working on a web application using Node and Express. I discovered that I don’t actually understand how MVC works because Rails does a lot of magical things behind the scenes. It’s hard to use a framework well without knowing how the parts work together.

I decided to try to organize my application with the MVC pattern without using a backend framework. I think it’s working! Since I have to require the appropriate JavaScript files, I have a better sense of how to respond to different requests using controller actions, how models relate to the database, where to pass variables to views, etc. It’s pretty cool! I’m going to try to get my code reviewed before it’s too large.

Post-review: Marcus Malka showed me TodoMVC where people have implemented the canonical todo app using different MV* frameworks! He walked me through the implementation in Backbone and talked about what concerns are abstracted in which places. The views in Backbone seem to be doing a lot of controller work. Marcus also showed me that the Backbone annotated source code is concise and not a difficult read. I’ll take a look at that today!

Day 15

  • Read Chapter 14 of Eloquent JavaScript on event handlers
  • Worked on Asteroids for pretty much the whole day… I can’t get this darn bullet x asteroid collision to work properly! The collision is only detected sometimes so I have to figure out what’s going on behind the scenes…

Day 14

Sorry for the absence yesterday! I took the day off for Canada Day and plan to code on the 4th of July ;)

  • Finished and submitted the optional portions of the Coursera ML Week 2 Programming Exercise on feature normalization, multivariate linear regression, and the normal equation
  • Did Chapter 13 Eloquent JavaScript exercises on manipuating the DOM without jQuery
  • Implemented collision detection in my Asteroids game!! (Ship x asteroid collisions)

Collision Detection & Debugging

I have never programmed games before, so I’d only heard of collision detection. I think there are several different ways to do it, but I went with line segment intersection.

The most useful resources for me were this tutorial on Line-Line Intersection using linear algebra, in combination with the corresponding Wikipedia article. I personally think I understood the math better when I wrote out the matrices and equations myself, and tried to match the equations in the tutorial with the one on Wikipedia.

I had to fix my representations of the ship and asteroids so they stored their line segments. In these objects, points are relative to the center (which can be moved) and line segments are relative to the points. This makes it easier to update points and line segments when the objects move.

Here are three bugs I came across and how they were detected:

  1. A typo in an equation. For some reason, collisions were being detected very infrequently. I looked over the code and actually rewrote the equations by hand. Oops! I had copy/pasted the equations for the second line but forgot to change two of the constants.
  2. Attempting to return a value within forEach loops. I tried returning true at the beginning of my collision-related functions to see if they were doing what I expected them to. Colliding bodies should be removed from the game, so if colliding(b1, b2) is always true, there should be no bodies on the screen. That worked! However, returning true at the top of my line intersection function did not remove all bodies from the screen. I came to Mary with these observations, who taught me that the forEach loops aren’t returning the value in the way I expect them to. If I understand correctly, forEach calls the callback, so returning true doesn’t break out of the loops. Mary suggested regular for loops, which worked.
  3. Ship usually collides but sometimes doesn’t. While testing out the collisions, I found that most of the time the ship was colliding properly with asteroids. For some strange reason, the ship would sometimes bypass the asteroids and collide at a later time. Mary suggested collecting more information on the collisions. I changed the code to log the intersection, and found that sometimes there would be no logs, and then nonsensical ones with negative values later on. I came back to Mary with this data, who hypothesized that things aren’t appearing where they actually are, and figured out that it happened when the ship goes off screen! I was going to show Mary my screen wrapping function, and then I saw that I forgot to update the line segments.

This is a project where I can’t just print out everything to debug, so I wasn’t sure where to start. I’m really glad to have learned a few other techniques and hypotheses for these issues!

Day 12

  • Finished and submitted the required portions of the Coursera ML Week 2 Programming Exercise on Linear Regression in One Variable
  • Interactively went through examples with Mary and two others to understand prototypes in JavaScript
  • Wrote a very bare-bones URL shortener (Friday 2 Challenge, since I didn’t come in last Friday) using Node, Express, and Hashids
  • Added some random flying asteroids to my Asteroids game

Day 11

  • Finished watching Coursera ML video lessons and did review questions about Octave
  • Fixed update of Ship points in Asteroids when moving with keyboard
  • Fixed screen wrap of Ship points
  • Refactored code into different files
  • Added bullets and made sure they went in the right direction
  • Did a one-minute demo on the random name generator, chat application, and my progress on Asteroids