Node, JSLint and Vim

It’s always nice to get something for free. That’s how I feel about JSLint. Running your JavaScript code through JSLint gives you a few advantages:

• Coding style consistency — always use ; at the end of a line
• Syntax error detection — did you forget that ) ?
• Logical error detection — did you forget that var?

There’s a whole bunch of stuff JSLint will pick up for you.

I have talked before about JSLint in the context of SpiderMonkey, but, nowadays, I install node.js for a few things. If I run JSLint through node.js, that means I won’t have to install SpiderMonkey anymore.

Installing Node and NPM

I admit, these pieces of software are moving fast and the instructions (or lack thereof) are limited. But these things will vary with your OS and skill level.

I’m going to focus on the Vim integration, but go ahead and install Node and install NPM.

Installing JSLint

Which one?

I recommend the simply named “jslint”. You can look it up on GitHub as node-jslint.

Make sure you don’t forget that “-g” flag with NPM. NPM changed a lot in version 1.0.

Vim Integration

The end goal is:

You are in a JavaScript file, you press F4, Vim runs JSLint on your file, parses the errors and puts your cursors on the exact location of the first error with the others one waiting in the quickfix list.

The main part of integrating with Vim to “compile” something is to set makeprg and errorformat (aka efm). If you ever need to integrate with something else, be sure to Google for those.

Since we are going to invoke :make all the time, I’m going to bind it to F4. (put it in your .vimrc)

nmap <F4> :w<CR>:make<CR>:cw<CR>

Step by step:

• :w — save the file, doesn’t hurt if it’s already saved
• :make — invoke make
• :cw — open the quickfix window if there are errors. Close it if there are no errors.

Next, create $HOME/.vim/ftplugin/javascript.vim. Put these lines into it:

setlocal makeprg=jslint\ %
setlocal errorformat=%-P%f,
                    \%–G/*jslint\ %.%#*/,
                    \%*[\ ]%n\ %l\\,%c:\ %m,
                    \%–G\ \ \ \ %.%#,
                    \%–GNo\ errors\ found.,
                    \%–Q

The variable makeprg is just was it invoked when you do :make. The variable errorformat are instructions on how to parse the error messages of the “compiler”. That variable and how to configure it are a whole world of complexity.

Now, restart Vim and open some JavaScript file you have lying around. Press F4. Be ready for a lesson in humility.

Troubleshooting

If things don’t work out, try this:

• try to run “jslint” from the command-line, if it doesn’t work Vim won’t work either
• if the output of “jslint” changes format, you’ll have to tweak errorformat

Read Full Post »

Newfound Respect for JavaScript

A long time ago, in the list of “how can I say I’m a web developer if I don’t know this” items, I had determined that JavaScript was my final frontier. A lot of things have happened since then.

Douglas Crockford describes JavaScript as “The World’s Most Misunderstood Programming Language” and “Lisp in C’s Clothing” [source]. Now that I’ve delved more into the depths of JavaScript, I can relate to both these statements. I’ve been introduced to Scheme about a year ago, and have been actively Scheming for the last month or so. Consequently, a lot of the “weird” concepts of JavaScript are just my day-to-day Scheme concepts.

Once you start playing with first-class functions and closures in a language, playing with them in another doesn’t represent a barrier to entry. I might describe this feeling as “coming home”–when all the toys you are familiar with are available for your evil purposes once more.

Most people that I’ve known, including myself, have started their JavaScript journey in the worst possible way. We had heard that JavaScript was not a real language, we had been annoyed by image rollovers and other JavaScript trickeries, and most of the examples out there were spectacularly bad. We copied and pasted our first scripts. We got results and didn’t ask too many questions. In the end, how many of us could claim to be JavaScript experts or even to have known one?

Furthermore, Crockford himself confirmed something that I had suspected: that all JavaScript books were incredibly bad. The only one he could recommend was JavaScript – The Definitive Guide (I only own this book in pocket reference). Hopefully, AJAX and the recent surge of JavaScript interest might convince good authors to step up to the plate.

Recently, I’ve been going through a lot of good material. Here’s what I recommend:

• Douglas Crockford: “The JavaScript Programming Language” (videos, 4 parts)
• Douglas Crockford: “Theory of the DOM” (videos, 3 parts)
• Douglas Crockford: “Advanced JavaScript” (videos, 3 parts)
• Douglas Crockford’s JavaScript stuff (many articles, good reference)
• MSDN: Create Advanced Web Applications With Object-Oriented Techniques (review if you watched the videos)

Found a pattern? :-D Yeah, he’s that good.

Read Full Post »

The Story of business_days(…)

I’ve been really busy with work recently. However, while going over my requirements for the nth time, something caught my eye: business days. In particular, finding the date 7 business days from a another date.

Far from being a hard task, it fell more into the annoying category. Or maybe it would make for a good interview question. In the end, how complicated or simple can someone make such a function?

A little background first. I had to use JavaScript, a language I’m only superficially familiar with. Also, after discussion with the customer, the definition of business days was Monday to Friday. No holidays are included… In fact, which holidays? And from what region/country?

Having flirted with Haskell recently and being “influenced” by the SICP lectures, a few ideas came to mind.

“business days” is a subset of “days”, and both are infinitely lists. If I have a list of all the days and I filter it through the is_business_day(date) function, and I access the element at position 7, I get the answer. I was getting pretty angry with my inability to accomplish my task in such a straightforward way. I started to understand what people mean when they talk about the expressiveness of a programming language.\n\nI then turned to Ruby for ideas. The succ function came to mind, I made that my starting point.

function include(value, list) {
  for (var i=0; i < list.length; i++) {
    if(list[i] == value) return true;
  };
  return false;
}

function succ(date) {
  return new Date(date.getTime() + 1000 * 60 * 60 * 24);
}

function is_business_day(date) {
  return include(date.getDay(), [1,2,3,4,5]); // mon-fri
}

function business_succ(date) {
  var result = succ(date);
  return is_business_day(result) ? result : business_succ(result);
}

function repeat(f, x, n) {
  if(n == 1)
    return f(x);

  return f(repeat(f, x, n-1));
}

function days(date, n) {
  return repeat(succ, date, n);
}

function business_days(date, n) {
  return repeat(business_succ, date, n);
}

Personally, the moment of enlightenment came when I realized that iterating for days or business days was the same code and that it could be made even more generic by the repeat function.

A few comments:

• the include function would usually be borrowed from prototype.js
• recursion has become part of my day-to-day programming techniques
• all functional
• definitely not the shortest code I’ve written, but all pieces are both trivial and reusable
• a definite LISP-like flavor
• proof that SICP and friends have been damaging my brain :)

Read Full Post »

I didn’t “get” bookmarklets

I have only recently been fully aware of the joys of bookmarklets. Of course I had the del.icio.us bookmarklets for quite a while now, but, the idea had not fully sank in until recently. I didn’t “get” bookmarklets.

Yesterday I re-discovered Google Reader and with it came its own, very useful, bookmarklet: Subscribe….

Today I decided to wrote my own: booktrack…

Booktrack is a web application to keep track of the books I read. It keeps track of what I want to read, what I’m reading now and what I’m done reading. This was inspired by librarything.com.

When it came to data entry, I had integrated with the amazon search API and it was working great. However, when people talk about books they usually link directly to the entry at amazon. Being on the page and having to log into my application to look for the exact same book seemed like a task that could be automated.

This was a spur-of-the-moment idea. A what-if that needed answering. 5 minutes later, I had it and it was working. It is relatively crude, but I’ll take the iterative approach on this one.

Now I’m wondering what else I could do with that? What else needs a bookmarklet? What have I missed? This is all part of me trying to keep an eye out for stupid and repetitive tasks.

Read Full Post »