By James Edwards

CodeBurner for Everyone v1.6

By James Edwards

I’m delighted to announce the release of Version 1.6 of CodeBurner — our popular reference tool for web developers. This new release is a major update to all five versions, and has something new or improved for everyone!

It’s taken a little longer than planned, and that’s mostly because of the extent of the changes required for Firefox 4; which in turn meant changes to Firebug, and all of that was rather time-consuming to implement [always excuses, eh!]

But we’ve waited until all five versions were ready, before releasing them, so that everyone would be on the same version and the same updates schedule. All users are encouraged to upgrade and take advantage of the many new features and improvements.

What’s New in Version 1.6

The most important change for all versions is updated browser-compatibility information, with the latest data from the SitePoint Reference. The results now include support for Google Chrome, as well as the latest common versions of Firefox, Safari, Opera and IE:

A sample of results from CodeBurner’s main search interface.

All the latest browsers

This version of CodeBurner also extends its own browser/environment support:

For the Firebug extension
to Firefox 4.0.x and Firebug 1.7.0
For the Firefox add-on
to Firefox 4.0.x or Flock 2.6.x
For the Opera widget
to Opera 11.x
For the Mac OS X Dashboard widget
to Mac OS X 10.6
For the Adobe AIR application
Adobe AIR 2.5

Better CSS inspection

Another new feature for all five versions is the addition of at-rules to special search. “Special search” gives you information about all the attributes, properties, selectors and now at-rules that apply to a selected element, when inspecting the DOM of a page (from the HTML panel in Firebug, or the DOM tab in other versions):

Special search for the selected-element in Firebug’s HTML panel.

For Opera, Dashboard and AIR, this is made possible by an update to the bundled version of CSSUtilties, which provides more comprehensive and accurate data in the CSS view. The CSSUtilities library is what powers the CSS view, displaying information about stylesheets, their rules and properties, and how they apply to the DOM view elements:

The CSS view in CodeBurner for Dashboard.

And a bunch of other stuff!

By popular request, for the Opera and Dashboard widgets, the widget window is now resizable and remember the size you set between sessions.

And finally, as you might expect, there’s a whole bunch of minor updates, bug-fixes and tweaks, for various platforms. Too many to list here, but to give a few examples:

  • For the Firebug extension, fixed a layout bug when viewing the reference panel with the code-example side-panel closed, that would sometimes collapse the results-table beneath the search form more
  • For the Firefox add-on, fixed a bug in special search, where selectors from the system stylesheet were included in the list of “selectors that apply to this element” more
  • For the Opera widget, fixed a rendering glitch with search-area checkboxes in Windows, so you can see more clearly whether they’re checked or not more
  • For the Mac OS X Dashboard widget, improvements to the layout of the results tables, eg. the titles and summaries have more space and are easier to read more
  • For the Adobe AIR application, improvements to the layout of the “About” pane, eg. you can see at a glance which version of the application you’re running more

What do you think?

Here at CodeBurner HQ we’re keen to hear your feedback! Are there any new features you’d like to see? Are there existing features you could do without, or that you’d like more control over? We want to make CodeBurner the best possible reference tool it can be — so please do let us know what we can do to improve it.

  • Daniel15

    Nice, going to try it out! Have you considered making an Opera extension as opposed to a widget, for tighter integration with Opera?

    • There is going to be something new for Opera, yes .. I’m not at liberty to say exactly what though .. not yet :-)

  • kaf

    Awesome! This is a very handy tool. Thanks sitepoint!

  • Tony MacFarlane

    OK… this is all pretty cool I suppose, but how exactly do I use it? Will it replace Dreamweaver–because I am getting extremely tired of Dreamweaver’s buggy performance on my Mac, and I sure would love a viable alternative.

    But now I only use the “inspect element” on Safari– I used to have Firebug on Firefox, but I never used it! I even deleted it when I upgraded to FF4. How is Firebug (& CodeBurner) superior to using the “Inspect Element” tool in Safari?

    How exactly will CodeBurner improve my life? Is there a tutorial page or something? Is there a place I can learn more about how to use this?

    • Have you followed any of the links? Try this there’s more info there on each of the versions, screenshots and notes on how to use the app.

      I can’t advise you on whether to use Firebug or whatever Safari has — that’s up to you. CodeBurner is available for Firebug or as a standalone Firefox extension; but if you work on the Mac and don’t use Firefox at all, then the best version for you is probably the dashboard widget

      But CodeBurner is just a reference tool, it’s not a developer tool like Firebug.

  • Andy

    What about Dust-Me Selectors… is that ever going to be updated or is it being abandoned?

    • No it’s not being abandoned, I’m working on it as we speak :)

      (I confess that I didn’t realise Firefox 4 would be along so soon, I thought I had until June)

  • Bob

    Please add JS and jQuery.

    • I don’t know what you mean?

      • James Edward Lewis II

        He wants information on Javascript (even though the Reference is still in beta and has only information on the core of the DOM) and JQuery (even though I didn’t think that frameworks were within the scope of the SitePoint Reference).

  • OIC.

    Adding the DOM core reference information from the SitePoint JS reference is very likely to happen, yes. I need to do some work to re-think the way the extension organises and searches-through its reference data — at the moment, adding a new category would slow-down the search too much. But once that’s done, there’s no reason why its reference data can’t be extended to cover the entire SitePoint reference.

    But it won’t include jQuery! The SitePoint JS reference is going to be extended over the next few months, and will eventually include a language reference, browser APIs, DOM CSS, events, and a whole bunch of other stuff; but it won’t be covering tools and APIs to any significant extent.

Get the latest in Front-end, once a week, for free.