Jure Stern Design & Development

737 words
2 min 27 sec

Adobe Brackets - an open source code editor written in HTML, CSS and JavaScript

Published on 02 Jul 2012 Comments

Adobe's new open source project Brackets is recently getting a lot of attention. They made a great move to go open source and ask the community to help shape the project. That's also a reason why everything is hosted on GitHub, where you can fork and contribute.

Features that will help you code

The project is still in beta, but there are already some useful features that make writing code more pleasant. Brackets is different from other code editors in the idea that:

  1. Tools shouldn't get in your way (The UI is very clean and uncluttered, you get focused on the code, something similar that TextMate does, which I like).
  2. Brackets syncs with your browser (Live Development shows you the changes on the fly without having to refresh the browser. For now it connects only to Google Chrome).
  3. Contribute to the project (Because the project is open source and hosted on GitHub anyone can extend it and make it better).

Installing Brackets is easy

Installing the beta version is very easy. You can download a zip package with the required files, or you can pull the code from GitHub and have the latest changes included.

$ git clone git@github.com:adobe/brackets-app.git
$ cd brackets-app
$ git clone git@github.com:adobe/brackets.git
$ cd brackets
$ git submodule update --init --recursive

Running Brackets on mac or windows

After the installation you are presented with two folders (in the brackets-app/bin), mac and win. Depending on the operating system go into the folder and start the app. After starting the app you are presented with a clean UI, with a left sidebar and main window for the code.

Language Overrides
Joomla language override interface

The interface

When starting the app, you will see in the left sidebar files and folders that make the actual app itself. Because the whole app is created in HTML, CSS and JavaScript you can make your own changes. Opening a project is easy, Go to the File menu and choose Open Folder. Select the folder and click Open. On the left you get a tree of files and folders. The files that you open will be shown at the top.

The file that is currently open
Currently opened index.html file in Brackets

The editor has the essential features, tab indenting, find & replace, comment lines, find, go to line, increase font sizeā€¦ These are all great and certainly a good start for an app that is still in beta mode. But there are some hiccups, when you use Find in files you can't drag the Search Results window to the top.

Search Results window
You can not resize the Search Result window

JSLint

Another great feature is using JSLint to check your JavaScript code and detect errors. If there is a problem it returns a message describing the problem and where it's located.

Using JSLint for JavaScript
You can use JSLint for detecting error in JavaScript

Quick Open

Quick Open is also very useful. It enables you to quickly search for files in you directory. It's a great option if you want to quickly open a file.

Quickly open files in Brackets
With Quick Open you can search and open files

Quick Edit

Quick Edit is a great feature and enables you to quickly jump into the CSS file right inside your html code window. It also selects the class or ID that you choose in the HTML file and show the rules applied to that class or ID. You can then quickly edit the CSS. For now Quick Edit only works with uncompressed CSS files (less and sass users will have to wait).

Quick Edit in Brackets
Quick Edit enables you to quickly jump to CSS code and edit it

Live Development

If using this feature, your code stays in sync with the browser. That means that every time you change the code, Brackets pushes the code to the browser without the need to refresh. I think this is one of the most useful features and will help with quicker web development. For now it only works with Google Chrome and HTML/CSS files.

We enable the feature with a click on the lightning icon on the top right. If everything went ok, a window opens in our browser and the icon turns yellow.

Live Development in Brackets
Live development refreshes your browser automatically upon changing the code.

Conclusion

Brackets surely has some new awesome features. Because it is open source it's totally free to use and anybody can contribute to the development. There are already some extensions written and this is only the beginning.

For now I will stick with TextMate, because Brackets is still in beta mode. When they implement support for Live Development and Quick Edit of less files I might jump over. All in all I think it's a great project that will grow and maybe amaze us in the future.

About the Author

A picture of Jure Stern

Jure Stern is a Freelance Web Designer & Developer from Slovenia. He worked at a startup in Canada and is now living his dream of being a freelancer.

comments powered by Disqus