Peterbe.com

I inherited some old Javascript the other day that looks something like this:

document.getElementById('msg').firstChild.nodeValue = message;

Inside the document there's a span tag that this writes to:

<span id="msg"></span>

Why use this arcane firstChild.nodeValue when you can use innerHTML??:

document.getElementById('msg').innerHTML = message;

It was not until I made this fix that the Javascript started to work in my Firefox. How could that ever have worked? All Javascript gurus out there, what am I missing?

My colleague Jan discovers a nasty bug on Amazon.co.uk that I believe anybody can reproduce. It's actually a real showstopper that prevents a shopper from ordering the things they want to order.

The problem is that on the View Shopping Basket page, only 10 items are shown per page. The 11th and 12th and so on, those items can't be changed (such as removed). So what do you do if you've decided not to buy that 11th book? Since you can only see the first 10 on the View Shopping Basket page, you might think that if you can delete the top couple of items, thus shrinking your list to say 8 items. What happens then is that you get a blank View Shopping Basket :) The total price is correct but apparently your shopping basket is empty. (see screenshot) It also appears, that the only way to see your shopping basket list again is to add some more items so that you have more than 10 items in the basket. And remember, what happens when you have more than 10 items in the basket? Correct, you can't reach the 11th which you originally wanted to remove. D'oh! Amazon.

I sincerely hate Internet Explorer sometimes. I never like it. Today it really pissed me off. If you use multiple <button> tags in one form, think again. It doesn't work in IE like it should do [...in Firefox]. If you have a form like this:

<form action="showRequestVariables">
<button type="submit" name="button1">Button1</button>
<button type="submit" name="button2">Button2</button>
</form>

Then, which ever button you press you'll get these request variables if you use Internet Explorer:

button1 = "Button1"
button2 = "Button2"

In Firefox you only get one; the one you pressed. Doesn't that seem logical? The Firfox way I mean.

This might not be new but I haven't seen it before. If you come across a page that doesn't exist on www.invms.co.uk it will show you a nice error page like so many other websites do, except that the IMS 404 error page is a bit more advanced. First of all it deconstructs the requested path and prepares that for a site search. This "suggest searchterm" is then also used to make an AJAX search (using tw-sack) asyncronously inside the browser but then only on the title of the various pages it can find.

The advantage of doing an AJAX search instead of a server-side search is that the page loads faster. First it loads the important message ("Page not found"), then as an added bonus it shows some additional help. It also means that all those portscanners and other phishers (who don't use webbrowsers to do their scanning) don't cause lots of excessive searches on the server.

To test this, go to a page that doesn't exist like http://www.invms.co.uk/Literature/foobar or http://www.invms.co.uk/IMS-Select-Funds/IMS-Select-Income-FundXXX

If you go to a page on www.chooseandbook.nhs.uk that doesn't exist, like this one: http://www.chooseandbook.nhs.uk/ajdoaijdjdad you'll get an interesting error message. The title is a stroboscopelike marquee text that flings across the screen. It's very frustrating to look at because it's a million times more animated than it needs to be.

BUT a fun thing about it is that it flashes by from left to right, right to left; like a the universal body language of waving your finger or turning your head to indicate NO. I remember that Red Hat used to have on it's display manager log in, that it shakes horizontally if you enter the wrong password. I liked that. It made sense and was not intrusive since it stopped quite quickly.

Anyway, it's an interesting to solution the NHS has taken to display this error message. I'm not going to forget it.

A very common thing on the web with forms is that you have a drop down with lots of options that gets used often. It's a very convenient little widget that is used a lot on the web.

I've been thinking about a possible way to make these a big more user friendly by pushing the most popular options towards the top. By doing so, most selects will require little scrolling. Obviously the implementation depends a lot on the application. As a good example, look at the two drop downs on http://www.xe.com/ucc/ where the most common choices (EUR and USD) appear at the very top of the list.

In many cases you can't reorder the options within the drop down because the order might be alphabetic or something like "Not at all, Not very, Fairly, Very". Suppose most people select "Fairly", it would still not make sense to reorder the options to be "Fairly, Not very, Not at all, Very". But, let's instead focus on those that can be reordered to help the user.

This is just so cool. It's a preview of VisiBone's printable cheat sheet of Javascript regular expressions. I really like the idea and will return here many times probably.

Just a thought though, on this page they have in their tagline "Are you still learning JavaScript from a book that's 95% English?". My answer to that: Yes. Using a cheat sheet is obviously a very efficient method but I [and probably most other people] are so stuck in thinking that educational information has to be transferred with lengthy human sentances. When I read computer books I often just read the headlines and look at the example code, but I would probably feel lost if the paragraphs of text wasn't there though.

So, is it time to change? Perhaps cutting out the friendly banter is a thing of the past. Who knows. We'll see.

UPDATE:

I ordered this now and received this in my order confirmation email:

" I can't describe what a thrill it is to get your business. My fondest wish is to make useful stuff -- and for actual people to actually use it. You're probably a complete stranger and somehow I've convinced you to give it a try. And you're actually paying me?! Almost too much to take, but I'll bear up. I'd love to know how it all turns out."

In an DHTML solution I've been working on I need to tap into window.onload and append my own function in there. The code looked something like this:

<script>
function foo() { alert("foo"); }
window.onload = function() { foo(); }
</script>
... more HTML junk ...
<script>
function bar() { alert("bar"); }
window.onload = function() { bar(); }
</script>

If you run this it will only run the bar() function because it was defined last. Ideally one would want to write something like this in the second chunk of javascript:

<script>
function bar() { alert("bar"); }
window.onload = function() { foo(); bar(); }
</script>

which when you run it does both alerts but it's unfortunate that the second piece of javascript needs to know about parenting code.

If you look at the Add Issue form on the Demo issue tracker you should see the three select boxes (aka. drop downs) and if these become too long they tend to be difficult to use. Here's a potential solution that; I just need to know what you people thing about it's usability.

I use onfocus() and onblur() to change the size attribute of the select input element thus temporarily giving the user a bigger workspace. Please have a play on this demo page and return here after for feedback.

Lynx is a web browser that is so basic in functionality that even Microsoft Internet Explorer is more userfriendly; sometimes. It's not graphical which means that you can run in on the command line of a computer where graphical applications aren't an option such as SSH access.

Another more important thing about Lynx is that it indicates how a blind person might see a website. (Remember, Google is blind) If you want to make a really accessible website that works universally you have to make sure it works in Lynx too. For non-Linux people it might not be so obvious how to install Lynx, and that's where LynxView comes in.

Here's what you see if you browse my website with Lynx and the IssueTrackerProduct.com

So if you're serious about your website please do make sure your site works reasonably well in LynxView.