Blog

Design Draft: Code Hinting

 

First Design Draft

I personally couldn’t be happier with the open process the team is using to develop Brackets. Following their lead I will be doing my best to keep the design process as open as is useful by posting design drafts for new or planned features here on the blog. If you have any feedback on these design proposals feel free to respond in the comments, ping me on twitter, or find me in the Brackets IRC channel (garthdb).

Code Hinting

Currently the Brackets team is implementing an initial version of code hinting. This post outlines user experience design in connection with this feature.

Code hinting, at its most basic, is a mechanism for displaying and quickly completing code while the user is typing. The three main goals, in order of importance, for code hinting are:

1. Speed

The most important goal of code hinting is to help developers minimize repetitious typing.

2. Accuracy

By leveraging auto complete the developer should also be able to reduce the number of typos.

3. Education

Code hinting can also display options the developer did not know were available to them. This feature could be extended to give more information to the developer and further this goal; see Extension UI Guidelines below.

Basic UI and Interaction

The basic visual interface for code hinting consists of a list of available or intelligent complete strings depending on the partial string typed. In the example above the code hinting list consists of HTML elements that begin with the letter d.

As the developer types, the code hinting list will appear below the cursor, lining up with the beginning of the string being typed. Code hinting is passively called and will appear whenever the developer has typed something that matches the criteria for one or more list items. It can also be actively called using the keyboard shortcut (ctrl+ space or command+space) and will display results depending on the position of the cursor.

A list item can be selected using the mouse or up/down arrows and the enter key. Selecting an item will replace the partial string typed with the selected string.

The list is unobtrusive and hides when: the list is empty; the user hits esc; the string is completed; or focus is removed from the editor.

Specific Implementation

What the actual list of elements consists of depends on the type of code being used as they vary significantly.

HTML

Within HTML code hinting could be used for elements (tag names) and properties

Elements

HTML Elements could be implemented a few different ways:

Previously Used Elements

The most basic implementation would only show a list of elements previously used. The upside is that the list is always relevant to the developer’s habits. The downside is that the user will not see other elements available to them.

All Elements


The alternative is to show a list of all HTML elements based on the doctype of the file. This would avoid the downsides of the previous option, but would require that the list be up to date with the changing list of valid HTML elements.

Hybrid List


My recommendation would be to use a hybrid of the two. Show a separated list with the most used elements shown first, and any other elements meeting the criteria below.

Properties and Values

Properties and values would follow a similar pattern as the tag names themselves. Content within a tag should not trigger/use code hinting.

There are a few special property values that use project specific values.

Classes and IDs

Class and ID values would be code hinted with a list of classes and IDs used in project css files

External Files


The value for external source properties (such as src in the img element or href properties) code hinting would display a list of files in the project that would be valid, or directories that contain valid files.

In the example above, the code hinting list shows a list of directories that contain images, and images. If a directory was selected, the code hinting list would change to show valid files in that directory.

CSS

Selectors

Similar to class and ID property values in HTML, CSS selector code hinting would contain a list of classes and IDs used in the project. Element selectors would also be hinted using the same list as the HTML element code hinting.

Properties

CSS properties would have a similar code hinting solution to HTML elements, using either a list of previously used properties, an exhaustive list of all valid properties, or a hybrid of the two.

Values

Since CSS values are often repeated within a document or project, code hinting would use a list of previously used values corresponding to the property being defined.

JS

Because of the syntax used in JS, there wouldn’t be a separation between variables and functions in code hinting lists. Though they would be distinguishable by the parenthesis. See images below.

Variables

Functions

Other Languages

It would be difficult to have a code editor that could handle code hinting for all web languages out of the box. Extensions could help fill this void.

Extension UI Guidelines

Like all of Brackets, code hinting is meant to be extended. Below are a few ideas for adding additional information to the component

Icons

List elements could have an image or icon placed at the beginning or end of the element. In the above example the Chrome icon indicates that the details element is only fully supported by Chrome at this time.

Documentation

The code hinting list could also contain a details portion. In this example the area on the right of the code hinting dialog displays relevant details about the currently highlighted element. This would allow developers to learn more about the tags while they are in the context of the editor.

 

Conclusion

I appreciate you taking the time to review this design draft. When building a development tool that will be used day in, day out, the user experience is just as critical as the underlying features. If you have any feedback or ideas, please comment here or start up a discussion on our mailing list. I’ve also posted the source artwork on Dribbble.

The first code hinting story just landed in master yesterday (July 12, 2012) and is now ready for testing. It will make its official premiere in the Sprint 11 build. Because we believe in building small features, then iterating, only HTML tag hinting support is available at first. In the next sprint we will add HTML attribute and value hinting with CSS and JavaScript to follow later.

Note: This design draft is merely a proposal and does not necessarily dictate the final implementation of the feature.

18 Responses


15 Comments

  1. I’ve been playing with an earlier version of Brackets and I love it! So simple, fast, and lite! I hope they will include auto-closing tags to the features (unless I am missing something with the current version), it’s something that I’ve grown used to in other code editors.

    Love, love, love what the Brackets team is doing!

  2. alex says:

    really glad adobe is getting into the community

  3. Danilo Celic says:

    Will have to get back and read more throughly, but looks like a good start. The external files code hinting is something I’ve asked for in Dreamweaver for years, so as many votes as I can swing would be pointing at that. There should, however, be a browse for file option.

  4. Like the idea of little icons for extra detail, something that should be implemented, thought about an extended upon. Haven’t used brackets (do all my pages in Notepad++) but when I have time (sometime in the next 5 to 10 years) it is no. 1 of my things to get stuck into.

  5. dcz says:

    +1 for “I hope they will include auto-closing tags to the features”

    another great feature will be the possibility to add Snippets
    for example, type “html” and press “tab” to create html structure
    of course, it can be possible to create and modify snippets

    with zencoding support too, brackets will be my best editor !

  6. Steve says:

    I love your ideas for code hinting but could I suggest having a learner mode and adding comments to each tag. For example li List Item, ol Ordered List, etc to tell learners what the tag is. Perhaps later some kind person will provide more advice on each tags use as well.

  7. […] was even cooler though was to see that Garth, who is design lead on the project, posted about the process and also laid out the specification. A great combination of open source for code and open source for design. Garth posted some of his […]

  8. Georgi Popov says:

    +1 for auto-closing and +1 for snippets (TextMate-like ones — used also in e editor, Sublime Text and others I think).

    I haven’t tried Brackets yet, however, it seems very promising and I think of giving it a chance plus I believe I might as well switch to it.

    Lookin forward to code hinting for other languages (especially PHP). IMHO it would be nice to have separate files loaded for code hinting for different languages — that way it seems that it wouldn’t require quite much processing. Also, do you consider the option of code introspection? One more idea about that — it would be nice to have the option to choose a folder for introspection. I’m a WordPress developer and I like keeping all WordPress files in the project management in the current editor I use (it does not have introspection) but I’d rather have introspected only the files from the theme/plugin I’m currently working on.

    • Code hinting for other languages would probably be best as extensions, the goal would be to make it easy for developers to create code hinting extensions for languages outside of html/css/js.

      Introspection is a more technical issue than this design draft would cover; the engineers would be better suited to address this. It is a complex issue, especially considering multiple language support.

  9. This looks extremely promising. Windows really does need a decent code editor that isn’t bloated with a lot of fluff but is also feature rich.

    I have tried this out a couple times at different revisions, one thing I do have to say is the “Live Preview” portion is amazing… However, it being limited to just HTML files somewhat sucks. It should be able to work with .php files as well, theres no reason I can think of as to why not… That being said I am sure there is a reason why not… Can someone elaborate on this?

  10. brokoli says:

    I don’t need a wysiwyg editor anymore. 🙂

  11. Benjamin says:

    I would like to see the brackets to give me hint on typing php codes as well. I really astonished with the brackets extracts preview. I really owe you guys keep rocking. 😉

  12. photography says:

    I love good snippets, especially ones with tab placeholders.

  13. dj says:

    why it dont show bootstrap classes name

3 Trackbacks


    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'thematic_pings' not found or invalid function name in /home/wp_twqxv4/blog.brackets.io/wp-includes/class-walker-comment.php on line 180

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>

*
*


8 − two =