Introducing SelectorGadget: point and click minimal CSS selectors

http://www.selectorgadget.com

by tectonic • 17 years ago

137 25 17 years ago

tectonic4• 17 years ago

Please tell me when you find sites that it doesn't work on, there are so many edge cases.

This is awesome. It would've have been super useful building our mobile interface to Philadelphia's regional rail schedules where we scraped SEPTA's site for data. http://www.septa.org/service/sched/r2s_wk.html is an example of the markup we had to deal with.

I think I'll have to go back and crosscheck your selectors with what I came up with to see if we can't improve anything. Thanks!

matt1• 17 years ago

Whoa I remember you from one of the Philly on Rails meetings.

Small world. See you at the next pub night?

thaumaturgy• 17 years ago

Oh sweet merciful Bob that has got to be some of the nastiest markup I've ever seen.

CalmQuiet• 17 years ago

Impressive flexibility. I haven't encountered any problems yet on FF or Safari.

Another use I see for it is in teaching JS / jQuery / etc.

cpher• 17 years ago

Very clever. It's like a souped-up version of the Outline Current Element tool in Firefox's Web Developer Toolbar. Nice work!

sam_in_nyc• 17 years ago

Very nice tool. Reminds me of the Dapper interface. I could see this being used to build some sort of notifier service. For example, "notify me when any of these change."

Great work

quilby• 17 years ago

You are probably talking about - http://www.dapper.net/dapp-factory.jsp , which is basically a much more powerful 'selectorgadget'.

Edit: After using selectorgadget for a couple of minutes I found a case where selectorgadget works much better than dapper.net. selectorgadget is great!

mattjaynes2• 17 years ago

Wow, this made my day. I've been using FireQuark (a custom firebug that provides CSS selectors - http://www.quarkruby.com/2007/9/5/firequark-quick-html-scree...) and while it was very helpful, SelectorGadget will remove sooo much more of the pain of scraping. Major kudos.

As an aside, I'll mention the nokogiri gem (almost identical to hpricot, but under much more active development), that's what I've been using and it's excellent. http://github.com/tenderlove/nokogiri/tree/master

tectonic4• 17 years ago

Just so you know, there was, and may still be, an off-by-one error in Hpricot's implementation of nth-child that may confuse you when using the selectors generated by SelectorGadget.

mattjaynes2• 17 years ago

Great point. I haven't looked, but I think nokogiri fixes that bug. I think that was one tenderlove's motivations for creating nokogiri. He talks about it more on his blog:

http://tenderlovemaking.com/2008/10/30/nokogiri-is-released/

"I just want to tell you that you shouldn't worry about that old legacy code that uses Hpricot. Nokogiri can be used as a drop in replacement! Really! Nokogiri doesn't reproduce the bugs that are in Hpricot, but should work in most cases. Just use "Nokogir::Hpricot()" to parse your HTML. Of course, I've tried to keep the syntax of Hpricot that I like."

fizx• 17 years ago

It's a one char fix:

http://github.com/fizx/hpricot/commit/1208019ade1af02816de62...

dominik• 17 years ago

Excellent work; I also liked your screencast, you did a good job in quickly showing what SelectorGadget did!

bprater• 17 years ago

Agreed -- and then gave suggestions below. Perfect! I immediately started coming up with ways I could use it on a couple projects I'm working on.

I hope all purveyors of webapps will use this as a shining example of a demo well done.

sarp• 17 years ago

Brilliant!

misterbwong• 17 years ago

Extremely useful. I love it. I've been using the Firefox Web Developer Toolbar to guess at my selectors, but this is infinitely faster.

rjblackman• 17 years ago

awesome. seems to work in chrome just fine. I can't see how this is useful for scraping though, is there scraping software that can take css selectors as criteria?

I've previously just used mechanize/hpricot and copied the xpath from firebug to get the areas i want to scrape.

tectonic4• 17 years ago

Hpricot can take CSS selectors.

dw0rm• 17 years ago

lxml.cssselect in python

andreyf• 17 years ago

This is the kind of stuff that blows my mind. Between all of the people who will ever use it, you've probably saved a lifetime's worth of fiddling with CSS selectors. Kudos to you, sir!

PStamatiou• 17 years ago

Andrew, this is badass! Great work.

jrockway• 17 years ago

OK, I know this is off topic, but... I read this article an hour or so ago, and I have had the Inspector Gadget theme song stuck in my head since then.

Someone make it stop :)

jonny_noog• 17 years ago

Very cool. Thank you.

Thanks also for exposing me to screentoaster.com, I've been hoping for a service like this.

akikuchi• 17 years ago

Amazing timing on this release- I just learned the basics of CSS the other day, and this is going to be a really helpful tool to keep the learning process going. Well done and thanks!

tectonic4• 17 years ago

I just pushed out XPath generation support to the dev version.

Introducing SelectorGadget: point and click minimal CSS selectors

Related Stories