The new Handcraft is here!

Common Sense Code Completion

I remember when I first learned HTML. It must’ve been around ’97 or so. Over the years I’ve memorized an arsenal of tags, attributes and values that I know how to use. Now whenever my HTML knowledge lets me down (like when adding an encoding type to a file upload form) I rely on code completion or Google. I bet you’re no different.

Quplo is intended for designers and developers with a strong passion for HTML, and building a prototype in quplo introduces nine new tags. Only the <page> tag will do at first, but in order to create reusable parts of HTML, work with real data or mock up a functional sign in form you will need to master all nine of those tags. In order to familiarize you with these new tags we’ve built code completion into our browser-based editor. It adds to the kickass user experience that we’re trying to achieve with Quplo. In fact, in some cases our code completion seems more useful than what regular desktop IDEs such as Visual Studio tend to offer when you’re writing HTML. And that’s odd, because Quplo’s code completion does so little! We just used common sense. That’s why we call it “Common Sense Code Completion”.

About Common Sense Code Completion

The editor that quplo uses is Marijn Haverbeke’s CodeMirror. It provides a browser-based syntax highlighted textarea replacement and is a truly magnificent piece of work. Our code completion addon offers you suggestions while you type without being intrusive, and provides features found in editors like Visual Studio such as automatically adding the closing tag or giving you two double quotes when you write an attribute.

Common Sense Code Completion (CSCC)  is not context-aware however, so for instance it won’t offer you <option> or <optgroup> when you’re inside a <select> tag. It  just knows your current cursor position, what tag or attribute you’re writing and aids you in quickly picking the right attributes and values. It was meant to be very helpful, a breeze to configure and to reduce your daily number of keystrokes.

An example

Code completion offering suggestions for the page type.

Code completion offering suggestions for the page type.

Quplo offers the <page> tag. It represents a single webpage containing HTML, and all it needs is a relative URL and a type such as “html” or “css”. When you start writing the <page> tag and you’re halfway through typing, you’ll be prompted with the suggestion to create the actual tag. You hit Enter (or Tab) and its attribute suggestions pop up, such as the “url” and “type”. Then you enter a URL and, while you’re writing the “type” attribute, you’ll be prompted with the possible options (html5, xhtml, html, css, js, text or xml). Pretty much what you’d expect.

But there’s more to this…

Thinking outside the box

The order in which suggestions appear is not alphabetical, which is contrary to what modern desktop IDEs do. We think presenting options in the order they’re commonly used speeds up your everyday work. And as we hide attributes you’ve already typed, you’ll find yourself Space+Enter-ing almost entire lines of code.

Let’s see what Visual Studio offers us when we attempt to write a hyperlink:

Visual Studio suggesting hyperlink attirbutes

Visual Studio suggesting hyperlink attributes

Accesskey, charset, class, coords, dir, enableviewstate… Okay, we use “class” regularly, but when was the last time you used any of the others? Why not offer “href” first? It may not be the first alphabetically, but it’s clearly the most relevant. Sure, when you press “h” it will highlight “href” and hitting Enter is sufficient, but if (like me) you haven’t memorized <link rel=”stylesheet” type=”text/css” href=”…”/> or <form enctype=”multipart/form-data” …> we’d have to scroll through all possible attributes alphabetically until stumbling upon the one that sounds slightly familiar. Therefore, this is how Common Sense Code Completion does it:

CodeMirror Completion uses common sense in offering attributes.

Common Sense Code Completion uses common sense when offering attributes.

With Common Sense Code Completion we’re not only creating a simple format for defining the dictionary of available tags, attributes and values, but also giving you full control over the order in which they’re presented. The file that you need to create code completion for your own tags is called cscc-sense.js.

Dynamic lookups

Because we wrote this in  javascript, we can dynamically generate the tags, attributes and values that CSCC suggests. For instance, one of the tags you’ll use in quplo is <part>. It does what you think it does; it creates a reusable part of HTML. Using it is as simple as <part name=”footer”> with some HTML inside, then writing <write part=”footer”/> somewhere inside a <page> to print its contents. Now when you’re writing the actual <write part=… code, quplo will automatically suggest the tag first, followed by the possible attributes and finally the values, which are generated dynamically.

Auto-completing the tag.

Auto-completing the tag.

Auto-completing the attributes.

Auto-completing the attributes.

Dynamically suggesting "footer".

Dynamically suggesting "footer".

What’s next?

Common Sense Code Completion is far from finished, and in the future we’d like to:

  • Move it over to Google Code
  • Add support for Internet Explorer, which is currently lacking
  • Clean up the code and routines
  • Support context awareness, so it knows which tag path you’re in
  • Add css/js support

The current version of Common Sense Code Completion can be found here:

cscc-1.0.zip

CodeMirror itself is created by Marijn Haverbeke. His achievement in building a browser-based syntax highlighted editor of this quality is a masterpiece in its own right and quplo wouldn’t exist without it.

Now go and check out the demo: http://quplo.com/demos/cscc

We’ve picked our fights with IDE’s before, but it’s all because we believe in this thing we’re building, and adding code completion is just a small part of our philosophy.

So if you’re a web designer or developer, why not see it all in action and sign up for the quplo beta?

14 Comments

Ping RSS

  • doesn’t work with opera 10.53

    by inu • Jun 21st 2010 • 16:06

  • Great project. I wanted to build something similar but for CSS only. So I’m looking forward for CSS support.
    Also can be very handy to implement local storage support so we can code directly in the browser without losing any data.

    by Vladimir Carrer • Jun 21st 2010 • 17:06

  • Suggestion: support the HTML5 doctype: “”

    by Scott Tsai • Jun 21st 2010 • 17:06

  • In cscc-1.0.zip, cssc-{parse-xml,sense,}.js have mixed CRLF, LF line endings. You might want to fix them before offering a revision controlled repository on Google Code.

    This also raises the question of what editors are you using? ;)

    by Scott Tsai • Jun 21st 2010 • 17:06

  • Great work! Suggestion seems to start on second character.
    I tried <sc in the head section. To get the branches script and style on "s" would nice.

    by taipu • Jun 21st 2010 • 21:06

  • Cool!

    With props like id, class, I’d expect to type the name of the id/class and then close the attribute by typing ” (quot)…
    That should position the cursor after the quot, in order to avoid using the end key…

    by Jaap • Jun 21st 2010 • 23:06

  • @Vladimir Local storage is definitely something we want to take a look at in the future.

    @Scott We already support the HTML5 doctype in quplo prototypes. Right now, we’ve implemented CSCC to autocomplete our own tags, but we’ll work on autocompletion for (X)HTML in its various forms, and CSS and basic javascript autocompletion may appear on our radar as well depending on how much work they are.

    @taipu I agree, and we’ll take a look at that.

    by Rahul • Jun 22nd 2010 • 13:06

  • [...] Common Sense Code Completion « quplog [...]

    Pingback

    by Common Eye Conditions and Treatments | Glaucoma • Jun 23rd 2010 • 09:06

  • This is very interesting…I’m looking for a code-completion tool that can use an XSD to drive suggestions. I am using the codemirror editor also for XML editing.
    The XSD approach would also allow you to do suggestions of elements, not just attributes. Have you considered going in this direction?

    by Adrian • Sep 28th 2010 • 03:09

  • Hi Adrian,

    We specifically opted not to get into XML schemas right now as we have quite a bit of experience with them and they felt like overkill. Right now the json-like syntax used for suggestions is good for our goals. If we come to the point where we need more, we may reconsider.

    If you want to extend CSCC to work with XSD, however, go ahead! We’ll be waiting in anticipation. :)

    by Rahul • Sep 28th 2010 • 08:09

  • Hi,
    Awesome work, I’m using it in a project, I’ll give you more feedback soon.
    Keep up!

    by Philippe • Feb 3rd 2011 • 23:02

  • Hi,
    Very nice work. I agree on Adrian’s remark that using an xsd might open up new worlds.
    I cannot get it to work with the latest release of CodeMirror (0.94) as that version doesn’t have the keyUpFunction / keyDownFunction parameters in the options. Is the 0.67 release the only one working with cscc?

    by Ronald Brinkerink • Feb 17th 2011 • 19:02

  • Hi Ronald, yes – the current release of CSCC only works with the older CodeMirror. However, we recently upgraded things on our end and deployed them in the latest Quplo release, and will likely update the CSCC repository in the near future with these changes.

    by Rahul • Feb 23rd 2011 • 18:02

  • I really like your wordpress web template, where do you get a hold of it through?

    by Latoya Pennella • Jul 15th 2011 • 17:07

  • Leave a reply