Minified.js

I’m not surprised to see more and more “lightweight” JavaScript libraries pop up as jQuery has grown in size. The pendulum tends to swing hard from one direction to the other with these things.

One that I came across recently is Minified.js:

Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests.

The size of the JavaScript file you send across the wire is certainly one factor to consider, especially for mobile users. I’m more curious to see what the performance looks like when using similar features. In some cases that is even more important than the size of the file.

Automatically Loading a Gravatar Image Based on Form Field Input

I’ve seen several examples of automatically loading a Gravatar image on the fly based on an input form field. After coming across another one recently and not finding a Javascript library that would do this for me, I sat down to play with this process a bit. I knew the process wasn’t complex, but at the same time it seemed like something that should have an easy to use drop in module to make it work. The result is a simple jQuery plugin I’m calling form2gravatar.

The source code is available at https://github.com/josephscott/form2gravatar, along with a simple demo at http://josephscott.org/code/javascript/form2gravatar/. To get started you need a form field, and a target image element:

<div>
	Email <input type="text" name="email" id="email">
</div>
<div>
	<img src="http:////www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=64" id="gravatar" alt="Gravatar" height="64" width="64">
</div>

Assuming you’ve loaded jQuery and form2gravatar.js you can then trigger a Gravatar image lookup with:

$( '#email' ).form2gravatar( { target: '#gravatar' } );

This tells form2gravatar to watch the keystrokes in the #email element and update the #gravatar image. By default it will check the form value several times a second, which makes it easy to update the image rapidly, but might be a waste in some cases. So there is an option to only do an image update when the form field loses focus (use_blue).

For pages with several form fields setting use_blur to true will still provide a good experience and have almost no performance impact on the page. If you only have a few form fields (like on a log in page) I’d stick with the default behavior. You can adjust how frequently the form field is checked with the timer_interval option.

Here is a list of all the options in form2gravatar:

	var opt = {
		'default_img'	: 'mm',
		'size'		    : 64,
		'ssl'		    : false,
		'target'	    : false,
		'timer_interval': 100,
		'use_blur'	    : false
	};

The only one that is required is target. The other option many folks will want look at is default_img, which by default uses the mystery man from Gravatar. You can use any of the other Gravatar default options (404, mm, identicon, monsterid, wavatar, retro, and blank) along with a URL to some other image.

The Github repo includes a demo.html file that shows this in use for sign in page. From there you can copy and tweak it into what ever shape you’d like.