Archive for June, 2005

Fonts and Web Applications

Thursday, June 30th, 2005

In my Route planner toy, I use the airplane character from unicode () for the airports. I got a complaint today, that it looked crap because they only got a little square instead of a plane. Of course not all machines are going to have a font containing the plane character, so what are the options?

One option would be to use images instead, but this is slower to render and download aswell as a more complicated DOM to parse (and in an ideal world, you’d still need to thing of how to make it accessible when images are disabled).

Instead I’ve decided to have a go at detecting if the font is actually supported, and if it is not, replace the plane symbol with a simple +. The code is pretty simple, and relies on the fact that symbols in fonts have different sizes, so it compares the size of a 10 of the testing symbols, with 10 of a symbol from a private use area in unicode.

function symbolSupported(testChr) {  var testDiv=document.createElement('div');  testDiv.style.display=\"block\";  testDiv.innerHTML=\"<span class=airport style='font-size:10em;'>&#983040;&#983040;\"+    \"&#983040;&#983040;&#983040;&#983040;&#983040;&#983040;&#983040;&#983040;</span><\"+    \"span class=airport style='font-size:10em;'>\"+repeatStr(\"&#x\"+testChr.toString(16)+\";\",10)+\"</span>\";  document.body.appendChild(testDiv);  var supported=!(testDiv.firstChild.offsetWidth*testDiv.firstChild.offsetHeight ==         testDiv.lastChild.offsetWidth*testDiv.lastChild.offsetHeight);  document.body.removeChild(testDiv);  return supported;}function repeatStr(str,n) {  var out=[];  for (i=0;i<n;i++) {    out.push(str);  }  return out.join(\"\");}

This seems to work pretty well, where I’ve tested it, but I’m not that happy with it - is it safe that the private use area is empty? Is it safe that the size, even with 10 characters with 100em is different between the symbols? Still for this use case, it’s relatively safe as the alternative of +’s would be acceptable to anyone, but for more complicated symbols and use cases I don’t think it would be safe.

Does anyone have a better approach that would work here?

Joining the Shiny People

Wednesday, June 29th, 2005

I bought a Mac Mini, and so far, it’s been a pretty disappointing process all around. Some nice people gave me some Amazon vouchers, so I went to buy it there, I’d never bought anything at Amazon before, so that was a new experience, and it was a bad one!

The biggest shock was that it simply doesn’t work, I needed a keyboard, so I looked at the list of keyboards, I wanted a cheap one so I sorted them by price. I ended up at the list of keyboards sorted by price low to high, so the cheapest keyboard Amazon had was £21.95, that surprised me somewhat as normally a fiver is a bit much, looking down though the numbers were, 21.95, 47.74, 22.99, 89.99, 147.95, 9.95. There was a 3.50 one at 15 in the list, but all very unsatisfactory. I didn’t bother with a keyboard from amazon, I borrowed one instead. Amazon are a big site, how can they get such fundamental things wrong? Are Amazon customers really so price insensitive that they don’t order things by price - the same effect happens all across amazon uk, it’s not just keyboards, sorting by price is simply broken.

So the parcel arrived, 3 days after ordering it, pretty poor again considering I paid for the fast delivery, next day delivery was what I would’ve expected, somehow the “normally ships in 24 hours” actually meant, ships a couple of days after you order it. They were my Amazon disappointments, next came my Apple disappointments.

It came installed with 10.3.7, fair enough, that’s all that was advertised, but you’d think it would be a free upgrade as it’s now 7 weeks since the upgrade was released (I guess Amazon UK doesn’t actual sell much volume of mac-mini’s), nope an upgrade would cost £11.99 with the up-to-date programme. I knew this fact before I bought it, and I took a risk that there would actually be a 10.4 OS in the box, but still at least I know how much Apple values my custom, I don’t even get the up-to-date software.

When it finally arrived, I went out and donated blood, figuring feeling slightly faint with tea and biscuits inside me would put me in the right mind for clicking around with one button on my mouse - I was using a borrowed keyboard and mouse from an old iMac. Installing it seemed to go pretty easy, it asked me some questions about where I was, the only oddity was that after telling it I was in the UK, and wanted a British settings, it suggested the date was 06-29-2005, so that was a little disappointing.

Next it started asking me a lot of personal questions about my address, and name and things, why does my computer need to know this - this is stuff I know already - there was no way to skip it given in the menus! Fortunately, the good folk in #SWHACK tipped me off the CMD-Q would let me get out of it, hardly the best advertised feature though.

It started, and I had it all onscreen, then a box popped up telling me it wanted to download updates, ah, that’s good I thought, then I noticed it wanted to download things like iPod Updater 2005-06-26, thinking I must have a free iPod I quickly looked through the packaging I threw away, it wasn’t actually there though, maybe it got lost? I can’t understand why an iPod updater or iTunes are Mac OS-X updates, it just wanted me to download 100mb of stuff that I have absolutely no need for. Of course it also didn’t download a load of security updates it now things I need - I had to manually force another check after installing the first load, no idea when it might have told me those. I thought the Mac was supposed to make me more secure?

Starting up Safari came next, I’d heard good things about it, and seen it render pages well, and it did! Worked nicely, first things first, let’s get rid of all those animations - I can’t concentrate with any movement on webpages - hmm, no options to disable flash, or animated gifs? Off to google, apparently the only way to kill flash is to remove it from the plugins directory. Something that removes it from all browsers, and requires a restart of the browser to re-enable, hardly useable. Killing animated gifs seems to need a 3rd party plugin costing 10$, disappointing, I guess I might just have to make Opera my default OS-X browser.

Installing OS-X VNC was quick and painless, and works very well on the local network, if only it could just export a safari window though, that would be much nicer, is there anything that can do that?

javascript has a mime-type at last!

Monday, June 27th, 2005

Yep, finally, thanks to Björn Höhrmann, javascript has a real proper mime-type! The IETF announced today the approval of the internet draft.

Unobtrusive javascript…

Wednesday, June 22nd, 2005

Unobtrusive javascript is beginning to be talked about more, unfortunately it’s not as easy as the proponents often talk about… For example, one of the truly excellent scripters, PPK gets it wrong on his homepage…

I was visiting his site in my regular IE6 on windows XP SP2, it’s not a default config, but it’s still an IE6, and I instantly start with a script error, before there’s any content. W3CDOM is undefined is the error, so why does this happen? Well there’s 2 reasons it could happen, W3CDOM was defined in an external script file, so if the script file wasn’t downloaded, it would indeed be undefined, or if the mime-type of the script wasn’t supported by the browser, again the script wouldn’t be executed. In fact it was the 2nd one - <script src="index.js">&ltl/script> was the code, and then the index.js file was returned with the mime-type of application/x-javascript, a mime type IE does not consider as javascript - not unreasonable, it’s an x-type and so shouldn’t be used on the web.

IE is bad in that <script type="text/javascript" src="index.js"> would’ve been executed, which is a good thing to know as it means HTML validity would’ve solved the problem for us, as the validity error of the lack of a type attribute would’ve solved the error, so if you’re going to try to write unobtrusive script, valid documents really can help! Of course that still wouldn’t’ve solved the problem of if the index.js wasn’t downloaded for some reason - blocked by a proxy or network failure or whatever, so the script inside the document should also make sure that it works even if the script doesn’t work. That would be easy here, use typeof to check the W3CDOM variable is defined, or go if (window.W3CDOM) or include fallback script inside the first script block.

IE also gets it wrong and accepts the file if the index.js is loaded from the cache, and not from the remote site, this means that if you’re trying to recreate this, you’ll need to clear your cache before accessing it in IE.

Incidentally, whilst we’re looking at the script http://www.quirksmode.org/index.js we can spot a few other errors (I’m highlighting purely to show how tough unobtrusive script is, you’ll be able to find lots of similar errors in my scripts!) he uses the navigator, top, document and location objects without checking they exist - none are more than a de-facto standard, and if you’re really going to make sure your script can’t error, because errors are certainly not unobtrusive! then you should perhaps check for them first. Next is the use of top.location.href - the problem here is that if the location is on another domain, even setting the location.href has been known to cause “access denied” errors in IE6, just setting top.location='/index.html' will work in all the likely browsers and doesn’t suffer this same problem.

So this post was meant to discuss The single correct use of document.write, but I’ll guess I’ll do that later, the toughness of unobtrusive javascript was the topic instead.

The RTW Ticket Route Planner again

Sunday, June 19th, 2005

As I didn’t bother linking to the routeplanner last time, I thought I’d mention it again. So here’s a link to my Round The World Route planner

Routeplanning for round the world flights

Saturday, June 18th, 2005

Last week I visited a local travel agent. I’ve likely got to visit a couple of places in the next 6 months or so, and I know that a round the world ticket would cost the same as those two individual flights, as they’re to places without much competition on them, so I figured it would be a good opportunity for another trip to see lots of interesting places. Not really knowing where I wanted to go, other than those 2 places, I figured a travel agent must be able to sort me out with a Oneworld or Star Alliance route map. Unfortunately not, in fact the travel agent whilst being friendly was completely unhelpful, they couldn’t tell me anything, if I’d told them some places I wanted to go they’d happily tap a route into the computer and told me how much it would cost. Not really much use.

I’d already looked at the websites of the alliances, but these didn’t have routemaps, Oneworld had a flash map where the airports they flew to were marked, but only on a very gross scale, unfortunately though this included code shared flights which aren’t an option on the oneworld ROTW ticket anyway. There was also a windows application for download, unfortunately that wouldn’t install on any of my windows boxes, so not the great, there was a PDF though, so I managed to get some data, I already had very old Star Alliance data which I’d downloaded before.

With the data, I set about building a UI so I could explore it, it took about 8 or so hours work, nothing complicated, but it does a pretty good job of letting you explore the route, it’s amazing that the airlines or travel agents don’t offer this service, it would save them lots of money in agents time, as well as possibly selling more tickets. Of course, we need a few more than the 8 hours I’ve spent, some proper QA, we’d need to encode the rules of the alliances tickets in there, and probably the taxes at the airports too, but regardless it’s not much more than 2 man months of development at even the most pessmisstic, I can think of a few reasons why they don’t, but it still seems silly.

The web application

Screenshot of jibbering.com/routeplanner/ showing the application.

The application is a simple one, you enter a starting airport code, or name, if there’s more than one airport with that name or part of name, then all that match are shown and you can select one to start your route. Airports you can fly to are then shown on the map in yellow, mouseover of these for the name. You can zoom and drag the map as you would expect, and selecting the airports will add it to the route, the table’s under the map, that tells you the number of miles you’ve done, and which carrier the route is flown on - if you want to limit routes to just one carrier, use the checkboxes on the top right to select one. Clicking on the table at the bottom will allow you to go back in the route.

Nothing complicated in the implementation, it just makes xmlhttp requests for JSON data from a mysql database which has the airport locations and routes, the rest is simple javascript.

It’s a useful little app though, and I’d like to finish it off add some more inteligence into the route, perhaps some routefinding, or rule checking to the various oneworld/star alliance RTW tickets. Of course I’ve not yet decided on a route, or if I’m even going to go, still it was a fun little mini project.

Starting a new project

Saturday, June 11th, 2005

Scene: A typical office, two people Bob the project manager, and Jim the javascript muppet.

Bob: So Jim, we’ve got another project needing a thin client frontend to run on the desktops here, perfect for another of your HTML weblike frontends.
Jim: Oh cool, I’ve been wanting to try out XForms for that.
Bob: XForms? what are they then, I thought HTML, CSS and javascript was what you did?
Jim: Yeah but I’ve heard about these new things called XForms, apparently they make everything more semantic and easier to maintain.
Bob: You’ve heard? you realise we only have three weeks development in the schedule?
Jim: Oh I’m sure it’s simple, I met a guy in a pub who told me how easy it was, I’m sure I can pick it up.
Bob: Okay, if you’re sure the benefits are worth it, this will work with all our current desktops right?
Jim: Well we’ll need to roll out a new XForms client to all of them.
Bob: Ah, so which client do we use?
Jim: Well, there’s lots to choose from, I’ve heard there are more XForms clients when the standard came out than anything else, so it must be good?
Bob: So which is the best?
Jim: I dunno, give me a few days research time and I’m sure one will turn up.
Bob: So how much is that going to cost us?
Jim: I dunno, There doesn’t seem to be pricing info for most of the XForms players, still the beancounters aren’t doing much at the moment, they can find that out.
Bob: Hmm, but there’s plenty of examples of other people using these XForms in web solutions for us to learn from, right?
Jim: Not that I’ve found, but there’s a specification.
Bob: Okay… If you get hit by a bus, there’s plenty of other people out therewe can hire with the skills to maintain it though?
Jim: Don’t think so, but I’m sure it’d be easy for them to learn it too.
Bob: So, let’s recap. Instead of using the tools we’ve used to successfully roll out tens of projects and people millions, you want us to pick a new technology you know nothing about, with immature implementations that we don’t know the cost of and will need to roll out to every desktop, and there’s few examples to learn from. Then, even when you’ve written it, we won’t be able to easily hire someone to maintain it as the skills are rare, and you don’t think the risk to the project is too high?
Jim: Sure, it’ll be fine, I need to learn the technology sometime right?

Bob walks away and picks up the phone.
Bob: Harry, call up HR, we need a new javascript muppet, this one’s gone a bit crazy.