Peterbe.com

I can appreciate that sometimes some browsers just don't work very well with the latest Flash animations but then you make a backup HTML version which should have some information or at least one of those annoying messages that says "Sorry, please upgrade to Internet Explorer 4.5 to play this intro". What I don't appreciate is when web developers can't even get anything to work at all in Firefox.

On my site, 44% of my visitors are Firefox users but it's slightly skewed because it's quite a techy site. In general, out there on the internet a rough guess is about 15-30% are Firefox. Out of them I don't know how many are Firefox 3 on OS X but I'm sure it amounts to a large number. This is basically what Stride - The Ridiculously Long Lasting Gum is missing out on. D'oh!

When I try to view their site I just get a big fat grey screen with nothing. I'm sure they've spent many tens of thousands of US dollars or more on this web team and yet they get the very basics wrong. Why??

Let's go back to basics of HTML development.

All A tags whose content isn't a text string should have a TITLE attribute

If your link is plain like this, adding a TITLE attribute is less über important but gives you a chance to help your poor user even more:

<a href="settings.html" 
   title="Change settings, language and preferred colour">Settings</a>

Where it really matters is when you use an icon instead of system text to link to describe something. Having an ALT attribute on the image isn't always good enough. Some browsers will not show the ALT attribute tooltip when you roll over an image that is wrapped in an A attribute. Here's how you should do it:

<a href="settings.html"
   title="Change settings, language and preferred colour">
   <img src="wrench.gif" alt="Wrench" border="0" />
</a>

Sure you should use the ALT attribute. In this above example, in Firefox, what happens when you roll over the icon is that the TITLE attribute's content is shown in the tooltip. What we have to do then is to copy the TITLE attribute to the ALT attribute so it looks like this:

<a href="settings.html"
   title="Change settings, language and preferred colour">
   <img src="wrench.gif" border="0"
        alt="Change settings, language and preferred colour" />
</a>

Now you get the best user experience in both Firefox and IE. Your users can roll the mouse over the icon and be guided by a tooltip if they're uncertain what clicking the link means. Why does this matter? You probably, as me, have been on tonnes of sites with mysterious icons you can click and you have no idea what they do. Sometimes they have tooltips, sometimes just a tooltip like "email" or something equally cryptic. There's been times when I hesitate to click but instead try to guess what the click means by looking at the URL it will go to. If it looks like something like this .../change_password?user_id=1234 that gives a way a lot. Other times, I've actually inspected what the name of the icon file is to understand what it actually does (you can do this in Firefox by right-clicking and select Copy Image Location).

Why does this matter? The ultimate gospel in web usability (if you belong to the Steve Krug school) is: Don't make me think! It's painful to not only have to waste seconds on guesswork and forensic analysis but it's also a really bad user experience since you'll force your users to plunge into a click they're not entirely certain about.

Whilst I'm at it, this appeared in front of my eyes today on a hotel booking site. None of them were links but just icons with no ALT attribute. Can you guess them all?

I've put together a little demo.html page so you can see for yourself what happens when you roll your mouse over these and what happens.

If you do web design, making your pages work in different browsers can be very frustrating. The most common troublemaker is Internet Explorer and I think everyone who's ever tried hand-coding CSS has experienced. Another thing that makes it hard is simply lack of time to test it in all different browsers and platforms.

But! if it makes you feel any better even Apple is struggling as this screenshot shows.

I've seen Apple.com/store work in Firefox on other computers so clearly it's not a problem on all Firefoxes but you'd think a big site like this must have heard of this and done something about it. If you think that what happens is that the images aren't loaded that not the case. This problem has been around for a while for me now. And no, I don't have Firebug or any other debuggers switched on as I open this site.

Now I realise why I'm taking a serious look at new "shorthand frameworks" like Django and Grok rather than Twisted, Plone 3 or Zope3: Because of jQuery! The Javascript framework which makes writing normal Javascript a joke.

Ever since I discovered jQuery I haven't looked back. Seeing "manual" Javascript code makes my crinch. By jQuery'ifying a pile of pure Javascript code you can go from 100 lines of code splashed with semi colons and for-loops into 20 human-readable lines. There's lots of magic which I guess you've just got to get over and accept but what's so brilliant is that stepping out of the magic into the wild is so damn easy and near. My only regret is not using jQuery since the day it was released. Now I've been using it for at least a year and can't see any reason for using anything else.

Ruby on Rails looks tempting too with its own nifty magic but I'm just afraid the step into "raw mode" is going to be too big. Like Plone, if you just do what you're told you can do you're getting brilliant results but anything more exceptional than that and you're back to more trouble than if you had done it without a framework.

My personal current dilemma is that I can't decide which on to invest in fully: Django or Grok. Grok seems technically superior but Grok as a community is where Django was a very long time ago. I'm going to try to master them both and some point in the future drop one of them. This is what I did when the Javascript frameworks came out. I eventually gave up on Prototype and Mootools and put all my effort into jQuery instead and I'm glad I did.

EditArea and CodePress are two text editors that are run in the browser. They're not WYSIWYG editors and the most important feature it really actually adds is syntax highlighting. First and foremost I think this is a solution to a problem that shouldn't exist: either you go full-on in emacs/vi/eclipse or you don't do any editing at all.

However, if there is a (client) need where you want to allow for source code editing in the browser, either CodePress or EditArea is probably the way.

I seem to remember a EditArea implementation for Zope which replaces the dumb textarea tags in the ZMI for Python Scripts which was a neat idea but I quite quickly turned it off and went back to the plain vanilla solution. My beef with it was simple: speed. It takes almost more than 2 seconds to load it fully and the browser feels unresponsive for a quite a few seconds even after it's fully loaded. And unlike emacs/vi/eclipse, in a web browser the reason you're editing code is probably because you're jotting down a quick hack or editing a tiny detail. Neither activity means that you keep the editor open for a long time.

F**ing great! I received an MMS from my dad in Sweden and I can't open it on either my T-Mobile branded Nokia or on my Firefox. First of all, why is it still not possible to receive MMSes from different countries? Secondly, if you receive an SMS from T-Mobile with a web link (and a password) wouldn't you expect that web page to work on mobile phones?

When you open it you get this Javascript popup warning: Nice!

When I later tried it instead with my Firefox web browser (under Linux) the interface for reading your received MMS messages is awful and done in frames and then it turns out that the bloody video format is Quicktime which is a crap proprietary format which doesn't work on Linux (unless you hack around).

Thanks a lot T-Mobile! :(

I'm sure there are plenty of free icon sets on the net but since I always forget the few I find, this time I'm going to blog about it to not forget it.

The Silk Icons is a really nice set of 16x16 pixel icons free and free for commercial use. You can either download them all as individual PNG files or preview them all using this one big image file (1Mb)

Whilst on the subject it's also worth keeping the iconfinder in mind. It's in beta and both limited and slow but worth keeping an eye on.

Pretty cool talks and talk topics. A pretty dull expo area but Adobe give out free beer if you take one of their books and trade in a business card.

Even though every second app on the expo and many of the talks are about social networking I found it really hard to network here. I had some decent chats with the expo people but not much with the fellow guests. They few who aren't head-down stuck in their mac laptops were being cliquey and hard to approach.

A blind talker from AbilityNet taught gave me a few thoughts:

• he likes that Gmail has a plain HTML alternative
• Google docs (despite being heavily javascriptted) works for him
• AJAX is generally bad news for him
• screen readers have javascript enabled by default so don't expect them to read notices inside noscript tags

An interesting company there was XCalibre. After 3 years of development they've come up with a virtual private server hosting solution which looks cool. Unlike us, when a virtual server outgrows a physical machine they can move the virt. server from one machine to another with less than 1 min downtime and without loosing any packets or stuff in RAM. They currently support Windows and some Linuxes for operating systems Currently not Ubuntu due to a tricky kernel bug but they're working on it. The cost model is cost per usage. Ie. by megabytes, data transfers and time. The name of the product is Flexiscale.

A few things I learnt from one talk by a lady called Heidi who is an expert at mobile web development:

• don't use the strong tag, use the b tag because it's smaller in size (5 bytes)
• Don't use H tags like H1 or H2 or maybe even H3. They're almost always too big for mobile screens and the mobile browsers make them too big. Content wise, a bold is enough.
• Use the xhtml-mobile10.dtd DOCTYPE.
• Navigation links are over-rated. Use search instead!
• Mobile acid test: http://jwtmp.com/a

One of my personal heros had a talk about Firefox and JavaScript and the future of Firefox. It was John Resig. A nerdy looking fellow who was an excellent speaker with a voice a very very confident and clear voice but with some very shy movements on stage. He had a very technical talk about where Firefox is heading with Javascript 2, SVG and some weird OpenGL extensions. He also touched a bit about Firefox 3 and offline use. Long story short: Mozilla has some grand and exciting ideas about Firefox. Really exciting!

One of the most interesting talks was that of Kevin Rose. The Digg founder. It was nice to hear that he's no genius God. He's just another regular bloke who likes to put together websites. He started everything up from scratch and made lots of misstakes and had to learnt lots as they grew. A few random points I can remember:

• invitation features such as address book import and email invites has been very good for their user growth.
• on the "send an email to a invite a friend", instead of using a mailto: link, use the mail program icons like the Outlook, Firebird etc logos to very quickly explain what it's about
• Their second project, Revision 3 was done in Python and the latest was done in Django and they were very happy with it. Digg is done with LAMP(hp).
• Don't (even try to) go for VC until you've got a working app
• Plan for success! One of the biggest mistakes he confessed. However, at the very earliest stage his aim was to get something working and earn a few extra bucks to reduce his rent.

If you're a web developer and care about having snappy web sites you'll know about YSlow for Firebug. I managed to get a grade A (96) but I'm suspecting that there's a bug in the YSlow analysis.

Setting an Expires header is inferior to using Cache-Control which my site was already using fine with headers like:

Cache-Control: public,max-age=3600

according to the latest documentation but YSlow kept going on about setting Expires headers. I prefer Cache-Control since you don't have to do any date formatting which eats a few excess CPU cycles. If anybody knows why it's a good idea to use both Cache-Control and Expires let me know.

I discovered something really odd today that maybe a seasoned AJAX guru already knew as a legendary bug which might even have a name. I was developing a little AJAX method on the server side that returned this:

<?xml version="1.0"?>
<sections>
  <section>
    <number>001</number>
    <title>PLug 1</title>
  </section>
  <section>
    <number>003</number>
    <title>PLug 3 xyz</title>
  </section>
</sections>

Note: The Content-Type used was "text/xml"

I used jQuery to kick off the AJAX call and then I loop over the document element returned with childNodes almost like this:

children = data.childNodes[0].childNodes;
for (var i=0, len=children.length; i<len; i++)
  // bla bla

It was working fine in Firefox and of course not in IE 6.0.