A friend of mine found a nice car she on www.enterprisecarsales.com so she copied the current URL from the address bar and emailed that to me. The URL was: http://www.enterprisecarsales.com/carsales/vehicleDetails.do?carIndex=1&vin=1GCHC24U36E112452 which by the look of it (notice the /vehicleDetails.do part of the URL) takes you to a page that says "Sorry, we are unable to complete your page request since the page you are trying to access no longer is available." How stupid is that? Come on, web developers made those kind of mistakes in 2001. Not 2010.

This means that people can't talk to each other about found matches on the site and this is something people want to do. Especially if you're going to spend $thousands on a car.

Come on Enterprise web team: install Django or something and give users what they want not your excuses.

Check out these all free icons

If you, like me, have various projects that do things like OAuth on Twitter or Google or you have a development site that goes to PayPal. So you're doing some Django development on http://localhost:8000/foo and click, for example, to do an OAuth on Twitter with an app you have there. Then Twitter will redirect you back to the live site with which you've set it up. But you're doing local development so you want to go back to http://localhost:8080/... instead.

Add this bookmarklet: to localhost:8000 to your browser Bookmarks toolbar and it does exactly that.

Here's its code in more verbose form:

Bruno Renié has written a nifty app:iPhone push notifications for Twitter with Prowl

With the power of Prowl it pushes a notification to your iPhone when someone mentions you on Twitter. You first need to install the Prowl app on your iPhone and then go to their website to get your notification key. Then, go to Bruno's site, sign in with your Twitter account (OAuth, so no password give-away) and badabing! you get instant notifications on your phone, for free, when someone mentions you.

If you're one of those people who use Twitter instead of instant messaging and have lots of mentions this might be excessive for you but if not it can be very useful if you are like me who is very slow to spot that someone has replied or mentioned your name.

Great work Bruno!

When you enable TinyMCE you can either choose theme="simple" or theme="advanced". If you go for the simple you get one lovely little bar of buttons but it's missing the link button which is more important than most other buttons altogether. When you enable "advanced" you get three rows of buttons that makes you dizzy. I mean, should really be editing advanced tables in a WYSIWYG editor or mathematical equations?

Here's a config that I think works great. It's all in one row and it's got the bare minimum in terms of additional plugins (no extra downloads required). It's in Python but translates quite easily into Javascript:

"SEO is not about creating a website sausage overstuffed with key words and phrases. It’s all about creating relevant and compelling content that transforms you into a thought leader who can become a trusted provider That is ultimately how you convert visitors into buyers"

I have now made the menu images on this site into a CSS sprite. Basically, instead of loading 6 different images totaling 10Kb it now only needs 1 image which is 7Kb! The difference in filesize isn't the big win here but the reduced number of requests is the big deal.

The number one tip from the Yahoo! Performance people is reducing the number of requests and this is what I've done.

To generate the sprite image I use the CSS Sprite Generator and then fiddled it a bit to make it work for this site. Thanks guys!

The major drawbacks of CSS Sprite images isn't really technical but it's just that it's an optimization hack. The next time I need to change any of the images I have to reapply the hack and there's a risk that by the time I need to get back into it I will have forgotten how to do it or where to go to do it. Anyway, I'm really pleased with the performance of this site now.

Uploadify is a great tool. I'm using it so that people can mass upload photos for a photo gallery app I'm working on. This afternoon I've spent about 3-4 hours trying to get it to work on Windows (IE, Chrome, Firefox). It wasn't easy but I think I got it working in the end.

Pitfall no 1 (easy)

The Javascript code that "wraps" the "uploader.swf" had a bug in how it calculated the installed Flash version in IE (only tested in IE6). So I fixed that and will shortly send a patch to the uploadify.com.

Pitfall no 2 (hard)

I've got nginx on the server passing requests to a Django daemon via FCGI. For some obscure reason, on Windows, if the file uploader.swf was served as a static file directly from nginx it wouldn't work and I would get 403 errors that are never explained in the nginx error log or anything. So I changed it to let Django serve up the uploader.swf file which obviously sets headers differently and then it worked.

Headers when served directly by nginx:

 HTTP/1.1 200 OK
 Server: nginx/0.6.34
 Date: Fri, 17 Jul 2009 17:01:09 GMT
 Content-Type: application/x-shockwave-flash
 Content-Length: 18659
 Last-Modified: Wed, 08 Jul 2009 12:29:52 GMT
 Connection: keep-alive
 Accept-Ranges: bytes

Headers when served from Django (django.views.static.serve):

 HTTP/1.1 200 OK
 Server: nginx/0.6.34
 Date: Fri, 17 Jul 2009 17:01:03 GMT
 Content-Type: application/x-shockwave-flash
 Connection: keep-alive
 Last-Modified: Wed, 08 Jul 2009 12:29:52 GMT
 Content-Length: 18659
 Vary: Cookie

Pitfall no 3 (super complex)

It was working in Firefox Linux, Safari Mac, Firefox Mac but not IE6 Windows, Firefox Windows or Chrome Windows. This despite having the latest (and same as Linux) version of Flash (10.0.22.x)!

Solution: In Internet Explorer, click on Options and delete the cookies, temporary Internet files and Clear History (for good measure). Now it works!!

It's been a hell of a journey but now it's crossed. Let's hope I can save some other poor sucker a couple of hours by making this blog available.

UPDATE

ow it's stopped working again. Works in Opera Windows but not IE 8 in windows 7. Grr...!

UPDATE 2

I've completely abandoned Uploadify now and instead gone for Swfupload which actually works really well.

My crossword solving website Crosstips now has a cute little chart in the lower right hand corner. It's a sparkline. The line indicates how many searches have been done in the current month. The screenshot was taken on the 28th of April so it's the searches done in April and it's near the right hand side which is the maximum.

These charts are made with Google Chart which is something I've never had the great opportunity to try before.

Making the chart was quite a pleasure actually. I had it up and running within minutes just my looking at some examples. The lib I used to make it happen was pygooglechart which was, despite its lack of documentation, really easy to use.

How useful this sparkline is to the people who try to get unstuck on their crosswords I really don't know but it sure looks cool.

I don't have any stats to back this up but if I look around the office almost a lot of people use Gmail or Hotmail or something web based. My family uses Gmail, Yahoo mail and Hotmail (and me on Gmail) for example. So it bugs me when websites use the mailto: thing. Especially if they rely on the Subject line.

Here for example, on the EDF Energy Contact us page, they have a long list of "Email us" links. They're almost all going to mailto:customer_correspondence@edfenergy.com but all with a different subject line:

 mailto:customer_correspondence@edfenergy.com?subject=Dual Fuel enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Dual Fuel sales enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Energy efficiency enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Priority Services enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Electricity prepayment enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Gas prepayment enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Home movers enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Green Tariff enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Meter Reading enquiry
 mailto:customer_correspondence@edfenergy.com?subject=Bill payment enquiry
 mailto:myaccount@edfenergy.com?subject=MyAccount query
 ...

Does that mean that I have to somehow copy the Subject line from each so that my email gets routed to the right department? I just don't know. Why can't they have different email address for each thing or a web form where I can email them there and then?

Using mailto: should be done very sparingly. Considering that most people (like my mom) don't know to right-click and select "Copy email address" I prefer this way to show an email address:

 <a href="mailto:more@userfriendly.com">more@userfriendly.com</a>

I've got a public ical at: http://m.fwckungfu.com/calendar.ics

This works in Google Calendar and in the iCalendar Validator but when I try to import this as a file in Apple iCal I get this message:

"Error subscribing to the calendar

Data downloaded from http://m.fwckungfu.com/calendar is not valid."

WTF? Who's ass have I not kissed to get this working in Apple iCal? Does anybody know any reason why Apple iCal is being so trixy?

I've now made a simple interface alternative (not AJAX) to Crosstips. This one doesn't do any fancy AJAX to look up works and you just type in the unknown letters as a space (or a _ or a . or a *) so you don't have to know how many letters it is.

Here's an example

It feels refreshing somehow to go back from AJAX back to plain old GET requests. The best thing about this is that it will work on a mobile phone too. The way I've wired the page is so that if you visit the site with a mobile device (not an iPhone though) it will load the extremely cut down version of the layout which is more suitable for mobile phones. This means that people will be able to get unstuck doing crosswords in bed.

I'm pretty damn sure I won't pay to see this movie in the cinema. I'm pretty sure I won't want to download it illegally and watch it either. But I have to admit this is a pretty awesome way to show the trailer.

Just watch it and you'll see what I mean.

My play site Crosstips.org is available in British English and American English. Obviously the difference is small but it's important.

What I've done is that if you're located in, say, France and visit the site it offers you the following language choices:

• Svenska [goes to krysstips.se]
• English (GB) [goes to en-gb.crosstips.org]
• English (US) [goes to en-us.crosstips.org]

But if you're located in, say, England it only offers you the following language choices:

• Svenska [goes to krysstips.se]
• English [goes to en-gb.crosstips.org]

And likewise, if you visit the site from US computer you just get two options and it uses the en-us.crosstips.org domain. As an American or a Brit why would you be interested in the other English? I think this is a really good usability trick. It reduces the noise by removing options.

There's a new restaurant on my street called The Albion. I went there for lunch today and had the steak and kidney pie with bread. It's a proper restaurant so including tip it came to £11 with tap water. Not cheap but the service was good and the food was really great. They've got a great delicatessen section with the usual tins of overly prices Italian olives and organic vegetables and yummy desserts.

Now, this blog is not a restaurant review blog but rather a (web) technical one. What strikes me is that these guys don't have a website! How can you not have that these days? Or perhaps they do but I just can't find it anywhere on Google. There's a Albion London advertising agency a stone throw from the restaurant and there's a The Albion in Islington but no Albion restaurant in Shoreditch London on Google.

If you're going to spend thousands of pounds on a nice chairs and lamps, like this restaurant clearly has done, then why not spend a couple of pennies on SEO and getting a decent website. Granted, it's a new restaurant but it only takes Google a couple of weeks to review its indexes. Come on my-new-favorite-restaurant-around-the-corner!

I actually don't mind a bit of adverts on websites but sometimes it just gets too much. On this page I couldn't even read the text since as I scroll down the huge ad over the text scrolls with the page.

Feels greedy like they've just thrown more and more ads in without thinking about the original design.

When V8 was announced to the world jointly with the launch of Google Chrome there was a lot of buzz about how fast it was.

Then, the guru of Javascript, John Resig couldn't hold back his announcement about Tracemonkey and how it was faster than V8

Now there's a third one that apparently beats them all: SquirrelFish Extreme

"As you can see, SquirrelFish Extreme is 36% faster than V8, and 55% faster than TraceMonkey."

Personally I take all of these things with a shovel of salt since what matters isn't how fast it can compute raw Javascript code but how well it all works together with the browser and the browser's graphic routines and stuff and most importantly how the DOM tree is updated by the Javascript instructions.

Closing note; the most important thing is that there's something happening and this will mean that Javascript becomes more and more reliable for web developers and not just reliable but also faster so apps like Google spreadsheet might one day become usable. To quote John Resig on his closing notes:

"I fully expect to see more, massive, projects being written in JavaScript. Projects that expect the performance gains that we're starting to see. Applications that are number-heavy (like image manipulation) or object-heavy (like relational object structures)."

Does anybody know roughly how many of the spambots out there that support Javascript?

We've all heard of honeypots and things like that that try to catch out spambots because they render the forms they pre-fill differently. The ideal solution is extremely convenient for non-spambots (you and me) and extremely effective in keeping out the spambots (porn and viagra sellers). With a bit of Javascript you could for example do the captcha technique for the user on the assumption that spambots don't render Javascript. And for the few poor suckers who don't have Javascript but are human (e.g. lynx users, blind people, paranoids) they'll just have to complete the captcha. For example, suppose you have a captcha quiz that says : "Capital of United Kingdom: Rome, London, _ Paris" and then an AJAX request fetches the correct answer from the server, fills it in and hides the whole captcha.

The big question is: How many of the spambots out there support Javascript? I guess the best experiment would be to write a tempting form for spambots and in it you let Javascript enter some value on submission.

If it turns out that spambots do render Javascript, one could perhaps combine server side cookies with it such that the first time you complete the form you have to prove that you're human the hard way and on all consecutive entries a Javascript does it for you.

Why I like this idea is that you can write your server-side code as if Javascript didn't exist and then softly add the sugar that Javascript can be an be 100% unintrusive.

Obviously a technique like this wouldn't work on a mainstream site like *.blogspot.com or ebay.com but for the 90% of all sites out there that aren't mainstream it could work.

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:

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:

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:

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 servers 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-ControlandExpires 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.

If you search Google for 'yogurt' www.dannon.com comes up second in the search results. Neither the title nor the URL contains any reference to the word yogurt. The word "Yogurt" is the 37st word of all (55) non-HTML English words that appear in the crappy table-inside-tables-nested piece of crap source code.

A SEO expert would immediately count Dannon.com as doomed on the search term Yogurt but clearly Google had other plans. According to my Google toolbar the Dannon website has a measly 5 out of 10 PageRank™ only, so that's not the explaination either.

So how did Google do that?

Today I was working on an popup input box (actually 3 input boxes) that asks the user to enter a project, a vendor or a category. The first box looks like this:

 Project name: __________________________

The second looks like this:

 ...accounts code (optional): __________________________

I'm wondering, what's the most user friendly way of displaying that label. Is it:

 ...accounts code: (optional)

or is it:

 ...accounts code (optional):