With some detective work they had discovered that somehow the ’secure’ CMS part of the site — where the client can log in to make changes — was being crawled by automated search engines. Part of the CMS is a list of all the site’s pages, each with links to the usual operations — edit, delete etc.  When the spider was indexing the pages, it also accessed the delete link, thereby deleting the page (much like this DailyWTF story).

Oops.

Anyway I took a look and while the security wasn’t great — it was based around cookies with no server-side validation — it still seemed odd that the spiders were able to access the pages. I implemented a slightly more robust system using sessions, added an entry to robots.txt, and marked it as solved.

And then it happened again.

I couldn’t work out what was going wrong, so to stop it happening I converted all the delete links to forms. But it was nagging at me — how was it that the search engines were reaching the pages at all? Why weren’t they being rejected when the security script checked for a cookie and session?

Finally, the penny dropped…

The security check worked by looking for a valid session, checking it for a ‘user is logged in’ value, and if one wasn’t found then sending a redirect header pointing to the login page. Nothing unusual there. So what was going on?

When PHP sends a redirect header, the browser says “OK, I’ll go to this other page” and the user’s none the wiser. But just because the browser is no longer listening, that doesn’t mean the script automatically stops running. In fact, unless you tell it to stop it just continues as if nothing had happened. Thus, the spiders were simply ignoring the header and receiving the page as if there were no security in place at all.

The solution? Add an ‘exit;’ after the redirect header. Simple!

No more image replacement, or clunky sIFR nonsense to get pages looking as your clients actually want them to!

After that, I became aware that there’s more than one web site out there offering similar service. So here’s a run-down of those I know of — feel free to add a comment if you know of any that I’ve missed:

• WebFonts – as mentioned above, over 2,000 fonts to choose from and more on the way.
• Cufon – allows you to upload your own font files and then download them compiled for web use.
• FontFace – download pre-packaged ‘kits’ or roll your own.
• Google Web Fonts – yes, even the mighty Google is getting in on the act, although the choice is rather limited.

Update: From the comments (thanks!):

• Kernest
• FontsLive
• TypeKit
• TypeFront
• FontSpring
• FontDeck (closed beta as of this update)

Seems like it’s a technology whose time has arrived.

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.

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.

Get the modified code here (old 1.1x-compatible version also included).

OK, a lot.

But good as it is it can still be improved, as this list of Firebug extensions proves. There were several on the list that I hadn’t heard of before and have already installed.