15 years. Yep, that’s a long time. In fact, it’s so long that it’s hard to remember “not” working for Adobe. But as of May 4th, I will be leaving the “big red A” to set off on a new adventure. I’ve accepted an offer to join Stremor, a start-up here in Phoenix as their VP of User Experience Engineering. In addition to making coffee, putting Ikea furniture together, and other typical start-up jobs, I will be putting my HTML5/CSS3/JS chops on the line building a real product! Sadly, I can’t tell you “what” it is yet – that’s all still hush, hush – but I can tell you that it’s so amazing, we’ve already got patents pending! Oh, and we’re also looking for great developers!

As I began debating whether to make the move, I got pretty sentimental about the last 15 years – so much so, that I almost chose not to go. Thanks to GoLive/Macromedia/Adobe, I’ve gotten to help build tools that literally have changed the (web) world. I’ve also had the good fortune to travel around the world more times than I can count and accumulated frequent flyer miles and hotel points that will take years to use up. And along the way, I also got to meet and work with some truly amazing people, including my incredible wife, Stephanie Rewis. I want to thank you all – my colleagues, friends, travel buddies, conference attendees, et. al. – for so many great memories. Chili crab in Singapore, tuk-tuk rides in Dehli, climbing the Sydney Harbor Bridge, dinner at Carnivores in Johannesburg, standing naked in a hotel hallway in Seoul (don’t ask), horizontal rain/ice in Helsinki in February(buuurrrr!), far too many beers at the Oktoberfest, sitting in the MacWorld green room with Steve Jobs, getting to fly with Paul McCartney – and so many, many more!

It’s been an amazing ride and I would be lying if I said that I won’t miss parts of it (expense reports excluded). I hope to still be asked to speak at conferences (hint, hint), and I will definitely be writing here and twittering there – it’ll just be less Dreamweaver and Adobe stuff, and more HTML5/CSS3/JS – and you’re all still invited to come hang out on Geeks4Sail. But, I’m also excitedly looking forward to the new challenges that come with change – and even better, I get to carpool to work with Stef (our offices are literally one mile apart)!

So, to my soon-to-be former colleagues at Adobe, I wish you all the best! Keep making great products! And to the rest of my readers, I’m not leaving you, so… um… carry on with what you were doing!

*Hat-tip to Leslie Jensen-Inman for the title of this post

When my wife, Stephanie Rewis, decided to leave the gun-for-hire world and join a start-up, she was immediately faced with a decision on which CSS preprocessor to use – Sass or Less. And compounding the problem, her editor of choice, Dreamweaver, doesn’t provide color coding or hinting for either preprocessor – even though their files are really just CSS. So, being the good husband (and evangelist for Dreamweaver) that I am, I set out to remedy the problem. If you’re wanting to use Sass or Less with Dreamweaver, here’s how to make it work.

As always, here’s the disclaimer – you’re going to be editing files in Dreamweaver’s Configuration folder, so proceed with caution, make a backup of the originals, etc.

The first thing that we need to do is to tell Dreamweaver that it’s okay to open a .scss or .less file – something that Dreamweaver by default doesn’t understand. You’ll first need to take a peak in your personal Dreamweaver configuration folder – on a Mac, that’s located in ~username/Library/Application Support/Adobe/Dreamweaver CS5.5/en_us/Configuration – and locate a file named “Extensions.txt”. If, for some reason, this file doesn’t exist, you can edit the master file located in Adobe Dreamweaver CS5.5/Configuration. Open the file and add SCSS (or SASS if you’re using the older syntax) and LESS to line 8, so that it reads: CSS,SCSS,LESS:Style Sheets. Save the file and restart Dreamweaver. You should now be able to click on a .scss or .less file in your Site panel and have it open in Dreamweaver.

Now, in order for Dreamweaver to understand that this, in fact, is a CSS file, you’ll need to edit MMDocumentTypes.xml located in the DocumentTypes folder in the Configuration folder. Open this file and scroll down to line 142. You’ll notice two properties on that line: winfileextension=”css” macfileextension=”css”. Add scss and less (comma seperated) to the appropriate property for your platform. Save the file and restart Dreamweaver. Open your .scss or .less file and you should see your familiar CSS code coloring and hinting!

If you’re serious about your Sass and/or Less, you should be using CodeKit, IMHO. CodeKit, in addition to other things, monitors your scss (or less) file for changes and then compiles it into CSS. I’m using CodeKit and Sass on every project – and loving it! To optimize my workflow, I actually link to the .scss file in my HTML (just remember to remove it before pushing the page live). That way, I can use Dreamweaver’s split view to edit the .scss file while looking at the page with Live View turned on. When I save the .scss file, CodeKit compiles the file into a CSS file that is also linked in my page. Sadly, Dreamweaver doesn’t know when the CSS file is changed, but simply hitting F5 (or the refresh button at the top of the document window) causes Dreamweaver’s Live View to refresh and I can see my changes.

I will be the first to admit that I rarely think about validating my pages while I work. Okay, sometimes I don’t validate at all. I know I should, but I can usually come up with a good excuse for not doing it – an elephant ate my homework still works on occasion. ;-) And as a Dreamweaver user, validating against the W3C validator was always that “extra step” that I didn’t feel like taking. But with Dreamweaver CS5.5, there really is no excuse anymore – it’s now built directly into the app!

When you’re ready to validate your page, simply click the W3C Validator button and choose whether you want the local page on your computer validated or a page on a server.

(more…)