Feature-rich form-filling with Form Filler

This month's awesomeness comes to the honor of Form Filler, a Chrome Extension that fills forms with one click of the button.

So... how does it work?

First: install the extension. Go ahead, trust me, it's not evil. And you can always delete it again.

A nice icon resembling a "Play" button in a square will show up on the top right of the browser. Right-clicking it will enable you to open the "Options" screen.

There, the "General" section enables you to restrict yourself to certain usernames, hostnames for email addresses and passwords when filling in a form. For example, my usernames are generated randomly, but my email address hostname is always "example.com". Finally, it is possible to specify tags for "repeat" or "confirmation" fields, ensuring that these fields are recognized as such and have the same content as their more original brethren, instead of a new random value.

The real features reveal themselves in the "Custom Fields" section, where it is possible to specify which kind of content you want for each kind of input field. Several things are important here:

• The matching. Form Filler recognizes the field type based on a keyword, which should (partially) exist in either the "id", "name" or "class" attributes of a HTML "input" tag for the field type to match. For example, when for a certain field type I specify the keyword "lastname", an "input" tag with the class "app_lastname" or id "lastname01" will match it.
• The order of matching. When a type matches, subsequent types are not checked for anymore. Thus it is good to put stuff like "first_name, firstname" on top, and further down put "name, last_name, lastname" to match a last name field. Contrarily, if "name" was matched on top, the "first_name" rule would not be reached anymore.
• The type. This is how the form field gets filled in. Choices are alphanumeric, text, etc. This is where Form Filler falls a little short sometimes as I haven't yet found a way to generate random single words; I always have to allow a sentence of 2 words or more.

After configuring, the happy moment comes where you just surf to a web page and press the "Play" button, and the magic will happen: the form is filled automagically! 

PS. If, unfortunately, some fields are not filled the way you want, check the keywords and the order of them - there might be some matching that you don't want to happen.

Musings about MustacheJS

Let's say you have an array of user data in JSON format. In your webapp, you want to display each user as a nicely formatted HTML block. You also want to make the whole thing dynamic and Ajax-y, giving the option to edit/delete/create users. It would have to look something like this (but then nicely formatted):

USER 1
name, location
[delete] [edit]
USER 2
name, location
[delete] [edit] ...

Formatting/rendering your elements in JavaScript is then a logical thing to do. In this post I compare jQuery rendering to MustacheJS rendering and talk about the pros and cons of each.

jQuery rendering
Rendering the elements using jQuery is what most people are familiar with, but it can get messy for complex elements. Click here for a Fiddle displaying the situation. I created a HTML template for the element and placed it into a script tag, then in the render function I had to find each field by classname, and apply the formatted data value to the field. It works, but the render function can get quite long and unorganized, and the HTML template fills up with arbitrarily chosen classnames.

Moreover, our user record has sub-lists like 'labels for each user'. For each 'label' sub-element I again created a template in a script tag, created a JavaScript loop over the data-elements to render the sub-template, etc. This makes the rendering function looking even less tidy, and my previously clean template is now divided over two script tags. Imagine the mess when the elements become even more complicated.

MustacheJS
Enter MustacheJS: a 5kb minified JS library, designed to assist in exactly this problem: client-side rendering of JSON data structures, into HTML specified by a template. It has nice features such as:

• Specifying where the data should be put using "Mustache" tags {{username}}, with field names corresponding to the JSON field names, so no more fuzzy class names to identify where the data should go
• Easy to change the {{ tags to [[ tags, to solve conflict with Django template tags
• Tags to specify a sub-part of the template should be repeated, solving the userlabels problem
• If-then-else tags for some more complicated renderings (documentation)

Using Mustache, my rendering function was reduced to one line, and my template was again neatly clean and contained within one script element.
Click here for the improved rendering with Mustache

The pros
So do I recommend working with Mustache? Yes: it's small, and it doesn't get in the way: you can still solve things differently if you have to. And it definitely makes life easier and code tidier in many cases.

The cons
Working with Mustache a bit longer now, however, there are some things that you have to be aware of:

• Client-side formatting: If you have for example a date in UnixTime format: 7892799393, then that is exactly how Mustache will render it. Of course you want to convert it into some human-readable value first. Your options are:
• Use Mustache lambda functions for formatting. This is actually neat.
• Add the formatted values to the JSON object server-side. It can become messy if there will be a lot of different formatting, eg. at some point I was stuck with 4 different date formats.
• Switch to the Mustache-compatible HandleBars and use helper functions. (I didn't try it yet, because the tags conflict with Django too and changing them is not so easy as in Mustache) 
• Use Mustache helper functions; have to look into this.
• Even with the if-then-else-logic, it cannot always do all the magic you'd want to do during the rendering step. My answer to this: after Mustache rendering I parse the HTML into a jQuery object and do some more complex modifications before placing the element into the DOM. Still clean code, more functionality.
• If you are formatting forms, Mustache cannot help you to get the values out of the form again. This is called two-way-data-binding. I'm still looking for alternative libraries that can do that; currently looking into AngularJS, which looks however like a bit of a too big hammer for such a simple nail, leading to some collateral head-aches about which I will muse later.
• MustacheJS doesn't make you look as awesome as Magnum, PI. Only a real mustache can do that.

Until next time, fabulous followers!