OMG BBEdit HTML Code Folding

February 8th, 2007

I’m doing some modest revision to my web site, when I notice one of those stupid HTML glitches where you’re just positive you must have forgotten to close a tag or something. Thanks to the generally forgiving nature of most web browsers, the page looks more or less OK, except that some table column is the wrong width, or there’s a rogue “>” running wild among your product copy.

I know this outs me as the world’s nerdiest sometimes-web-page-editor, but my preferred environment lately for managing my sites has been Xcode. I can easily do global search/replace, configure Safari as an executable, etc. I wrote about this weird behavior of mine specifically with regard to WordPress in a past entry.

But let’s face it. Xcode’s editor was not made for HTML editing. I like it mainly because I’m used to it. I can do my usual coding text manipulation tricks without skipping a beat. But when it comes to finding that unclosed HTML bracket? You can’t cmd-double-click a <tr> tag and expect it to automatically find the matching tag, as you can with brackets and curly braces. (Unless there’s some configuration somewhere? Do tell.)

Then it occurred to me. Wait a minute, I have a text editor on my computer that is allegedly great at editing HTML. In fact, BBEdit practically drove the entire web page editing industry during the early years. I never edited web pages back then, and since I’m trapped in Xcode most of the time, I generally only use BBEdit for comparing changes in files. But why not give it a spin?

I opened up the problematic file in BBEdit and a bright light suddenly descended upon my office. The sound of a choir of singing angels enveloped my senses. Not only does BBEdit rock at editing HTML, but they recently added support for code folding, and of course it works brilliantly and automatically on HTML.

Oh. That is just so beautiful. BBEdit’s organization of my document made it a snap to drill in and spot the errant text. But it also makes me cry because I’ve been waiting so patiently and for so long for code folding in Xcode. I know, I know. Leopard. Of course, even then I doubt it will rock the HTML editing like BBEdit.

6 Responses to “OMG BBEdit HTML Code Folding”

  1. charles Says:

    It is interesting that one of the reason I ended up switching to Textmate over BBEdit ~2 years ago was the fact that it felt so much more like Xcode in several ways, and that I liked this (over time, I also got hooked on other aspects of Textmate). You can organize text files the very same way you do it in Xcode, with a very straightforward “Project” type, and have the same easy search over a whole project as what you get in Xcode. At the time, it also already had code folding, which I have never really used, and is not anymore a selling point. For html editing, Textmate is also probably better than Xcode (the comparison with BBEdit is probably much more subject to debate and is very dependent on your taste). So, in a way, maybe what you had been looking for, for a long time, was TextMate…
    (Please, no flame wars, this is not my point!)

  2. Ryan Ballantyne Says:

    HTML validating is your friend, man. Install a validator plugin to Firefox, and when you view source on a page it will show you all of the errors and where to find them — including missing closing tags.

    I used to use Xcode for web dev too, for the same reasons you do (despite the fact that I’m not very good at Xcode, I liked the project management). However, lately I’ve been using the Eclipse PHP IDE for web development, but that’s mostly because I do all my stuff in PHP. Despite the general clunkyness of Eclipse, the PHP-specific features make it worth my while. And, it has a great HTML editor, with code folding. :)

  3. Ryan Ballantyne Says:

    Oh, and the SVN plugin beats Xcode’s crappy Subversion support hands down. :P

  4. Julian Grey Says:

    I love bbedit, since it came out until this very day, fits in with my workflow and my work habits perfectly.

    As an external editor for any workflow, it rocks. “File Groups” is also a wonderful addition.

  5. jon deal Says:

    TextMate also does code folding. I recently gave my beloved BBEdit the boot in favor of TextMate.

    I loved BBEdit, but TextMate seems to work better for me personally, once you get used to it. Lots of memory muscle and once you get all the keyboard shortcuts drilled into your brain, it’s a delight to use.

  6. Leland Scott Says:

    OMG, wait until you try the code folding in Xcode 3.0! It will rock you right back to Xcode, I’m sure. I used BBEdit for many years and got really sick of its horrible interface and irrational menu organization. I’ve been testing TextMate for months, keep going back to it and trying hard to like it, but it’s just silly in many respects that trip me up. Just as a couple of examples: You can’t rename files in the project list in the standard Cocoa way, instead must use a context menu.You have to go to the Finder if you want to reorganize the project file/folder structure.TextMate has virtually no contextual menu functionality, which is tough for someone who relies on that a lot.The project window has no customizable toolbar, so you can’t easily locate frequently used functions there. TextMate’s tabbed interface becomes unusuable after you open more than will fit in the window, because it lacks good interface feedback on which file you’re working on and its statusTextMate’s code folding for HTML and PHP sucks, actually. For HTML, TextMate won’t recognize code pairs unless they’re indented at the same level. For PHP, it will show the code folding symbols, but won’t actually fold the code unless you fix the indentation.
    There’s also a LOT to like about TextMate, and one of these days I’ll write up all of the pros and cons I’ve discovered while using it.

    On the other hand, I’m brand new to Xcode 3.0, and I’m blown away by this new feature Apple’s calling the code-folding “ribbon.” It’s very hard to describe in words, but imagine that you could see the code blocks as you mouse over the ribbon… they would be highlighted sort of like a “lightbox” effect, with a transparent bounding box displayed as well. The ribbon itself is colored to indicate how deeply nested the given code block is. I’ve tested this in HTML, and it’s quite intelligent… you can screw up the structure of the code completely, and the code ribbon will correctly match the beginning/ending code pairs.

    When you’re working with a complex HTML page structure, this will come in very handy, I imagine. The main problem I’m having in thinking about Xcode for HTML is its lack of a live preview, which TextMate and Smultron both do well. I can open a page as HTML or via the Finder in Safari, but it’s still not as good, since I can’t easily see the code and the preview at the same time.

    Anyway… I found this site as I was investigating whether anyone else has used Xcode for web development work. I tried the latest BBEdit again and was very disappointed to see it’s still the same clunky old thang. It’s definitely got power, but it’s like a 1950′s era high school that’s been added on so many times by so many developers it’s impossible to find your way around. Even when you do, you really wish they’d just tear it down and build a new one from scratch. :-)

Comments are closed.

Follow the Conversation

Stay up-to-date by subscribing to the Comments RSS Feed for this entry.