pinterest

Alex Jones

I lead teams at the intersection of strategy and design. Autodidact. Polymath. Barbecue acolyte. I start fires (the good kind).

CSS

Firebug Beta 1 Released

The beta of Firebug 1.0 has been released and comes with some amazingly useful features. For those unfamiliar with this Firefox extension, Firebug provides a wealth of tools for developers to debug, monitor or edit portions of a site. Portions of it overlap the Web Developer’s toolbar, and in several cases, Firebug surpasses it hands down. Some of the features include:

  • Inspect & edit HTML & CSS within the browser to see how changes will impact the current page.
  • Visualize CSS metrics, including box model shading, measurements for each edge of a box (and the ability to edit those measurements in-line) , rulers and guides
  • Monitor network activity to see why a page takes too long to load, broken down by type. You can also see which items are cached or not and examine HTTP headers and XMLHTTP Requests.
  • Debug JavaScript, including the ability to set breakpoints and conditional breakpoints and line-at-a-time code execution. Additionally you can view JS stack traces broken down into the functions within the stack. Use tooltips to see the value of any variable within the JS, log function calls and profile the performance of the scripts. The improved JavaScript logging is amazing in its own right.
  • Explore the DOM and edit as you go (including auto-complete) with handy JS code navigation.
  • Vastly improved error handling and details.

This extension will actually reduce the need for several others you may have installed.

Raising the CSS B.R.A.T.

CSS B.R.A.T. is a great idea, but one that should be seriously thought about before implemented. For those Web folks responsible for supporting intranets, having to wrangle many editors, this is a great tool, but it should be avoided for anything that faces the public. The implementation could inflict much more harm on the presentation and usability of the site in ways far worse than the non-standard markup.

I like to implement styles that override WYSIWYG markup on sites that provide others to include HTML, and I highly recommend that others do the same. For example, Webby folks should ensure the font tag is styled to match the site’s standard font (font family, size, weight…) with !important to ensure it overrules the deprecated tag and its attributes. Other tags can be covered as well including crowd favorites like blink and layer.

As Marco rightly noted “The process of educating editors on the benefits of a standards-based design can be tough enough to do, especially when working with various levels of HTML knowledge. This method is meant to show, educate, and be passed on to other editors for an exponential improvement on the state of web documents. ” It’s also important to think about this as an opportunity to learn which tools your internal clients need. They may have valid reasons for attempting to modify the standard presentation. B.R.A.T. provides a great incentive for editors to contact you, so make sure you capitalize on it! A few well built classes will do wonders for proper implementation down the road and perhaps encourage those clients to give you cookies.