Firefox extension to watch: Firecookie

Cookie tabFor those of you who haven’t seen this in the news lately, there is a new kid in web-development-tools town. A new extension for Firebug called Firecookie that allows you to Create, Read, Update, and Delete your stored cookies for the site you are viewing. I know there are other tools out there but even at version 0.0.4 I think that this one is one to watch.
Edit Cookie Dialog

Features

Firecookie adds a new tab to Firebug with a list of cookies for the current site. You can go to Tools > Show All Cookies… for a window allowing you to search all of your cookies and view their values. Right-click on a cookie and select Edit Cookie to get a dialog to edit the cookie. You can log all cookie changes to the console by turning on Options > Show logs in console. Finally, you can copy and paste cookies by right-clicking as well.

Other things I’d like to see in this extension

There are a couple bits I think would improve the UX of this extension:

  • The Show All Cookies… dialog should allow you to edit cookies
  • Cookie names should become links on mouseover and the cursor should change to a pointer. It would just be a nice visual aid for the user
  • Console entries for cookies should also link to their respective cookies in the Cookie tab

Conclusion

I am excited about what the future holds for this extension. I hope that this opens the door for more Firebug extensions. Go get Firecookie and try it out!
You also might be interested in 10 things you didn’t know about Firebug.

Staples of the Bookshelf: ppk on JavaScript

Peter-Paul Koch explains how to create beautiful JavaScript and shows you how to combine it with proper HTML and CSS for the best web experience in ppk on JavaScript. Here is my review.

The structure of this book

ppk begins with a brief history of JavaScript and explains the “fat and thin” JavaScript cycle. I would agree with him on that we are in a fattening state right now, but I think the tides will turn soon (my guess is before 2010).

Then ppk gives a basic overview of accessibility (which he adds to later) before introducing us to the 8 real world scripts used as examples in this book:

ppk on JavaScript

  • Textarea Maxlength
  • Usable Forms
  • Form Validation
  • Dropdown Menu
  • Edit Style Sheets
  • Sandwich Picker
  • XMLHTTP Speed Meter
  • Site Survey

We then see chapters on browsers, how to prepare your markup for good JavaScript and a series of chapters that use his examples heavily giving light on several very diverse topics of JavaScript.

Bits of ingenuity

Here I am going to sum of a few particularly useful snippets of this book.

A section on object detection vs. browser detection explains that object detection is the better way to go in general. ppk makes a good case for object detection: browsers will change, and by using object detection we can determine if an action is executed by directly tying the action to its dependencies. A lot of good JavaScript coders believe in this but it cannot be stressed enough.

Koch also knows that we need other fundamentals of how to setup our HTML and CSS for good JavaScript. He makes a very appropriate example for this is his Sandwich Picker script in Chapter 4: Preparation He summed up his advice well by saying:

Obviousness is the key to creating HTML structures that will help your script instead of hinder it

Since we want to separate content from behavior, we need to develop obvious element hooks to neatly tie our JavaScript to our HTML and CSS. We learn that the id attribute is the best known and most popular element hook. Another great idea that ppk presents here, though, is using custom attributes, such as a rel attribute.

One last bit I’d like to mention here is that ppk’s createXMLHTTPObject() function in Chapter 10: Data Retrieval is really quite elegant and I think you might check it out here. Your homework is to make this function rewrite itself upon successful completion so that it doesn’t have to try different methods of creation after the first call. ;)

Conclusion

There are several reasons I highly recommend this book, and Koch’s site: quirksmode.org.

First of all ppk gives us a really good foundation in Chapter 5: Core, one that I would recommend even experienced JavaScript-ers read. He also covers the BOM, JavaScript Events, and DOM in great detail also keeping accessibility fresh in your head as you pick up JavaScript’s quirks and issues with different browsers. That said, I would say that the amount of history covered by the book may have been excessive but may be more helpful to other readers.

ppk on JavaScript is a good reference book that I keep as one of only 10 books within arms reach at work (I obviously have others but I don’t feel the need to keep many so close by). I think that more than a few of you would also benefit from keeping this book handy as well as checking out quirksmode.org for other bits.