13 REASONS TO USE OF SUBLIME TEXT OVER DREAMWEAVER
17 MARCH, 2014 BY TOM ELLIOTT
I started writing this post over a year ago but back then it was entitled something along the lines of ‘Reasons why I use Dreamweaver over code editors’. This was biased, as I hadn’t properly explored other code editors like Coda, Sublime Text or Notepad++. So, wanting to write an objective post from a web developers point of view, and because I had heard many good things about it, I setup Sublime Text 2 and dove straight in. I’m glad I did because it quickly became obvious that my presumed reasons for Dreamweaver’s superiority were just wrong.
We are all creatures of habit to a greater or lesser degree and when we develop workflows to help make our lives easier, we can get entrenched in the view that these honed practices are superior. It’s not our fault, confirmation bias is supposedly programmed in our DNA. Even so, it’s healthy to try and keep questioning and challenging ourselves, especially in the fast moving web industry.
So now that I have been using Sublime Text (V2) code editor for over a year, I feel I can approach this subject matter much more objectively. This isn’t a Dreamweaver bashing post and nor do I want to sound all preacher-like. After all, Dreamweaver had served me well for the best part of a decade… right back to the days it was called Ultradev and owned by MacroMedia (I bet few remember that!).
Enough preamble! Onto my top reasons why I like to use Sublime Text instead of Dreamweaver and why I think other web developers should give it a try.
1. KEY STROKES
One of the things I used to love about Dreamweaver was the way I could just drag and drop assets, an image for example, direct into code view and voilà ! I have a fully formed IMG tag complete with dimensions and URL.
I had this notion that code editors meant you had to type most of this stuff out longhand but I was wrong. Things like fuzzy search, tag completion and plugins (more on all this later) are optimised to reduce key strokes and our reliance on the mouse.
Take a basic ‘copy’ command for example. We all know (I hope!) the shortcut keys to copy something in any program. It’s two keystrokes and done in a single movement. The mouse equivalent has four separate movements: 1) Move the mouse to ‘Edit’, 2) Click ‘Edit’ 3) Move the mouse to ‘Copy’ and finally (after all that work!) click ‘Copy’.
It sounds pendantic I know, but any repetition of tasks that can be easily done through keystrokes is going to save us a lot of time vs using the mouse, especially when we consider how often we may use these commands throughout the day. This is one of the biggest advantages of Sublime Text over Dreamweaver… the program feels like it has been built around the developer and engineered to reduce keystrokes and mouse reliance.
2. MULTIPLE CURSORS
One of Sublimes great features that Dreamweaver doesn’t have is multiple cursors. This is great for making multiple edits or inserts in your code at the same time. For example:
- Highlighting text and using
Cntrl+Dwill let you select and change other matching occurrences of that text. Cntrl + clickwill place multiple cursors at specific spots- Holding down the scroll wheel will let you highlight a block of code, or insert a column of cursors at the same indent position (shown in the image below).
Cntrl + Alt + Wwill insert an opening and closing tag, allowing you to edit both the opening and closing tag values at once.
Multiple cursors in Sublime Text
Cmd instead of Cntrl3. SHORTCUTS
There are hundreds of useful shortcuts in Sublime Text for commands that don’t exist in Dreamweaver. Shortcuts for things like tag wrapping, line duplication and bracket selection to name just a few.
Even after a year, I’m still discovering new shortcuts that help make me a more efficient coder and if a command doesn’t have a key binding, it’s easy to assign one.
4. FUZZY SEARCH
This is another great advantage Sublime Text has over Dreamweaver. Pretty much everything is based around ‘fuzzy’ searching. A fuzzy search means you only need to enter a few key characters and Sublime Text will try and match these with a list of what it thinks are the most relevant commands.
For example, in the command palette, typing ‘IP’ will bring up the ‘Install Package’ command. In CSS, typing ‘bco’ will bring up the ‘background-color’ declaration.
Fuzzy searching in Sublime Text Command Palette
5. CODE PREVIEW
One Sublime feature that can be pretty useful is the condensed preview of your code layout, especially for large pages. This allows you to quickly view and select areas of your code based on its overall shape and structure.
Image showing Sublime’s code preview view on the right
6. BRACKET AND DIV HIGHLIGHTING
Ever find yourself wading through big chunks of code in Dreamweaver trying to locate that closing div or bracket? This is a problem easily avoided in Sublime because of the way it highlights opening and closing brackets, divs and other tags.
Even if you can’t see the closing tag,
Cntrl + M will let you skip to it.7. BOOKMARKING
Bookmarking is another one of those great features that you don’t know you’re missing out on until you start using it. While there are plenty of good ways in Sublime to skip to specific areas of code (such as got to line number
Cntrl + G or go to next bracket Cntrl + M), bookmarking allows you to set specific way points for even faster access.
Using the command
Cntrl + F2 sets a bookmark and F2 will skip through each bookmark specified.8. PLUGIN COMMUNITY
Sublime Text has a huge and active plugin community and with thousands of plugins available, any features you may miss from other text editors are likely to exist in the Sublime plugin repository.
The AutoFileName plugin for example allows you to quickly insert the ‘src’ of an img tag, or insert the file path in a stylesheet link with just a few key strokes.
Furthermore, the vast majority of plugins are open source and can be installed in a matter of seconds through the Sublime Package Manager. Conversely, Dreamweaver plugins are largely paid for and have to be installed via the separate extension manager program.
Checkout my ‘Top Sublime Text plugins‘ article for a better idea of some great plugins available.
9. CONFIGURABILITY.
So many aspects of Sublime Text can be configured to levels not available through Dreamweaver.
You can install custom themes to change the GUI and code colours for example. Plugins and key bindings allow you to improve your coding process and the splitting code editor window allows you to work on different files side by side (
Alt + Shift + Number).
Splitting the code view into 2 different windows
10. SUBLIME REQUIRES LESS RESOURCES
Firing up task manager, I see Sublime Text takes up about 40MB of memory vs over 100MB in Dreamweaver. This is hardly surprising as Dreamweaver comes loaded with all the GUI and other tools that allows for a more drag and drop approach to web development. For most, this won’t be an issue but it does mean Sublime should run smoother on older machines.
11. LIGHTNING FAST LOADING
Sublime Text fires up in less than a second. Dreamweaver however, for the reasons mentioned in the previous point, takes at least 12 seconds on my machine, making it feel heavy and cumbersome.
12. BETTER STABILITY
I’ve been using Sublime for over a year and can’t remember a single crash in that time. Dreamweaver on the other hand, in various versions, seems to be plagued with JavaScript errors and frequent freezes.
13. PRICING.
If reasons 1-12 was not enough to convince you to try switching Dreamweaver for Sublime Text, then perhaps the price tag will. A single license for Sublime Text will set you back a mere $70.. and you can trial it indefinitely for free. Dreamweaver though will set you back nearly $400 for the full CS6 version.
ADVANTAGES OF DREAMWEAVER OVER SUBLIME?
Like I said before, this isn’t a Dreamweaver bashing article. In fact I still occasionally fire up Dreamweaver from time to time when creating HTML emails as I find it easier to assemble more complex, nested table based layouts, which can be otherwise quite time consuming to manually code.
If you’re more of a designer and less familiar or interested in getting directly involved with code then Dreamweaver might be a better tool for you. Things like initial document setup, various UI elements and Dreamweaver’s drag and drop approach in design view are engineered to help website creation without even touching a line of code. This is where Dreamweaver’s main strengths lie.
I’m sure there’s plenty more reasons why Sublime Text can be a better tool than Dreamweaver for web developers (or vice versa!) so feel free to share your thoughts in the comments below 🙂
Comments
Post a Comment