'Programming' Articles

Node.js stack traces in Emacs compilation-mode

, ,

I’ve been using Emacs regularly for at least 10 years, for all of my programming tasks that don’t involve Java or .NET. Amazingly, for most of that time I’ve used a pretty stock installation of Emacs with only a few cargo-culted customizations stolen from my co-workers’ .emacs files. However, as part of switching to a new job in the last month, I’ve taken the opportunity to invest in my shell and editor, and I’ve fallen deep down the rabbit hole of Emacs customizations. My continually-evolving config is publically available on GitHub. The difference between stock Emacs and one loaded up with custom packages is astounding - I can’t believe that I had been missing out on all of this. But this is not an article about setting up Emacs to be your perfect editor. Instead, I wanted to provide a tip for Node developers that I hadn’t found the answer to when I went looking.

The other day I was working on a Node.js script, and I was constantly switching back and forth from Emacs to the terminal to run the script, hit some error, remember the line number, go back to Emacs to look up the error, etc. Then I remembered that Emacs has the compile command, which will run a shell command and show the output in a separate window. Now I could split my frame into two side-by-side windows, edit my script on the left, and run compile to test out my script with any test command I liked (and then use recompile or g in the *compilation* buffer to re-run the command). But there’s another neat feature of compilation-mode - it can understand stack traces and provide hotkey access to the line that triggered an error. Unfortunately, the stack traces from Node were not being recognized correctly, and Emacs thought the last number was the line number, when it’s really the column number.

To fix this, I simply needed to add a new regexp to the list of patterns compilation-mode understands:

;; Add NodeJS error format
(setq compilation-error-regexp-alist-alist
      (cons '(node "^[  ]+at \\(?:[^\(\n]+ \(\\)?\\([a-zA-Z\.0-9_/-]+\\):\\([0-9]+\\):\\([0-9]+\\)\)?$"
                         1 ;; file
                         2 ;; line
                         3 ;; column
                         )
            compilation-error-regexp-alist-alist))
(setq compilation-error-regexp-alist
      (cons 'node compilation-error-regexp-alist))

Writing that regexp would have been hard, but of course Emacs has a solution. First I found the current value of compilation-error-regexp-alist-alist using describe-variable in order to get an example regexp to start with. Then, in the compilation buffer where my stack trace was, I ran re-builder, which pops up a little mini window where I could tweak my regexp and see immediately whether or not it was matching correctly. Then I just added this to my init.el, evaluated it with eval-region, and my next compile had the errors highlighted correctly, and I could immediately go to the offending code with next-error or by putting the point on the stack trace line in the compilation buffer and pressing RET.

Hopefully this helps out some fellow Emacs-using Node developers, and serves as a reminder that your tools can always work better for you.

Cleanly declaring AngularJS services with CoffeeScript

, , ,

I’ve recently fallen in love with AngularJS for building JavaScript applications. I’ve also come to rely on CoffeeScript to provide a more comfortable, concise syntax than plain JavaScript. It’s common to define many services when writing AngularJS applications. Services are just plain JavaScript objects that are registered with AngularJS’ dependency injection system, which makes them available to other parts of your application. If you have experience with Java, this will be familiar from Spring or Guice. I prefer to have very little logic in my controllers, and instead create a domain model from layers of services that each have their own responsibility.

One thing I’ve gone back and forth on is how best to declare AngularJS services using CoffeeScript. Let’s imagine a somewhat contrived example service named Tweets that depends on the built-in $http service. When it’s constructed it saves a timestamp, makes an HTTP call and saves the result to a property. Here’s a pretty straightforward way to declare this service using CoffeeScript’s class syntax:

app.service 'Tweets', ['$http', class Tweets
  constructor: (@$http) ->
    @timestamp = Date.now() - 900000
    @getNewTweets()

  getNewTweets: ->
    request = @$http.get '/tweets', params: { ts: @timestamp }
    request.then (result) =>
      @tweets = result.data
      @timestamp = Date.now()
]

This works pretty well. The first time this service is needed in the application, AngularJS will call new Tweets() and save that one (and only one) instance to be provided to any other code that requests it. Because AngularJS calls the Tweets constructor, the first call to getNewTweets is performed right away. But one thing bugs me - a reference to $http is saved as a property of the Tweets instance in the constructor. First, this results in some ugly-looking code like @$http thanks to AngularJS’ habit of naming services with $. It gets even worse when you depend on a lot of different things, and you now have to refer to them all via @ (which is this in CoffeeScript, by the way). Second, this exposes the $http service to anything that depends on Tweets. Anything that depends on Tweets can simply call Tweets.$http, which is a violation of encapsulation. It doesn’t look too bad in this example, but imagine a deep chain of services, each with its own responsibility, declared with this method. Any caller could reach down into that chain and pull out dependencies of dependencies. Or worse, they could change the reference to $http to point to something else.

Let’s try something else. If we are only ever going to have one instance of this class, why have a class at all? We can use the factory method instead of servicefactory just calls the function you provide instead of calling new on it - and have our factory function return a literal object:

app.factory 'Tweets', ['$http', ($http) ->
  obj = 
    timestamp: Date.now() - 900000

    getNewTweets: ->
      request = $http.get '/tweets', params: { ts: @timestamp }
      request.then (result) =>
        @tweets = result.data
        @timestamp = Date.now()

  obj.getNewTweets()

  obj
]

We’ve solved the problem of exposing $http, since now it’s simply captured by the function closure of our getNewTweets function, making it visible to that method but not elsewhere. However, we now have to assign our object to a variable so that we can do our initialization outside the object declaration before returning it. This is ugly, and it feels out of order. A more subtle problem is that stack traces and object dumps in the console will print this as Object, wheras in the first example it will say Tweets. Never underestimate the value of clear debug output.

There’s also a potential for confusion around CoffeeScript’s function binding fat arrow =>, which will bind to the this of the factory function if it’s used when declaring methods on the object literal. I actually ran into this problem when I wanted to bind a function to its object so it could be passed as a callback to another function, and ended up with it bound to the wrong this.

Note that I can declare timestamp as a property of the object literal in this form, wheras in the first version I set it in the constructor - this is because when CoffeeScript creates a class, all the properties are set on the prototype, not the instance, so you can’t store per-instance state there. Well, you can get away with it because AngularJS will only make one instance of your class, but you’re still modifying the prototype rather than the real instance, which isn’t what you want. It pays to understand exactly what CoffeeScript is generating for you.

Let’s go back to using class and try again:

app.factory 'Tweets', ['$http', ($http) ->
  class Tweets
    constructor: ->
      @timestamp = Date.now() - 900000
      @getNewTweets()

    getNewTweets: ->
      request = $http.get '/tweets', params: { ts: @timestamp }
      request.then (result) =>
        @tweets = result.data
        @timestamp = Date.now()

  new Tweets()
]

The difference between this and our first example are subtle. First, we’re using factory instead of service, like in the second example. This means instead of having our dependencies provided to the Tweets constructor, they’re provided to the factory function, and our declaration of the Tweets class can simply close over those parameters, meaning we no longer need to take them as constructor arguments. That solves the problem of $http being visible to other objects, and means we don’t need to write @$http. As I’ve explored AngularJS, I’ve actually found myself always using factory instead of service because it provides more flexibility in how I provide my service value.

However, we also have to be very careful to remember to actually instantiate our class at the end, since AngularJS won’t be doing it for us. That could be really easy to miss after a long class definition.

We can change this a little bit to make it better:

app.factory 'Tweets', ['$http', ($http) ->
  new class Tweets
    constructor: ->
      @timestamp = Date.now() - 900000
      @getNewTweets()

    getNewTweets: ->
      request = $http.get '/tweets', params: { ts: @timestamp }
      request.then (result) =>
        @tweets = result.data
        @timestamp = Date.now()
]

Now we call new right away to instantiate the class we’re defining. I think this is very clear, and there’s nothing after the class definition to forget. This is the pattern I’ve settled into whenever I declare singleton services – it’s clean, readable and concise, and it solves all the problems we’d identified:

  1. Dependencies of our service are not exposed.
  2. Our service will print with a meaningful name in the console.
  3. There is no out-of-order code, or extra code after the class declaration.
  4. We never have to put the characters @ and $ next to each other. Sorry, I’m still recovering from exposure to Perl and I can’t take it.

I’ve written up a more detailed example in this gist, which shows the pattern I’ve been using to produce ActiveRecord-style APIs with private dependencies. I hope this helps you write clean, understandable AngularJS services in CoffeeScript.

Posts I haven't written

, , , , , , ,

I haven’t been updating this blog too much recently. I never meant for this blog to run on a schedule, but I did intend to post more frequently than this. My original idea was that the blog would serve two major purposes. First, it is a place for me to announce new projects or updates to software and websites I’ve already released. It’s done that quite well, though I haven’t had much to announce recently. My job has been taking the majority of my development time, and most of the projects I’ve been working on at home are either private or haven’t been released in the form I’d like to because my employer hasn’t approved them for release yet.

The second major purpose for my blog is as a place for me to record the solution to problems I run across while developing software, so that others won’t have to spend hours Googling or using trial and error to come to the same conclusion. I didn’t intend to rehash things that were easily found or that had already been discussed - only to post when I felt it was something that added value to the internet that hadn’t been there before. So a lot of the blog posts are not really a narrative or running commentary - they’re not meant to be subscribed to, but found individually. It’s for this reason that my most popular posts tend to include the exact text of error messages. This type of post has suffered both because I haven’t been doing as much development, because I can’t discuss a lot of what I’ve learned due to the nature of the projects I’m working on, and because I’ve been learning new stuff (like Ruby on Rails) and haven’t done enough to have solved problems others haven’t already posted solutions for.

The third reason I have this blog is to occasionally talk about my thoughts on different technical topics, from web development to video games. Again, I don’t like to make a post unless I think I’m adding something new, and most of the topics I’ve wanted to talk about have already been covered. I had a lot of draft posts sitting around about web development, web standards, and the evolution of browsers, but then I discovered Alex Russell’s blog and it turns out he’s already said most of what I wanted to say, and better than I could. Other stuff, like my impressions of Windows Vista, critique of stackoverflow.com and suggestions for the Xbox Live Arcade lineup, have been covered to my satisfaction in plenty of places. Maybe some of them will end up posted, but probably not.

Another part of the reason I haven’t posted much is the sheer weight of unfinished posts I have. Right now I have 64 drafts and only 52 real posts! So I’m going to attempt to clear things out by writing a little about what I haven’t posted. A lot of this stuff wasn’t posted because it fell under that third point above, but some of it I was just too lazy to flesh out into real posts. Some of it’s just random stuff. So here’s what’s been happening in the last year:

I got on the bandwagon and picked up iPhone 3Gs for myself and my wife. Everything good you’ve heard about the iPhone is true. Also, almost everything bad you’ve heard about them is true. I really like the device, the UI, and the web browsing, and now that the NDA over the SDK is gone, I might even try to write an app if I get an idea.

I built a new computer in March of ‘07 to replace the machine I had built for college. The new machine is set up as a developer machine primarily, with the additional goal of being as quiet as possible. I can’t say I’m entirely happy with it, since I’ve had some trouble with the hardware and overheating issues mean I have to run the fans above “totally silent” mode. It does its job well enough but I might just buy a Dell next time. The huge CPU heatsink I used is awesome, though.

I’ve been running Windows Vista x64 since my new machine came online. While I think it’s a disappointing release given the 5-year gap between it and Windows XP, I generally like it. It’s certainly better than Windows XP and I wouldn’t go back. I’ve hit some trouble related to using x64, but overall it’s pleasant.

Before that, I was getting pretty sick of the aging Windows XP, so I bought a Mac Mini and ran it, using OS X 10.4, on a second screen next to my XP machine, joined via Synergy. I liked it a lot, but never moved much of my work over there. After getting set up with Windows Vista, the difference between OS X and Windows wasn’t so great, and I unplugged the Mac so I could have both screens for Windows. I moved the Mini up to my TV and used it with Front Row as a media center. Then the Xbox 360 got the ability to play DivX videos, so I stopped using it for that and brought it back downstairs. I was using it for browser testing, but then Apple released a Windows version of Safari. Now it mostly stays off, except when I want to use Handbrake (which won’t work on Vista x64). I still like it, and I really miss having an OS with a real command line, especially now that I’m doing Rails stuff and spelunking through a lot of badly-documented libraries. I’m not sure I’ll ever make the switch though. That said, my trusty old Thinkpad finally died last week, and if I can’t revive it I might look towards the rumored lower-priced MacBooks that should come out soon.

I got two awesome cats named Ozette and Skagit. A lot of my time at home just involves relaxing and petting the cats these days.

After years of using Thunderbird, I switched to GMail as my main mail client so I could use it from the web and use IMAP on my iPhone. I set it up to read all my old POP mailboxes, and I use Google Chrome’s application mode (I used to use Mozilla Prism) to make it look like a standalone app on my desktop. It’s an OK mail reader, especially since I get a lot less email to my personal accounts these days. The main annoyance is spam - I used to use POPFile to filter spam, and it was perfect, with almost no false positives. In contrast, I get maybe 50 pieces of spam leaking through on GMail a week.

Spam has not been limited to my inbox: my support forums are basically nothing but spam and people complaining about stuff I’ve given them for free. It takes a lot of maintenance, and I’m thinking of either trying to transition them to something less attractive to spammers, or just shutting them down entirely.

Back when IE7 was in beta I wrote a handful of bug repro’s for problems I found with it. Recently I’ve been running across all kinds of crazy things in both Firefox and IE, so I’ve been cataloguing them with little examples. Most of them have been fixed with the latest release of each browser, but I figure they’re still useful if anybody’s seeing those problems happen.

I went to Southeast Asia for two and a half weeks. We toured Vietnam, Cambodia and Thailand. It was incredible.

I finally got so sick of CSS that I decided to write a processor that would take an “evolved” CSS syntax that supported named constants, nested selectors, arithmetic, mixins, and such and spit out real CSS. I had it all sketched out and was ready to start implementing when I found SASS, from the same guy who awesome-ified HTML with HAML. SASS is feature-by-feature the exact same thing I wanted to do (except for the whitespace-significant thing, but I can deal). I love it.

I’ve been pretty disillusioned with ASP.NET as a web platform - the web forms are too inflexible and unfriendly to clean markup and unobtrusive JavaScript, and C# feels too rigid and verbose for what I’m doing. LINQ and the other 3.5 features help a lot, but my host is stuck on 2.0. I still haven’t found any templating system that trumps Web Forms, which is why I’m still stuck on Windows hosting for the most part - a lot of my sites are built on ASP.NET for nothing more than the templating. While I’m keeping my eye on ASP.NET MVC, I’m more interested in cross-platform web technologies that give me a bit more choice in hosting.

To that effect, I’ve started a personal project on Ruby on Rails, mostly to learn the platform. So far I’ve really been liking it - having a functional, dynamic language is great, and the structure Rails gives you really helps to quickly get things running. Hopefully I’ll be able to show what I’m making at some point, assuming it works to my satisfaction.

I actually went through a big comparison of different web platforms and different languages, trying to gauge what would be the best for me to develop for. I’m not sure I’ll ever publish my full results, but Ruby on Rails was obviously up there, and Django / Python looked good too.

Speaking of languages, before I discovered jQuery I didn’t really do much JavaScript if I could avoid it. Now I’m writing tons of JavaScript to produce some really nice interactive web apps. I have never been as impressed with a library or platform as I have been with jQuery.

I’ve actually been using Eclipse a lot lately, both for Aptana and for straight Java development, and while it’s slower and buggier than Visual Studio, a free copy of Eclipse plus all the free plugins make it much more compelling than the Visual Studio Express products I use for C# work. Stuff like the outline view, refactoring support, quick fix mode, and real unit testing and source control plugins make all the difference.

I think that’s about all I wanted to get off my chest for now. Hopefully I’ll have a chance to flesh some of that out into full posts sometime, but at least I won’t have so many unwritten drafts staring at me every time I log in to Wordpress.

Installing Aptana on Windows Vista with Aero Glass

, ,

I’ve recently given up Dreamweaver entirely in favor of Aptana, a great (and free!) Eclipse-based web development IDE. It features great JavaScript IntelliSense, document outline view, AJAX library function autocomplete, and an FTP component that should make Dreamweaver users very comfortable. Even better, with plugins like Subclipse, you get source control for your websites. Basically, it’s one of my favorite programs.

However, all is not rosy. The Aptana documentation’s guide to installing and running Aptana on Windows Vista recommends turning on XP compatibility mode, disabling desktop compositing, and always running it as Administrator. If you haven’t had an app turn off Aero Glass for you before, you’re in for a shock - it really sucks after you’ve gotten used to Glass. And running as Administrator isn’t that great an idea with a product as connected as Eclipse.

Fortunately, all is not lost. First, go to Sun and download the JavaSE 6 JRE (32-bit). It’s a huge upgrade from the Java 1.4.2 JVM that Aptana usually comes with, and it includes some major Vista compatibility features. Next, download and install Aptana minus the JRE from the Aptana downloads page. Already installed Aptana? Just go into the program directory and delete the “jre” folder. Now, make sure the Aptana shortcut doesn’t have any compatibility features checked. (Disclaimer: you might actually need to run as Administrator the first time you use Aptana, but certainly never again.) Start up Aptana, and everything should be glassy and smooth.

Aptana with Aero Glass

If Aptana complains that it can’t find the JRE, go into your Aptana program directory and open up aptana.ini. Add the line -vm='C:\Program Files (x86)\Java\jre1.6.0\bin\java.exe' to the top of the file, and save it. I had to do this mainly because I have both the 64-bit and 32-bit JREs installed, and while most Java apps work on the 64-bit JRE, Eclipse (and thus Aptana) doesn’t support 64-bit yet.

Update: Newer versions of Aptana come with Java 1.6, so this isn’t a problem anymore.

Hogblog

,

It seems these days that everyone has a blog (or two). There are big news blogs, little blogs with useful articles (such as the many C# blogs I read), the countless teenagers with MySpace or livejournal blogs. There are blogs about tech, politics, clothing… there are even blogs about blogging! Even I have been sucked into the blogging scene. Even my Xbox 360 has a blog. So why shouldn’t my hedgehog have a blog?

On the Wheel
So that’s what I did. Right after we got Pliny and got him set up with a nice cage and a big wheel, I started thinking about how I could get him to blog. I thought about teaching him how to type and operate Wordpress, but as cute as he is, he’s not very smart. So I took the technological route. I built a little sensor out of a magnet and a reed switch and attached it to his wheel. After about 4 months of on-off (mostly off) C# coding, I had a client built up that would poll the sensor, log Pliny’s wheel activity, and post to his blog. The Hogblog was born! It posts his activity, along with charts and occasionally a pic from Flickr. It’s all automatic, and I’m subscribed to his RSS feed to find out just how much running he’s been doing while I was asleep. It’s already brought up some interesting information. For two days his wheel was stuck - the little log he sleeps in was jammed up against it. In the two days since he’s run almost half a mile!

This has been a really fun project that has tied together a lot of fun aspects - playing with physical elements like the sensor, coding in C# (and interacting with the parallel port to get the stats!), and making web services calls to Wordpress and Flickr. I’m already thinking up more ways to improve his blog, but for now I’m going to sit back and watch for a bit!