All was working smoothly using the ‘PayPal sandbox’ testing domain, but when it came to testing a live transaction in Internet Explorer I received the following error:

“Sorry, an Error Occurred After You Clicked the Last Link”

…followed by a lengthy but rather unhelpful block of text suggesting various courses of action — none of which was any use at all.

Consulting Google, it seems that this is far from an unusual occurrence but there’s little consensus as to the cause. In the end, I tried adding target=”_top” to the form that submits to PayPal (thus forcing the ‘pop-out’ of the iframe), and presto, all is now fine again.

I’m working on a navigation system that uses CSS image replacement. To hide the text, CSS shifts it out of view by using the text-indent property and a big negative value. However, a side-effect of this is that when you click on a link, the dotted border that appears while you’re holding the mouse button down goes off the side of the page.

To get around this, I just wanted to disable it. After some searching I discovered the outline property — setting this to ‘none’ gets rid of it entirely:

a{
outline: none;
}

Of course, the above will remove it for all links, it’s up to you to decide whether you want to make it more specific.

Briefly, the problem arises from the fact that the world is a sphere and representing it in two dimensions is not a straightforward task. There are various ‘projections’ to choose from, each of which uses a different method for mapping points — you can find out more in this Wikipedia article. The most common choice is the Mercator projection, where lines of latitude are spaced equally, and fortunately for me it’s the type of map used in the project I’m working on.

So, being somewhat mathematically inept, I decided that Google would save me from a day’s head-scratching. That turned out not to be the case, as I tried a good half-dozen different suggestions before finally stumbling across one that actually produced accurate results. To save others from the same fate I decided to reproduce here the code I ended up with, which is based heavily on code found in this newsgroup post. My implementation is PHP, but it shouldn’t be hard to convert it to another platform (see the original thread for a Javascript implementation). Apologies for the rubbish formatting, WordPress isn’t great at handling code:

function LongitudeToX( $lat, $lon, $map_zoom, $scale_value, $x_offset = 0 )
{
  $offset=16777216;
  $radius=$offset / pi();
  return ( ( ($offset+$radius*$lon*pi()/180)>>$map_zoom ) * $scale_value ) + $x_offset;
}
function LatitudeToY( $lat, $lon, $map_zoom, $scale_value, $y_offset = 0 )
{
  $offset=16777216;
  $radius=$offset / pi();
  return ( ( ($offset-$radius*log((1+sin($lat*pi()/180))/(1-sin($lat*pi()/180)))/2)>>$map_zoom ) * $scale_value ) + $y_offset;
}

A few notes about using these functions:

• From what I can tell, the above code is based on Google Maps and the $map_zoom relates in some way to the ‘zoom level’ of the map. I set it at 15 and it seemed to work OK.
• Because the dimensions of your own map might not exactly match the assumed dimensions of the map used in the calculation, the $scale_value parameter allows you to adjust the output to fit more precisely. I had to specify two decimal places of scaling to get an exact fit.
• Finally, the calculation assumes that the ‘origin point’ of the map (x=0, y=0) will be at the top, left-hand corner. This isn’t the case on the map I’m working on (the origin is at the centre) so I included $x_offset and $y_offset parameters so that I could adjust the output values accordingly.

In order to find the best values for the above parameters, I manually placed three widely-spaced temporary markers on the Flash map marking points whose latitude and longitude I already knew. Then I had the code render these points and adjusted the various parameters until the position of the generated points exactly matched the manually-placed markers.

I hope this code helps someone avoid wasting the sort of time I did yesterday!

So I downloaded the Ubuntu Netbook Remix, and set about installing it as a dual-boot option. It was very simple, following the instructions took around 40 minutes for the entire process and it all seemed to be going fine. But when I came to reboot, there was no sign of Ubuntu.

Now, the Eee PC 1000 has a 40GB SSD (Solid State Drive) — which is in fact two drives, one of 8GB and one of 32GB. The 8GB is the ‘primary’ drive, and that’s where Windows is installed, but there wasn’t space for me to install Ubuntu alongside it so I created a small partition for it on the ’secondary’ drive.

I guessed that the problem was probably related to this fact so I had a poke around to see what could be done. Checking the Eee’s BIOS, there’s no distinction between the two drives so you can’t choose to boot from the secondary drive. I was tempted to give up at this point (I didn’t seem to be able to find any useful info on the web), but since the install process is so quick I decided to have another go and see if I could spot anything along the way that might be of use.

Sure enough, right near the end of the setup process (after creating/assigning partitions) there’s a little button labelled ‘Advanced’. Clicking on it popped up a dialog window with a drop-down list that allowed me to assign the boot loader to the primary drive (/dev/sda) instead of the secondary drive (/dev/sdb) that it had defaulted to. So I let it go ahead and install, and one reboot later there it was: a list of boot options. Success!

So, is it any good? Well, it certainly looks good and I like the ‘remixed’ desktop/interface which organises applications in a sensible and easy-to-find way. Boot time isn’t noticeably quicker than WinXP, which is disappointing but could be explained in part by the fact that it’s running on the slower secondary drive. From what I can tell after one day’s use, once started it runs very smoothly with apps launching very quickly and no unexplained ‘freezes’.

As far as compatibility is concerned the wireless, sound, touchpad, camera, display, USB and SD ports all worked out-of-the-box with no configuration required. I have my doubts that Bluetooth is working but haven’t had a chance to test it yet. The one serious gripe is the time it takes for the wireless to establish a connection — it suffers here even in comparison to Windows, which would (re)connect almost instantly where Ubuntu can take 40 seconds or more. I often use the netbook for a very short time (say, to do a quick web search) and then put it into hibernate, so a slow restart is a definite annoyance.

If you’re interested in checking out the Ubuntu Netbook Remix but don’t want to go to the trouble of installing it, then you can run it from a USB stick (1GB or bigger) without any installation. Startup is slow but once it’s going it’s fine and if you decide you do want to keep it, then you can install it from the same USB stick.

Yesterday, for example, I was working on something that had already taken several days of my time when I’d hoped to get it done in hours. The final straw came when I found myself facing what appeared to be an intractable problem: a process that needed to insert multiple rows in a table, and increment a certain column in each row to get a unique value. I couldn’t use an auto-increment value in this case (there was one already), and using a separate query caused concurrency problems (resulting in non-unique values). I should just point out that this is a system that I’ve inherited, not one that I developed myself.

I started out with a simple update, like this:

UPDATE my_table SET some_value = ( MAX( some_value ) + 1 ) WHERE id = 123;

…which in hindsight was never going to work but anyway, it gave me this error:

#1111 - Invalid use of group function

So I thought about it a bit and then struck on this:

 UPDATE my_table SET some_value =
(
(
SELECT MAX( some_value )
FROM my_table
) +1
)
WHERE id = 123
…which gave me this error:

#1093 - You can't specify target table 'my_table' for update in FROM clause

…damn. I was starting to bang my head on the desk at this point, but Google came to my rescue by pointing me at this thread, which suggested using a nested sub-select. The result was the following rather ugly query:

UPDATE my_table
SET
my_value =
(
(
SELECT selected_value
FROM
(
SELECT MAX( my_value ) AS selected_value
FROM my_table
)
AS sub_selected_value
)
+ 1
)
WHERE id = 123

…which works. It’s not great  from a performance point of view since it uses a temporary table, but it does what it needs to. I hope in future that I will be given time to go back and rewrite this part of the system so as to entirely remove the issue.

Now there are various things I should do to prevent this happening — at the very least keep a list of changes as I’m going along, which I do…when I remember to. But on those occasions when I don’t, I usually end up dumping the schemas and comparing them using a diff tool, which works just fine but can be rather laborious.

Today I stumbled (via DZone) upon a piece of freeware called Toad for MySQL. It does a whole bunch of useful things, but the feature that stood out for me was its ’schema compare’ tool. At first it looks like a dolled-up diff tool, but then you notice that in addition to showing you the differences between two databases, it also creates an SQL statement to convert between the two. Very handy.

For those of you who are allergic to MySQL, there are versions of Toad for Oracle, SQL Server and DB2 (although they’re not freeware).

It’s been a few weeks now since I made the decision and I’m starting to become more comfortable with jQuery’s quite different approach. I’ve also begun working on some of the more complicated aspects of the new CMS, including adopting jQuery UI to provide the interface widgets. One requirement of the system is to have a dialog where search results can be dragged and dropped onto a sortable list.

At first I looked at using two sortable lists and the built-in ‘connectWith’ option, which enables you to link two or more sortable lists together. But then I realised that I didn’t really want the search results to be a sortable list. In fact, what I wanted was a static list whose items could be dragged and placed in the sortable list.

I tried a few experiments, and when those failed I decided to try looking at the code itself to see if I could hack together a solution without too much extra effort. While browsing the ui.draggables code, I stumbled across the intriguingly-named ‘connectToSortable’ option. I was surprised to find it because there’s (currently) no mention of it in the documentation, and indeed it’s very hard to find any reference to it at all beyond the code itself (the only useful link I could find was this one, but it rather over-complicates the issue).

It’s very simple to use: as with connectWith, just specify which sortable(s) you want to connect to with the connectToSortable property:

$('#myDraggable › li').draggable({helper:'clone',connectToSortable:'#mySortable'});

Full example code here.

The code for the example works just fine, but I found when using it in my own project, for some reason it was necessary to add a $(‘mySortable’).sortable(‘refresh’) call after defining the two lists, or the first drop operation would always fail.

By the way, when fiddling around with JavaScript experiments I find JSBin very useful — you can load up any of several JS libraries (jQuery, MooTools, dojo, prototype, YUI, script.aculo.us) and create both JavaScript and HTML to test in a ‘live’ environment. Very handy.

I’m creating forms dynamically using JavaScript. This has led to a number of problems with IE6:

Dynamic checkboxes/radio buttons and the ‘checked’ attribute

When creating a field, I wanted to be able to apply a ‘default’ value — for example, a checkbox element might be ticked by default. This was all going smoothly until (guess what?) I tested it on IE6: the checked attribute was set, and returned ‘true’ when tested, but the box did not appear to be checked when it appeared in the form.

The answer, as I discovered thanks to this forum post, was to use the ‘defaultChecked’ attribute instead (I set both, just in case). It seems to work across browsers, which is nice. Oh, and this applies to radio buttons as well as checkboxes.

Creating radio buttons

While we’re on the subject of radio buttons, I also found that IE6 doesn’t like radio buttons created using document.createElement() (i.e. as a DOM object). It’ll render them OK, but they’re unclickable. The answer is to create them by injecting HTML into an element with [element].innerHTML:

var obj = document.createElement( ’span’ );
obj.innerHTML = ‘<input type=”radio” name=”somefield” value=1>1′;

…and so forth. Ugly.

Assigning values to multiple select elements

This was a really fiddly one, and seems to happen under only very particular circumstances. Anyway…

If you create a select element and set the ‘multiple’ attribute, IE6 can sometimes have trouble assigning values to it if you do it immediately after it’s created. Note the word ’sometimes’: I haven’t been able to create a simple enough test case to isolate the exact circumstances that are required. And it’s only a problem if you’re setting more than one value.

Anyway, the (horrible) fix is to delay setting the values using setTimeout(). The delay doesn’t matter (1 millisecond will do), but it does work.

I hope these notes help some other unfortunate soul out there avoid wasting the number of hours and brain cells that I just have!

First (and lasting) impression: damn, it’s fast. It starts fast, it renders pages fast, it stays fast. JavaScript in particular is noticeably smoother where in other browsers it has lagged. The latter is thanks to the new V8 JavaScript engine, the rest is at least partly related to the memory model, where each tab is a completely separate process. Given that it’s using WebKit — the renderer behind Safari — the speed difference between the two is striking.

And to be honest, as far as the ‘wow’ factor goes, that’s about it for me. It’s a browser. The minimalist layout is nice but in fact I’ve been doing myself with Firefox for a couple of years now. Oh, the tabs are at the top…ok. The address bar is ‘clever’…well I don’t particularly like FF3’s ‘Awesomebar’, and I’ve yet to see anything that this does that is likely to make me like it any better. The start page’s layout is very reminiscent of Opera, which isn’t necessarily a bad thing — I might well grow to like it.

But none of the above constitutes a ‘major breakthrough’ or ‘a paradigm shift in the browser space’. It’ll be interesting to see how it develops, though. Maybe the behind-the-scenes, technical advances (esepcially the speed) will feed back into other browser projects. As it stands, it’s just yet another platform to test for incompatibilities.

But…the speed! I can see myself using it as a day-to-day browser for non-development purposes, just because it’s so quick to launch.