Tag: firefox

In no particular order, this is a list of my favorite Firefox extensions. They make my browsing experience awesome and I wouldn’t trade them for anything in the world. :)

  1. Live HTTP Headers. I’ve had this extension for years and it has proved invaluable time and time again. I use it for debugging and security testing. Very simple, very easy to use, very powerful.
  2. Firebug. This one is important for anyone doing web design/development. It’s just an absolutely awesome tool. I can’t imagine ever having developed HTML/CSS without it. It even comes with its own extension system, which I haven’t taken advantage of but which looks incredible.
  3. Web Developer Toolbar
  4. User Agent Switcher. Both #3 and #4 are made by the same developer. These were two of the first extensions I ever installed. I keep using them because of how useful they are for debugging and testing.
  5. View Source With. Allows me to view HTML in my favorite Windows text editor, Notepad2
  6. BugMeNot. While it has grown less useful over the years (sites are getting better and better at banning their accounts), it’s always a good time-saver to have. It can’t hurt! :-)

There are definitely a couple developers who I need to donate to. BRB! :-P


Recently at work, one of my friends ran into a problem trying to integrate the Google Visualization API and jQuery. His setup seemed fairly straightforward and it didn’t seem like there would be any problems. He wanted the user to select an option from a dropdown box. That selection would trigger a GET request to fetch some JSON (using the getJSON function of jQuery) from his web server. The result of the request would be passed via getJSON’s callback to Google Visualizations, which would then display some nice charts.

Sounds easy, right?

Unfortunately, when he tested his code in Firefox, the visualization he wanted never showed up. All he saw was an empty iFrame where his chart should have been (Google Visualizations draws certain types of charts using SVG in iFrames).

Puzzled, he started debugging. He quickly confirmed that the proper calls to draw the visualization were being made. Yet somehow, they were just returning an empty iFrame instead of one filled with data. Even more puzzling, his code worked fine when he tested it in Google Chrome, Safari, etc: Firefox was the only browser where it failed!

His next step was to try replacing his chart code with Google’s example code, thinking that maybe the issue was with his data. Amazingly, that chart also failed to display properly! However, it also led him to another discovery: the chart drawing would only fail if it was attempted from within getJSON’s callback function. If the chart was drawn before or after, it would work correctly.

Finally, after several people spent hours wrestling with the problem, one of our fellow employees came up with a solution. He created a closure that would call the correct Javascript functions to draw a graph. Then, he passed that closure to setTimeout with a timeout of 0. It was a fairly elegant workaround: using setTimeout avoided the weird scoping issue (we still don’t understand what the problem was!) and the closure allowed the data to be passed out of the troublesome callback and to the Google Visualization classes. Definitely not the cleanest solution, but very welcome after several hours of wrestling with the problem!