big dark media » code

Configuring Dreamweaver CS3 for AIR Coding

Scott — Mon, 20 Aug 2007 23:09:58 +0000

If you’re using Dreamweaver CS3 but hesitant to get started with AIR development, I put together a very quick one-off screencast showing how to configure DWCS3 for AIR previewing and deployment using the beta AIR Extension for Dreamweaver (available on Adobe Labs).

This screencast covers installation and general functionality of the extension, and should get you up and running quickly. From there, it should be a snap to start leveraging your existing XHTML/JS/Spry/CSS skills to write sweet desktop apps using the AIR runtime.
Enjoy!

Source Control and Dreamweaver

Scott — Mon, 13 Aug 2007 18:58:37 +0000

… do you use them together? If so (or even if you just use source control regularly with other web design/development tools), please jump in with your thoughts and observations at this post by Lori Hylan-Cho on the Dreamweaver team weblog – “Source Control: Do You Use It?“. Lori’s trying to gather feedback on how you use version control/source control systems like Subversion, CVS, Perforce (and others) in web-based projects, whether application, site or both. If you haven’t used a source control system in the past but are interested in possibly doing so in the future, your comments and suggestions are also welcomed. So if this interests you even remotely, please hit that link and join the conversation. Thanks!

XRAY IE Beta Available

Scott — Mon, 13 Aug 2007 18:32:02 +0000

Again proving his boundless reserve of energy and innovation, John Allsopp has just announced an Internet Explorer beta of XRAY, his sweet little page instrospection bookmarklet I noted last week in it’s initial Firefox-supported release. Just one more reason why you should run – not walk – to John’s site and download this little gem postehaste. Just hit the first link above, drag the ‘XRAY IE’ link to your bookmarks toolbar in IE, then revel in your newfound page element wisdom.

Awesome stuff. Thanks again, John- XRAY kicks some major butt.

Kuler API Now Available

Scott — Fri, 10 Aug 2007 22:14:14 +0000

Kuler, the Flex-based Adobe web app for exploring color space, has become quite the thriving nexus for colorists across the ether, allowing one to experiment quickly with color themes and share them with equal ease amongst the design community. Well, good news for mashup artists worldwide- you can now access a simple RESTful API to get Kuler color themes into your own application/mashup. Here’s an example to get the wheels turning. Ready? You can get all the details over at Adobe Labs. Mash away!

Update: I was recently informed that the Kuler interface was actually built in Flash- not Flex. Apologies for the mixup!

XRAY – Box Model Introspection

Scott — Tue, 07 Aug 2007 22:10:38 +0000

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?

panic coda – a first look

Scott — Mon, 23 Apr 2007 22:16:56 +0000

There’s a new player in town for web editing apps, name of Coda. Coda is made by those wonderful guys at Panic who make the most excellent FTP application for Mac OS X – Transmit. If you’re a Transmit user, one of the first impressions you probably got was that the Panic folks did a very good job of focusing on a specific problem and solving it very well. Coda takes that ethic and pitches straight for Mac OS X-based hand-coder web developers who currently use a lightweight text editor and Transmit to wrangle their source files. Let’s take a peek.

First up when launching Coda (well, after you’ve defined a few sites to begin with), you’re greeted with a rather elegant looking list of sites to choose from. In the shot below, I’ve just two- this one and another ‘test’ site I had on hand.

Coda in Site Chooser View

After selecting one of your sites, you’re dropped into what I consider the main workspace, your file, a list of all the files in your site alongst the left of the screen (which yes- can flip between local and remote views) that allows transfer of files using a streamlined version of the lickety-split-quick Transmit engine, and nothing else. As so:

Coda in Code View

The code editor is nice- largely as it’s built on the SubEthaEdit engine, which is already a well-proven editing core on Macs. SubEtha also provides a cool collaboration feature by way of the codebase- you can share editing of the document with anyone else available using Coda (and perhaps SubEthaEdit?) accessible to you online. There’s a great grep-esque visual search and replace feature that actually lets you specify variables visually- nice touch.

You can preview your page easily via the built-in WebKit rendering engine, and with a slightly added touch- by turning on the DOM inspector you can visually select elements on your page and see their exact cascading location in the DOM. Makes it very easy to see the elements of your page in context, and understand how their ancestors may or may not be affecting them. In the screenshot below – which is admittedly teeny – the DOM elements are listed underneath the preview, with the selected element in blue at the far right.

Coda in Preview/DOM Inspection Mode

CSS styles are no second-class citizen in Coda – you can inspect the CSS files directly with a visual editing mode (think Dreamweaver’s CSS Rules editors broken out to a single-pane interface with a ‘menu’ of sorts on it’s left) as well:

Coda in CSS Edit Mode

All in all, makes for a very compelling 1.0 product. Kudos to the Panic team for doing some great work on a very focused, Mac-savvy application. I don’t see it replacing Dreamweaver CS3 for me anytime soon, but Panic’s definitely got a nice application on their hands here. It’s also just plain cool to see such elegant innovation from a Mac-specific development house, cause you know I loves me some Macintosh.

Check out Coda at the Panic website, and make sure to read Steven’s blog post about the app itself (with far more detail than I’ve hacked together here, by all means).