phpied.com

I remember reading a discussion over at Sitepoint - has the fun gone out of PHP? No it isn't! No way, the fun is here… or should I say PHun

Check this out - videos from a beer drinking contest at a PHP conference. I love how serious the gyus are, I mean, at the end, a contest is a contest, you're serious or you're out, it is a serious matter and should be taken with the necessary amount of responsibility

And how about this T-shirt on sale at php|arch?

While it may be amusing in a sorta geeky kinda way to wear your programming inclinations (or any other inclinations, for that matter) on a t-shirt, I believe I stopped doing it long time ago, my last fan t-shirt was probably the one displaying a nasty scene from a Canibal Corpse's album cover (man, am I that old!)

The nice thing about the shopping experience at php|arch, usability-wise, is that they really make sure you're aware of the shipping details. Did you see, they ship only to North America and the Rest of the World. No way you can get that t-shirt delivered on Mars or Venus, sorry, not at this time, working on it…

I recently posted about those auto-fill utilities, like the one found in the Google toolbar. They are designed with one mission in mind - to fill form fields for you. When you hit a page with a form, if the form has fields with common names such as "name" or "email", the auto-fill utility can populate the form for you, using some previously stored (by you) values.

How the Google toolbar for Firefox's auto-fill looks like

All is good, but in order to communicate which fields can be auto-completed, these type of tools change the input background to colors such as yellow. And if you have a dark page with dark background and light (white) foreground colors on the form fields, you cannot really see you're typing. (examples)

To workaround this I tried implementing a solution (as Marco suggested in the comment to the previous posting) where a javascript:
- traverses all text input fields
- gets the background color using the computed styles
- checks if the color is as expected. And if not:
- calculates a negative value of the background color and sets it as a foreground color.

Try the demo. In order to see exactly what it does, you need to have an auto-filler installed.

Some notes

Parsing color values

This demo is using a lighter version of my own RGBColor-parsing class. Lighter, beacuse it really needs to parse only two types of color values: rgb(xxx, yyy, zzz) and #xxyyzz.

Computed styles

There is a difference between IE and FireFox (anyone surprised?) in the way the computed styles are returned.

IE:
the_element.currentStyle.backgroundColor
will return something like #ffaadd

FireFox:
document.defaultView.getComputedStyle(the_element,'').getPropertyValue('background-color')
will return something similar to rgb(123, 45, 67)

Auto-fill-able fields

If you want the Google toolbar's auto-fill to recognize your fields, you need proper label tags in your markup. For example:

<input type="text" name="name" id="name" />

… will not be recognized, but …

<label for="name">Name: </label>
<input type="text" name="name" id="name" />

… is ok.

JCreator - Another live example

I saw recently another site where the issue resolved above is very noticeable. If you want to download JCreator Lite from http://www.jcreator.com/download.php?productid=215952, you need to fill out a form. Submitting the form with errors will give you back the form with errors fields highlighted in red. Excellent idea and very friendly way to show validation errors. But the fields are red and the text is white. With the auto-fill ON, you get yellow fields and white text and you cannot see what you've typed that needs correction.

Screenshot with the auto-fill OFF:

Screenshot with the auto-fill ON:

I've noticed some bloggers redesigned their sites using very dark backgrounds and the results are often very cool. The thing is that the forms also have dark backgrounds and, in order to be readable, light colour fonts.

The problem I saw is that form auto-fillers such as the Google toolbar, paint the fields they think they know about in some shade of yellow. As a result, white font on yellow background is next to unreadable.

Dustin Diaz's blog was recently redisigned.

The form with the tooltip from the offending auto-fill thing.

What's my email?

Also Marco has done a great job redesigning his site. In his case the font is a shade of gray, so the text is more readable, but still not too contrast.

How to resolve the issue? Trying to find a one-colour-fits-all-auti-fillers may be hard, but maybe trying to keep the form fields' background as light as possible is a safer way to go.