User:Shashwath Kumar/Brackets (text editor)

Brackets

Developer(s)	Adobe Systems
Initial release	November 4, 2014 (2014-11-04)
Stable release	1.14.1 (5 December 2019 (2019-12-05)) [±]
Preview release	1.14 preview 1 (April 15, 2019 (2019-04-15)) [±]
Written in	HTML, CSS and JavaScript
Operating system	Mac, Windows and Linux
Size	~40 MB
Available in	38 languages
Type	Text editor
License	MIT License
Website	brackets.io

Brackets is a free open-source editor written in HTML, CSS, and JavaScript with a primary focus on Web Development. It was created by Adobe Systems, licensed under the MIT License, and is currently maintained on GitHub. Brackets is available for cross-platform download on Mac, Windows, and Linux.

On November 4, 2014, Adobe announced the 1.0 release of Brackets. The update introduced new features such as custom shortcut key combinations and more accurate JavaScript hinting. Brackets has a major focus on development in JavaScript, CSS and HTML. With release of version 1.0 Adobe announced a feature which extracts design information from a PSD file for convenience of coding in CSS. The latest version release of Brackets is 1.4.0 with new features like instant search in files and easier preferences editing.

History

Adobe started the development of a software for web development by the name Edge Code. This was later transformed into Adobe Brackets. With the release of Brackets 1.0 Adobe announced that the development of an open source software for web development was ready and was not an experimental project anymore. Brackets contains over 282 community contributors and more than 400 requests for bug fixes and new features. Every version of Brackets have over 100,000 downloads and stands to be 16th most popular project on GitHub as on January 16th, 2015. The other more popular projects are popular frameworks and programming languages like Ruby and jQuery.

Brackets project at GitHub has had 173 branches, 83 releases and 16506 commits as on 14th September, 2015. The code is available for free for anyone who wishes to improve its features. A developer can alter features on Brackets and personalize it for one's own convenience by forking the software code.

Features

Brackets provides unique features like:

• Quick Edit
• Quick Docs
• Live Preview
• LESS support
• Theseus integration
• Extensibility

General features supported by Brackets include:

• Command line integration
• Multiple Selection(multiple cursors)
• Default and customizable indentations and tabs
• Quick Open(Ctrl/Cmd+Shift+O)
• Quick search definition
• Predictive text
• Code folding
• Instant search in file (shows results as user types)
• Smart code hinting
• Brackets health report
• Auto generation of Closing tags
• Multiple extensions
• Enable/Disable Extensions separately
• Easier preferences editing
• Suggest Feature option
• Open source

Quick Edit

Quick edit enables inline editing of CSS, Color Property and JavaScript classes/functions called from a parent file. This allows developers to work on multiple files without switching tabs. The keyboard shortcut for Windows OS is Ctrl+E while it is Cmd +E for Mac OS. This built-in feature can be applied to multiple functions or properties simultaneously and all updates are applied directly to the file associated with the changed elements.

HTML File

Quick edit in HTML file

Applying quick edit to HTML elements displays all corresponding CSS properties in a box beneath the selected element. Users can choose to create new CSS rules directly within the editor and edit a tag's CSS properties inline without leaving the context of the HTML file. When there are multiple rules defined for a single HTML elements, clicking on quick edit shows all rules and user can make inline changes to any or all of them without switching context. User can also create rule via quick edit if there is no existing rule available for a particular HTML tag and corresponding CSS file gets updated with the rule automatically. If there is no CSS file existing inline, on clicking quick edit button user gets an option to create a new CSS rule. Pressing Ctrl/Cmd+E or hitting Esc button closes the inline edit window. Hitting escape button outside the context of CSS will close all inline edits visible on page.

JavaScript File

On JavaScript functions, quick edit performs the same procedure as with HTML elements but displays the selected function’s body within the drop down box. All updates to the function’s body will propagate and update directly within the corresponding JavaScript file.

Color picker for CSS

Files containing Hex or RGB color properties

For color properties, quick edit returns an inline color picker for previewing and color adjustment functionality. User can use this feature by going to CSS file and clicking quick edit after placing cursor on any color. This opens up color picker from where user can select any color and can also choose its display format, i.e. RGB or Hex format or HSL fomrat. Limitation to this is that user can't open this color picker directly from HTML file as clicking on quick edit will show CSS rule or hide it back. User can also hover mouse over a color code in HTML/CSS and color will be displayed next to cursor.

Quick Docs

Quick docs

This feature allows user to see documentation details of property or values in CSS files. User can right click on any attribute and select quick docs to find details of the attribute. The keyboard shortcut for Windows OS is Ctrl+K while it is Cmd+K for Mac OS. Related to quick edit, quick docs is a feature used to display relevant documentation inline. In a CSS/LESS/SCSS file, quick docs will open inline documentation for any selected property. Quick Docs can also be applied to multiple properties simultaneously.

Live Preview

When one clicks the respective code snippet in CSS/HTML the web browser immediately shows the output appurtenant to that code snippet in web browser. This feature is termed as Live Highlight. Also, the feature Live Preview in Brackets pushes code edits instantly to the browser to present an updated webpage as the developers modify the code. Brackets contain a Node.js backend which predicts what the code does as the developer types the code.

Live preview of code change on browser

Two scenarios to Live Preview:

No Back End Logic:

Using Live Preview, Brackets will launch the chosen HTML file in Google Chrome by supplying static content from Brackets built-in server. This procedure does not require any back end logic to support viewing changes to the HTML file.

Back End Logic:

With back end logic, Brackets will direct Google Chrome to a provided project URL running on a separate server but will disable support for HTML-related features. As a result, the browser will not be able to update any HTML, PHP, etc. files in real time and element highlighting will also be disabled for these files. Only edits and element highlighting related to CSS files will be reflected in real time. All non-CSS file updates will be auto-reloaded instead. These limitations exist because providing live editing functionality for HTML files requires injecting annotations into the HTML code before the code is loaded into the browser. These injections are normally handled by Brackets built-in server but are non-existent when projects make use of separate personal servers.

Functionality

1. HTML & CSS real time updates (without reloading)
2. Element Highlighting: Elements selected in HTML and CSS files are highlighted within the browser.

Live preview limitations

• Currently only works with desktop Google Chrome (not open-source Chromium), as the target browser.
• Opening developer tools in Google Chrome will close all live development connections.
• All files to be viewed must be inside a currently open folder in Brackets.
• Only one HTML file can be previewed at a time.
• Real time updates are paused when syntactically invalid HTML is encountered. Brackets will resume pushing changes to the browser when the syntax is corrected.

Split View

This feature allows user to splits main view into 2 parts. User can split view either vertically or horizontally as per one's own convenience, thus allowing user to work on 2 files at same time. Thus developer can simultaneously work on two different files of two different types. Features such like Live preview, Quick edit works in both views. Currently this feature is limited such that the same file cannot be opened simultaneously in both views.

Multiple File Format Support

Brackets supports codes from multiple file types from C++, C, VBScript to java, JavaScript, HTML, Python, Perl and Ruby. The complete list comprises over 38 file types. This gives the user flexibility to work on various files of a project simultaneously.

Brackets supports a feature called "PSD lens" which helps to smoothly extract each of pictures, logos and design styles from PSD file without opening Photoshop to check for them. By calling this feature a preview Adobe conveys that there is much work ahead before this feature can be perfected. This feature brought in positive reviews from developers but many issues were reported during the initial stages of the feature release. The problem was later solved using an extension.

Theseus Integration

Theseus is an open-source JavaScript debugger for Brackets that enables developers to set break points, step through code, and inspect the value of variables in real time. Theseus can be used to debug any extension in Brackets and is easily installed using the built-in extension manager. Theseus also works in conjunction with Live Preview through a proxy server that records a function and its associated values every time the function is called.

Functionality

• Displays number of times a function is called next to the function’s definition.
• Logs all arguments received, values returned, and exceptions thrown by a function call within Brackets.

Extensions

Being built with HTML, CSS, and JavaScript, developers can provide additional functionality to Brackets by creating extensions. These extensions can be found and installed using the built-in extension manager. Extensions can also be found online via Brackets Extension Registry.

See also

• Comparison of HTML editors

External links

• Official website
• Brackets on GitHub
• Brackets's channel on YouTube
• List of Brackets extensions
• Brackets Developer Forum

Category:Free HTML editors Category:Portable software Category:Automated WYSIWYG editors Category:Adobe software