Friday, February 27, 2009

CSS selectors everywhere: SelectorGadget

Pulling information out of a web page is a pretty common thing to want to do. You might want style, scrape or test a particular section of HTML in a page.

Over the years I've used all sorts of techniques for extracting content out of an HTML DOM. Regexes, XPath, and other things you probably don't want to know about...

Recently I've come to realise that CSS selectors are the canonical way for navigating the DOM in the specific case of HTML. What's nice is that a lot of tools use these, and you can reduce the impedance mismatch between other selection techniques by using CSS selectors everywhere. You may also be able to share your selectors between designers, devs and testers.

Reducing the impedance mismatch

Some situations I use CSS selectors
  1. CSS - OK well this one's pretty obvious

  2. Selenium tests - Traditionally most people either use the default element id selector or (for anything more complex) XPath selectors. XPath is great for XML but CSS selectors have a syntactic edge for the standard HTML attributes. Just compare the readability of div#top.selected a with //div[id='top' class='selected']//a

  3. jQuery - In my opinion the best Javascript framework out there. Everything in jQuery is driven entirely by CSS selectors.

  4. HAML - If you're lucky enough to be using HAML you'll notice how the structure of your template mimics the CSS selectors. This makes it much easier to see how
Some of the benefits of CSS selectors:
  1. Simple
  2. Terse
  3. Readable
  4. Universal
  5. Geared specifically for HTML


Tools for building and testing expressions

SelectorGadget looks like a great tool for figuring out more complex selectors if you're not as familiar with the syntax as you'd like to be. Why not try it out?

One other way I like to debug CSS selector expressions is in the Firebug console. Assuming that jQuery is loaded in the page, you can use the console to interact directly with the page:

Try this. Load the jQuery site and open your Firebug console and type:

$('a').css('border','1px solid red')


This should highlight all the links in the page. Substitute 'a' for any CSS expression and you'll be able to see what is selected by that expression. (Don't forget to refresh the page though!)

Friday, February 13, 2009

JRuby 1.1.6 now available on MacPorts

I really love how easy MacPorts makes installing packages on the Mac. If you own a Mac and develop software you are probably already using MacPorts. If you don't you should take a look and see what you're missing.

But sometimes the packages are a little out of date. This happened to me with Mercurial when 1.0 was released, and I'm sure it happens to others from time to time. Next time it happens, you might just be able to do something about it...

Yesterday I reinstalled JRuby from MacPorts but I got version 1.1.5 instead of version 1.1.6 which I was expecting. Charles suggested via twitter that I chase it up, so I spent the morning trying to get the JRuby port upgraded to the latest version so everyone could share the love.

Here's what I discovered:
  1. The 1.1.6 port upgrade ticket had been filed a while back but wasn't closed and had apparently fallen through the cracks
  2. When raising a ticket for a port upgrade attach a unified diff, not the whole portfile (this makes it easy to see what changed). Follow these steps.
  3. If something is out of date then an email to the macports-dev mailing list will probably ensure it gets done
I jumped on the MacPorts IRC channel (#MacPorts) and the friendly guys gave me the above advice and made the change almost immediately.

How's that for service?