Brackets Sprint 33 Build

Article by: Kevin Dangoor

Brackets Sprint 33 Build

When you install Brackets 33, you’ll find it easier to work on new designs, more convenient to work with images in your project and more fun to edit Bezier timing in your CSS files. A handful of other improvements round out the release.

Add New Rules in CSS Quick Edit

CSS Quick Edit lets you jump into editing the CSS rules for an element, make some changes and jump back out. But, what if it’s a new project and you don’t have any rules yet? Or what if you need to add a rule for a new CSS class?

In Brackets 33, we’ve added a “New Rule” button that takes care of these very needs. Position the cursor by the tag name and hit Ctrl/Cmd + E and you’ll see a New Rule button that will create a new rule at the end of whichever CSS file you select. The new rule will have a selector matching the tag that the cursor is within. Position the cursor by a class name and the New Rule button will create a rule with a selector for that class. If you find yourself adding a bunch of new rules, you’ll find the Ctrl + Alt + N / Cmd + Opt + N keyboard shortcut handy.

New Rule
Adding a new rule in Quick Edit

Visual Bezier Timing-Function Editor

The timing-function CSS properties allow you to precisely control how the speed of a transition or animation changes over time. It’s hard to imagine exactly what you’ll end up with if you set the timing function to a Bezier function like this one: cubic-bezier(0.1, 0.7, 1.0, 0.1). Just as we have Quick Edit for colors and gradients, now we have Quick Edit for Bezier functions. With the cursor positioned on the timing function value, press Ctrl/Cmd + E and you get a visual editor for manipulating the Bezier function:

Cubic Bezier
Editing a Bezier timing function

Thanks to Lea Verou for open sourcing cubic-bezier.com.

Image Preview

It’s easy to think of web projects as HTML, CSS and JavaScript… but, we also tend to have a bunch of image files. Now, when you select an image file in Brackets’ project tree, you see a preview of the image along with its size and dimensions.

Image Preview
Previewing an image in Brackets

Other Improvements

When doing a Find in Files, the search bar provides visual feedback to let you know when it’s searching or if it has found no files (the bar turns red to indicate no matches found). When you do a Replace in the current file with a regular expression, you can use $1, $2, etc. substitutions.

There are now “Close Others” options on the context menu for files open in the working set, making it easier to refocus the part of a project that you’re working on.

On the Mac, dragging a folder onto the Dock icon will open that folder.

Brackets’ Extension Manager will install the most recent compatible version of an extension from the registry, even if it’s not the most recent version of that extension. This will come in handy as we make some significant changes to our API (see “Coming Up Next” below).

Also, extension developers will appreciate that Brackets now ships with Lo-Dash, a library with a large collection of handy utility functions. Be sure to update your extensions to use Lo-Dash instead of the now-deprecated CollectionUtils module. Full information for developers is in the Sprint 33 Release Notes.

From the Community

Some of the improvements listed above came from the Brackets community, along with a number of other changes listed below. Thanks for contributing to Brackets!

Further details are in the Release Notes.

Coming Up Next

We’re planning to make Brackets easier to update by installing over the previous version. Extension developers take note: Brackets’ file system APIs are getting a major upgrade. We’re also planning to put some time into laying out exactly which features we want for Find/Replace.

Leave a Reply

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