Greatest Hits (Vol. 1)

I've never heard of him, but SEVEN VOLUMES of Greatest Hits? That's impressive.

Image from numusiczone.com

I’m just realizing that this here blog just celebrated its first birthday — my first ‘hello world‘ post here was May 1, 2012. This seems like a good opportunity to go looking through the archives and point to some older posts that newer visitors/subscribers may not have read.

Ryan Brubaker did a great three part series on using CoffeeScript and Backbone.js:

CoffeeScript has been all the rage lately and I’ve been wanting to hop on board the bandwagon. I’ve also seen Backbone.js mentioned quite a bit and was even more intrigued after listening to this .NET Rocks podcast. I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.

The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available here and the running code can be seen here.

I was interested to learn this week that the folks at github recently updated their JavaScript style guide to require that all new JavaScript code be written using CoffeeScript. That’s a pretty significant vote of confidence in my eyes — if you’ve been assuming that CoffeeScript is just a fad, maybe this will prompt you to re-evaluate that stance.

Steve Huey dropped a whole bunch of useful iOS/OS X-related posts:

Along the way, I contributed a few pieces talking about the idea of programming as a liberal art, and as something that most people should learn how to do at some level:

I believe that everyone should learn to write a little code, and play an instrument, and make things out of wood, and tend a garden, and cook, and, yes, do a little plumbing, too. They shouldn’t learn these things because they’ll use them every day to earn a paycheck, they should learn them because it makes them better thinkers, and better able to take care of themselves. On top of that — if vast empires were being built on top of plumbing the way that they’re being built on software, I’d say that anyone who was happy to ignore it as a black art practiced by wizards was making a big mistake. The value of acquiring a new mode of thinking isn’t affected by the fact that most people won’t need to use pointers or recursion on a daily basis.

If you missed these the first time around — check them out.

A Visual Guide to Marionette.js Views

Marionette.js Item View Visual

When I first began working on the front-end to this one interactive application, I decided to just write a few lines of JavaScript to handle some miscellaneous things behaviors on the front-end. However, that soon turned into a completely interactive front-end with thousands of lines of JavaScript trying to hack together the entire DOM. Luckily, Backbone.js came to the rescue which was later accompanied with Marionette.js. One of the difficulties I had with the documentation that existed was trying to visualize the handful of useful views Marionette.js provides.

To help visualize the difference (and similarity) of layouts, regions, composites, collections, and item views, I’ve created helpful diagrams to visually demonstrate how the pieces of the puzzle fit together. (more…)

Fun with CoffeeScript and Backbone.js : Part 2

Part 1 of this series can be read here.

The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available here and the running code can be seen here.

In this post I’ll discuss the code that handles updating the UI.

Communication Line View

The CommunicationLineView class is a Backbone.js view class that handles the animation of signals sent across the communication line. In Part 1, I mentioned that the model representing the communication line fires a hasNewData event each time the tokens progress one step through the line. As you can see above, this view is bound to that event and rerenders itself every time it receives the event. The render method iterates over the current tokens and draws the appropriate token shape for each line position.

Decoder Model

The Decoder model is responsible for determining what characters the user has sent across the line. The processToken function is called each time the tokens on the communication line progress one step through the line. The decoder processes the current tokens sent by the user anytime it sees 10 or more empty tokens in a row or receives a word-break token. If the decoder parses a known morse code sequence it fires a parsedCharacter event letting the message field know it needs to rerender itself.

Decoder View

The Decoder view is a Backbone.js view class that represents a simple text box to display the characters the user has sent across the line. Anytime the Decoder model emits a parsedCharacter event, the Decoder view appends the parsed character to the end of its text box.

Fun with CoffeeScript and Backbone.js : Part 1

CoffeeScript has been all the rage lately and I’ve been wanting to hop on board the bandwagon. I’ve also seen Backbone.js mentioned quite a bit and was even more intrigued after listening to this .NET Rocks podcast. I decided to convert some plain JavaScript code I had in a side project to use both CoffeeScript and Backbone.js and see how things went.

The project is a simplified morse code simulator that animates morse code being sent over a telegraph line. The complete source is available here and the running code can be seen here.

In this post I’ll discuss the code that handles the user input.

Initialization

The init function sets up all of the Backbone.js model/view classes. Note that each Backbone view is initialized with both its corresponding HTML element and corresponding model object.

The init function also draws the “communication line” in a canvas element.

Input View

The application processes user input using the StraighKeyInput class, a Backbone view class associated with an input button:

The class uses two timers to determine which “token” a user intends to send across the line. Using Backbone’s declarative style for event binding, I bind the mousedown event to a function that starts both timers. The mouseup event is bound to a function that pushes the appropriate token to the model based on how long the user held down the input button.

Input Model

The CommunicationLine class is a Backbone model class that represents the tokens currently moving across the telegraph line. It also contains a queue that holds the input tokens generated by the user. The class also holds a reference to the object responsible for decoding the user input (more on that tomorrow).

Every 100 milliseconds, the communication line shifts its tokens over one spot. The token popped off the line is passed to the decoder. The model then checks the input queue to determine if a user-generated token is available to be pushed onto the line. If not, the model pushes a default token (an empty string). The model then triggers an event to indicate the communication line state has changed and that the object representing the communication line view needs to be re-rendered (more on that tomorrow).