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.

As anyone who has worked in the front-end dev world knows, keeping up with the “new” stuff is challenging. Thankfully, the browser makers have provided vendor prefixes which allow us to use a lot of the new CSS3 properties before they are finalized. But thanks to a reader of my blog, I was made aware that Chrome (version 16), as they removed the need for a prefix on border-image, has also changed the way the property is rendered. This morning, I awoke to find my site broken in the latest version of Chrome.

When I updated this blog to “HTML5″, I took the leap and used CSS3 everywhere that I could. This post area was a prime candidate for border-image. For the uninitiated, border-image allows you to use a single image as both a border and fill for an element. All you need to do is specify how much of the top, left, bottom, right of the image will be the borders, and how those pieces should fill each area (stretching or repeating).

Diagram illustrating the cuts corresponding to the value ‘25% 30% 12% 20%’ from the W3C specification

If you’ve ever used Fireworks, Illustrator or Flash, they all have a feature known as 9-slice scaling. Border-image is basically the same thing, but done on the fly via CSS. The rule for all posts here looked like this:

.post {
margin: 0 0 40px 0;
-webkit-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
-moz-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
border-width: 29px 50px 55px 32px;
}

In keeping with best practices, you can see that I have listed the official property (without the vendor prefix) last, so that as browsers drop the need for the vendor prefix, they will simply read the last property – and the change will be seamless. Except in the case where all browser vendors are rendering a property different than the spec—thus lulling us into believing their rendering is correct when it is not.

Don’t adjust your screen! This is what every post looked like!

There is actually an additional value in the spec called “fill”. The “fill” keyword instructs the browser to render the middle of the image as the background of the element. Without the keyword, the middle remains transparent (ie, the background-image or color is rendered instead). If there is no background-image or color defined for the element, it is simply transparent. Till now, all browsers have ignored the lack of the “fill” attribute and rendered the middle regardless. The code above worked perfectly—but it was based on improper rendering.

Chrome (actually, the change was made in Webkit) has recently changed their implementation of the border-image “fill” value as described in the spec. This is good, but it will ultimately break a lot of sites since many of us left the fill attribute off since vendors were ignoring it. Sloppy, sure. But it worked… until today.

So, dive back into your code and add the “fill” keyword if your site suddenly looks like swiss cheese. But you’ll want to (for now) only add the fill value to the non-prefixed version, as the addition of the value currently breaks Firefox if added to the -moz version of your rule (hat tip to @chriseppstein for that little nugget). My post class now looks like this:

border-image: url(images/article-background-stretch.png) 29 50 55 32 fill round round;

“fill” tells Chrome (and eventually other browsers) to render the center of your image as the background of the element. The two “round” values instruct the browser to tile the images on the x- and y-axis.

On a recent project, I spent the better part of an hour (okay, maybe longer) fighting with what I would learn is an interesting anomaly in the way that Firefox (4 and 5) deal with CSS3 shorthand transition notation. What baffled me was the fact that the other players, Webkit (Safari and Chrome) and Opera browsers, worked properly (or least what I thought was proper) with the exact same code. The premise was to have an area with a fixed height, set to overflow: hidden, but then allow the site navigation to scroll (transition) to the proper anchor, resizing the content box’s height to accommodate the contents while keeping the other contents hidden.

To illustrate the problem, have a look at this simplified example:

The two columns of text each have a transform: translateY(-100px); applied to them on :hover. Additionally, they are both set to transition the effect – thereby “scrolling” the text up by 100px. Simple enough. And if you are looking at this in anything other than Firefox, both columns behave the same. Of course, if you are looking in Internet Explorer, you won’t see anything because even with IE9, transforms are not supported. UPDATE: I’ve added the -ms- prefix for transforms/transitions, and in IE10 this works as it does in the other standards-compliant browsers.

Being that I like to write CSS shorthand when possible (but am moving back away from it for many CSS3 techniques, especially backgrounds), I wrote the transition line in shorthand. Simply transition: transition 2s linear 0; (with the browser specific code omitted for the moment). Testing in Webkit (which is what I use as my initial dev environment browser) showed everything was working properly. So, of course, I didn’t think more about it until the project was basically complete and I began the round of testing in Firefox, Opera and, yes, IE.

I knew that IE was not going to perform the “scroll”, but I was completely shocked to discover that FF was simply “jumping” (as you can see in the left column of the example) – exactly the same behavior as IE. I scratched my head in wonder as I ran over to CanIUse.com to make sure that my summer vacation in the Caribbean sun hadn’t confused my recollection about FF’s support of the transition property. I was completely baffled, and, in an effort to get to the bottom of the issue, I broke the shorthand out – going from -moz-transition: -moz-transform 2s linear 0; to
-moz-transition-property: -moz-transform;
-moz-transition-duration: 2s;
-moz-transition-timing-function: linear;
-moz-transition-delay: 0;

And suddenly things appeared to be working in FF. This is also what you see above. The left column uses shorthand, the right column uses the longhand notation.

Okay, the simple assumption was Firefox doesn’t support shorthand – but I knew for a fact that that couldn’t be. After looking at the code for the umpteenth time, I was as baffled as when I wrote it. But a shout-out on the Twitters revealed the answer… no “s”.

The “0″ at the end of the shorthand doesn’t have a unit. And with that, Firefox fails to execute the entire line. But wait, the longhand version doesn’t have a unit, so what gives?! Well, that line is actually being ignored as well. But because it’s longhand, the property, duration and timing-function are all being executed. To confirm, I changed the -delay property in the longhand version and, sure enough, no delay. Going back to the shorthand version, I added the “s” to the “0″, and, problem solved!

Of course, this begs the question “why”, which a number of us spent Sunday afternoon discussing on the Twitters. Tab Atkins confirmed that, in fact, the spec requires the unit on instances of time. So, actually, the problem isn’t a Firefox issue, but rather the fact that Chrome, Safari and Opera are “allowing” us to be slack in our code. Hmm. My position is, the default is “0s”, and in no other instance am I required to type the unit when specifying “0″, so why do I have to here? But who listens to me anyway?!

I happily added the stupid “s” and will definitely never make that mistake again… Oh, and I invoiced myself for several lost hours and frustration…! We’ll see if I pay the bill. ;-)

I’ve just spent the weekend getting my new Samsung Galaxy Tab 10.1 all setup – which included downloading a couple of browsers. I’ve been using the Dolphin browser on my Android phones for quite some time, and really liked it because of the fact that it can be set to identify itself as a desktop browser. While I appreciate an optimized mobile experience on my phone, there are times when I want to see the “real” web. Unfortunately, on many sites, user agent sniffing rolls my device back to the mobile experience – hence the beauty of being able to set the user agent string in the Dolphin browser. This problem is even more pronounced on tablets, which are identified as “Android” and therefore get rolled to the mobile site.

Sadly, the Dolphin browser is not really optimized for Honeycomb, and its interface can look a little small on large tablets. So I have found myself using the native browser more and more. But the native browser suffers from the “Android” user agent string – but it doesn’t have to. There is a hidden (and I mean really hidden) gem that allows you to change the user agent string, among other things (like a Javascript console)!

To change the user agent string, start by opening a tab in the browser and typing “about:debug”. Be sure that the tablet’s “intelligence” doesn’t put a space between the colon and “debug”. Hit the Return key to “load” the page.

You won’t see anything load in the page, but if you go to the options menu in the upper right hand corner, you will see some new entries at the bottom of the list.

Choose Settings and you will see an option for Debug. Tap the UAString item and choose Desktop.

Viola! Your tablet will no longer identify itself as a “mobile device”, but rather as a “desktop”.

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.

If you have any errors, they will appear in the W3C Validation panel. Simply double click each error to be taken directly to the culprit in Code View. You can also choose to save the report if you’re into that sort of thing.

But very often during development, the list of errors can be quite extensive – and even irrelevant. For example, I don’t bother to put alt text (or even an empty alt attribute) on placeholder images that aren’t actually going to be used in the final page. For that reason, Dreamweaver also allows you to suppress errors from a report. Right click on the desired error and choose Hide Error to add it to your list of suppressed errors.

Of course, you’ll want to make sure you’ve actually fixed those errors before going live. Therefore, Dreamweaver CS5.5 allows you to remove errors from the list of Hidden Errors by choosing Settings from the W3C Validator button and clicking the Manage button.

One of the coolest things about the development of CSS3 is all of the experimental sites and online tools being created to help us all learn the new syntax, properties, etc. There are literally tons of great ones like css3maker.com, John Allsopp’s  westciv tools, border-image.com, css3generator.com and many more. In fact, even Microsoft has gotten in the game with their test drive site for IE 9 (and Preview Release of IE 10). But even with the great enhancements to Dreamweaver CS5.5, using these tools still requires bouncing out to the browser, using the online tool and then copy/pasting the generated code back into your CSS in Dreamweaver – or does it?

Actually, one of the best features of Dreamweaver, Live View, can be used in a way that you might not have thought of. We know that Live View allows us to see the page, rendered by the embedded Webkit engine, exactly as it would appear in Webkit-based browsers. But there is also an interesting text field that becomes active in Live View at the top of the document window – an address field – just like in a browser!

And yes, you can type any URL into the field. Dreamweaver, just like the browser, will load the page in Live View. If you are in Split View mode, you might notice that the actual HTML from the page you are viewing is not there because Dreamweaver is still showing the code of your original page.

But click the Live Code button, and Dreamweaver will display the generated source of the page you are looking at — complete with all the corresponding CSS and Javascript files appearing in the related files bar. It’s a great way to learn from what others are doing.

To get the most out of this feature, I have simply created a “tools page” with links to all of my favorite online tools. In order to interact with your local tools page, you will need to choose “Follow Link” or, even better, “Follow Links Continuously” from the Live View Options menu.

So now, when I start Dreamweaver, I immediately open this page, turn on Live View, enable the Follow Links Continuously option and then go about working on my projects. Any time that I need a gradient, transition or anything more complex that I don’t want to “think about” how to create, I switch to my “tools page” tab where all my online friends are ready to help. I can then easily copy their code into the stylesheet that I am working on.

Let me know what you think about this – or if you have an even better “Best Tip Ever”!

One of the biggest problems with linking to anything on the web is when the address of that file changes. Sadly, this happened recently with a file that was used by Dreamweaver CS5.5 to install the Android SDK via the Easy Install button on the Configure Application Framework dialog (Site > Mobile Applications > Configure Application Framework).

The Dreamweaver team has released instructions which you can find here: http://kb2.adobe.com/cps/904/cpsid_90408.html

Basically, you’ll need to replace the NativeAppCommon.js file located at [Dreamweaver Install Location]/Configuration/NativeAppFramework/. The entire process takes less than a minute to complete.

If you have already installed the Android Framework, you don’t “have” to do this, however you might want to go ahead and grab the updated file just in case you ever want to reinstall the framework with Dreamweaver’s Easy Install.

Holy Javascript Libraries, Batman! In case you’re keeping score, Adobe began shipping Dreamweaver CS5.5 less than two weeks ago with support for jQuery and jQuery Mobile. But, the versions included in Dreamweaver, jQuery 1.5 and jQuery Mobile 1.0a3, are already out of date! Because before you could even get your copy installed, the jQuery team released a significant upgrade to the core jQuery library – version 1.6. Along the way, the jQuery Mobile framework has also been updated to version 1.0a4, which includes several important bug fixes. So, if you are a Dreamweaver user and you want to develop jQuery Mobile sites and applications with these updated versions of the libraries, what are you supposed to do? Update your libraries, of course… here’s how…

Before proceeding, you’ll obviously want to go grab the updated libraries themselves. For the core jQuery library, I suggest using the minified version. Because images are also part of jQuery Mobile, I recommend grabbing the zipped version of the framework. After you download and unzip the folder, you’ll find a full version of the css and js files. I recommend using the minified versions, so go ahead and delete the full versions of the files (ie, they don’t have “.min” in their names).

Arguably one of the most powerful features of Dreamweaver is its extensibility. In fact, the application itself is built around the very technologies that it itself writes, namely HTML, CSS and Javascript. All of these pieces are located in the Configuration folder that you can find where Dreamweaver is installed on your computer. For me, since I’m a Mac user, it’s at Applications>Adobe Dreamweaver CS5.5>Configuration. There are tons of other folders in the Configuration folder, but the one that holds the files that we are interested in is the Third Party Source Code folder.

Inside this folder, you’ll find the jquery-mobile folder. If you want to backup the folder, feel free. None of the sites that you have worked on previously are reliant on these files, as Dreamweaver makes a local copy in each site you create (if you are not using the CDN versions of the Mobile Starter Pages – which we will talk about later). Replace the two jquery-mobile files (css and js) with your newly downloaded files. Replace the entire images folder as well. Finally, replace the jquery-1.5.min.js file with your jquery-1.6.1.min.js file (or whatever you named it).

One last step and your update is complete. When you choose to create a new file from the New Document dialog, Dreamweaver makes a copy of the selected file from the Configuration folder and places it in your site file. The Mobile Starter layouts (New Document > Page from Sample > Mobile Starters) are located in Configuration > BuiltIn > Mobile Starters. There are 3 pages – two of which reference the files that you have now deleted, jQueryMobileLocalMultiPage.htm and jQueryMobilePhoneGapMultiPage.htm.

Open each of these files in Dreamweaver. You’ll see in the head of the document links to the two old jQuery Javascript files and the old CSS file. Simply update these links to point to your new files and save the document. Test that everything worked properly by closing the file, then creating a new page from the Sample that you just changed. Make sure to save the file into a site to make sure that Dreamweaver copies the proper files into the site.

Finally, if you want to change the CDN version, it points to the jquery repository online, simply update jQueryMobileMultiPage.htm to point to the location of the CDN versions of the files.

Happy mobile coding!

Like the sun rising in the east, every time a new version of a product is rolled out, the marketing machine proclaims this to be the “best version ever”! Well, having had the luxury of being involved with Dreamweaver since the very beginning, I can honestly tell you that Dreamweaver CS5.5 is not just a point release on top of CS5 — it truly is the best version ever! Along with addressing bugs (face it, every piece of software has bugs) the Dreamweaver team has taken on the challenge of keeping up with the evolving web industry, specifically around enhanced HTML5/CSS3 support, and the move toward multi-screen authoring, both from a “mobile optimized” approach using CSS3 media queries, as well as embracing the jQuery Mobile framework. Finally, the ability to wrap HTML/CSS/JS up into a native iOS and/or Android application using the Phonegap framework is sure to be a “crowd pleaser”.

HTML5 / CSS3

For those that missed it, shortly after the release of Dreamweaver CS5, the team released an update on Adobe Labs which provided initial code-hinting support for HTML5 and CSS3. This was later baked into an update to the core product. With Dreamweaver CS5.5, the team has updated the code-hinting database to reflect the current state of the HTML5 elements, as well as updating the WebKit browser engine embedded into Dreamweaver’s Live View. This means that things like native HTML5 video can be “seen”, but also interacted with while you are designing your page.

For the CSS3 aficionados, you might remember that the HTML5/CSS3 update last year added support for vendor-specific prefixes. This meant that you could type a dash, and Dreamweaver would codehint “-moz-”, “-o-” and “-webkit”-”. Choosing one of the vendor-specific prefixes would then in turn display a list the list of CSS properties that that specific prefix could be used with. Dreamweaver CS5.5 not only continues this functionality, a fourth vendor-specific prefix has been added, “-ms-”, because now Internet Explorer 9 has adopted its own prefix.

Additionally, the CSS Panel has been updated with a couple of very nice enhancements. First, the dropdown list now includes all of the new CSS3 properties and any vendor-specific properties that you may have added to your rule show up in the assigned properties list for easy editing. Second, new fly-out dialogs have been added to allow you to quickly specify values for box shadow, text shadow and border radius. Finally, the color picker has been updated to support the RGBa and HSLa color spaces — and even translate between hexadecimal values and these new color spaces.

The Multiscreen Preview which was added with the HTML5 update, has also been improved and now eases the process of creating media queries and their attached stylesheet files. But taking the idea one step further, the Window Size manager (a long forgotten Dreamweaver feature) now includes the ability to change the Design View and Live View to reflect only the desired stylesheet. Yes, this means that you can continue to work, modifying HTML, CSS and Javascript, while looking at the way the page will actually look under various scenarios! If you are serious about targeting multiple screen sizes/dimensions with CSS, this feature will have you cheering!

jQuery Mobile

And if you are into targeting mobile devices, the jQuery Mobile framework helps ease the process of creating mobile-optimized pages that actually “feel” like a native application. As a proud sponsor of the jQuery Mobile project, the Dreamweaver team has been actively contributing back to the framework. And Dreamweaver is all the better for it, as Dreamweaver CS5.5 adds a jQuery Mobile widget section to the Insert Panel, allowing you to easily add UI widgets from the framework to your page — and getting started is just as easy with the new jQuery Mobile starter layout. Use the Window Size manager to set your Design/Live View to the size of a mobile phone and it’s as if you are almost working on the phone itself.

And speaking of jQuery in general, Dreamweaver CS5.5 builds upon the enhanced Javascript code-hinting introduced in the previous version by providing intelligent code-hinting for the full jQuery framework.

Phonegap

Having spent the last six or so months attending conferences featuring talks about native application development with HTML/CSS/JS, I can personally attest to the popularity of the Phonegap framework. This simple, yet powerful, framework is there to solve one simple problem, the actual packaging of your HTML, CSS and Javascript into a native application for iOS and Android devices. And Dreamweaver CS5.5 includes built-in access to the framework — meaning, once you have your application looking and functioning like you want, a simple command in Dreamweaver can pass the entire “site” off to the Phonegap framework, packaging it up for deployment, or, if you’re in the middle of development, you can interact with your application using the iOS or Android simulators included in the respective platforms’ SDK.

Read more, see more

I have to admit that I’ve been looking forward to finally being able to show this wickedly evolved version of Dreamweaver off in public! And, that’s what I will be doing quite a lot over the coming months. Together with my good friends and colleagues, Terry White, Jason Levine and Paul Trani, I will be on tour around the world throughout the rest of April, May and June. You can see dates in the right hand column of this blog — or, read more about the tour and get registered on our Creative Suite Evolution Tour page. If you can’t make it to one of our tour stops, I’ve also recorded a series of videos showing off all the shiny new features.

Of course, this release is not just about Dreamweaver — there’s new stuff for Flash developers, video and audio professionals, as well as some wickedly cool developments in the InDesign world. So, be sure to check out Terry’s blog to get up to speed on publishing from InDesign to tablets. Jason will be spreading all of the new video and audio love (any Audition fans out there on the Mac platform?), and Paul will be sharing all the new developments around Flash and how this version is raising the bar on multi-screen development for applications and games.

As always, be sure to visit Dreamweaver’s home on Adobe.com for a complete list of features, as well as pricing and upgrade information.