Summary: this entry is a review of the best HTML editor in the world. It is also a bash on the text editor used by the creator of Rails. It also avoids all Java vs. Ruby/Rails hoopla, and instead focusses on HTML editing differences when using different tools. I hope that perhaps this might help at least some folks finally get over the Java vs Rails war and instead realize there is merit to a lot of the sides out there. For my latest thoughts on Rails itself, see here.
Ever since I was told that I was warming up to the importance of productivity in response to an entry about the importance of tools, I’ve been keeping an eye out on tools that greatly make me more efficient. Some do the simplest things: Adium, for example, automatically aliases buddies by looking through my Address Book.
Others, however, are more complex. Today, I want to compare the best tool I have in my toolbox, IntelliJ IDEA, to the equivalent tool used by the Rails crew that use OS X, TextMate. But rather than comparing Java vs. Ruby, which always leads to some ridiculous debate (which, by the way, is exactly what the Rails guys want), I’m going to focus on the HTML editing capabilities of both tools. What we’ll find is that productivity hides in many places – not just in some silly framework.
Considering that all both Rails and Struts/WebWork/Wicket/RIFE/Tapestry/JSF/etc all end up having to edit a lot of HTML, perhaps that is a good place to look for key improvements in productivity. My application as of today, in terms lines of code, is made up of 70% Java and 30% HTML, so this seems like a pretty large chunk of work that we’d want to make sure we optimize.
About the tools
IDEA is a complete Java editor. It is written in Java, is a total memory hog, and does everything from Java GUI editing to debugging to refactoring. It also happens to include an HTML editor. IDEA costs roughly $500 and is free for open source developers.
TextMate is a general purpose text editor with built in syntax highlighting for a ton of languages, including HTML and JSP. It is quick to start up and has a very responsive UI. TextMate costs roughly $50.
Side by side comparison
In comparing the two tools, I’m going to look at the following aspects for HTML editing:
- CSS editing
- Error reporting
- Code formatting
Let’s start off by looking at the CSS support, including error reporting for mistakes in your CSS:
A few things to note here:
- Notice how “button.jpeg” is highlighted as red – that indicates that while the directory “../images” exists, the image does not. Very useful!
- The run underline just after “background” indicates that the CSS is not currently well-formed.
- Pressing ctrl-space brings up a list of valid choices. The values for those choices are also made available through autocomplete. That includes color pickers and lists of options, such as “left”, “justify”, and “center”.
- Note shown, but worth mentioning: you can see the W3C spec on a particular CSS attribute by pressing the same key combination you would use to see the JavaDocs of Java code.
TextMate offers… just about nothing. The CSS is syntax highlighted, but that’s about it. My image location typo is not pointed out, nor is the invalid CSS.
Again, note the code completion support. See how IDEA recognizes that the window object has certain fields available and makes them easily available. IDEA also has basic refactoring support for renaming variables and functions. You can also “goto” a function definition in external files, such as prototype.js, by simply pressing ctrl-b.
Overall, it isn’t nearly as good as the Java support, but it is certainly better than what TextMate offers:
Again, all TextMate offers is syntax highlighting. Wait – is that an error in my CSS definition I see there? When I first saw that red underline, I was hoping that perhaps TextMate saw a problem. I was sadly let down when I realize that it was merely telling me that the “word” “css/main.css” is a typo. Gee, thanks TextMate – you’re really saving me a lot of time by highlighting non-words as spelling errors. I appreciate the effort, but no thanks.
Let’s look at code formatting now. This includes features like auto-indent, intelligent indent rules, and auto-formatting. Sadly, there isn’t much of a contest here either, judging by the options tab for text editing.
A few things are worth pointing out:
- As an HTML writer, I often like to indent my HTML, except in a few cases where it causes too much unnecessary whitespace. Why, look at that: IDEA is configured not to indent the children of the html and body tags, as well as any other tag that has more than 100 lines.
- IDEA is also configured to recognize that some tags should have new lines before them (p, form, h1, h2, etc), but others should not, such as br.
- Not shown here, but with these settings you can auto-format your entire HTML page and IDEA will follow all the rules here, including wrapping your text at the number of columns of your choosing.
- Also not shown here, but IDEA has a “surround with” feature in Java (surround with try/catch, if/else, etc) that can be used for surrounding blocks with a tag. Very handy, just press ctrl-alt-t.
- Also not shown here, but when you open a tag IDEA will automatically write out the closing tag. Or, if you have an open tag laying around, IDEA’s auto-complete for the closing tag will prompt you for the valid tags you can close.
All of this is very nice. More so, IDEA plays very well with scripting languages, like JSP. That means that these features I outlined don’t get in the way of dynamic HTML - IDEA is almost always aware of those situations and will step away such that you aren’t presented with “false positives” in error reporting. Let’s look at the code formatting features TextMate offers.
Wow. It completes character pairs. Amazing.
Winner: IDEA, by a mile.
Now let’s look at refactoring support. Suppose I need to rename an HTML file or CSS file. A good IDE will rename all the references to it. Similarly, if a reference is broken it should be identified and prompt you to fix it.
Notice that opensource.html doesn’t exist, so IDEA highlights it as yellow (a warning) and gives me the option to create the file right there. Also, note that all errors (red underline) and warnings (yellow highlight) can jumped to by pressing F2 on your keyboard. This makes it really easy to quickly navigate to problems using only your keyboard. What does TextMate offer?
I prefer using IDEA for HTML editing – even when my project has zero Java or any other programming involved. I tried out TextMate, SubEthaEdit, and other text editors and none of them had 1/10th of the power offered by IDEA’s HTML editor. Clearly IDEA is the best.
But the point of this article isn’t actually to have some inane debate about Java vs Rails or IDEA vs TextMate. It is to point out that these debates are absolutely retarded and are merely designed to hype up a bunch of mindless followers. Tool X may do A, B, and C better than tool Y, but tool Y might very well do D, E, and F better. Rather, disguised in this ridiculously slanted review is, I hope, a real review of some awesome features that I can’t go without.
I hope that both the Java and Ruby communities can stop saying brainless statements like “Ruby is not Enterprise ready” or “I’m glad you’re warming up to the idea of productivity” (as if I lived in some unproductive cave for the last 5 years) and start showing in very specific detail why Tool X makes my life so much better. Perhaps once we can do that, we can finally take the best of all these tools and come up with something that really is better than [fill in the blank].