25 May 2013

Unfinished hyperlinks - add a todo

Just a quick post;

href="#"   ==>   href="#todo"

I'd like to promote a change to the habit of using '#' as the placeholder for a the url of a new hyperlink when you don't yet know where it'll link to: instead set the href to "#todo". This follows the //todo pattern recognised for unfinished code, and means you can now search your codebase for any links you forgot to finish off.

<a href="#">new link</a>
<a href="#todo">new link</a>

eg: new link becomes new link

Give all these links an alert with the following (cheers to unknown in the comments)

$("a[href=#todo]").click(function () { alert('Not implemented yet.') });

It will also give clues to any sharp-eyed testers / users that they should report a bug for you as the url will change to #todo when the unfinished link is clicked. It can often be seen in the status bar too.
This has the handy side-effect of avoiding the annoying jump to the top of the page that is the default behaviour when you click on a # link that's a placeholder.

For bonus points another little trick I like is to add a click handler with an alert to make it really obvious to any early users / testers that this is not done yet, and I've found this saves a lot of questions when you genuinely haven't finished, and also guarantees a quick bug report when you should have (not that I ever forget any of course :-D)

<a href="#">new link</a>
<a href="#todo" onclick="alert('Not Implemented');">new link</a>

eg: new link becomes new link  <= click this to see the alert

Simple and effective.

If you agree, please help spread the word. Perhaps by retweeting my tweet

P.S. This goes hand in hand with a technique of picking points during development at which there should be no todo's left in your codebase with the exception of those with references to outstanding user story / bug numbers. I suggest before marking a user story as done, and at the end of each sprint as good points to review all todos in your codebase.

Further reading:


Unknown said...

Nice idea - but instead of putting the onclick specifically in each element, you could use jQuery (or, well, any other method you choose) to put a listener on that link's click event:


Tim Abell said...

@Unknown, love it, thanks for the excellent suggestion I shall use that in future.