Archive for August, 2007

XRAY – Box Model Introspection

Does John Allsopp ever sleep? I swear, between developing Style Master, speaking at conferences, and general Microformats evangelism among his other pursuits that guy is so packed full of energy he makes me feel like a cardboard cutout of myself.

John and WestCIV’s latest venture is XRAY- a small JS bookmarklet you can use to quickly introspect the box model for any element on a page. Whereas Firebug is the ten-ton-monster of site introspection, XRAY is light and easy to use (and just as handy)- just click the bookmarklet on any given page, and you’re shown the entire CSS inheritance hierarchy for the clicked element, it’s dimensions, etc. Beauty and simplicity in a small bookmarklet.

Right now XRAY is only supported in Safari 2/3 on OS X (with some caveats for Windows Safari), and all Mozilla-variant browsers on OS X and Windows (Firefox, Flock, Camino, etc). Howver, reportedly an IE version is also in the works. Any way you slice it, XRAY is a must-have utility for anyone doing serious browser-based work, and you should install it right now. Seriously. And make sure to give John some props/feedback while you’re at it.

Still reading? What are you waiting for?

Twitter/AIR Tastiness

Twitter’s popular these days, that’s for sure. I’m hooked, at least – and have been for over a year now. And although there’s many very cool third-party clients you can use to consume your tweets, two recently came to my attention that use Adobe technology to deliver your regular tweet fix – TwitterAIR and Spaz.AIR.

First, Aaron West’s sweet TwitterAIR app gets the strong nod-and-wink for being the first AIR Twitter app I’d seen (and damn nicely done, too). Respect.

Secondly – but not least – Spaz.AIR uses both the AIR runtime as well as the free Spry framework from Adobe (along with some JQuery) to do it’s magic. A double shot of Adobe technology in that little package, that’s cool in and of itself.

Now to be perfectly honest- I primarily use the Iconfactory’s Twitteriffic as it both integrates with my menu bar well, and Growl for system notification (mainly, I’ve been using it for so long it’s just become part of my workflow), but were I to rethink it all – which I might – either Spaz or TwitterAIR would be my successors of choice. Boo ya!

Blueprint – a CSS framework

Frameworks.

That singular word alone can stir up heated, pseudo-religious debates in web dev circles, some finding coding frameworks a boon for rapid development, others decrying them far too bulky and overengineered in relation to hand-coded, specific solutions. I’m somewhat neutral- most of my exposure to frameworks has been straight-up coding frameworks like CakePHP, Fusebox, Spry, Prototype among others, and although I love a good hand-coded solution, when time’s short a good framework like Spry or Cake can really save time. Howver, I was really intrigued to see that some enterprising design types have pulled together a framework for CSS – “Blueprint” – to better enable grid-based layouts in standards-compliant markup. Lead developer Olav Bjorkoy cites inspiration from many leading CSS and design gurus- Eric Meyer, Jeff Croft and Khoi Vinh amongst them (although they are not ‘officially’ part of the project).

Interesting. Although some ‘designers’ condemn Dreamweaver for it’s visual design surface masking the code beneath and allowing less technical users to create flexible designs at the expense of optimized code, it’s validating to see more design-centric coders acknowledge that standards-compliant designs could benefit from framework code. As the entire Blueprint framework – options and all – weighs in at ~40kb, it’s not too draining on bandwidth as it could be, which is nice. Let’s take a look at what Blueprint provides.

At the code level, Blueprint provides a screen stylesheet with three included files – reset.css (for ‘resetting’ browser defaults to provide a consistent starting point), typography.css (for type styles and effects), and the main brains behind the framework- grid.css (containing the rules and selectors for specifying grid-based layouts in CSS). There’s also a print.css file to override certain styles for better print output, which is a nice touch.

Continue reading…