Tag Archives: javascript

Removing Debug Statements from Javascript via compiler

We all know the pain of getting a bug filed against some of your code and having to dig through it later to find the root cause. Especially, since many times we end up having to add back in all of our debug statements in order to track down the issue. There has to be a better way. What if we could write all of our JavaScript with the debug code left in?

The Better way

By now, we are all using some compiler to compile your code. Right? If you haven’t started, grab the Closure Compiler to follow through on this example.

  1. Download the latest Closure Compiler http://closure-compiler.googlecode.com/files/compiler-latest.zip
  2. Unzip
  3. Copy the compiler.jar file into your directory with the JS Files.
  4. follow along below and enjoy!

If you are using Closure Compiler or Uglify already, you are in luck! Both of these compilers allow you to annotate your JavaScript. Annotating your files allows you to describe them to the compiler. Things like @license will make sure that the comment goes to the top of the file after compression. Look through the http://code.google.com/closure/compiler/docs/js-for-compiler.html list to see what each one does. We are going to focus on @define.

Continue reading

Patterns for enforcing “new”

Recently I was looking around for a book on JavaScript Patterns. I decided to give the JavaScript Patterns by Stoyan Stefanov a try. If you have been looking for a book on Javascript Patterns, I highly recommend this book.

In the 3rd chapter, Literals and Constructors, I noticed this section on “Patterns for enforcing new” with the following entry:

When your constructor has something like this.member and you invoke the constructor without new, you’re actually creating a new property of the global object called member and accessible through window.member or simply member. This behavior is highly undesirable, because you know you should always strive for keeping the global namespace clean.

Continue reading

JavaScript Performance Testing – An Indispensable Tool

Over the course of the last couple of weeks I have been looking into various tools to test Javascript Pefromance. I needed a way to test various JavaScript code snippets to see the overall latency/run time of each. I started looking for a way to manage the tests and be able to reference them in an easy way. Here are a couple of the performance suites I looked at and afterwards, my decision.

Continue reading

Underscore.js

Coming from a more technical backend role, and moving into JavaScript many people tend to look for very common functions to make their life easier. However, since JavaScript is considered a “functional” programming language, most of those little conveniences are currently unsupported. So I went searching a bit. Turns out there is a nice little utility belt library that gives us access to all of those built-in methods we all take for granted and are about to be supported in ECMAScript 5.

As the guys over at Underscore.js put it:

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery‘s tux.

Underscore.js uses the built in functions if they exist, and if they don’t falls back to its own version. Since there are only a few browsers that currently support ECMAScript 5, it allows us to use these functions even on older browsers.  Now, not only can we start using those constructs before they are officially supported in the browsers, but as soon as they become available underscore.js will get out of the way.

Continue reading

Custom Events in jQuery

*quick note: I originally posted this on trulyevil.com. However its time to move sites and actually keep something up and running for a while.

Events seem daunting at first, but really jQuery makes them super simple. Events can be used to alter behavior or even have multiple events happen on a single state change.

We all know about events like click, onkeydown, onmousedown, onmouseover, etc. But you can fire custom events as well. First you need to understand how to fire events. You can do this by using the $().trigger() event through jQuery.

Continue reading