We are typing our passwords twice because

To find out the reason for the “confirm password” input field I did some light Googling. This is why other people adds an extra password field to their sign up forms.

a) We use this as confirmation that we typed what we meant to type.
b) It is a convention, it is what we expect and therefor get.
c) Web developers are bad habit forming idiots with preconceived ideas
d) if we type it twice we are more likely to remember it.

I am a combination

For me it is a combination. A is probably the original thought behind it, but it is also something that I just expect to be there. But I also think it’s legacy design. Something I should have abandon years ago, or at least when I learned to create a better solution of my own.

A – Confirmation

My guesstimate is that most people actually do type their passwords correctly, even if they only see stars or bullets. If they don’t, they will probably find out soon enough and use the “I forgot my password”-link. I don’t think everybody should suffer just because a few can’t type their password correctly.

B – Convention

It is actually not so much a convention now days as it might have been a couple of years ago. Just look at Virb or Facebook.

C – Idiocy

Most web developers aren’t idiots, but there are somethings we, I at least, do without thinking much about it. One of those things is probably creating an extra input and force you to type your password twice.

D – Memory

No.

Instead of confirm password

One solution is to just kill that extra input, like Virb and Facebook have done. Another is to replace it with a “Show Password”-checkbox using the Show Password Jquery plugin.

People who want a confirmation that they spelled their password correctly can tick the checkbox. Others can ignore it. And that I like, stuff you can ignore if it doesn’t concern you.

Jacob Nielsen’s blog post ‘Stop password masking’ stirred up quite the discussion and divided the web developers into three camps; Stop masking, Don’t stop masking and Do both!.

I’m definitely in favor of ‘Do both!’ and letting the user decide whether she wants her passwords masked or not. It is very simple to do and it’s fairly common concept; just look at the screen-shot of the Networks Preferences in Mac OS X above. The same thing can also be found in Microsoft Windows.

The demo in the Iframe above uses the very simple and lightweight Jquery plugin called ‘Show password’. You can get it from the ‘Show password’-project page.

This Jquery plugin, ‘Show password’, let the user decide whether they want their passwords masked or not. Just take a look at the demo beneath and you’ll see what I mean.

How to implement

Very simple! First you download, then you do like this:

<input id="text" type="password" />
<input id="checkbox" type="checkbox" /><label>Show password</label>

Two html elements are needed; a password field and a checkbox. Then you add the javascript below and change #text and #checkbox to the names of your input IDs.

 $('#text').showPassword('#checkbox');

Secondly and more importantly; even if the email matches a perfect regular expression, there are no guarantees that the email address belongs to the user, or even exists.

With all that said I still believe live javascript-based email address checking using regular expressions is a good idea. You can use it to prevent users from doing unnecessary typos. You don't have to force them to pass the validation, just let them know if you suspect the email to be faulty. Try the demo, created with the Jquery plugin Valid8, above and you will see what I mean.

/^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(aero|asia|biz|cat|com|coop|edu|gov|info|int|jobs|mil|mobi|museum|name|net|org|pro|tel|travel.ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|er|es|et|eu|fi|fj|fk|fm|.fo|fr|ga|gb|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|.il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tl|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)\b$/

Above is the regular expression I use. It is heavily based on a regexp from regular-expressions.info

How do I validate email addresses if not with regular expressions?

Sending an email activation link is a perfect way of validating an email address. You email a link the user have to click on to complete the registration. The link should be disposable and often look like this: http://www.unwrongest.com/signup/?guid=8373629375284563

Never trust client-side validation

Lastly. Remember that you can never, ever, trust client-side javascript validation. It is very easy to tamper with. All validation you do on the client-side has to be done again on the server-side. Client-side validation should be mainly for the users sake.

How to use Password Strength

You need two html elements to use ‘Password Strength’; an input field and an element to show the time in.

$('#pass').pwdstr('#time');

One of the things I noticed was that people tend to write very verbose code, meaning, they tend to write a lot more code then they need too. Take a look at Abhi’s 30-rows implementation or Trevor’s Cheat Code Jquery plugin(!).

There are numbers of valid explanations to why people write verbose code; to be overly clear for educational purposes is one. But if you do that, I think you should also teach people that they shouldn’t make a habit out of it, especially when it comes to something so small that it fits inside a Twitter tweet.

// Tweetable Konami code
var k=[];addEventListener("keyup",function(e){ k.push(e.keyCode);if(k.toString().indexOf("38,38,40,40,37,39,37,39,66,65")>=0)cheat()},true);

The code above will fire the function cheat() when you enter the Konami Code (up,up,down,down,left,right,left,right,b,a). The code might be a bit too concies, but I was mainly trying to make a point.

Haven’t seen the Konami Code in action?

Go to www.facebook.com and login. Click once anywhere on your home page and type the following sequence using your keyboard: Up, Up, Down, Down, Left, Right, Left, Right, B, A, Enter Key. Click again or scroll the page.

<script type="text/javascript">
if( window.console && window.console.firebug )
    document.getElementsByTagName('body')[0].innerHTML += "<div onclick=\"this.style.display = 'none'\" style='position:absolute; top:0; width:100%; padding: 5px 0; background: #ff7; border-bottom: 1px solid #770; font-weight: bold; text-align: center;'>Firebug can make this web page slow, we suggest you disable it for this web page. Click to close this warning.</div>";
</script>

Adding the code snippet above to your web page will notify the user that ‘Firebug can make the current web page slow’ and make the suggestion that the user should disable it. Look at the image at the top of this post. Adding that yellow bar to the top of the page is all, I think, you should do.

This follows a line of thought I think you always should have when creating web pages. Rarely enforce or disable. Instead you should lead your visitors to the right path with feedback and suggestions. Like that they probably should use strong passwords and, if it slows down your web page, disable Firebug.

Then the Internet happened and the rules were changed. In 2001 Zona Research released report that stated that the average web user will wait about eight seconds for a page to download, later known as the ’8 second rule’.

For a long time, by Internet standards, the 8 second rule misguided web workers to create web pages that just barely keeps the user focused. If you already haven’t it’s really the time to create a web page that get your users to feel they are interacting freely. Its time to create a web page that loads up at a lot close to 1 second than 8.

Dust-Me Selectors a Firefox extension

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors. You can test pages individually, or spider an entire site, and you’ll end up with a profile of which selectors are not used anywhere. Essentially it removes unnecessary data that is transferred to the user.
Download Dust-Me Selectors from Sitepoint

WP CSS a WordPress plugin

<link rel="stylesheet" href="/wp-css-compress.php?f=style.css" type="text/css" />

This plugin will combine all your stylesheets in to one, thus reduce the number of HTTP requests required to render the page. It will also strip your files from whitespaces, compress it with GZIP and set a cache expiry time of your choosing.
Download WP CSS from WordPress

WP JS a WordPress plugin

<script src="wp-js-compress.php?f=1.js,2.js,3.js" type="text/javascript"></script>

This plugin will GZIP and JSMIN your JavaScript files as well as allowing the ability to put JavaScript files into a single file at the client’s end. Just like the WP CSS plugin this will reduce the number of HTTP requests and lower your blogs response time.
Download WP JS from WordPress

WP Super Cache a WordPress plugin

This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts. Super Cache also has the feature to compress your html files using GZIP. There is also a special version of WP Super Cache which has the ability to minify HTML.
Download WP Super Cache from WordPress
Download WP Super Cache with WPSCMin from Lyncd

Optimize DB a WordPress plugin

This plugin lets you optimize the tables of your database, to reduce their overhead.
Download Optimize DB from WordPress

Yahoo YSlow a Firefox Firebug extension

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It lets you know if you have too many DOM elements, if your javascripts are positioned wrong, if you compression is working and much, much more.
Download YSlow from Yahoo

Last, but not least. Upgrade and do a clean up.

Upgrade WordPress to the latest version. Remove the plugins you are not using and upgrade those you are. Keep your code light. Try to code what you want to code with as few words as elements, attributes and functions as possible. Minimize requests, use css sprites and read Yahoos guide about ‘Best Practices for Speeding Up Your Web Site’.

It is very easy to use Tabify. All you need to do is to create an ul-list, fill it with a couple of li-elements with containing links (tabs) and create a couple of matching content divs. In the example below notice how the href-attribute on the link elements corresponds to the content div IDs.

<ul id="menu">
	<li class="active"><a href="#contentHome">Home</a></li>
	<li><a href="#contentGuestbook">Guestbook</a></li>
	<li><a href="#contentLinks">Links</a></li>
</ul>
<div id="contentHome">Content for Home</div>
<div id="contentGuestbook">My guestbook</div>
<div id="contentLinks">Links</div>

When you have created the necessary html code you need to include the javascript file with the plugin and call the tabify method.

$('ul').tabify();

How to use Elastic

The usage of Elastic is very straight forward. All you have to do is include the javascript file containing the plugin and use the elastic method.

	$('#myTextarea').elastic();

Known issues

EM The elastic plugin does work with font sizes, line-heights and such set in em, but it does work better with px. Elastic needs to convert your em value to a pixel value. 1.2em might be 16.56478px which is not exactly the same as 1.2em. After a couple of hundreds of rows the height of the text area is going to be too small or too big.