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
  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 list to see what each one does. We are going to focus on @define.

Continue reading

A Textmate Bundle for CSSLint


A quick heads up, if you haven’t heard about the new CSSLint project from Nicole ## and Nicholas Zakas, you have been missing out. The project aims to take CSS to the next level and help you understand why your css isn’t performing very well. What, you didn’t know your CSS isn’t performing? Thats because most of us haven’t had a good Code Review on most of our CSS.

CSSLint for TextMate

First and foremost, I would like to say, I forked the original jsHint TextMate Bundle. If you don’t already have this, you need it. It will change the way you put together your JavaScript, just as I suspect CSSLint will do for your CSS.

I talked with Nicholas at the Velocity conference and decided I would put together a quick CSSLint TextMate Bundle that could make use of the Node Module for CSSLint. After a couple of hours playing with the way TextMate Does its bundles, I was able to get a working product. A Couple of quick emails back and forth and we have a Beta version of the CSSLint TextMate Bundle.

Continue reading

Getting A Class From a DOM Element

Lately, if I am searching for a way to do something in Javascript the only results I am getting ways of doing the procedure using jQuery. While, its true jQuery is pretty much the de facto standard for writing JavaScript anymore, understanding the underlying technology is a must. As well as alot of times, I don’t need to load jQuery on the page just to get a DOM Element or its class.

So I recently went looking on how to get class from element in JavaScript. Turns out most of the results were for getting elements by class name, rather than actually getting the class of the element I already had.

Here is how you get a class name from an Element using JavaScript.

Continue reading

Lazy Loading Functions

The best part about this Javascript pattern is the ability to calculate once and then use the new function definition from that point forward.

During the course of building web apps, we usually end up with functions to do certain tasks. However, since those tasks sometimes need to be done differently in each of the browsers, we end up with large if else statements to get the job done.

This is where Self Defining Functions come in handy.

Continue reading

jQuery ready, delegate, live!

Recently I was browsing through the jQuery subr reddit and noticed this question pop up. Since I am sure this is a pretty common question on “Why won’t my jQuery command work properly”, I figured I would give a shot at answering it.

Hey guys, I’m sure this has been answered before but I can’t seem to find anything by searching Google or /r/jquery.

I am a beginner with this so forgive me, but I can’t find an explanation to this anywhere and I’m curious. When I try to stop the default submit function of a form in the <head> tag of a .html file it won’t work, but when I copy and paste the same code into the <body> it works fine. Regardless of where I place it, it is always below the link to the jquery library. This is really confusing and I was hoping you guys could explain this for me. Thanks!

via jQuery <script> in <body> or *lt;head>.

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