Brackets: An Open Source Code Editor For The Web
On Wednesday, 7/24 I had the chance to sit in on a great talk by Adam Lehman (@adrocknaphobia), Sr. Product Manager at Adobe Systems Inc at OSCON 2013. The talk was named "Brackets: An Open Source Code Editor For The Web", and it covered an introduction to the code editing software, as well as an overview on the benefits of being an open source editor.
Some of Adam's key points right off the bat on why Brackets was a bit different than most code editors out there:
- Light weight text editor rather than big IDE, middle ground, simplicty but powerful
- Community driven to be different
- Optimized for web design and developers
- A sandbox where the web can experiment with new ideas in web tooling
Below is a video I found of Adam's talk from another venue, but with very similar content to the one he gave at OSCON:
The design and workflow in Brackets tries to let you stay all in one place as much as possible, without the need for continually switching to your included files to adjust settings.
Ctrl - E - Inline editor
As you can see from the screenshot below, I was typing up this article in Brackets. You should notice two things that I've highlighted and drawn arrows for. In the main code editor window with Brackets opening the file index.htm, I'm on line 12, and that paragraph element has a class of intro assigned to it. Instead of having to pull open my style.css file seperately and then hunt down the corresponding CSS class, I simply hit Ctrl-E to open the Inline Editor.
I did the same thing at line 14 of my main index.htm file. Now I can easily see that the <p> paragraph tags are getting a margin: 10px; applied to them from line 9 of my style.css file, and the class intro is setting margin: 25px;
I can adjust these CSS values on the fly and see the changes instantly when using the Live Preview feature of Brackets (currently only supported with the Google Chrome browser). Then when I've made my inline edits to my liking, when I hit save it goes and updates the actual style.css file for me.
Ctrl - K - Quick Docs
Another cool feature of Brackets is the ability to highlight CSS rules and then hitting Ctrl-K to open up the Quick Docs powered by docs.WebPlatform.org. You can see in the screenshot I took I was checking out the documentation for the margin rule.
The stack that Brackets is built upon is all open source web technologies:
The future of Brackets
Brackets is currently released in what are called Sprints, these are basically concentrated periods of development on typically a 2 and a half week cycle. So there are always new features and improvements being added to Brackets.
One goal of Brackets is that by the end of 2013 version 1.0 will be released to the public, and that full HTML live editing should be supported by then as well as being embeddable into common CMS web applications. Just a few days ago a preview version of Brackets on Linux just became available which shows Adobe's dedication to this project.
We value your feedback!
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!