Brackets Blog

code the web

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.

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 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!

21 Comments

  1. Hooray for CSS Code Intelligence for SASS!

  2. I really liked the live html enabled automatically, but one thing that I want is that (as there is scss support in brackets) when i Ctrl+E a class; i don’t want to see classes from .css but from .scss. Will there be such option because as css processors becoming popular no one track their css files anymore (as you don’t wanna see compressed css).

    Secondly SCSS syntax highlight missing variable, mixin

  3. Sandeep says:

    Awaiting for CSS code intelligence for LESS.

  4. salvo says:

    Why adobe doesn’t just buy sublime editor?

    • Jan says:

      Because Sublime Text is rough like vi and it is not a free software.

    • Adam says:

      Brackets already has some amazing features that Sublime will probably never have. I do really like Sublime, but I am finding myself using Brackets more and more, and it is now my exclusive editor for JavaScript/HTML/CSS.

  5. ilweb says:

    Hi,

    how you created the new design for Windows?
    Is the code for this open source?

    Greetings

  6. Tomas M. says:

    Currently I use mostly n++ because of its Compare plugin – I do a lot of comparisons between versions. Is there any plugin for brackets for that purpose, or perhaps you plan to implement it natively?

    Also can everyone share their tips what programs they use for comparison on Win? Thanks!

    • Jan says:

      There is no diff extension for Brackets yet, but it should be possible using e.g. Prettydiff library.
      On Windows, I use the excellent free WinMerge.

  7. Takao says:

    Great update guys very good work finally live HTML !

  8. Majo says:

    Hello,

    I just paused my work to come over here and say that I’m excited about Sprint 31, love both the dark style and Slovak (my language) localization. Definitely the best sprint so far. You all did excellent work, thank you.

  9. Jun Yamada says:

    Hi,

    I would really love to try and use Brackets but I can’t seem to access the download page. I’ve been looking for the sprint 31 build from the Web but alas, none found.

    Is there a problem over the downloads page? Can you provide a mirror to download the latest build?

    Thanks.

  10. Cory says:

    Does it bother anyone else that you can only select something from the list of suggestions by hitting enter? I’d like to be able to hit tab to select something to auto-complete.

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


6 × seven =

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>