Blog

Brackets Sprint 24 Build

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

Brackets 24 (codenamed “Jack Bauer”) is posted and ready for download. Quite possibly the biggest Brackets release to date, this build is full of new features and capabilities. We’ve added new visual tools, community-powered documentation for CSS, advanced JavaScript code intelligence and significant UX improvements.

Advanced JavaScript Intelligence

Thanks in large part to Adobe compiler experts and the Tern open source project, Brackets now offers type-aware code hinting for JavaScript. What does that mean? As you know, JavaScript is a dynamic weakly typed language. This makes the language extremely flexible and powerful, but also very hard to build tooling for. It’s tricky to provide code hinting for a variable when its type can change with each new line of code. This is why most text editors simply provide generic “token” completion. They treat every word in code as a “token” and don’t care about what makes them special. The thing about code hinting is; if it is not accurate, it is a distraction.

What is this nonsense? Is it just making things up?

The Adobe LCVM team blogged about the power of type-aware code hinting in detail, but in short, Brackets can accurately predict JavaScript types which means it can provide *meaningful* code hints. It knows when a variable is an object versus string. In the example below, it shows all of the jQuery methods available on $.

Meaningful suggestions from an editor that "gets you"

It’s not limited to just the current file either. Brackets analyzes your entire project and even supports RequireJS modules.

There is much more that can be done with this new code intelligence. Building on this foundation, we’ve added a `Jump to Definition` feature (popular in many IDEs). Simply press Ctrl + J or ⌘ + J on a function call or property to begin editing its definition.

Quick View

Designing in the browser is a code-driven creative activity, but that doesn’t mean code is the only tool we have for design. For this reason, Brackets has had a few visual tools that manipulate code. Ctrl/⌘ + E on any color provides a visual color selector that injects hex, rgb and hsl encoded colors. That’s great for creating and altering colors, but sometimes you just want to know what that encoded color looks like when rendered in the browser.

New in Brackets 24, when you hover your mouse over any color in Brackets (hex, rgb, hsl or named), a popover will appear showing you what that color looks like when rendered. We call this Quick View.

Brackets Quick View rendering a CSS gradient

Quick View isn’t limited to colors, it will also render gradients and images defined in HTML and CSS file. If there are other types of code you’ve like to see rendered in a Quick View, let us know. Or better yet, submit a pull request!

Community Powered Docs

Web standards are constantly evolving to improve user experience and simplify development. If you are living on the bleeding edge or just don’t care to memorize every esoteric CSS property, you likely rely on online documentation while you code. Many IDEs attempt to cobble rudimentary documentation together and integrate into the code experience via a panel that takes up valuable screen real estate. More often than not, the documentation is outdated, inaccurate or missing key components. We think we can do better.

If you aren’t already familiar with the WebPlatform.org, you should be. It’s an open community of developers building resources for a better web, regardless of brand, browser or platform. One of their flagstone projects is WebPlatform Docs, a community-driven site that aims to become a comprehensive and authoritative source for web developer documentation. It’s powered by a wiki that *anyone* can edit and is populated with content from the Mozilla Developer Network and MSDN (among others).

Even through the project is still in Alpha, we felt the content was ready to be exposed in Brackets. We are also hoping that exposing the content to more developers and designers will mean more will get involved in the project. For this reason we’ve added a new feature to Brackets called *Quick Docs*.

Community-powered docs that don't get in the way

Quick Docs is limited to CSS property support today, but we expect to expand that in the near future. To try it out just press Ctrl + K or ⌘ + K on any CSS property name and information for that property is loaded inline. Because it uses the same inline UI as other Brackets features, it never obscures your code. It becomes part of the document you are working on and is dismissed by pressing Ctrl + K or ⌘ + K again (or Esc).

UX Updates and Extension Management

We continue to make progress in updating our UI with a cleaner look that is optimized for coding. In this build you’ll notice several aesthetic updates to the project panel and working files section (e.g. everything on the left). We also spent some time normalizing extension icons so they fit better in the new toolbar.

In the toolbar you will find a new icon for extensions . We had hoped to launch a central registry for extensions that would be tied to this new icon. Unfortunately, we got ahead of ourselves by focusing on the implementation and not on the legal and security implications. Until we get those issues sorted out, the icon will launch the “Install Extension” dialog that we added in Sprint 22. In Sprint 25, we hope to replace this dialog with an extension management UI for listing and removing installed extensions.

Community Contributions

The community was hard at work this sprint. In addition to several bug fixes, committers accepted pull requests for enhancements to the inline color selector and new support for .tpl and .twig files.

Here’s the complete list:

As always, you can get all the detail of the build from the Brackets 24 release notes.

Coming Up in Sprint 25

With the exception of the extension management UI, the core team won’t be focusing on big user-facing features of our own. Instead we’ll be working to improve connectivity issues between Brackets and Chrome (on Windows) and optimizing performance. We’re also hoping to get caught up on some long standing community contributions (e.g. reviewing and accepting pull requests).

4 Responses


3 Comments

  1. Well done fellows! for me brackets became everything I needed when you introduced the quick open feature.I loved it in sublime text and I love it in brackets.If there is one are that I find brackets is lacking in is the file management.There is no way to quickly create a file by just typing it in.I have seen some cards on trello so I know you guys are working on it.Any way keep up the good work guys and thank you for brackets it has made web dev easier for me.

  2. […] frozenice) worked with Alan to explore and adjust the API. The result is in the latest release of Brackets. With a simple Command/Control K, the reference content for a CSS property appears in the context […]

  3. Rix says:

    Brackets looks potentially very good but the first thing I tried resulted in an expected response.
    I added a single letter to the text inside the first h1 tag.
    The page displayed in the browser loses the image and several paragraphs in the browser show
    or similar.
    The same thing happens with other heading tags.
    Replacing a letter in the heading text does not cause this.
    Apologies if I have overlooked something – I am an amateur.
    —————–
    WinXP Pro v5.1.2600
    Chrome Version 26.0.1410.64 m (shown as up to date)

  4. Miquel says:

    Is there any extension for quick inline documentation on js?
    I mean, if this is the code:

    /**
    * main: This is the main entry point.
    * Adds necessary handlers for ready events.
    */
    function main() {
    bla bla…
    }

    whenever you see main, is there a way to see the documentation?

One Trackback

Post a Comment

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

*
*


1 × six =

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>