Show Passwords Bookmarklet

I wrote a bookmarklet that makes password inputs show you their contents. The motivation is threefold:

  1. Pasting $('input[type="password"]').val() the console of a page with saved passwords has always amused me and the bookmarklet makes this easier to do on pages that don't have jQuery.
  2. I sometimes actually want to see the password I'm typing, either because it's fiendishly complicated or for some reason I've messed up a bunch and want to verify my typing.
  3. I wanted to play with SASS and CSS linear gradients. So I put together a tiny website and needed something to put up there on it.

Teh Codez

javascript:(function(){
    var passwords = document.querySelectorAll('input[type="password"]');
    for(var i = 0; i < passwords.length; i++){
        passwords[i].setAttribute('type', 'text');
    }
})();
  1. This is a bookmarklet, hence the javascript: protocol. In order for the browser to not navigate to a new page, bookmarklets need to return undefined, hence the anonymous function.
  2. document.querySelector and friends are very cool and they let you find elements jQuery style without needing to try and pull in jQuery to run your three lines of actual code.
  3. Unfortunately, document.querySelectorAll doesn't return a real Array so you can't use Array.forEach and are stuck using JavaScript's built in for. Sad sauce!

What the Date?

Today's Code Snippet of the Day (CSOD) from The Daily WTF shows how not to validate a date. Inspired by boredom and the knowlege that I could do it shorter and better. I set about writing my own date parsing/validation routines as a form of Code Kata.

In Python, Take I

A first crack written in python:

date_pattern = re.compile(r'^(?P<day>\d\d)/(?P<month>\d\d)/(?P<year>\d\d\d\d)$')

def parse_date(input):
    if not date_pattern.match(input):
        raise ValueError("'%s' is not in DD/MM/YYYY format" % input)

    day, month, year = map(int, input.split('/'))
    d = datetime.date(year, month, day)
    if d > datetime.date.today():
        raise ValueError("'%s' is in the future" % input)

    return d
  1. We validate the date against a regex so that we know what we're dealing with.
  2. We split up the input string and construct the date.
  3. We test that the date is not in the future, and return the result.

This implementation is better than the CSOD in a number of ways:

  1. It uses a regex to validate the format of the input string with is so much more faster/expressive/productive that writing our own validation code.
  2. We use the platform's built in Date object rather than storing and manipulating the year/month/day ourselves which helps to avoid all kinds of silly bugs.

Unfortunately, we still parse and construct the date ourselves, duplicating functionality present in the standard library.

In Python, Take II

A second attempt, this time we're going to rely on strptime rather than parsing the string ourselves:

def parse_date(input):
    d = datetime.datetime.strptime(input, "%d/%m/%Y").date()
    if d > datetime.date.today():
        raise ValueError("'%s' is in the future" % input)
    return d

This implementation is even better as it relyies on strptime to handle the parsing/validating and the only real code that we write is testing if the date is in the future which is our logic.

In JavaScript

An implementation in JavaScript because the CSOD was submitted in JS. This is essentially a transcription of the first Python implementation as none of the JS date parsing utilities seem to take a formate string:

date_pattern = new RegExp('^\\d\\d/\\d\\d/\\d\\d\\d\\d$');

function parse_date(input){
    if(!date_pattern.test(input)){
        alert("'" + input + "' does not conform to the dd/mm/yyyy format");
    }

    ordinals = input.split('/');
    d = new Date(ordinals[2], ordinals[1] - 1, ordinals[0]);
    if(d > new Date()){
        alert("'" + input + "' is in the future");
    }

    return d;
}

It would be preferable to try and achieve the simplicity of the second Python implementation but that would require writing (or including third party code) comparable to strptime.

Aside

It is very, very, strange that months are 0 indexed while day and year are not in the Date constructor:

js> new Date('12/02/2008')
Tue Dec 02 2008 00:00:00 GMT-0500 (EST)
js> new Date(2008, 12, 02)
Fri Jan 02 2009 00:00:00 GMT-0500 (EST)
js> new Date(2008, 11, 02)
Tue Dec 02 2008 00:00:00 GMT-0500 (EST)

Seriously, what's up with that?