Brackets Sprint 31 Build

Article by: Adam Lehman

Brackets Sprint 31 Build

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.

The video cannot be shown at the moment. Please try again later.

CSS Code Intelligence for SASS

When coding .SCSS files, Brackets now provides code intelligence for CSS. Even cutting edge capabilities like CSS Regions flow-into and 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.

Improved Search

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.

Brackets: Into Darkness
Brackets new dark native shell design for Window.

Community Contributions

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:

Coming Soon

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!

Leave a Reply

Your email address will not be published. Required fields are marked *