Delivering Custom JavaScript

May 19, 2009 · 1 Comment

I learned a valuable lesson this morning and thought I would share it while it is still fresh in my mind.

As a freelance web programmer, I am often contracted by other web developers to write custom widgets for their projects. These widgets generally require adding some rules to the stylesheet and - prior to today - I would just write these rules into a CSS section in the demo page with a note that they needed to be included.

While this isn't a bad method, it can really get confusing on complex sites or when the widget itself grows into a mini-application like this one. In fact, it had become so cumbersom that my client, a much more experienced web developer than myself, was unable to get it working properly!

Ugh, how embarrassing!!!

It is clearly not my client's responsibility to understand my code and wrestle it into their project... So I asked to refactor the widget into something more manageable.

How to Give Great Code

The solution is actually very simple and involves two steps.

1. Nearly all of my projects include the jQuery framework, as did this one, so I wrapped all the code into jQuery plug-in.
2. I used the excellent jQuery.css() function to put all the essential CSS rules into the markup.

The combination of these changes gave the project a very clean and simple interface.

What was the response to my changes, you ask?

"Sweet - that works instantly"

Music to my ears.

Provocative Comments

Max Glipmax:

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful and beneficial to your readers