Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 5

XRAY and Microformats bookmarklets

By

31 July 2007 | Category: Uncategorized

By Elliot Jay Stocks

It’s a rare occurrence when so much excitement can be produced by the humble bookmarklet, but in the last two days not one but two of these little gems have caught my eye and stolen my heart.

XRAY

bookmarklets_xray.jpg
Web designers and developers the world over have long been fans of browser plugins that reveal information about the page and – more specifically – its document structure; I don’t think I need to mention Chris Pedrick’s ‘Web Developer’ extension for the main Gecko-based browsers.

But for pure simplicity’s sake and the advantage of some rather lovely UI design, XRAY gives you the power to view any page’s box model simply by clicking a bookmarklet and it has the advantage of working in Safari, for those of you who’ve felt left out of the Web Developer extension party. (Incidentally, Jon Hicks provided an excellent round-up of development plugins for Safari a while back.)

[ westciv.com/xray ]

Microformats

bookmarklets_xray.jpg
Mr. Hicks also vented his frustration at not having a Microformats plugin for the Apple browser, and once again it was the bookmarklet that came to the rescue, this time in the form of the aptly-named ‘Microformats’ by Remy Sharp. Again: elegance, simplicity and functionality all rolled into one tiny but tasty package.

As with XRAY, the Microformats bookmarklet allows you to view and download any microformatted information embedded in the page. Great from a user’s point of view, but also great for testing your microformatted markup!

[ leftlogic.com/lounge/articles/microformats_bookmarklet ]

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://www.riskanalys.is Alex
  • http://www.pemaquid.com/blog/xray-bookmarklet-great-web-design-tool Pemaquid Crunch » Blog Archive » XRAY bookmarklet – great Web design tool

    [...] Better yet, I’m told it even works in Safari, though I haven’t yet tried that. Firefox is a breeze. Sorry, no IE version at this time. [...]

  • http://www.iamkeir.com Keir

    Thank you very much for sharing the XRAY bookmarklet – I’ve been aching for something to replicate ‘Firebug-ability’ in IE (rather than the command-line alternative) and this goes quite a way to solving that. Much appreciated.

  • http://thejaronline.com/webdev/xray-webpages/ TheJarOnline » Blog Archive » XRAY webpages

    [...] XRAY/a> [via Carsonified] [...]

  • http://www.kentriv.com Matt Munsey

    Very cool and useful little tool. Thanks for posting on it.

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.