Tag: Javascript

Teach

For October’s InDay I had the opportunity to teach high school students how to code.  This was the first time I was mentoring/teaching someone who had no prior programming experience.

The goal of the lesson was to help the student build a simple guessing game (pick a random number and have the user try to guess it; let the user know if their guess is greater than or lesser than the random number) in Javascript. On the surface this seems like an easy task; but if you think about it it involves using quite a few programming constructs — variables, loops, conditionals, functions, random number generators, etc.

One method that I found useful while teaching was to introduce the programming concepts with the help of the mathematical concepts on which they are built. Variables and functions in programming languages are (more or less) based on the same constructs in mathematics and it was easy to draw parallels between the two.

To explain how to generate a random number within a range I used the Google Chrome Console to show how function composition in programming works.

Also, analogies help. “Why do we need HTML, CSS, and Javascript?” “Well, HTML elements are the basic building blocks of a webpage. CSS allows you to add color to and position the blocks — it makes the blocks look pretty. Javascript makes the blocks interactive.” Yes, I’m well aware that this analogy is not perfect, but it was the best I could come up with at the time and I think captures the essence of why we need this trio to build websites today.

Overall this was a challenging and rewarding experience. I need to find more volunteering opportunities that are coding related.

Documentation

I recently received a feature request for http://linkedin.github.io – one should be able to link to an external website hosting documentation for the project directly from the home page. I had some time tonight so I implemented this feature. It wasn’t hard to add at all, and it gave me a chance to exercise my Javascript muscles which have been dormant for some time now. I also identified sections in the codebase that I would like to refactor, and hope to get to doing that sometime within the next 2-3 months.

linkedin.github.io

Matthew Shoup and I worked on a new design for linkedin.github.io for LinkedIn’s January hackday, and with some help from Yevgeniy Brikman we launched it on 2/21.

I had a lot of fun working on this small project. This was the first JavaScript project I’ve worked on since I graduated and it took me a few minutes to get into the JavaScript + HTML + CSS development “frame of mind”. Once that initial rustiness wore off though it was a lot of fun to build this website.

Twitter bootstrap is still amazing. The ability to write “debugger” in your JavaScript source file and have the browser pause there so that you can inspect state is fantastic. And each time I use the developer tools in Chrome I am reminded on Bret Victor’s “Inventing on Principle” talk.

Testing Async Functions with Jasmine

Sam and I have been using Jasmine as our Javascript testing library for our Software Engineering project, mainly because I’ve used QUnit in the past and wanted to try something new. It also makes the tests in our group seem “uniform” in that Jasmine tests look a lot like RSpec, which is what the Rails team on our project is using. Our application has a RESTful Rails backend and a frontend written in Backbone.

We have a function in our Backbone view that calls a function on our Backbone model. The Backbone model talks to our RESTful backend and based on the response triggers the “success” or “error” callback functions provided by the view. Here is the pattern that we used to test this function:


describe('A Jasmine test', function() {
it('should be able to test async functions', function() {
// variable to check if our function call was successful
var wasSuccessful = null;
// Dummy Backbone model
var testModel = new TestModel();
runs(function() {
// someAsyncFunction is an async function that calls the 'success' function in our params object
// if the call was successful. It calls the 'error' function in our params object otherwise.
testModel.someAsyncFunction({
data: 'test',
success: function() {
wasSuccessful = true;
},
error: function() {
wasSuccessful = false;
}
});
});
var timeout = 2000;
waitsFor(function() {
return wasSuccessful;
}, 'Async call should be a success', timeout);
runs(function() {
expect(wasSuccessful).toBe(true);
});
});
});

view raw

test.js

hosted with ❤ by GitHub