I had a discussion concerning the lack of private variables in JavaScript objects. As it turns out you can fake this using closures and some tracking code. I’m going to illustrate this using CoffeeScript.

My last post about making a quick and dirty URL shortener turned out to be an amazing learning experience in more then just the code. (See this post to read about the project). I learned how to handle events on objects, Promises (handling sane asynchronous code) and the value of TDD based development. I’d like to talk about each and I’ll start in reverse order. But because this is a lot to go over Ill split it between three posts. (Also because I find the TL;DR concept (in a blog) a little confusing).

TDD

TDD stands for Test Driven Development. What this means is that you focus a good portion of your development on the test the computer would run to verify your actual code is working. Phew that was defiantly TL;DR. Ok basically you define the proper way a piece of code should work using a specifically styled API.

The reason this became so important is that it provided me a much better idea behind what I actually wanted to accomplish. It showed ways that my code could work, ways it should not work, and helped hunt down many issues. Although the lead up was quite steep it was worth it.

I used Jasmine as my test environment and you can see running here.

Feel free to comment for questions. Here is the code used to test:

They say tools are built out of necessity. The trouble is who’s necessity? In my case I wanted to have a URL Shortener service on my domain. The problem with that is my website is a static site based off of Octopress (based on Jekyll). The problem was how do I create a URL Shortener but have it work with just HTML and JavaScript?

This article steps through the trials and solution I developed for just such a problem. To see the finished code visit this gist. It was written in CoffeeScript so if you want the JavaScript version you’ll have to deal with the (sometimes misunderstood) generated code.

THIS POST IS DEPRECATED

This is an exercise of understanding. To do this properly take a look at hem or browserify. It takes care of this automatically.

I started understanding modular JavaScript from the server side using hem. Hem is a bundler for JavaScript. It collects each file and adds them together into on master file that you can easily load in the browser. It uses the CommonJS conventions to modularize the code.

I preferred this method because it used one file for many modules. Unlike the RequireJS way which uses multiple connections to the server to load each module by itself. Both solutions need wrappings. However, the Stitch way is to add thenm in one file which allso allow you to prepend libaries that are not modules unlike ReqireJS which need libraries to be wrapped to handle dependencies.

I realize this doesn’t make much sense without examples which I’ll get to. The intent of this post is to offer a compromise solution. This is because I wanted to load CommonJS modules inside of jsbin and jsfiddle which use that “one script to rule them all” methodology. And I’ll explain a possible solution.

The term “Pyramid of Doom” was coined (as far as I know) from the JavaScript Jabber podcast episode 1: Asynchronous Programming.

In JavaScript that uses AJAX and other asynchronous methods they all take a function as a callback argument. A common yet ugly style to code this is using anonymous functions:

setTimeout( function() {
  alert("Hello World!");
}, 1000);

Although these are quick and easy they can really get over complicated producing a ever increasing indent to the code. This has the effect of making a pyramid like shape out of the whitespace when you turn it on it side:

One of the great things about CoffeeScript is that it compiles into JavaScript. I found that when addressing several problems in JavaScript I would often attempt to address it using CoffeeScript in an Object Oriented way so that I could examine the JavaScript output.

The affect of this is that I learned a lot about how JavaScript approaches Object Oriented Programming. So I though I would share those insights here.

The Why

I know your first question is “why another blog post about JavaScript Objects?” Well because I haven’t seen many posts that walk through this in an incremented by example form. I have to address that there is a much more detailed explanation in this article and this article. Oh, and lets not forget Douglas Crawford’s JavaScript: The Good Parts. I read both of these and gained a ton of understanding but remembering how to implement the concepts and the best practise on form and style is still left to be desired.

Giving myself a walk through my understanding with the style that I found delightful from CoffeeScripts’ translations.

I did a few jsFiddle’s and realized there were some things about JavaScript that I did not know.

Following is three examples I found useful to me when working with JavaScript.

Objects passed by reference

For example the prototype object will hold sub-objects by by reference. Take a look at this example:

The StaticTest will assign test_obj to the object’s prototype. However, when you have two instances of the StaticTest changing the test_obj data in one instance will also change it in the other instance. However if you use this to make a local test_obj then you will have indepenant versions between the two instances as you can see with the LocalTest object.

It is a little bit difficult to explain except by example. So study the example above.

I often feel like creating a portfolio for coding seemed a daunting task because I am not good with design. I can design systems and programs but I don’t have the artistic flare to envision the look of an application. Most programs I steal design from others and plug them into the final look. Like iPhone apps already have a look and feel that you can use. jQuery-mobile already offers a design to work with. Even this blog is a design from OctoPress. But that isn’t to say I can not be creative. I flourish in the work under the hood. And it is my hope that the examples I put on this blog with show that in the code examples and design ideas I layout.

This post mentioned publishing your jQuery plugins and so here is my first jQuery plugin. It is a simple collapsible div plugin. It mimics what the jQuery-ui Accordion plugin does but for single divs. Now most simply use the slideToggle feature as it is simple. But for my case I wanted to modify the DOM and add more markup.

iMaddy and I went to Washing DC this fall. There is so much to see there that we descided to go every year and hit a different national park or museum. Hehe

Anyway wanted to share some photos from the trip. And to start off with another fantastic Panoramic taken at the Navy Memorial across from the National Archives. (See if you can find waldo)

And for some highlights of the trip

I know someone who will really appreciate the video games we saw at The Art of Video Games exhibit.

The rocks are all exhibits in the Natural Arts Museum in the Gems section. We did see The Hope Diamond. However, There was no easy way to get a good picture of it. (people were gawking pretty badly rolls eyes).

I’ve read a lot of self help books. Some about becoming aware. Some about feeling good. Some about communication. They all had the same underlining themes.

• You are the only one responsible for how you feel.
• Strife comes from needs not being met.
• You have to break down a goal into actionable steps to move forward.
• Communication which includes listening and compromise. And compromise means “I can live with that.”

The trouble is (as it usually is) implementation. I thought if I could breakdown the self introspection portion of being aware into simple steps it might be easier to move towards ones goals.

I feel that perhaps I could take some of the techniques I’ve read about and break them down into bite sized chunks that everyone can run through. I developed a five step Q&A that can help someone discover and plan how to move forward and leave the bad feelings behind.