Codafy, released in August 2010, was formerly developed as a paid plug-in to add native ‘Firebug’ web inspector functionality to RapidWeaver 5. Since then, RapidWeaver has gained its own web inspector tool (in Preferences > General > Enable Web Developer Tools), therefore rendering the original plugin somewhat surplus.
So what is the actual purpose of the new Codafy stack, when we already have the web inspector? From the outset, speed and simplicity is the key objective with Codafy. We want to bring the basics of the web inspector into a more novice-friendly context and put the most used functionality at the forefront.
For starters, Codafy will tell you want sort of element you have selected in a page. It will clearly show any ID or classes applied to the element (really useful for custom CSS code or for configuring other stacks to interact with content, like navigation). Codafy will show the whereabouts of the element within the DOM (document object model) hierarchy; which could help identify other stacks that are influencing your selected element. And finally, Codafy will give you the basic CSS box-model information for a container - like height, width, position, padding, margins and borders.
Sure, you can already get all this information (and a lot more) from the web inspector. But it sometimes requires quite a bit of digging-around to find what you’re looking for. Even the experts will admit this!
Our relaunched Codafy stack should make the process a whole lot easier. Simply drag and drop one of these stacks into your page. Preview the page. Click on the Launch Codafy button. Then click to inspect elements. Within a few seconds, you will be able to view details about each element you select.
The new Codafy stack is provided as a free download from the seyDesign website. Any donations are appreciated if you find this stack useful.