Brackets Sprint 17 Build

Article by: Adam Lehman

Brackets Sprint 17 Build

Download Sprint 17: http://download.brackets.io

HAPPY WEB STANDARDS DAY! Today is the 6th International Blue Beanie Day, a day to celebrate and raise awareness for open web standards. To mark the occasion, we’ve created a new build of Brackets that is full of awesome. In this sprint we continued to refine and enhance the Live Development workflow. In build 17, when editing a CSS rule with Live Development, Brackets will highlight all of the HTML elements affected by that rule. We’ve also introduced a new inline visual tool for editing colors within CSS documents. The community added a couple great new features like block commenting and a new Turkish translation.

Live CSS Highlighting

If you’ve been following along with Brackets, you’ll know that we’ve been working to refine and enhance Live Development, not just for CSS, but also for HTML and JavaScript. One of things we’ve heard from those using Brackets day-to-day is that while Live CSS is great, it would be nice to know exactly which HTML elements will be affected by changing a CSS rule (before you change it). For that reason we’ve introduced Live Highlighting for CSS.

With Live Development enabled, when your cursor is in a CSS rule the corresponding HTML elements will be highlighted in the browser (even when using the inline CSS Quick edit). The highlight is on by default for all Live Development connections, but we made it so that you can toggle the highlighting on/off with Ctrl/Cmd + Shift + C. For you Chrome fans, this is the same keyboard shortcut you use to toggle “Inspect Element” mode.

Inline Color Editor

We’ve been saying for quite some time that the inline editor concept can go beyond go editing scenarios. A few months back we showed off an early prototype of a visual tool that helped you choose colors for HEX, RGBa and HSLa. During this sprint (and the last) we spent some time improving the code and polishing the workflow. Any time you see a color value, press Ctrl/Cmd + E to open the inline color editor. Throughout this sprint we identified several enhancements for the inline color editor and are hoping to work on them in Sprint 18.

Brackets Inline Color Editor
Press Ctrl/Cmd + E on any color value to access the color editor

Community Contributions

The community was so active this sprint that the Brackets team had a hard time keeping up (a great problem to have). Tomás Malbrán submitted a new feature that allows you to comment your code with a simple keyboard shortcut. Simply select the code you want to comment and press Ctrl/Cmd + SHIFT+ /. This works for HTML, CSS and JavaScript.

Thanks to Ilker Guller, Brackets is now available n Turkish!

Here is the full list of community contributed features and bug fixes for Sprint 17:

The Brackets community is teh best stuffs! Thanks for all your contributions.

And Then…

We took a break during Sprint 17 to define what key features are still missing from Brackets that prevent people from using it day-to-day. We have a tendency to focus on innovative features that push tooling forward before common features that everyone expects out of editor. Moving forward, we’re going to try and strike a better balance between new ideas like Live Development for HTML and common features like CSS code completion. Our goal is to make Brackets your default editor by mid-2013. Stay tuned.

-Adam

Leave a Reply

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