Dreamweaver’s had it’s share of flack over the years and not all unwarranted, but this new beta looks to shed some of the baggage of its 19 year history with a refreshed user interface and a new code editor based on the Brackets codebase. For someone like me who spends most of the time in code view (and who has split their time between Brackets and Dreamweaver for the last year or so) there’s some nice new features in there that make it a more compelling environment for code-first users.
Adobe have just announced the new version of their Creative Suite software, CS5 adds a whole range of new features across the whole range of their applications.
As a web designer / developer it’s the updates to Dreamweaver CS5 that I’m most interested in. I’ve used Dreamweaver as my main development environment for years even though I’ve used it in a very code oriented way and haven’t relied much on the Design view mode in the application.;
Part of the reason I haven’t relied on the Design view aspect is that historically it was pretty poor at rendering more up to date HTML / CSS techniques. It was also unable to render the custom PHP code used in my own PHP applications or in any other PHP based CMS apps like WordPress, Drupal etc.;
Dreamweaver CS4 did bring some improvements with the addition of the WebKit framework as the rendering engine for Design view and Live view which solved a lot of the HTML / CSS rendering issues and added support for many of the CSS features that WebKit supports.
Improved PHP Code Hinting and Introspection, Live View
Dreamweaver CS5 takes those steps a good deal further and now adds greatly improved PHP Code Hinting which can discover your own PHP functions and classes as well as those in CMS frameworks WordPress, Drupal and Joomla. The major benefit of this for the Design view and Live view is that instead of a jumbled mess of un-renderable PHP and HTML code you get the actual site running right inside Dreamweaver.
When you combine this with the new Inspect mode you get the ability to inspect elements on your page and see the CSS properties used, it’s very similar to some of the features offered by the Firebug add-on for Firefox or Web Inspector inside Safari.
The combination of these features together make it a huge leap forward for code-based designer / developers like myself. If you’ve previously been put off by the rendering aspect of Dreamweaver before then it’s definitely worth checking out again.
What about HTML5, CSS3, Web font support?
There’s been a lot of noise about HTML5, CSS3 and Web Fonts (@font-face) in recent months, not least because of the prominent debate over Flash support on iPhone OS devices. A lot of people might expect Dreamweaver to add support for HTML5 and CSS3, however, at first glance you might be a bit disappointed.
David Powers over on the FoundationPHP blog wrote a great writeup of Dreamweaver CS5 in which he makes a valid point about the lack of prominent support for HTML5 and CSS3. The HTML5 and CSS3 standards are still evolving so it’s difficult for any IDE to add support for them without the risk of something changing or breaking, especially with the HTML5 standard.
Dreamweaver CS5 does however offer support for using the HTML5 doctype for your documents, also the WebKit framework used in Design view and Live view will also render many of the CSS3 features that the WebKit framework supports, so if you’re writing code by hand then you can still use and preview many of these CSS properties.
(The screenshot above shows https://suburbia.org.uk viewed right inside Dreamweaver’s Live View, note the TypeKit fonts rendering happily inside Dreamweaver’s WebKit based Live view).
Web Fonts are still a hot potato in many ways so as yet there is no direct support for adding those within Dreamweaver, but again WebKit will render them so adding the @font-face code by hand will get you there.
The good news for CSS3 and Font-face etc is that Dreamweaver can be extended very easily to add support for, even better news is that I have already written a couple of Extensions for Dreamweaver which can be downloaded for free from the Dreamweaver Exchange, you can also read a bit more about them on the Projects page of this site.
I’m hoping to write on to add support for HTML5 tags too, with these extensions you’ll get code hinting support for adding these into your code. Please try them out and give me feedback as to how they can be improved and I’ll see what I can do to make them better. David Powers has also written an extension for adding / converting RGBa colour values too which is another handy tool, you can download it and other useful DW extensions from his Extensions and Tools page.
Improved Subversion support
Subversion version control support was added with Dreamweaver CS4, however I wasn’t very keen on how it was implemented and it lacked many features so I’ve continued to use alternative standalone apps for managing version control on OSX. Subversion support has been improved in CS5 though so it looks to be a more viable option now, I will try and give it a fresh comparison to see how it compares to the standalone alternatives now. One major difference in CS5’s support I believe is that Subversion can be upgraded without Dreamweaver itself having to be updated so this will help keep it more up to date.
I’ve written about BrowserLab before, BrowserLab is a great way to test web pages in different browsers and Adobe has continued to improve it by adding more target browsers to the list as well as the ability to save local copies of the rendered previews as jpeg images.
The integration of BrowserLab in CS5 along with all of the improved Live view rendering improvements makes for a great development environment. BrowserLab has been a free service so far as part of Adobe’s Labs beta program, it will however ultimately be a paid service but purchasers of CS5 software will get included access for a year. Standalone pricing has yet to be announced.
All in all Dreamweaver CS5 is a great step forward, it’s definitely got some genuinely useful improvements to offer my own code-centric workflow especially that I’m now using WordPress for many projects. I’d definitely recommend giving it another look if you haven’t been using Dreamweaver for any of the reasons I’d previously mentioned.
Until fairly recently if you were a Mac user and you wanted to use a version control system like Subversion you didn’t have much choice as far as client apps went. If you didn’t have the terminal skills to work via the command line and wanted use something with a nice GUI then you had to choose from apps that were either incomplete or not particularly Mac-like.
However, the latter half of 2008 brought a lot of change in regards to Subversion client apps for OSX. It’s kind of like with buses, if you wait long enough several of them come along at once ;)
Subversion clients from A (Adobe Dreamweaver) to Z (ZigVersion)
To give the various apps available thorough overviews is beyond the scope of this article, so I’m just going to list the various apps that are available and point out some of their features.
Adobe Dreamweaver CS4
Dreamweaver CS4 added support for the Subversion version control system, something I’ve long thought would be a great feature and one which via an extension was available to Windows users. However, I don’t think the implementation of it in Dreamweaver CS4 is as good as it could be.
One issue in particular is that the commands for Checking out and committing to a repository are the same as those used for the regular Checkin / Checkout functions of Dreamweaver which I think is a bit confusing as they are very different features. Using these terms is a problem as they don’t match up with the correct terminology used in Subversion. Dreamweaver is often the first app (rightly or wrongly) that people who are learning how to make websites use so there’s a bit of a responsibility for it to teach people correctly and to encourage good habits.
I consider Dreamweaver CS4’s SVN integration to be a good first step but it could do with improvement to make it more usable. Unless you use Dreamweaver already then you’re probably not going to start doing so just to get access to its Subversion integration. But if you’re already a Dreamweaver user then it does offer some useful functionality, and if you’re a DW user but have never used version control then it’s a good enough place to start!
Dreamweaver CS4 costs $399 for a commercial licence but there are also educational licences and there is also a 30 day trial.
When I first started using Subversion ZigVersion was the best solution for OSX that I tried. It was the most user friendly / easy to use out of all the clients available at the time such as SVNX, Syncro SVN and SCPlugin. I’ve always used a hosted Subversion repository ever since I started using Subversion so I was needing an application that would allow me to easily connect to an external server. ZigVersion made it pretty easy to do that, and to an SVN noob it was fairly easy to understand what was going on.
Once connecting to my SVN repository it was quite easy to create a working copy and update it from the repository files. After working on files it was easy to find the updated files with a simple click on the ‘Changed Files’ icon in the menubar. Only the new or updated files would be shown which could then be selected and checked in to the repository with appropriate comments added at the same time. It was also easy to get access to revisions of files via the ‘Revision Viewer’ button.
It’s a pretty straight forward application and does the job, one criticism would be that the interface is fairly unexciting in appearance. I mainly say that as this is a review of Mac OSX Subversion GUI apps so the visual appearance is important and the main reason why I’m not including SVNX or Syncro SVN amongst these applications.
ZigVersion costs $99 for a commercial licence but is free for non-commercial use. There is also a 30 day trial period.
Go to the ZigVersion website (Zigversion no longer appears to be available)
We’re now getting into the mac-daddy territory of Mac OSX Subversion apps. Versions was the first of the new wave of Mac SVN apps, despite showing as "coming soon" for over a year and feared by many to be vapourware.
However, although it was delayed the app was launched and it delivered on its promise of providing a much more Mac-like app for dealing with Subversion repositories and the tasks involved with working with them.
Versions’ main tool bar provides buttons for Update, Commit, Checkout and other options, just under the main toolbar there are three tabs, Timeline, Browse and Transcript. The Timeline tab gives you a timeline in the form of a list of revisions and accompanying notes which makes it easy to view the changes made over a period of time. The Browse tab allows you to view the repository files and view history of individual files as well as comparing, managing blame and also a Quick Look option for quickly viewing the contents of files.
There is a quick setup button that will get you setup with an account at Beanstalkapp.com who provide online SVN repository hosting, there’s a free account offering one repository to get you started with various tiered pricing options after that.
Versions deserves credit for really raising the bar for Mac SVN apps, the teaser page had me longing for months for them to launch the app! Although in the end I had give up waiting and buy ZigVersion instead in order to get some kind of GUI access to my repository.
Versions costs €39 (approx $50) for single user licence, there is a 21 day trial period.
This is the Subversion app I’ve been using the most out of all of them recently, although it’s a pretty close race between it and Versions. Cornerstones’ interface is well thought out and well designed and by that I don’t mean just good looks but that it provides a great feature set for working with multiple SVN repositories.
You can easily filter the working copy files in different states such as Changed, Modified, Conflicted, Unversioned and Locked. The ability to filter files this way is an essential feature in an SVN app, finding changed files in order to commit them to the repository is one of the most things I do.
Cornerstone also offers a great horizontal timeline view that displays the various revisions which is great for quickly reviewing the details of each revision such as dates, times, Revision notes and changes made.
Cornerstone costs $59 for a single user licence but you can use a trial version for 14 days to check it out.
Coda is a text-editor for web development, its main strength being the integration of several aspects of the common web development workflow: text editor, FTP, CSS editing and Terminal. In a recent update the application now has integrated Subversion support which adds it to this growing list of OSX Subversion clients.
Coda’s SVN integration adds a simple source control status window that quickly highlights changed files making it easy to find updated files and commit them to the repository. There is also easy access to a Source Control menu option offering committing / discarding changes, refreshing, comparing and updating the repository.
It is smoothly integrated into the workflow of Coda and rounds out the feature set of the application and it’s aim to provide a one-window web development environment.
Coda costs $99 for single user licence, there’s a 30 day trial period.
Closing – Rise of Git
Ironically as all of these Subversion apps start to appear many people are starting to switch to using Git instead of SVN! There are a couple of Mac GUI apps for Git available so far such as GitX and Gitnub so check them out if Git is more your thing.
Update: Couple of new Subversion / Git apps on the Mac App Store
If you’re using Beanstalk for Subversion / Git hosting you might want to check out the app Magic Bean for Mac too. There’s also an app called SourceTree which supports Git and Mercurial and also has some support for Subversion. I haven’t tried either app yet but worth a look I think.
Adobe will be unveiling the next version of their Creative Suite software on the 23rd of September. This will be done via a special web broadcast, you can sign up for email notification via the following webpage – http://adobe.istreamplanet.com.
Adobe AIR for Linux beta released on Adobe Labs
Support for the Linux operating system has been increasing from Adobe with continual improvements to the Linux version of the Flash Player plugin. Now Adobe have fulfilled their promise of full cross-platform support for their AIR runtime with the release of Adobe AIR for Linux beta.
Flash Player 10 release candidate on Adobe Labs
A new release candidate of Flash Player 10 was released on Adobe Labs. If you haven’t already checked it out then there’s quite a few new features such as 3D Effects, a new text engine, enhanced drawing API, GPU support and enhanced sound APIs to name a few.
Once you’ve downloaded it then go an check out the Feature demonstrations page to get a taste of these new features.
One thing to keep in mind though, if you a frequently upload images and video to sites such as Flickr, Vimeo and even Adobe’s own Photoshop Express web apps then you’ll want to avoid this version of the Flash Player just now as there’s still a ‘bug’ which affects the uploaders for these sites. It seems to be a hotly debated issue just now but it appears that Flash Player 10 stops these kinds of image uploaders from working due to a new security restriction. You can catch some of the discussion on this Flash Player thread.
Following on from last years move of offering a public beta of Photoshop CS3 Adobe have announced three new public betas of their CS4 applications.
You can download betas of Dreamweaver CS4, Fireworks CS4 and Soundbooth CS4 from labs.adobe.com. You’ll find all the details of the new features in development on each application’s page, here’s a few notable feature headings for each application:
- Related Files – included files such as CSS, JS, PHP etc show in a bar at the top of the document making it easy to see what’s linked into your page.
- Subversion integration – Use Subversion repositories directly within Dreamweaver.
- New user interface – Updated user interface in common with the rest of the CS4 apps
- New user interface – Updated user interface in common with the rest of the CS4 apps
- CSS and Images Export – Design web pages in Fireworks then export web standards-compliant CSS layouts, complete with external style sheets in one step.
- Live Style improvements – When you update a style all elements the style has been applied to are instantly updated.
- Arranging audio files on multiple tracks
- Adjusting tempo and pitch
- Recording and polishing voice-overs
- Previewing MP3 compression quality
Head over to http://labs.adobe.com now to check them out. Please note that these betas are only available to anyone with a valid CS3 suite or application, you will need to provide your serial number in order to download the beta versions.
TechCrunch ran an article on 26th February titled ‘Adobe AIR Vs Microsoft Silverlight: It?s All About Numbers‘ which kind of compared them both as being quite similar, but it struck me that it’s really not a fair comparison.
There’s a big difference between AIR and Silverlight at the moment. It’s fair to say Microsoft will push Silverlight forwards quickly but there’s no fair comparison between them just now, it’s far closer to compare Flash and Silverlight for the time being as AIR features a lot more than Silverlight.
Flash and PDF have huge market share and AIR brings those plus regular HTML/CSS/JS web development into one runtime as well making easy cross-platform offline / online application development.
Competition = good
It’s certainly good that there’s some competition in the market but AIR’s incorporation of various open source projects such as Webkit as well as the fact that Adobe have open sourced a lot of their own code such as Flex and Flash Player code will hold a lot of mindshare of developers. While AIR is not 100% open source it’s certainly a lot more attractive on several levels, not least being able to create Apps whether you’re used to HTML/JS, Flash or Flex.
Competition is good, and the fact the MS are developing web development apps to challenge Dreamweaver is a good thing. Dreamweaver is a great program but it needs to keep progressing to provide the tools that developers need.
One aspect that Dreamweaver (Adobe / Macromedia) has done a good job with is support for multiple server platforms such as their own ColdFusion but also PHP and JSP development. I’m not sure we’ll see any of Microsoft’s ‘Expression’ development apps support PHP and JSP any time soon! This multiple server platform support is something Adobe need to keep supporting as it’s definitely one thing that will separate their tools from Microsoft’s offerings.
If you’re like me and you decide not to use the ‘Design Notes’ or the synchronisation features of Dreamweaver at all (or at least not very often) and/or you use other FTP clients to transfer files and/or pass site files over to other designers to work on then you have probably been bugged to have to manually remove all of the ‘_notes’ folders that Dreamweaver makes inside every folder of your site.
I’d gotten tired of doing this manually so I thought I’d make a quick and dirty solution to it, after a little it of work using Mac OSX’s Automator application I created a script which looks for all instance of folders named ‘_notes’ and then puts them in the trash. So all I have to do now is run this application every so often and then they all get dumped in the trash leaving my folders clear and ready to pass on to someone else or upload using another FTP client.
Presenting ‘Delete _notes’
The application was pretty simple to make using Automator and was saved as a proper ‘.app’ package application. I then went and made little icon for the file instead of the generic icon, again this is fairly quick and dirty (admittedly it looks like it’s for deleting Dreamweaver itself!!!) but it looks ok.
I then packaged the app into an installer using the PackageMaker application that is part of Apple’s developer tools to make it easy to install. Although the application can run from anywhere on your machine the installer will put it in the ‘Applications’ folder, but you can change this to any location you want.
Download ‘Delete _notes’
I’ve made the app available here to download in case it’s of any use to anyone, it wasn’t terribly complicated to build but maybe it could be useful? Please remember that you use this at your own risk, no warranty or guarantee is given or implied. You should always make sure you have backed up all files before running potentially risky software that intends to delete files like this one! That said it runs fine on my machine running Leopard and does what it was intended to do.
If that hasn’t put you off then go ahead and download it! I’ve zipped it up so it’s only about 120Kb in size
Addendum: It is possible to stop ‘_notes’ folders being made in the first place
Just in case you weren’t aware that you can stop the ‘_notes’ folders being made in the first place then I should link to an Adobe Technote explaining it. I’ve been confused by this in the past so it’s probably worth linking to here so that if you don’t want the _notes files created at all then you can do so, rather than running the ‘Delete _notes’ application all the time!
I’ve now got the Adobe CS3 Web Premium Suite installed on my Mac, very nice it is too!
I’m planning on writing some more about some of the new features once I spend a bit more time with the suite as a whole.
Other news is Alyn’s website seemed to get hacked yesterday somehow, but it’s all fixed now. Oh wait, that reminds me, AJ has gone into labour! ;)