beTech :: Evolve Already

The Firebug 1.0 (beta) Firefox extension transports an already awesome web development tool into the realm of the absolutely indispensable. Check out the mind-boggling added functionality:

• HTML Editing: Edit HTML on the fly, see the changes highlighted, search HTML, and much more.
• CSS Development: Wow! Chris Pederick’s Web Developer Extension was great at composing CSS on the fly, but Firebug kicks butt! Preview colors by mousing over the CSS color values, use the up and down keys to increment numeric values, do the same with attribute values and witness Firebug’s built in CSS dictionary run through the possible choices. There are several more features in the CSS tool that would have been enough to make Firebug a must-have tool for developers.
• CSS Layout Visualizing: The box model can be a dastardly concept to comprehend. The Firebug layout visualizer saves the day.
• Net Activity Monitoring: Want to see some neat bar charts? Take Firebug to a big Ajax site and check out the network requests. Heck! Take it to your own site and see what parts of your pages are taking the longest to load. It graphs every get request—including HTML, JavaScript, CSS, and images.
• JavaScript Debugging: Firebug was already good at this as well, now it’s great. Pause execution, step, and break your JavaScript to your heart’s content.

We could say more, but we’d be delaying you from getting on with the Firebug experience. Go get it and let us know what you think.

Oh, and one more thing, did we mention it’s now available for IE, Opera, and Safari? Consider it done.

Create an Ajax desktop just like those found on the Netvibes, Protopage, or PageFlakes sites with a little guidance from MuseStorm’s AJAX Desktop Tutorial. The nine-step tutorial takes you from detecting browsers (IE and Firefox now, Safari later) to creating widgets for RSS and search functions. All that’s required to get started is a little HTML, CSS, and JavaScript experience.

Whether you’re writing a simple JavaScript command or debugging an elaborate Ajax application, FireBug is the Firefox extension for you. Joe Hewitt’s latest iteration of FireBug (version 0.4) provides a passport to the mysterious behind-the-scenes world of JavaScript and even makes developing JavaScript fun. It also fills in some of the gaps left by the must-have Web Developer extension for inspecting and manipulating CSS and HTML on the screen. Here’s a quick list of features:

• JavaScript debugging
• JavaScript,CSS, HTML, and DOM inspection
• JavaScript command line
• live DOM editing
• Ajax request logging

Thanks again to Patrick Woods and David Moody for their enlightening JavaScript Universal Form Validator presentation yesterday at beTech. The validator they devised is an elegant Web Standards compliant solution to the tedious task of writing client-side scripts to verify that form fields are completed properly. Creatively utilizing XHTML, JavaScript, and the Document Object Model (DOM), Patrick and David make form validation possible with minimal muss and fuss. You need to download this thing (wdc-form-validator.zip) and give it a try!

For additional information about using the DOM for behavior layers, check out the following links:

• The Behaviour Layer: Using JavaScript for Good Not Evil
• Separating Behavior and Structure
• JavaScript Triggers
• Gecko DOM Reference

Join us this Wednesday, 2:00-3:30PM in Room G004B of Ruffner Hall, for the next beTech presentation. David Moody and Patrick Woods will demonstrate how to use Javascript and CSS to add a behavior layer for your web applications. Their presentation culminates in the creation of a universal form validation tool.

David Moody is a founding member Health System Web Development Center and was an early adopter of ColdFusion and Macromedia products way back in the ancient days of 1998. David has also been teaching Web development at ITC for over 6 years.

Patrick Woods has been wrangling with the Web since 1994. He has experience developing applications in Perl and PHP and focuses on Standards-based design employing semantic XHTML and CSS. He currently works with ColdFusion at the Web Development Center and posts occasional ramblings on hakjoon.com.