Quantcast
Viewing all articles
Browse latest Browse all 10

In Honor of Caspian (enhancing Gimme)

The Chronicles of Narnia: Prince Caspian arrived in theaters today, and for those of you who haven't noticed, all of the Gimme codename releases are named after characters from the Chronicles of Narnia, since it is the greatest fantasy series ever written (sorry Lord of the Rings and Harry Potter fans, but I'm afraid that yes, Narnia, is better).

Anyway, since the current beta release of Gimme is "Caspian" I figured I'd do a post today in honor of Gimme and the movie (ok, it helps that I also have something worth writing about too).

So anyway, on to what this post is really about: enhancing Gimme.

Not too long ago, Shaun Inman wrote about his proposal for CSS Qualified Selectors.

It's a good idea; I've actually had the same idea and thought briefly about making it part of Gimme's core CSS selector engine. Only, in my model, I have the left-hand-side and the right-hand-side of the < symbol switched. It feels more natural to me that way, because in most CSS selector rules, you can simply look to the far right of the selector rule and know what type of "thing" you're going to be selecting.

Thus, I feel that this:

img < a     /* select all <a> elements that contain an <img> element */

feels more natural than this:

a < img     /* same logic as above -- Shaun's approach */

But this is just details; the idea is the same either way.

So anyway, after Shaun published his idea, John Resig chimed in and mentioned that jQuery supports this already via pseudo :has(..).

Well that's pretty cool, but since Gimme is my library, naturally, I feel compelled to make sure it stacks up against the competition, so I thought to myself: "self, can Gimme do this?" to which a mental reply came back "No, remember? You decided no to implement it."

And I would have just left it at that, because after all, I decided not to implement it for a reason (and I figured that's where I would leave it).

But then, today, my officemate surprised me by asking "Hey, I have a question about Gimme. I'm working with a page where I need to select a <table> element that has an <h1>. Can Gimme do this?"

Well crap! What are the odds that this would come up again so quickly?

Not being one to disappoint, I said "You know what? I decided not to implement it, but I did put significant effort into making Gimme's selector engine extensible. I bet we can write an extension really easily."

So a few minutes later, we came up with this little gem:

Gimme.Selectors.addPseudo('has', function(_elem, _pseudo)
{
    var children = Gimme.query(_pseudo.param, _elem);
    return children.length > 0;
});

Which means you can now use Gimme to do something like:

g('p:has(img.funny)')// select all <p>s that contain <img>s with class "funny"

Unlike what John did, I didn't bother to map this back to the < symbol. I thought about it, and you could do it easily enough, but the more I think about it, the more I like how :has(..) reads.

It's not likely that I'll make something like this part of the core Gimme library unless it start popping up everywhere. It comes up occasionally, but not enough to warrant making it part of the core (at least, not enough in my personal experiences so far anyway).

So there ya go! Think of this as edition 1 of "Gimme can do that too" with (hopefully) many more editions to come.

Comments welcome.


Viewing all articles
Browse latest Browse all 10

Trending Articles