Brackets

When it comes to text editors, I’m a bit fickle. I’ve used just about every one available to me on the Mac platform over the last 10 years. They all have their pros and cons. The ones I generally keep coming back to again and again are TextMate, Coda and Sublime Text.

All three have their strengths…

TextMate 2TextMate: Though most of the TextMate community has moved on to Sublime Text, TextMate still offers a great editor with a wide range of syntax support. It’s a Mac native app and behaves appropriately when interacting with the file system and uses standard Cocoa supported features like drag and drop. Version 2 is still yet to be officially ‘released’ as a finished product (it’s currently in beta after 4 years publicly available as an alpha build). But TextMate is still a competent code editor, and because I’ve used it for so long, I continually return to it every few months. Still, it saddens me that an app that had the potential to rule the roost has fallen by the wayside mainly because of developer apathy. TextMate 2 is open sourced now (although the final product will be a commercial product), and development seems to have picked up over the last couple of years as the project heads towards a

Coda by PanicCoda: Coda has a bit of everything in it (code editor, SQL query tool, reference materials, terminal), yet (and it pains me to say this) it has the weakest editor of the bunch. Version 2.0 (and 2.5 and later versions) make big improvements to the editor, but it still doesn’t compare with Sublime Text or TextMate in this area. It’s also not the leanest of applications, and stability has been an issue, at times (though currently it’s been running rock solid for me for the last couple of months). But, if I’m building HTML/CSS, I find Coda the better tool than the other two editors. Its support for CSS3 features/autocompletion comes in handy in this context.

Sublime TextSublime Text: Sublime Text has risen from an upstart leeching off of TextMate’s awesome bundle architecture to become the 800lb gorilla in the text editor space. It’s a cross platform app, which is either a blessing (if you need to work on Windows or Linux) or a curse (if you value a native file tree and drag and drop features from the Finder). But the power of Sublime lies in its thousands of Packages and it’s 3rd party (but uber easy to install) Package Control system. Think of Sublime Text as a race car body and engine. Now think of Package Control as every other accessory you would want to add to that race car to do what you want it to do.

So over the last couple of years, I’ve flipped and flopped between all three of the above tools depending upon what project I’m working on. But a few months ago I downloaded Brackets.

Brackets is an open source editor built on the power of Node.js. As such, Brackets is built using Javascript/HTML/CSS. So it’s cross platform, but it’s built using the language of the web. It’s highly extensible and new extensions can be written in Javascript. Like Sublime Text, it has a Package (nee Extension) system that allows you to easily tailor the tool to your needs. The community behind Brackets is active and has grown significantly in just the last 6 months that I’ve been following the project.

Brackets by AdobeBeing built on Javascript, I was concerned that performance would be horrible. To put that to a test, I opened a JSON file that was part of the Swimsuit 2015 project I worked on. This file is 6885 lines of code uncompressed and 270kb. All of the editors can open the file alright. However, converting the compressed output to beautified JSON isn’t possible in TextMate (using an iMac Retina 2015 with 32GB of RAM). Sublime Text handles the file just fine. Coda can open it, but it takes a good while to beautify (using the PHP Toolkit plugins ‘JS Tidy’ command).

I was sure Brackets would choke on this file, but Brackets opens it and pretty prints it just as easily as Sublime Text. Score one for the upstart built on web standards.

Other great features of Brackets is split window editing, built in preprocessor support for SASS and LESS, inline editing of CSS (command-E on a highlighted ID or class in your code and Brackets will open the corresponding CSS and allow you to edit in inline in your document).

Brackets - Inline CSS Editing

I find myself using Brackets more and more, and becoming enamored with it’s capabilities. My only complaints are that, like Sublime Text, it is not a native app, and it’s user interface leaves a lot to be desired. There are many Extensions that skin the UI, but I’ve yet to find one that knocks my socks off. Still, as an editor, Brackets is great, open source, free, and extremely flexible and capable.

Update: And after writing this post, I discovered Atom. Atom is built in the style of Brackets – using HTML/CSS and JavaScript running on Node. Atom is open sourced and backed by Github. It also has a large library of extensions and themes. It lacks the Photoshop integration that Brackets offers, but seems to be a very active project with lots of commits. If you like Brackets you should give Atom a look. 

Leave a Reply

Your email address will not be published. Required fields are marked *