Ryan Boudreaux introduces a new open source code editor, still in its early stages, called Brackets.
The driving force of Brackets is that it is for the web and by the web, meaning that as a software application, it is built using the same technologies that build the web. Their catch phrase, "If you can code in Brackets, you can code on Brackets." Brackets is a fully open-source and community project where developers contribute to the build, and if you are interested in influencing the direction of the project, any interested developers are welcome to join Brackets Dev Google Group to get on the build list. Since Brackets is still young, I would not recommend it for your routine coding tasks; however, if you like cutting edge applications you might enjoy examining some of the clever and creative features.
Test drive BracketsThe initial versions became available in May 2012; the current milestone downloads are available on GitHub Brackets, and as of this writing, Brackets Sprint 17 in both MAC.dmg (23.9MB) and Windows.msi (21.6MB) versions are dated November 30, 2012, available as zip or tar.gz compressed files. In all, there are sixteen downloads of eleven versions with 24 branches and nineteen tags. The current build is still in its infancy and not deemed a full-featured code editor just yet; it is considered a beta release and ready for early adopters to start playing around with the tool at their own risk. I gave Brackets a test drive myself as displayed in Figure B:
Next, I've added in a header <header> and <hgroup> with an <h1> and <h2> along with a paragraph <p> and some content as shown in the code snippet below:
The Start of Something New!
Get your Game On!
The content goes here...
</article>Another one of the features I like about Brackets is the live preview option which can be selected from one of several ways, either from File, Live Preview (Ctrl+Alt+P), or from the lightning bolt at the top right of the Brackets window, as shown in Figure G and H below.
You can also edit styles with CSS and view the updates on the fly in the browser as well. I've added in an associated CSS file and linked it from the head of the original index.html file; then, I've incorporated a bit of simple styling for the <header>, <article> and <p> elements. The CSS code snippet is displayed below:
}Once you attach a new file such as the styles.css you do need to refresh the browser preview, and from then on your updates are displayed in the preview. As you edit the selected element within the CSS, it becomes highlighted within the live preview as shown in Figure J. As you make an edit in the CSS, the live preview adjusts on the fly.
As you can see, the live preview automatically updates with the new style of 10 pixel padding added to the <article> element. Other options include the ability of adding new styles to the CSS from the Quick Edit, where you can add in other styles for elements without having to jump into the styles file itself.
At this time, Brackets does not have any functionality for self-discovering or installing any extensions, but there is a list of Brackets Extensions on GitHub that several people have built. All you do is select the extension that is useful for your project, download it, and then copy it to the User directory under the Extensions directory in the Brackets installation. With over forty listed, the extensions include the following subjects:
- Code/Text Editing
- Code Generation
- Quick Open Support for PHP
- General Functionality
- Live Development
- Visual Editing
- External Tools
- Linting and Warnings
Once the extension is placed into the extensions directory, go to Menu and click through Help | Show Extensions Folder | User, and then click on the extension you want to include. Typically you will need to close and then restart Brackets for the extension to be installed. Once your extension is installed it will show up at the top menu bar along with its associated menu item options.
This short piece is only a brief overview of the Brackets open source editor, and while it is still in the early stages of development, it is nice to see folks like Adobe opening up an open source development project for public inspection and engagement. Brackets might be too new for some folks, but others are taking it to new levels with development and extensions that are sure to make it one of the blistering open source text editors in 2013 and beyond.