Insights and discoveries
from deep in the weeds
Outsharked

Friday, April 29, 2011

Todo: Refactor

While playing in jsfiddle today, happened to notice this at the top of a script Action.js
// TODO: refactor 
var DiscussionWindow = new Class({
    initialize: function(){
        this.modal;
    },

...

Not that I haven't made such a comment before. At the same time, that comment might as well be part of the prototype for anything one writes, since it's probably true for anything more than a couple days old :)

Thursday, April 21, 2011

Bit shift in javascript with zero for an operand

The de-facto Javascript implementation of indexOf, which many of us have used to ensure that older Microsoft browsers can parse our Javascript, is here at mozilla.org. It contains this curious little line:
var len = t.length >>> 0;

That

>>>
operator is the bit-shift operator. It causes a binary right-shift of the bits that make up it's target, by the number of bits passed in the operand. This is something you normally would only use in clever or low-level programming. I don't think I've used bit-shift operators since I was writing a device driver in C about 15 years ago.

So why would you apply a zero operand? Wouldn't that do nothing? What's this all about?

Turns out the answer is simple, and a clever tool to add to your Javascript toolbox. Basically, this ensures that len is a valid number - if t.length exists, is numeric, and is integral. If it's already good, it will be unaffected by the operation. If it's undefined or non-numeric, it will always return zero. Basically, it's shorthand for something like:

parseInt(t.length) || 0

Clever. Learn something new every day.

Monday, April 18, 2011

Resize an image map online

Recently I tried to find an online tool to resize an image map. Not the image itself, that's easy, and there are already lots of such tools. But to regenerate all the coordinate information for the image map.

I couldn't find one. So I wrote one in Javascript. It's now under Image Map Resizer on this blog. This was also sort of an experiment to see if Blogger would let you get away with Javascript & jQuery. It does! Just include jQuery from the CDN in your page template, use no parsing when you edit the HTML, and you're good to go.

If you want to dynamically resize an image in a web application, along with its image map coordinate information, the code could be used with few changes to do that as well. This would have the effect of the client's browser performing the scaling, which is usually not preferable to creating the source in the size you want, but in some situations could be necessary.

The general idea of using jQuery on blogger also opens lots of possiblities... you could do almost anything you wanted by cleverly manipulating the resources on blogger, I would imagine up to and including ajax. For example, Blogger lets you have ten "pages" of static information in addition to blog posts. You could use one of them as a content placeholder, and use jQuery to get specific content out of it using ajax, to get around that limit. Or use it to make substantial changes to the page layout.

Saturday, April 16, 2011

jQuerifying your C# life with each: Sometimes it's the simple things

I've been casually working  on a C# jQuery port. Why would you do this, you might ask? What possible use would this be on the server? Well, ostensibly, it's because I found myself in a situation where I had to do some HTML parsing on the server. I needed to process some CMS-served content in order to make it possible to include functional elements in the user-managed content. I had an awful bit of code I'd hacked together a long time ago to deal with this, but I thought it wouldn't be too hard to create a basic jQuery port (with a simple subset of its functionality) for this purpose, rather than doing something crazy like learning how to use HTML Agility Pack. And I sort of wanted to do it for fun. (Yes, I have odd ideas about fun...)

Turns out the hardest part by far was just parsing the HTML in the first place. jQuery is so elegant in its simplicity and the way it builds upon itself, once I'd gotten a basic infrastructure set up that turned some HTML into an object tree, implementing selectors and each additional function took less and less time. I got the thing basically working in about a day, and with enough features to solve my problem in two.

But I digress. One of the things I implemented first was each. I'd never given much thought to such a thing before, but it turned out to be astoundingly simple:

public CsQuery Each(Action func)
{
    foreach (DomElement obj in Elements)
    {
        func(obj);
    }
    return this;
}

Usage looks like this, using lambda notation:

someObj.Each((e) =>
{
   // do stuff to e
});

or using delegate, which is necessary if you have overloads:

someObj.Each(delegate(DomObject e) {
    // do stuff to e
});

Starting to look awfully familiar isn't it? Chaining isn't totally alien to C#, as Linq popularized the concept a while ago, and there's already a ForEach method on List objects. But I can't say I've seen a lot of code that looks like this outside of jQuery. Since doing a lot of jQuery in the last year or two, though, I have come to appreciate the elegance of the syntax so much that I decided to write an extension method for general use. It's essentially identical to the above:

public static IEnumerable<T> ForEach<T>(this IEnumerable<T> list, Action<T> func)
{
    foreach (T obj in list)
    {
        func(obj);
    }
    return list;
}

That's all there is to it. I used ForEach (instead of Each) just to maintain consistency with the List and Array methods. Now you can use that simple syntax with any IEnumerable<T> instead of creating standalone foreach
structures, and chain and linq and iterate to your heart's content. Once you start, I swear you won't go back...

Friday, April 15, 2011

ImageMapster: jQuery plugin for enhancing image maps

ImageMapster turns an HTML image map into an interactive menu with highlighting, area selection, and tooltips. It also makes it easy to bind it to an external list of any kind on your page. Areas are automatically highlighted when a user mouses over, and can be selected and deselected when clicked.

Update 9/21/11
The project home page (linked above) has been overhauled with a new layout, new examples, and lots more info.
Please leave any comments or questions here, or on github at the link above. Or just email me!