Brackets 31 is big. It’s a release we have been working on for months, the result of countless hours of research, iteration and testing. We’re excited and proud to release Live Development for HTML — as you code, HTML changes are instantly pushed to browser without having to save or reload the page. Windows users will also find a significant UI update as Brackets embraces its darker side. Improved support for SASS, more linting options and better search results round out the top features.
Live HTML Development
When previewing a project from Brackets, all CSS and HTML changes are updated as-you-type. Structural and text changes appear instantly without losing the state of the application or page. If you delete an element, the corresponding DOM node(s) are removed. If you add an attribute, such as
class, the new class is instantly applied. It is how HTML development should be.
We have to admit that Live CSS Development was pretty easy. There weren’t many technical barriers to swapping out CSS classes behind a loaded HTML page. In contrast, Live HTML Development was a complex and difficult problem to solve. For Live HTML Development to work, we needed to provide Brackets with a deep understanding of how HTML is transformed at runtime. This allows Brackets to map changes in your editor to the resulting DOM without forcing a page refresh. If you’re interested in how we built this, we’ve published our research on the Brackets wiki.
CSS Code Intelligence for SASS
When coding .SCSS files, Brackets now provides code intelligence for CSS. Even cutting edge capabilities like CSS Regions
flow-from are supported. You will also have complete access to CSS documentation via Quick Docs. Simply press Ctrl/Cmd + K on a CSS property to display extended documentation. This is just the beginning of an improved workflow for SASS. Stay tuned.
When searching within a document, you will now see tick marks in the scroll bar indicating the position of matches. The tick marks are updated as you type and should help you navigate your code more effectively. Also, when searching multiple files, results are displayed in the bottom panel. In Brackets 31, when you edit your code with the results panel still open, you’ll notice the results are updated automatically.
The Darker Side of Brackets
Windows users should notice a significant update to the Brackets UI. In Brackets 31, the native shell has been designed to be darker and match the rest of the experience. It may seem superficial, but if you are going to stare at a code editor all day, we think it should be aesthetically pleasing. We’re going to be updating our native shell for OSX in the next sprint.
If open source is a team sport, then we might have set a high score with Brackets 31. From new features to fixed bugs, the Brackets community was working overtime this sprint. Special thanks go out to our community members who keep Brackets localized and translated with each new release – Brackets 31 now includes Slovak support! Here is the full list of everything that went into this build:
- Unit Test Failing: ExtensionManager by TomMalbran.
- Followup updates to #4581 and #4598 by TomMalbran.
- Tab and modality fixes for the modal dialogs by TomMalbran.
- Implementation of Navigate Recent Projects by TomMalbran.
- Updated the flex property for the latest chrome version to fix #4602 and #4870 by TomMalbran.
- Fix issue #3556: Consolidate link handling code by TomMalbran.
- Find in Files Improvements (Part 3: Auto-update) by TomMalbran.
- Spanish strings and sample translations by TomMalbran.
- Working set context menu pops closed when right-clicking file that hasn’t been opened yet by lkcampbell.
- Tree context menu behaves unpredictably while naming new file by lkcampbell.
- Document file and handler function for each command by lkcampbell.
- Do not show Active Line Highlight when editor has selection by lkcampbell.
- File Rename should complete when clicking anywhere in project panel by vladnicula, lkcampbell.
- Updated documentation on sidebar view events by lkcampbell.
- Adding Menus.removeMenu() and Menus.getAllMenus() by lkcampbell.
- Update strings.js, and again by SAPlayer.
- Renewed German translation by SAPlayer.
- Update German translation by SAPlayer.
- Change: UNKOWN -> UNKNOWN by SAPlayer.
- Remove strings for commands that are not user facing by WebsiteDeveloper.
- Update Less to 1.4.2 by WebsiteDeveloper.
- Added .ASP files highlighting by Fr3nzzy.
- .idea added to gitignore by Fr3nzzy.
- Added projectRefresh event when project tree is refreshed but project root has not changed by zaggino.
- Show more info about failure in console by zaggino.
- Support for chromium browser in linux by macie.
- Update swedish translation by mikaeljorhult.
- Failing with useful message on mac build step by jsoverson.
- Update Russian index.html by morozd.
- [UX] Issue #4174 – Add find next / previous buttons for easy navigation by rajeshsegu.
- Update Japanese translation by kanreisa.
- Update ‘de’ locale for HTML preview, more minor changes by mynetx.
- Update strings.js, merge new translates strings for latest version by michaeljayt.
- HTML tag highlight added by sathyamoorthi.
- Update to Finnish localization by ghost.
- [ARCH] Image preview draft by warabe.
- Slovak language support by erichstark.
- Clean up _getFileExtension() method and fix all its callers by megatolya.
In the next sprint we hope to bring darkness to the native shell on Mac. We’re also working to improve the image preview experience within Brackets. If you’ve ever accidentally clicked on an image in the file tree, you’ll know the experience isn’t so great. We want to enable a preview mechanism to display the image along with some metadata like dimensions.
Thanks for continuing to support Brackets!