Monthly Archives: June 2011

A gorgeous login form concept

13 Replies

These days I am working on a couple of semi-stealth hobby Web apps in my spare time and, well, I want them to look gorgeous. Yesterday I was thinking about styling the login form for one of the apps and make it somewhat different to all those boring login forms we see everyday and everywhere on the web.

Sometime ago I read an article about this idea of showing labels behind fields rather than next to them and fade them out as soon as the user types in some text and I liked it. The login form that I have designed is based on the same idea but it’s even more gorgeous!

They say a demo is worth a thousand words so without further ado here’s the demo page. Go ahead and type in some text in the fields to see the effect.

As you can see rather than fading out the label, we move it to sit on top of the field. But the devil is in the details. In other words, the login form renders well even under the following conditions:

  • In browsers that do not support stylesheets (e.g. in Lynx)
  • With JavaScript disabled
  • In IE 6 (IE 6 is still sooo popular in archaic environments). Well, no, just kidding. I don’t care about that creepy wombat anymore.

HTML Page

CSS

JavaScript

Update 1 – 3 July 2011:

I found a bug in the initial implementation given above a couple of days ago. Suppose that the login field contains one character and then the user quickly presses backspace and writes another character. This leads to the label staying behind the field while it’s not empty. Changing installAnimation like below fixes this bug:

Fixed installAnimation

This alternative implementation stops all the currently queued animations for the label element before starting a new animation.

Introducing the Robot Attack theme for WordPress

Leave a reply

Robot Attack is a weblog theme originally developed by Opera for their My Opera service. I used to blog on Opera before switching to WordPress and I really liked their themes. After the switch I searched and searched but didn’t find a WP theme that I liked enough. Most beautiful WP themes out there are not suitable for programming blogs. So I finally reverse engineered the Robot Attack theme and converted it to a WP theme with some minor tweaks here and there. An initial version of Robot Attack for Opera is available at Github. However right now it’s far from perfect. For one, currently it doesn’t support widgets. And then, the profile photo should be changed manually.

So, if you are a PHP guru, like this theme, and want to make it even better, you are more than welcome to contribute to the project by forking it and submitting your patches.

One thing that surprised me quite a bit was how easy PHP is to read and how quickly you can become productive writing PHP code. The learning curve is so gentle that you can hardly notice it. Another surprising thing I found in WP’s codebase is that rather than passing multiple parameters to a given method, they encode all the parameters for that method in a string and then pass that in. Weird.

Introducting Trimify

Leave a reply

Quite often users accidentally add redundant white spaces before or after text they enter in web forms. This can lead to an inconsistent database and also complicate, or even worse, break model validation. As such it’s necessary to intercept all textual data and remove these extraneous white spaces before models are validated and form data are persisted. Trimify is a Ruby gem that automates this process.

For example, let’s pretend that we have a Post model that has a title and a body. In order to trim content of title and body before validation, all we have to do is:

By default, trimify converts blank strings to nil. This can be overridden by setting the :nilify option to false:

The current version of Trimify is only compatible with Rails 2.3 but I am planning to release a Rails 3 compatible version soon. To use Trimify simply install it by running gem install trimify. The project is hosted at Github.

Acknowledgments

Trimify is inspired by the nilify plugin written by Tobias Schmidt.