Firefox

Finally, you'll need a web browser. I strongly suggest that you use the latest stable version of the Firefox browser, available at http://mozilla.com/firefox/.

Now one may ask, why use Firefox? While this browser has its setbacks (like any other), on the whole, I view it as an excellent web development tool. For me, it's as essential as my HTML editor, FTP programs, and graphics tools. Firefox has great features that we'll be taking advantage of to help us streamline our WordPress and jQuery enhancements and site production. In addition to built-in features such as the DOM Source Selection Viewer and adhering to CSS2 and some CSS3 standards as specified by the W3C, Firefox also has a host of extremely useful extensions such as the Web Developer Toolbar and Firebug, which I recommend to further enhance your workflow.

If you have some experience with jQuery, you've probably noticed that the great documentation on jQuery's site as well as most jQuery books, tend to focus on the intricacies of jQuery, using very simple and basic HTML markup examples with minimal CSS attributes added. Within WordPress, you'll find yourself working with a theme or plugins that were most likely created by someone else. You'll need an easy way to explore the Document Object Model (DOM) and CSS that the theme, plugins, and WordPress are generating in order to get jQuery to do what you want with the resulting markup that is generated. The Firefox browser and its extensions allow you to do this more easily than any other browser.

Web Developer toolbar

This is a great extension that adds a toolbar to your Firefox browser. The extension is also available for the Seamonkey suite and the new Flock browser, both of which, are powered by the open source code of Mozilla, just like Firefox. Get it from

http://chrispederick.com/work/web-developer/.

The toolbar lets you link directly to the browser's DOM and Error Consoles, as well as W3C's XHTML, and CSS validation tools. It also lets you toggle and view your CSS output in various ways, and lets you view and manipulate a myriad of information your site outputs on-the-fly. The uses of this toolbar are endless. Every time I develop a design or create jQuery enhancements, it seems I discover some feature that I have never previously used and yet find quite useful.

Firebug

A more robust tool is Joe Hewitt's Firebug extension for Firefox found at http://www.getfirebug.com/. You'll note, there's also a "Firebug Lite" version available for Internet Explorer, Safari, and Opera. But the full Firebug for Firefox is your best bet.

This extension is a powerhouse when combined with the features of the Web Developer toolbar. On its own, Firebug will find anything you need to manipulate or debug: HTML, CSS, JavaScript, you name it. It can even help you find little "weirdo" tidbit things happening to your DOM on-the-fly. There's a variety of fun inspectors and just about all of them are invaluable.

My favorite Firebug features are the options for reviewing HTML, CSS, and the DOM. Firebug will show you your box models and let you see the measurements of each ledge. Plus, the latest version of Firebug lets you make edits on-the-fly to easily experiment with different fixes before committing them to your actual source files. (There are features that let you edit on-the-fly in the Web Developer Toolbar as well, but I find the Firebug interface more in-depth and easier to use.)

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment