Firebug started as an indispensable Firefox extension which takes web development to a new level. But after 2 years since it’s initial 1.0 release, Firebug has grown into a platform with a host of extensions built right on top of it. Here are my top 5 Firebug extensions that every web developer should have installed.

#5 SenSEO – SenSEO is a handy checklist of key SEO criteria. This Firebug extension rates your page on a scale of 100 against Google’s webmaster guidelines. SenSEO is most important right before a big launch to catch any simple tweaks that you may have overlooked during development.

#4 CodeBurner – CodeBurner is an HTML and CSS reference right at your fingertips while you debug. It adds a Code Example tab which gives a brief description of the HTML tag or CSS property you have highlighted as well as a code sample so you can see the recommended usage. If that’s not enough, CodeBurner provides a link to the Sitepoint reference page which has everything you could ever want to know. Man, I wish I had this extension when I was learning HTML and CSS (let alone Firebug).

#3 FireFind – FireFind does only one thing but it does it well: finding elements. Using a CSS selector or XPath statement, FireFind will highlight all of the matching elements on the page. This makes it a breeze to test CSS selectors with your site right in front of you. To boot, it also features a count of all the elements found. Even though this is possible through Firebug’s console tab when any popular JavaScript library is included, FireFind makes the process straight-forward and painless.

#2 FireCookie – If you have ever had to debug JavaScript cookies then you’ll wonder how you got by without this extension. FireCookie lets you inspect and edit cookies on the fly including permissions, values, and the expiration time. You can even sort all of your cookies as well as filter them out by domain. And when testing a script for your audience that has cookies disabled, FireCookie provides a simple option to disable cookies globally or just for the current domain. Now working with cookies doesn’t have to be such a stale experience.

#1 YSlow – Serious web developers are obsessed with performance and YSlow provides a smorgasbord of tools for measuring the speed of a site. YSlow is built around 34 best practices for speeding up a website which is the result of extensive research by the Yahoo Performance team. The extension provides a letter grade of each practice with advice on how to squeeze out every little bit of extra performance.

Another handy view is the Components tool which gives you an insight into all of the componets of the page. There are a bevy of stats that can be analyzed to pinpoint bloated waste.

Finally, the statistics tool gives insight into the weight of your page for users with an empty cache and a primed cache.

If you have never given much thought to the performance of your site, YSlow makes it easy to dive right in.

What are some of your favorite Firefox extensions geared towards web development?

Kristina had been toying with the idea of her own website for a couple weeks now. However, this past weekend, she got around to comping one together. She has been fascinated with the eclectic desk style that seems popular these days. While she was busy in Photoshop, I was setting up the domain and basic file structure. Since it’s a small site, the preparation didn’t take long. In fact the most time consuming task involved cutting images up from the comp and organizing them. Coding was a snap. The site is a basic 3 column layout and most everything is an image.

Creating the carousel to page through her resume was a custom job that took me about 20 minutes using jQuery. I had hoped to just go out to the jQuery community and find a nifty carousel plugin that I could just drop in and be on my way. Unfortunately this wasn’t the case. While there were plenty of options out there, everything was over engineered and too rigid. Most require the content to be an unordered list but I was using a set of divs. This shouldn’t make a lick of difference as any jQuery selector could be used.

Carousel scripts are pretty basic. You need a set of items to rotate through, a container to hold the items, and a frame to mask off the ugly parts. Some basic styling is used to line the items up in a row. The container is given a postion of absolute so it can be freely moved left and right and a large width to hold all of the items inside. The frame needs the overflow property set to hidden to mask out the items that we don’t want the user to see. To pull off the animation we use jQuery’s handy animate() method for the left and right positioning of the container element. This lets us set a key point and jQuery will handle the interpolation from the current value to the key point. Attach this function to a next and previous button and you’re ready to go with your own custom carousel that works the way you want it to.

It was a lot of fun to create a brand new site from scratch without any legacy content or rigid CMS. Simple websites are fun! And if you haven’t checked out the fruits of both of our labors, then please immediately proceed to KristinaNaude.com.

In case the JavaScript version of the original Super Mario game got a bit boring, Nihilogic has redone Super Mario Kart in much the same way. Weighing in at a mere 11Kb this proof concept lets you choose your driver (Mario, Luigi, or the Princess) and one of two courses. There is no collecting coins, knocking out opponents with turtle shells, or even counting laps. You can use the arrow keys of your keyboard to steer around a simple loop course over and over again until the end of time. The computer controlled drivers help keep up the pace though you can pass right through them as there is no collision detection.

Music is included to add to the nostalgia of the old SNES days. There’s not much else to this except to prove what can be done with modern JavaScript when applied to interactive games.

The guy behind the blog nihilogic.dk decided to partake in an exercise of game design using JavaScript. Choosing the classic Super Mario Brothers game, his proof of concept is considered a success. The whole thing weighs in at 14Kb and the entire game is contained in one JavaScript file.

“There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.”

Granted it is very brief and not entirely true to the original gameplay, it is still downright impressive that something like this can even be accomplished with a web-based scripting language.

If you are interested in seeing how the whole thing works, you can sneak a peek at the uncompressed code.

Keeping with the 8-bit video game theme of this post, Tetrageddon.com is an odd Flash site. The style of the music and graphics is in homage to the 8-bit videogames of years past but there are no explicit directions about what to do. Instead you are left to fend for yourself exploring the site and uncovering the wacky consequences of your voyage. The whole thing is “CENTALLY MHALLENGED” to borrow from the sites page title.

Tip: on the main page hold the up arrow key and make sure you allow pop-ups for the site.

If anyone can figure out something interesting to do at Tetrageddon.com let me know in the comments.

I spent a good chunk of today re-jiggering the look and functionality of the comment system here on my blog. Using the WordPress Thread Comment plugin readers and myself can respond directly to other comments complete with e-mail notification. Gravatar is a globally recognizable avatar plugin giving everyone who posts their thoughts to my blog the option to show an icon representing themselves. If you don’t have a Gravatar account head on over to Gravatar.com to register your e-mail address. Finally, I installed WP-Chunk which simply minimizes long URLs posted in comments and prevents them from breaking my layout.

But most importantly I re-designed the look of comments making them easier to read. I hope this will encourage more discussion on my blog and if you have any feedback, please leave a comment!

P.S. If you need a smattering of comment designs for inspiration check out the comment design showcase at SmileyCat.com.

Adobe released it’s Air product today making it official and peeling off the cliche` beta title. Adobe Air allows developers to build desktop applications using web technologies like HTML for structure, CSS for presentation, and JavaScript for behavior. Flash and Flex, Adobe’s own web technologies, are also rolled up in the mix. Professional authoring tools like Flash CS3 and Dreamweaver CS3 saw updates today to allow development within the popular tools. Aptana also offers a free plugin for their open-source development tool Aptana Studio.

I have been playing with Air apps for the last couple of months while the product was still in beta. There are a lot of clever applications that are more like widgets then conventional full-blown desktop programs. For example, the Adobe sample app PixelPerfect was a simple ruler overlay letting you measure anything on your screen. This little tool comes in handy for web development where there aren’t any rulers on the side or measuring tools like in Photoshop. Powerhouse auction site eBay created their own Air app that banishes the concept of refreshing the page so bidders can watch their auctions in real time. But perhaps the biggest crowd of Air apps belongs to Twitter clients. Thwirl, Spaz, Tweetr, and Snitter are just a handful.

I thought John Ballinger had let his Twitter client, Tweetr, go to pasture without an update since the end of November. With each new Air beta release more functionality would break edging me towards Jonathan Snook’s Snitter. But alas, Tweetr is alive again with version 3.0 launching today to coincide with the official Air release. I’m happy as a clam to have my favorite Twitter client back and to see so many great ideas that have seemingly sprung out of Air.

I finally finished kingkool68.com this weekend. The purpose of the site is to aggregate all of my activity on the web into one single stream, commonly referred to as a lifestream. To mash all of my RSS feeds of activity together I used SimpleLife, a WordPress adaption of the SimplePie PHP script. For the front end I used jQuery, a JavaScript library, as well as standard HTML and CSS.

Most lifestreams I saw didn’t include a way to for end users to filter out certain items, so I built one into my lifestream application. Using the power of CSS selectors built in to jQuery, I wrote a function to grab the list items with a certain class and then toggle a fade effect. If the item was hidden the script would fade them in, otherwise it would fade them out. You can see the 13 lines of code I wrote to do this for yourself.

Once I finished writing the filter code I noticed it didn’t work in Safari browsers even though it performed flawlessly in Firefox. After debugging and digging around on the net for possible solutions I stumbled upon the Safari Developer FAQ. Did you know you can unlock a debugging menu in Safari? The FAQ provides details on how to reveal it and then by holding Apple+Shift+J shows a JavaScript console alerting you to any errors. I used this to figure out that you can’t use ‘class’ as a variable name even though Firefox doesn’t seem to mind. I haven’t tested the site on any version of Microsoft’s Internet Explorer which is notorious for choking on standard code.

So if you ever wanted to see everything I do on the web, checkout kingkool68.com. And if you want to add me as a friend on any of these popular sites, click the small icons associated with each item to take you directly to my profile for that site. The next step would be to package my modifications up into a WordPress plugin so anyone could run a lifestream just like mine. In the meantime if you have any problems implementing a lifestream on your own, leave a question in the comments of this post and I’ll do the best I can to help out. Happy lifestreaming!

With Super Tuesday right around the corner, what is an undecided web geek to do? Why break a decision down into technical specs, like any other decision they have ever had to make.

Robert Accettura did a little survey of the presidential-hopefuls websites and noted what technologies were used on the front and backend. If you were to vote solely on who is using the best web technologies, your best bet would be Barack Obama. His site is run on an open source operating system, uses a CSS based design, as well as HTTP compression. Hillary Clinton and half of the Republican candidates are running Microsoft IIS; surprise, surprise! This survey also showed how web standards has come a long way as all of the candidates but one (Mike Gravel) neglected using a table-based layout.

Does a well-built website architecture make for a great leader? Probably not. But if you are a web geek you will probably get a kick out of these stats, just like me. Check out Roberts page for the complete breakdown.

Google has impressive, interactive charts incorporated into many of their products. The best place to see them in action is Google Finance where stock prices are graphed over time allowing the user to zoom in or out, stretch or expand the selected view, and other fancy interactions. The result is a rich experience for viewing and manipulating data.

Today Google unveiled the public application programming interface to interact with their chart engine. While not as rich as Google Finance charts, this public charting tool is extremely flexible in
creating line charts, scatter plots, bar graphs, Venn diagrams, and even pie charts. Charts are generated by constructing a URL with various parameters, or options, to customize a chart dynamically. Making a URL request returns a PNG image which can be saved to disk or embedded on any web page. Some examples of the charts are shown below.

Documentation for charts can be found at http://code.google.com/apis/chart/ which provides a smattering of examples.

I am very excited by this release as there are a ton of different applications these could be used in. Using some simple JavaScript, you could take these charts a step further and create animated charts using various URLS with one incrementing data parameter. Kind of like this (JavaScript code borrowed from Chip Chapin).

I would like to see a user-friendly interface built on top of the API so those who are less developer inclined can make charts and graphs easily. It wouldn’t be too hard to make a simple JavaScript program to construct the URLs. I will try to crank something out tomorrow at work, because this is simply too cool to pass up.

There is nothing web geeks love more than strutting their thorough knowledge of the subject. Knowing every single HTML 4 element by heart or to have each and every CSS property on the tip of your tongue doesn’t really help you in every day web development; understanding and realizing when to use each is more important.

But all of that goes out the window when it comes to quizzes like How Many HTML Elements Can You Name in 5 Minutes? or How Many CSS Properties Can You Name in 7 Minutes?

Out of the 91 W3C approved HTML 4 elements I identified 44, or 48%, in 5 minutes.

With CSS properties I did a little worse. getting 42 out of a possible 122 in 7 minutes, or 34%. I won’t disclose the simple ones I missed to give you a fair test when you take it. Most of them no one uses anyways!

How many did you get?