Coding Outside My Comfort Zone: Front-End Hacking with jQuery and flot

To folks who’ve read my tech ramblings over the years, it’s probably no surprise that I generally avoid doing front-end development (HTML, CSS, JavaScript) like the plague. In fact, that’s probably one of the reasons I finally migrated my blog from a self-hacked and highly-tweaked MovableType install to WordPress. I spend the majority of my time dealing with back-end stuff: MySQL, Sphinx, Redis, and the occasional custom data store (for a feature we’re launching soon). I try to build and maintain fast, stable, and reliable services upon which people who actually have front-end talent can build usable and useful stuff.

But every now and then I have an itch to scratch.

For the last year and a half, I’ve wanted to “fix” a piece of our internal monitoring system at craigslist. We have a home-grown system for gathering metrics across all our systems every minute as well as storing, alerting, and reporting on that data. One piece of that is a plotting tool that has a web interface which lets you choose a metric (like CpuUser or LoadAverage), time frame, and hosts. When you click the magic button, it sends those selections to a server that pulls the data, feeds it to gnuplot, and then you get to see the chart. It’s basic but useful.

However, I wanted a tool that gave me more control, took advantage of the fact that I have a lot of CPU power and RAM right here on my computer, and make prettier charts. I wanted easier selection of hosts and metrics (with auto-complete as you type instead of really big drop-down lists), plotting of multiple metrics per chart, and a bunch of other stuff. So I went back to a few bookmarks I’d collected over the last year or two and set about building it.

I ended up using JSON::XS and building a mod_perl handler to serve as a JSON endpoint that could serve up lists of hosts and metrics (for the auto-completion) from MySQL as well as the time series data for the plots. That was the easy part. For the font-end I used jQuery (the wildly popular JavaScript toolkit) and flot (a simple but flexible and powerful charting library based on jquery). It took a lot of prototyping and messing around to get the JavaScript bits right. That is due largely to my lack of knowledge and experience. It’s frustrating to me when nothing happens and I wonder what good debugging tools might be. But instead of actually bothering to install and learn something like Firebug, I just charge ahead and try to reason out WTF is going on. Eventually I get somewhere.

As with most things, the initial learning curve was steep. But I eventually started to feel a little comfortable and productive. I had a few patterns for how to get things done and, most importantly, I understood how they worked. So I was able to piece together a first version with all the minimal functionality I thought would be good to have. Yesterday I made that first version available internally. There’s already a wishlist for future features, but I’m happy with what I have as a starting point.

It was fun to step out of the normal stuff I do. Getting out of my comfort zone to work on front-end stuff gave me a renewed appreciation for all this browser technology (it works on Firefox, Chrome, and Safari), the libraries I built upon, and all the collective work that must have produced them. Aside from scratching my own itch, I now feel a little less resistant to hack on JavaScript. So that means I’m just a bit more likely to dive into something similar in the future.

It feels like I stretched parts of my brain that don’t normally get much of a workout. I like that.

About Jeremy Zawodny

I'm a software engineer and pilot. I work at craigslist by day, hacking on various bits of back-end software and data systems. As a pilot, I fly a Flight Design CTSW and high performance gliders in the northern California and Nevada area. I'm also the original author of "High Performance MySQL" published by O'Reilly Media. I still speak at conferences and user groups on occasion.
This entry was posted in craigslist, programming, tech. Bookmark the permalink.

5 Responses to Coding Outside My Comfort Zone: Front-End Hacking with jQuery and flot

  1. Fran says:

    I look forward your next book on the subject, it’ll definitely be a masterpiece ;)

    F

  2. JJ says:

    I’m not sure if I should say welcome to the dark side or turn back, this is not the way. Let’s go with welcome!

  3. CL user says:

    Any way you could fix the encoding on the “Best of Craigslist” listings? The BOC pages show up as UTF-8 while the rest of the site (for me, at least) is ISO-8859-1 (Western). I guess this is some sort of global setting for http://www.craigslist.org vs. the local subdomains? On BOC, this bug often results in question marks where there should be double-quotes or single-quotes. (My guess is that the original ISO-8859-1 text is copied into a UTF-8 database without changing its encoding along the way.) Manually changing the encoding on these pages to ISO-8859-1 fixes the problem.

    This occurs in Firefox 3, Safari 5, and Opera 10 on Mac OS X 10.6.

  4. Doh! I’ll point out internationalization guy at that problem.

    Thanks!

  5. CL user says:

    Cool, glad I could help. It’s been that way for years. Just to give some examples:

    http://www.craigslist.org/about/best/sba/1737517917.html

    http://www.craigslist.org/about/best/aus/1610645451.html

    http://www.craigslist.org/about/best/sat/1602837659.html

    There are more. Just wanted to give an update since these pages are definitely in the minority, and a quick look might not turn them up.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s