Codeburner Add-on for Firefox

You now have access to all the Sitepoint References for HTML, CSS, and JavaScript available in Firefox as an add-on. You can download theĀ  Codeburner add-on free from Sitepoint.

The references provide syntax information, browser compatibility charts and sample code for HTML and CSS.

The new add-on was just released. For a limited time, you can get a free book as a bonus when you download it. The book is Build Your Own Firefox Add-on.

If you are a Firebug user, you may realize that these same reference materials were available as a part of Firebug. The new add-on eliminates the Firebug step and gives you quick access to the reference materials at the bottom of the Firefox page.

the codeburner icon under the pointing fingerIt’s a simple toggle open and shut to see the reference panels. When you install it, a Codeburner icon will appear on your status bar. Just click the icon to open up the references. You see it here on my status bar with the pointing finger indicating which icon it is.

When you initially open it, you may have to futz with the drag handles a bit to get all three windows to show up and sized the way you want.the codeburner windows

In the left window you can search for an HTML element, HTML attribute, or CSS property. As soon as you start typing in the search box, you see results on the right. I typed “padd” before I stopped typing, and got a number of results involving the word padding. In the center window, you see information about browser compatibility, standards-compliance, and a brief summary of usage. If you don’t find out what you needed to know, there’s a link to the SitePoint References online. The window on the right gives you a generic example of the element, attribute or property you searched for in use. The window on the right will display information for which ever of the numerous items in the center window you select.

select an item from the DOM menu

You can learn about the elements and properties based on the page you are on. Select the DOM option in the left window, navigate through the DOM tree to find whatever you are interested in, and select it. I selected a <p> element in the image above.

If the code example in the right window is not enough information for you, you can click the “More information online” link to see a live demo. (The same function is available as an option in the contextual menu you see when you right-click on at item in the search results window in the center.)

Don’t want half your browser space taken up by the Codeburner pane? You can detach it into a separate window with a click on a small up arrow near the X that would close it completely.

The reference material available with the Codeburner add-on is already available from Sitepoint, in books, and was part of the Firebug add-on. The new add-on is a convenience. It can give you quick information without a lot of effort. If you are at that stage in your learning curve where you still spend a lot of time looking things up, you’ll love this one.