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:
- 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).
- 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).
- 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 This email address is being protected from spambots. You need JavaScript enabled to view it.:adobe/brackets-app.git
cd brackets-app
git clone This email address is being protected from spambots. You need JavaScript enabled to view it.: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.
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 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.
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.
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.
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).
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.
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.
Jure Stern is a Freelance Front-end Web Developer from Slovenia. He worked at a startup in Canada and is now living his dream of being a freelancer. He's working with clients and agancies from UK and around the world.