Adobe introduced interesting new features in the Dreamweaver 2015 edition but ended up crippling it.

Code Linting

Dreamweaver 2015 removed the old code error highlighting and introduced code linting. It was a long awaited feature.

The old code error highlighting used to be problematic:

  • It activated upon a whim (especially before 2014 edition), it was not triggered after each key press.

  • It never identified the error nor told where exactly it was.

On pre-2015 Dreamweaver versions, errors were highlighted in bright yellow:

Fig.1. Dreamweaver CC 2014 didn't notice the missing closing TD tag but spotted duplicate border attribute. Missing TD was caught only during code validation.

Fig.1. Dreamweaver CC 2014 didn't notice the missing closing TD tag but spotted duplicate border attribute. Missing TD was caught only during code validation.

The Dreamweaver CC 2015 edition is way smarter — see the Fig.2 below — it not only recognizes both missing </td> and duplicate border="0" but tells you exactly what’s wrong and pinpoints the location:

Fig.2. Dreamweaver CC 2015 Code linting in action

Fig.2. Dreamweaver CC 2015 Code linting in action

However, the silly thing is that Dreamweaver 2015 code linting depends on the premise of line numbers being turned on. I always keep line numbers turned off to maximise the working space. Without the line numbers, it is not possible to visually tell where are the errors, see Fig.3:

Fig.3. Dreamweaver CC 2015 Code linting gives no clue where the errors are if line numbers are turned off

Fig.3. Dreamweaver CC 2015 Code linting gives no clue where the errors are if line numbers are turned off

For the sake of curiosity, compare the same file being linted on Sublime Text and Atom:

Fig.4. Sublime Text code linting (out-of-the-box, without plugins) is pretty much useless

Fig.4. Sublime Text code linting (out-of-the-box, without plugins) is pretty much useless

As you can see above, Sublime Text linting is not reliable — it didn’t catch the duplicate border attribute.

Fig.5. Atom code linting

Fig.5. Atom code linting

Atom linting is superior to both Sublime Text and Dreamweaver (all versions).

Firstly, you can choose what Atom linters you want to install, and you do it through the command line. That’s very easy and quick. Secondly, Atom shows a popup straight in the code editor window (you can toggle that off too). It is independent of the line numbers and finds the maximum amount of the code errors. In Fig.5 Atom linters identified not only missing </td> and duplicate border="0" but also placeholder value xxx (which is a nice catch) as well as missing “summary” attribute (which is not supported in HTML5 and useless in email code but hey).

Talking about Dreamweaver error linting, the Dreamweaver 2015 Code Linting is superior to other DW versions, but it’s not perfect. It needs an (optional) error code underlining because not everybody has the line numbers turned on permanently. Additionally, it would be nice to have errors displayed on the popup when the cursor is on the erroneous code. Some people prefer to maximise their workspace and panels stand in a way.

Emmet

Adobe finally implemented Emmet at the native level. On Dreamweaver 2015 you just need to click TAB to expand the typed shortcut. It puts Dreamweaver at the same level with Sublime Text and Atom code editors.

Before this, Dreamweaver had an Emmet plugin, but it required to click a key combination — TAB didn’t work. Some people resorted to remapping the CAPS LOCK key to that key combination, but the vast majority of Email Development professionals ignored it and used snippets mapped to keyboard keys instead.

While Emmet is a nice thing to have, its problem is that it doesn’t add all the attributes on the tags: display: block; on images, border="0" on tables and so on. It means you have to go manually after each tag and add those attributes. It would be a tedious process, and it would negate all the time-saving benefits of the Emmet. The old solution of using code snippets mapped to the keyboard keys is still more efficient.

If Adobe could rewrite the Emmet and make a user interface for it (for example, just like Find and Replace tool) so that we could customise the Emmet tags easily, I would happily use it. Until then, snippet workflow is more efficient.

Collapse Full Tag was removed in DW 2015

Yes, you read it correctly. Adobe removed the Collapse Full Tag function — the second most important and unique feature in Dreamweaver (first one being the Design View). The replacement is Code Folding — by magnitude an inferior way to collapse the code.

Fig.6. The Code Folding relies on you clicking the triangles and the (false) premise that each opening tag will be on a separate row on the screen.

Fig.6. The Code Folding relies on you clicking the triangles and the (false) premise that each opening tag will be on a separate row on the screen.

Triangle-based code folding in inferior because:

  • It relies on using a mouse to click the triangle. It is an inefficient way to work with the code. It should be triggered by a strategically-placed keyboard key press.

  • It assumes that the code is clean, and there is only one opening tag on each line. When there are multiple opening tags on the same line, Dreamweaver assigns the triangle only to the first opening tag. Then it is not possible to collapse other tags on the same line. In contrast, Collapse Full Tag can be easily used anywhere, even on the minified code.

  • It assumes that you will always want to collapse tags starting from the opening tag. It is not possible to collapse the tag clicking on its closing tag. From practice, there is 5050 probability that I will collapse the tag starting with the closing tag. Actually, one of the uses of Collapse Full Tag was to find the opening tag.

TL;DR

  • GOOD: New Code Linting feature. BAD: You can’t choose linters (like in Atom), and this feature is reliant on row numbers being turned on. Turning off the row numbers turns off the bar that houses the error notifications.

  • GOOD: Emmet is now native and expands clicking TAB key. BAD: You can’t customize the tags and add additional attributes, what means snippet-based workflow is more efficient for Email Development.

  • UGLY: Collapse Full Tag was removed in Dreamweaver CC 2015 edition. The substitute relies on you clicking triangles to fold the code and works on the opening tag only.

  • Personally, I’m not going to use DW 2015 because of missing Collapse Full Tag.

Conclusion

Counting points, Code Linting is +1 point in favor to switch to DW 2015. Emmet is worthless when uncustomized for Email Development, so it’s 0 points. Missing Collapse Full Tag is -1 point. Result: zero points — no reason so upgrade to Dreamweaver 2015.

Currently, the Dreamweaver 2014 or previous versions are the best for email developers. Don’t waste time with Dreamweaver 2015 to code emails.