Meme Catcher

Lately I have been fielding a lot of questions at work about strategies for assuring that the markup is semantic, accessible and valid. There are a lot of pieces to the puzzle, but the first line of defense is certainly my Firefox extensions.

I recently compiled a short list of Firefox extensions for the Front-End team. Everyone had always been aware of the HTML Validator Extension but hadn’t made a practice of cross-referencing those messages with an accessibility report from the Firefox Accessibility Extension. Putting those two together apparently gives developers a really granular sense of what’s going awry in the code under development. It’s a mini unit test suite right in the tool bar

I’ve also been surprised lately at how many people who use Firebug as a DOM inspector, don’t know about Firebug’s awesome JavaScript debugging capabilities. So overall, making and publishing this list was a surprisingly rewarding bit of evangelism.

Firefox Extensions for Front-End Web Developers

1. Web Developer Toolbar
2. Firebug
3. Firefox Accessibility Extension
4. HTML Validator Extension
5. Operator, for debugging Microformats
6. View Rendered Source Chart - the free version is not yet compatible with ff3 as of 8/14/08
7. Live HTTP Headers supplements the Firebug Net tab for debugging HTTP and HTTPS transactions.
8. Screengrab! is a versatile screen capture tool, essential for submitting bug reports.

Closures are a powerful feature of JavaScript. However it’s often hard to explain in a few words, just what is useful about closures. Well, here on page 131 of the Rhino book, is the recipe for a unique ID generator that doesn’t require a global counter.

One thing that I personally enjoy about the Flanagan book is that he says things like “don’t pollute the global namespace.” This technique does not pollute the global namespace.

var uid = (
function(){
var id=0;
return function(){
return id++ ;
};
}
)();
//then just say:
alert(uid());

Generate a unique ID!.

I just picked up the 5th edition of David Flanagan’s JavaScript, the Definitive Guide. I find it amusing that that book is the only JavaScript book officially recommended at comp.lang.javascript.

Closures are a powerful feature of JavaScript. However it’s often hard to explain in a few words, just what is useful about closures. Well, here on page 131 of the Rhino book, is the recipe for a unique ID generator that doesn’t require a global counter.

One thing that I personally enjoy about the Flanagan book is that he says things like “don’t pollute the global namespace.” This technique does not pollute the global namespace.

var uid = (
  function(){
    var id=0;
    return function(){
      return id++ ;
    };
  }
)();
//then just say:
alert(uid());

var uid = (function(){var id=0; return function(){return id++ ;};})();
Generate a unique ID!.

Tonight I added a hover detail to the Flickr thumbnails on the right. If you mouse over a thumbnail, you can see a large version of the photo. If you click on the large photo, its Flickr page loads in a new window.

I’m using the MTFlickrPhotos plugin to generate thumbnails, and to write the HTML for the large images into a hidden DIV. I’d like to load the large images asnchronously, but I need to work out how to request images. So far I’ve just used Ajax.Updater to preload HTML.

Oh yes, did I mention that the hover details are completely hosed in IE?


<script type="text/javascript">
function foo(){ alert("Hello World") }
</script>
<div id="bar" onclick="foo();">click me to see an alert</div>
<div onclick = "document.getElementById('bar').onclick()" > click me to do the same thing </div>


This is trivial, but the subject came up at work today; and I wound up making a little demo, which I’ll now post.

Explicitly Trigger An Event Handler in JavaScript

I put together some JavaScript to keep an element above the fold.

This was written at the last minute for the Barney’s New York launch; to spruce up the admin tool for their new web site. I only had time to test it in IE6 and Firefox 1.x, but I believe it works in Safari as well. Additionally, I do know that this bit of code has been in use internally at Barney’s for a few months now without any complaints coming back. So it may work well on older browsers too; although I believe there are compatibility issues with document.body.clientHeight in some browsers.

(more…)