Show / Reveal Password Bookmarklet

If you’ve got a password saved, but can’t remember what it is, you can use this bookmarklet to reveal it.
Drag the image to the bookmark bar:

Reveal Passwords
Click the button above to try it out:

If you’re interested in the JavaScript source:"input[type='password']"))

It gets all password inputs and turns their type to text; and should work in modern browsers (like Safari, FF4, Chrome etc) that support ‘querySelectorAll()’.

Things That Give Me Usability Cramps – Web Forms

Usability Cramps

[yoo-zuh-bill-ity kramps]

  1. n. are unpleasant, often painful sensations caused by unbearable unusable user experience mistakes
  2. v. usability cramping, usability cramped, why the hell did they do this?

Form Labels That Don’t Select the Fields

This one mega-stresses me out; when the text label next to checkbox or a label doesn’t select it when you click it:

Bad Form Field:

To fix this, just give the input field an ID, and the label a for=’inputID’:

This is particularly annoying when there’s lots of checkboxes or really small radio buttons.

tip: add the following CSS to force the browser to show a pointer on clickable labels and buttons:

label, input[type="button"], input[type="submit"] {  cursor: pointer; }

Mobile Sites That Don’t Use the Right HTML(5) Input Types

If you use the correct types for your inputs then touchscreen devices adapt the keyboard to fit the need, and browsers can adjust the UI accordingly.

iOS Screenshot of email keyboard

Using input type='email' brings up an email specific keyboard on iOS

Browsers that don’t understand these new input types default to text, so you’ve got nothing to lose.

Forms That Need to Reload to Validate

It’s so easy to check your forms with a bit of JavaScript, instead of having to refresh the whole page; and generally require any password or captcha fields to be re-enter.

Oh, and if you have a username field, check it’s available before I click submit:

Twitter showing a username's available

Twitter Signup

I’m purposely not linking to any validation scripts; there’s not a universal drop in one I’d want to recommend, however, keep an eye on the native browser support for validation.

Javascript – Is an Object Empty?

To check if an object is empty in Javascript:

Object.getOwnPropertyNames(obj).length === 0;

Where obj is the object you’re testing e.g.:

var obj = {};
Object.getOwnPropertyNames(obj).length === 0; //true

obj = {'not' : 'empty'};
Object.getOwnPropertyNames(obj).length === 0; //false

Or to wrap it in a function:

function isEmpty(obj){
    return (Object.getOwnPropertyNames(obj).length === 0);

This only works in ECMAScript 5 compatible browsers, so is useful when developing mobile / desktop web apps.

Throttle Bandwidth on MAC OS X

To limit the connection speed on your Mac to a 56k modem for testing your website loading speed, pop this into terminal:

sudo ipfw pipe 1 config bw 56kbit/s
sudo ipfw add pipe 1 dst-port http

You can change 56kbit/s to any speed you want to test with.

To clear it either reboot or use:

sudo ipfw flush

via ( – Traffic Shaping in Mac OS X)