Brackets (text editor)

Source: Wikipedia, the free encyclopedia.
Brackets
Developer(s)Adobe
Initial release4 November 2014; 9 years ago (2014-11-04)[1]
Stable release
2.1.3[2] Edit this on Wikidata / 31 October 2022
Preview release
2.1.0-prerelease[3] Edit this on Wikidata / 9 May 2022
Repository
Written in
Source code editor
LicenseMIT
Websitebrackets.io

Brackets is a

CSS and JavaScript editing functionality.[6]

On November 4, 2014, Adobe announced the first (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-enabled,

PSD file for convenience of coding in CSS.[7] As of June 28, 2016, the feature is officially discontinued, due to low usage.[8] However, Extract is still available via Photoshop and Dreamweaver, both of which are part of their paid service, Adobe Creative Cloud.[9]
In March 2021, Adobe announced it would end their support for Brackets on September 1, 2021.

The Brackets project was subsequently transferred to become a community-owned and driven project. The latest version release of Brackets is 2.2.1.[10]

History

Adobe first started development of a text editor for web development on Edge Code, which was discontinued as of November 2014.[11] This effort was later transformed into Adobe Brackets. With the release of Brackets 1.0, Adobe announced that the development of an open source application for web development was ready and was not an experimental project any more. Brackets contains contributions by more than 282 community contributors and has more than 400 requests for bug fixes and new features. Every version of Brackets had more than 100,000 downloads, and it was the 16th most popular project on GitHub as of January 16, 2015.[12]

The Brackets repository on GitHub (Bracket repository) currently has 152

MIT license. A developer can alter features on Brackets and personalize it for one's own convenience by forking the software code.[13]

Adobe officially dropped support for Brackets on September 1, 2021 and recommended users migrate to Microsoft's Visual Studio Code.[14] The final official release was version 1.14.2, but a community fork continues to release newer versions.[15][16] In addition to the community continuation fork, Brackets community contributors announced Phoenix on August 30, 2021.[17] Phoenix is a fork of Brackets targeting web browsers, as opposed to being a native application.[18]

Features

Brackets provides several features[19] including:

Quick edit

Quick edit enables inline editing of CSS, Color Property, and JavaScript elements for developers. 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
Applying quick edit to HTML elements will display 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.
JavaScript file
On JavaScript functions, quick edit performs the same procedure as with HTML elements, but it 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.
Files containing
RGB
color properties
For color properties, quick edit will return an inline color picker for previewing and color adjustment functionality.

Live preview

When one clicks the respective code snippet in CSS/HTML the web browser immediately shows the output relating to that code snippet in web browser. This feature is termed as Live Preview, this feature also pushes code edits instantly to the browser to present an updated webpage as the developers modify the code. Brackets contains a Node.js backend that 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
back end logic to support viewing changes to the HTML
file.
Back end
logic
With back end logic, Brackets will direct
annotations into the HTML code before the code is loaded into the browser. These injections are normally handled by Brackets built-in server, but they 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 splits the main view into two parts. Users can split the view either vertically or horizontally according to their own convenience, thus allowing users to work on two files at same time. A developer can simultaneously work on two different files of two different types, two files of the same type, or even two different parts of the same file at the same time. Features such as Live Preview and Quick Edit work 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 more than 38 file types. This gives the user flexibility to work on various files of a project simultaneously.

Brackets supports a feature called "PSD lens" that helps to smoothly extract each of pictures, logos and design styles from

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

Brackets integrates Theseus, an

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.

Extensions

Being built with

Extension
Registry.

See also

References

  1. ^ Stewart, Ryan. "Brackets 1.0 and Extract for Brackets (Preview) Now Available". Brackets Blog. Adobe. Archived from the original on 8 February 2015. Retrieved 15 November 2014.
  2. ^ "Release 2.1.3". 31 October 2022. Retrieved 6 November 2022.
  3. ^ "2.1.1 Pre-Release". 9 May 2022. Retrieved 20 September 2022.
  4. ^ github.com/adobe/brackets/blob/master/src/nls/README.md
  5. ^ "Adobe Brackets Code Editor". Technewss. Archived from the original on 2014-12-13. Retrieved 12 December 2014.
  6. ^ "A modern, open source code editor that understands web design". Brackets. Retrieved 2021-04-23.
  7. ^ By Harrison Weber, VentureBeat. “Adobe launches its open source text editor Brackets out of beta, releases CSS extraction tool.” November 4, 2014. November 17, 2014.
  8. ^ "Update about Extract for Brackets (Preview)". Archived from the original on October 5, 2016.
  9. ^ "Update about Extract for Creative Cloud Assets Online Service and Brackets".
  10. ^ "Release 2.2.1", brackets: An open source code editor for the web, written in JavaScript, HTML and CSS, Brackets.io community, 2023-03-22, retrieved 2023-09-24
  11. ^ Adobe Edge Code CC
  12. ^ LaFontaine, David (2015-01-16). "Adobe Dips Its Toes into the Open-Source Software Waters with Brackets 1.0". Layers.
  13. ^ Adobe Brackets – open source editor for web designers, 5 November 2014
  14. ^ adobe/brackets, Adobe, Inc., 2023-02-02, retrieved 2023-02-02
  15. ^ "Releases · adobe/brackets". GitHub. Retrieved 2023-02-02.
  16. ^ brackets-cont/brackets, brackets.io, 2023-02-01, retrieved 2023-02-02
  17. ^ Project Phoenix: Brackets next generations., August 30, 2021, retrieved 2023-12-09
  18. ^ phcode-dev/phoenix: Phoenix is a modern open-source IDE for the web, built for the browser., retrieved 2023-12-09
  19. ^ a b "How to Use Brackets", Adobe
  20. ^ Text Editor Review – Adobe Brackets, January 22, 2014, archived from the original on 2015-03-29, retrieved 2015-03-27
  21. ^ "Brackets: Free Open Source Code Editor Built With HTML/CSS", Hongkiat, 16 April 2013
  22. ^ "Theseus JavaScript Debugger for Chrome and NodeJS", Brackets Blog, August 28, 2013
  23. ^ "A Review of the Brackets Editor", SitePoint, April 18, 2014

External links