Tuesday, 18 March 2014

Adobe Brackets - Code Editor for the Web with Live Preview and Quick Edit

Adobe has released the brackets with a very interesting code editor for web developers (html developers) as open source. Brackets is written entirely in HTML, CSS and Javascript and thereby extended with Web technology, offers native but interesting features such as a live preview in the browser and Quick Edit.
With the brackets open source project Adobe wants to initiate the development of a new generation of the code editor. The idea: Web developers are best to develop a code editor for html developers. And so the bracket has been completely implemented with HTML, CSS and Javascript and released under the liberal MIT license on Github. Who opens brackets for the first time, looking directly at its source code, and also Adobe developed the brackets code directly in brackets.

Adobe Brackets seemingly simple editor. It offers some features that are very handy especially for html developers, including a live preview and the ability to edit CSS and Javascript directly in the HTML code.

Because brackets was built with web technology, the code editor runs practically everywhere, but first, Adobe focused on a desktop application. In addition, but a version is planned, which runs completely in the browser and Adobe has already ideas on how tablets with brackets to the development environment could be.

Only you and your code

To make the Adobe brackets from the start attractive, Adobe has come up with two basic functions to greatly simplify the life of html developers (web developers). They fit into the overall design idea behind a bracket. Accordingly, the editor should give up and switch menus and limited to the representation of the code.

Quick Edit

Web projects usually consist of multiple files, but which are linked together. Rather than display a tab for each file, so that between them must be moved back and jumped ago, Adobe brackets provides a feature called Quick Edit, which is called with the key combination Ctrl + e or Cmd + e. Brackets appear then. For example, directly below the currently selected element for relevant CSS code from another file. Brackets automatically selects only the CSS classes that are applied to this item in the browser and can be changed so directly, without having to leave the HTML code and needs to be changed to the CSS file.

Adobe Brackets - Code Editor for the Web with Live Preview and Quick Edit

This works well with JavaScript: If a Javascript function is selected and Quick Edit is opened, open brackets an inline editor with which the code of the JavaScript function can be viewed and changed. Both are already working in the designated as Sprint 10 Release of brackets that can be downloaded from Github for Windows and Mac OS X.

In the future, be incorporated by Quick Edit on the inline editor, other tools. Specifically, it is about visual tools such as color selection or design of a gradient. In addition, could be displayed in this way directly related documentation. Adobe hopes this is that independent developers are more in-line tools available and refers to the existing code for orientation.

Real -time preview in browser

Another core idea who realized with Adobe brackets, Adobe's developer is a live preview in the browser; instead of changing code to switch from the editor to the browser and there to reload the page, brackets ensures that changes automatically and directly in browser appear.

These brackets can establish a live connection to the locally installed browser with activated “Live File Preview" Show changes to the CSS code in real time even when typing in the browser, without having to be stored in between.

Currently, the live preview only works on Google Chrome, but Adobe hopes to support other browser makers to make it possible there as well. The live editing of HTML and Javascript but it has been so far implemented only in the form of a prototype and is not yet functioning in the current version.

JavaScript code is otherwise automatically checked with JSLint and its instructions shown below the code.

Adobe asks for help

There is still much to do while Adobe is now hoping for help from the outside. These Adobe brackets has already released in an early version as open source. The Github repository has been since 1 Opened in May 2012 and since that time accepted Adobe also pull request. In the issue list on github some entries also have been marked as “starter bow". The Adobe developers consider them to be good entry points in the brackets code.

In addition, the complete backlog was released with all the ideas on Trello; Adobe has collected for brackets so far. For beginners, here are suitable tasks as a “starter feature" marked.


Not all ideas for brackets need to be integrated directly into the editor. An extension API provides the ability to the editor to add additional functionality that can be developed independently of brackets. So already extensions that integrate among others, the documentation from the Mozilla Developer Network and JSHint and CSSLint emerged.

You can download Adobe Brackets from GITHUB.

No comments:

Post a Comment