Adobe releases Brackets 1.0 for elegant front-end coding

If you’re a front-end coder, you may well have been stunned yesterday, by Adobe’s latest release: Brackets. Stunned that is, because you’ve probably been using it for a year or more.

The version you had been using was the beta release — a beta release that proved so popular many developers already use Brackets as their primary code editor. One of the most popular beta test versions of a piece of software in the history of the Web, Brackets is a free, open source application substantially supported by Adobe. The latest release is the first full version and is packed with some great new features.

Built in HTML, CSS, and JavaScript, Brackets is the only text editor that I’m aware of that actively focuses on those same languages. There are countless editors on the market, but with support for PHP, C++, Python, and dozens of other technologies they can’t target the same workflow as Brackets. Brackets focusses on the front-end only, freeing it to deliver amazing features like inline editing; where CSS code associated with an HTML element can be edited just by hovering over it.

If for some reason you haven’t already tried Brackets, download it and try out the Live Preview feature — the first time I used it my jaw hit the desk. If you’re a fan of Less, or Sass, you’ll also love the preprocessor support.

The value of Brackets is that it’s a joy to use. And because it’s a joy to use it has a committed community that not only contributes to its source code, but releases some incredible extensions that are free to install.

The one downside is that the option to open and edit a file live on a server isn’t available — some extensions offer ftp support, but not live editing — so if that’s part of your workflow, you’ll have to hang on to your current editor (something you’ll be doing in any case for the likes of .htaccess files).

Unfortunately, all may not be rosy in the Brackets-lover’s world, because as well as Brackets 1.0, Adobe have released Extract for Brackets. Extract is a free extension that allows you to pull design data (colors, fonts, and so on) out of your PSD and straight into Brackets. Except of course that you don’t have a PSD, because you’ve embraced the Brackets workflow and you’re designing in the browser.

Adobe’s blinkered persistence in tying everything into Photoshop does as much damage to their flagship product as it does to the rest of the product range. Shackling an elegant coding solution to a bloated and increasingly dated bitmap editor, seemingly serves little purpose. However, Extract is currently optional; I sincerely hope it stays that way.

If you code the front-end of websites, or would like to start, Brackets is one of the best options available. The fact that it’s free, and runs on Mac, Windows, and Linux should be enough to make builders of commercial code editors very worried indeed.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.