Exploring the Web Developer Toolbar
Last time we talked about Firebug, the Javascript Debugger. This time I'll write about the Web Developer Toolbar for Firefox, by Chris Pederick. This invaluable tool really changed the way I work, so I'm really excited to explain all the functions it has.
Optimize pages for search engines with dynamic CSS/javascript HTML building (how to make your own lightbox working example!)
CSS, DHTML and Javascript work really good together. In fact, I tend to use the combination to replace Flash whenever it's appropriate (usually, most of the time!).
Javascript 'building' is a technique where you dynamically add original nodes to your DOM, usually based on existing content.
Speaking in (sort of) plain english, this means you can create a slideshow from an unordered list, a tabbed or sliding control set from a group of divs, an image viewer from a link (everyone now knows Lightbox v2 by Lokesh Dhakar).
Javascript Programming using Firebug
Part of creative process during web programming and design involves streamlining and optimizing the workflow.
That means trying to make things done faster, in less time.
One tool I find really valuable is Firebug.
Download and install this javascript console and debugger for Firefox, and a new icon appears in the lower side corner of the browser.
In fact, Firebug is usually deactivated, until you click this icon and tell it to start to process the website you are seeing (you can also tell it to stay in an always active mode, but this burns cpu cycles pretty fast).
If Firebug is active, it's capable of making you peek under the hood of the live page you are seeing, showing precisely what you want to know about the engine running. This means less trials and errors.