Blog

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.

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:

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.

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.

15 Responses


14 Comments

  1. Yannis Steriotis says:

    Keep working like this and Brackets soon will be the best editor in the market!
    Great work!

  2. Can I suggest you to add also easing chooser like easings.net?

  3. Dean Herbert says:

    I’m loving watching the quick development cycles and amazingly innovative features coming to Brackets. I only wish the overall performance was better so I could use it as a primary editor. The delay between hitting a key and characters displaying on screen, or dragging a selection and the selection appearing is too high to be usable to me (I am very sensitive to this kind of latency, though).

    Keep it up nonetheless!

  4. Donarsson says:

    I’d like to suggest adding the drop folder functionality to Linux aswell.
    And keep up the great work, I really love it so far =)

  5. […] Brackets Sprint 33 includes creating new rules in CSS Quick Edit, visual CSS timing function editor, and image preview from project tree. Brackets Sprint 33 Build […]

  6. James Fulkerson says:

    This is a great release.

    Since I haven’t taken the time yet to do so, I must thank all who are involved in the development process. Brackets has made my coding life easier in every way imaginable, yet it also helps me learn more coding. That’s the perfect balance. The real time HTML in-browser is amazing. I’ll be on GitHub to help support this amazing editor. Thanks to you all.

  7. Mark says:

    First image preview I tried was an .svg with no luck, maybe a format to add still?

    Great update though, the New Rule feature will make my coding life much easier!

    • Adam Lehman says:

      Check out the “SVG Preview” extension. By default, Brackets will treat SVG as an editable file, but this extension will do give you a preview while you edit.

  8. abdelouahab says:

    thank you for this jewel ^^
    is there any plans to support python autocompletion?

  9. Hugo says:

    Will you implement features for working with preprocessors? Something like codekit do?

  10. Matthew says:

    I have this same problem running a 2012 Macbook Pro. I love the editor but for this reason alone I don’t use it as my primary editor.

One Trackback

Post a Comment

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

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=""> <s> <strike> <strong>

*
*


6 − = four