This post is Part 1 of The Beginner’s Guide To Writing a jQuery Plugin.
Before getting started with any type of development, it’s important to make sure that you’ve got the necessary tools to help you get to work. The thing is, running a Google search for development tools can be a paralyzing experience.
There is an overwhelming number of tools available. Trying to understand why one is better than another, or experimenting with each option can take an enormous amount of time.
Rather than trying to find the best editor (because you never will), step back and consider what you’re trying to do with your project. In this case, you’re writing code that uses jQuery and that is going to execute within a web browser.
That’s it: An editor, jQuery, and a web browser.
1. Select Your Editor
We’re primarily going to be working with the JavaScript language along with a little bit of HTML and CSS. Although any text editor will do, I urge you to find one that has syntax highlighting and line numbers.
These two features will go along way in helping you to write code, edit code, and identify errors that are generated while testing your code.
2. Firefox and Firebug
When it comes to client-side development, most any modern web browser will do. Ideally, you want a browser that also supports a level of error reporting – this, in conjunction with the line numbers in your editor, will go a long way in helping track down bugs.
I’m partial to both Firefox and Chrome; however, the Firebug add-on runs natively in Firefox and this provides the greatest benefit when developing JavaScript-based projects.
Firebug does an excellent job of showing a given page’s markup, styles, and associated JavaScript. It also allows you to edit all three languages and provides exceptionally rich JavaScript debugging capabilites.
3. Get jQuery
Since we’re going to be creating a plugin that works with jQuery, the web page that we’re developing will need a reference to the library.
Although it’s perfectly acceptable to host jQuery on your own web server, it’s almost always better to use a hosted version of jQuery. Both Microsoft and Google provide the ability to do this.
The biggest advantage is in speed. Since your project will be downloading jQuery on each page load, retrieving it from a popular provider will typically result in a faster download and, thus, better experience for your users.
4. An HTML Sandbox
While working on the plugin, you’re going to need a simple test bed – or sandbox – in which to write your code. Create a project directory with the following setup:
Not only will this help you keep your project organized, it will help other developers understand how you’ve structured your work.
To go above and beyond, I’d even argue keeping this particular project in your Dropbox directory to ensure frequent backups and file history.
Finally, since plugins run within the context of a web browser, let’s go ahead and setup the basic HTML skeleton that we’ll develop over the course of this series.
Write out the following code yourself or paste it into your editor of choice.
[cc lang=”html”]
[/cc]
Load up the site in your browser – you should see a blank page.
At this point, you should be setup and ready to begin development. You can download an archive of the source files from this series here.
Brian Notess says
What do you think of Chrome’s developer tools compared to Firebug? I’ve been using them a lot recently to debug and I like them (although I also usually end up texting in Firefox too).
Brian Notess says
That should say testing….
I haven’t had my coffee yet.
Tom McFarlin says
Chrome’s Developer Tools are nice and are maturing rapidly. I actually use it for some stuff, but Firebug’s speed and JavaScript console are still more advanced in my opinion.
It’s easier to fire stuff off in the the console, evaluate the state of the DOM, and write a number of functions than it is in Chrome’s console.
For now, at least :).
Ben says
There have already been a few “oh”‘s just reading this first article. I’m looking forward to working through this series. Thanks Tom for doing this.
Tom McFarlin says
Sure thing, Ben.
Hoping to trigger a few more “Oh’s” before this thing is done ;).
Jared Erickson says
all i got out of this so far…
windows is ugly