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.
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:
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:
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.
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:
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
So if you’re a web designer or developer, why not see it all in action and sign up for the quplo beta?
Leave a reply