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!)

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?

Must blog more in 2009

I've always felt fairly ambivalent about blogging. So thus far I haven't done much of it. Last year I discovered and really enjoyed the 'micro-blogging' experience of Twitter. Having an iPhone made it all the more visceral and now it's my most-used iPhone app by a long way.

Twitter has made me think differently about blogging. I really love the instant and micro nature of Twitter making almost like a public notepad recording my smallest of thoughts. This style really works well for the way my brain actually works. (OK well it could also be the ADD).

Now I'm wanting to post things that have a little more meat on their bones than 140 characters allows. I also want to practice my writing, since I kind of enjoy, but don't do nearly enough of it.

Another reason to blog more is to raise my digital profile. I recently (out of curiousity more than vanity) setup a google alert on my own name. The other Josh Price's out there who appear in this are an interesting bunch of fellows, and I wouldn't want anyone googling me and getting them if you know what I mean. (Apologies to the other Josh Price's if you're reading this....). So I'm going to attempt to raise my level of personal SEO. Since I own my own .com domain then this should be pretty straightforward.

I've created a tumblr account as well which I'm not yet sure what I'll use for. It appears to fill the gap between Twitter and blog posts.

The upshot of all of this is that I am committing to blogging more in 2009. I expect you all to hold me to this.

Flock: a whole new browser experience

I've been flicking between Firefox 3b5, Safari 3 and Opera on my Mac for a while now. Today I found a brand new "Social" browser called Flock. After a few minutes I had my Facebook and Flickr contacts listed in my sidebar. I also connected my Gmail, my blog and my delicious bookmarks. Although I've only touched the surface of what seems to be quite a lot of interesting social features and plugins, I've come away rather impressed.

The whole social experience seems to have come together in my Flock browser in a way that I had never considered. My Facebook contacts are sorted by the most recent status updates. The sidebar interface actually feels much cleaner and more organised than Facebook. Flickr photos are presented across the top of my browser window, and changing streams is faster and more intuitive than Flickr.

Flock appears to have all the standard browser features I've gotten used to. Probably because it's built on top of Firefox. It also seems pretty snappy. I'm going to try it as my default browser and see how I like it. It can't possibly crash as often as Firefox 3 beta 5...