Just a Coder » Web Development

Antisocial Networking

nickfitz — Wed, 14 Jul 2010 19:26:17 +0000

For some background to the Twitter-related brouhaha that led to this post, read Jack of Kent’s The Integrity and Honesty of @gillianmckeith.

So, @gillianmckeith tweets that @bengoldacre‘s Bad Science contains lies, and Mr Goldacre promptly calls her (if it was her…) on it. @gillianmckeith then appears to remove the offending tweets and tries to suggest that that account isn’t necessarily the Gillian McKeith’s account; but unfortunately it’s linked to from her own site (to which I am not granting any google linkjuice, by the way).

When this is pointed out, the link is removed from her site by somebody. Unfortunately, it’s only removed in the sense of being commented out, and is still clearly visible in the source. Also, as David Naylor points out, it’s still present on places like her YouTube channel, which is linked to from the same “social networking” section of her site.

Time to bring out the big guns: now, the entire “social networking” section is removed.

You guessed it:

All I can really say is: #viewsourceftw.

UPDATE, 2010-07-15T01:00: Actually, that isn’t the only Twitter-related content that has been commented out on that page. It also has the following:

which is code to display the latest tweet from @gillianmckeith, and towards the end of the source code is some HTML loading some JavaScript:

which actually updates that box with the most recent tweet.

You will notice that the JavaScript section hasn't been commented out. This would suggest that the data is still being loaded from that Twitter account by that page, whenever it is viewed. And indeed, a check with the wonderful Charles HTTP debugging proxy, a tool which allows one to examine the low-level nuts and bolts of one's computer's communications with the web, shows that this is the case. When I load the page at gillianmckeith.info into my browser, the second script shown above sends the following additional HTTP request to Twitter from my browser:

GET /statuses/user_timeline/gillianmckeith.json?callback=twitterCallback2&count=1 HTTP/1.1
Host: twitter.com
Pragma: no-cache
User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_2; en-us) AppleWebKit/533.16 (KHTML, like Gecko) Version/5.0 Safari/533.16
Accept: */*
Referer: http://www.gillianmckeith.info/
Cache-Control: no-cache
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Cookie: 
Connection: keep-alive

which sends the response (formatted for clarity):

HTTP/1.1 200 OK
Date: Wed, 14 Jul 2010 23:38:55 GMT
Server: hi
Status: 200 OK
X-Transaction: 1279150735-24110-17319
X-RateLimit-Limit: 150
ETag: "fcf22c639f08a8ca540302c7c569266e"-gzip
Last-Modified: Wed, 14 Jul 2010 23:38:55 GMT
X-RateLimit-Remaining: 143
X-Runtime: 0.00977
Content-Type: application/json; charset=utf-8
Pragma: no-cache
X-RateLimit-Class: api
X-Revision: DEV
Expires: Tue, 31 Mar 1981 05:00:00 GMT
Cache-Control: no-cache, no-store, must-revalidate, pre-check=0, post-check=0
X-RateLimit-Reset: 1279153007
Set-Cookie: lang=en; path=/
Set-Cookie: 
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 630
Connection: close

twitterCallback2(
[
    {
        "contributors":null,
        "source":"web",
        "created_at":"Wed Jul 14 13:06:40 +0000 2010",
        "coordinates":null,
        "truncated":false,
        "in_reply_to_status_id":null,
        "user": {
            "profile_link_color":"ff0073",
            "description":".",
            "location":"Earth",
            "profile_background_image_url":
            "http://a3.twimg.com/profile_background_images/111501429/Picture_145.png",
            "profile_image_url":
            "http://a0.twimg.com/profile_images/813972928/gillian1_normal.jpg",
            "profile_sidebar_fill_color":"e07ecc",
            "profile_background_tile":false,
            "screen_name":"gillianmckeith",
            "lang":"en",
            "statuses_count":1344,
            "created_at":"Tue Jul 08 15:26:42 +0000 2008",
            "profile_sidebar_border_color":"000000",
            "profile_use_background_image":true,
            "followers_count":2570,
            "contributors_enabled":false,
            "friends_count":16,
            "following":false,
            "geo_enabled":false,
            "profile_background_color":"ffffff",
            "protected":false,
            "favourites_count":1,
            "name":"Gillian McKeith",
            "verified":false,
            "profile_text_color":"000000",
            "url":"http://www.gillianmckeith.com",
            "id":15354299,
            "follow_request_sent":false,
            "notifications":false,
            "time_zone":"London",
            "utc_offset":0
        },
        "place":null,
        "geo":null,
        "in_reply_to_screen_name":null,
        "favorited":false,
        "id":18517738649,
        "in_reply_to_user_id":null,
        "text":"The moral of the story:  Love your neighbour and your enemies too."
    }
]);

That is data from the Twitter API, containing the public information about the @gillianmckeith account together with the most recent tweet from that account, in a standard data format called JSON. You can get the same info from this link, just to show that there's nothing special going on here. In fact, here's the same info but for my Twitter account.

So, whatever the reason might be that some person has removed the visible evidence of that Twitter account being related to Ms McKeith, the fact is that, at the time of writing, her web site is causing data from that Twitter account to be loaded into every JavaScript-enabled web browser that visits her home page; it just doesn't cause them to display the information once they've received it.

BBC News Redesign: Sneak Preview

nickfitz — Sat, 19 Jun 2010 21:40:55 +0000

Earlier on I received an email inviting me to take part in a survey on the forthcoming redesign of the BBC News web site. This allowed me to see a number of pages from the live site presented in the new layout, so naturally I made some screenshots – links on the thumbnails:

Front Page
Story Page

The primary change is obviously the shift from sidebar navigation to a horizontal list at the head of the page. This allows better use of the horizontal space, with much more prominent elements such as “Features & Analysis” to the side of the page.

The typography has also been improved, with larger headlines: these work well now we are no longer on 800 by 600 displays, but also work well on handheld devices like the iPhone, making it much easier to see the main headlines at a glance.

I think the font used in the navigation could be a bit larger, and an extra pixel or two wouldn’t come amiss on the secondary links (for example, “End-of-life dilemmas GPs face” on the lead story) but overall it promises to be a welcome change.

There will be other changes before the site goes live, and I haven’t any idea when that will be. Included in the survey was a mock-up of the intended complete home page design, but the differences were minimal.

I seem to have ended up with a cookie which causes me to still see many pages in the new layout, but I don’t know how long that will last. I’m looking forward to seeing the finished version of the entire site (the new video page looks good in the mock-up), but hopefully my cookie will stick around until then so I can continue to get the benefit of this nice redesign on the home and story pages.

(Hopefully the BBC won’t be too cross with me for leaking this.)

XHTML 2 Canned…

nickfitz — Tue, 07 Jul 2009 23:27:29 +0000

…not many dead.

In other news:

Phlogiston “seemed like a good idea at the time”;
Doubt cast on Ussher chronology;
Cold Fusion – yeah, right.

Next, the Shipping Forecast.

New Theme: GiltEdge 0.1 alpha

nickfitz — Tue, 27 Jan 2009 15:31:59 +0000

At long last, I’ve got around to developing a new theme for the site. Given the gold-and-lead colour scheme, and the dire financial straits the World currently finds itself in, the name GiltEdge seemed fitting

It’s not complete yet – there are a few spots that aren’t quite pixel-perfect yet, and I’ve only tested in Firefox and Safari on the Mac. Still, I thought I’d put it up in the hope that any visitors might kindly post a comment about any obviously broken bits they come across.

~~UPDATE: It’s wretchedly broken in IE6, and far from perfect in IE7. Why am I not surprised?~~

~~UPDATE: And, with a few hasLayout triggers, most of the IE issues are fixed. Just a few more to do.~~

UPDATE: Everything now seems to be OK in IE 6, 7 and 8. There’s a conditional stylesheet for 6 and 7, almost entirely devoted to hasLayout triggers.

One thing I know about is the empty “navigation” section at the top of archive pages when there are no “next” or “previous” pages. I’ll have to dig into the WordPress API to check out how to make that section appear only when appropriate.

Once the little niggles like that are done, it’ll be time to start work on some more extensive customisations, together with a plugin or two.

In the meantime, enjoy! – or, if it breaks horribly for you, leave a comment.

About the Picture

The photograph at the top was taken at around 4:15pm on the 11th December 2007 from the 6th floor of Yahoo! Europe’s offices on Shaftesbury Avenue in London. (I hadn’t broken in – I was contracting with them at the time.) The view looks over the rooftops of Seven Dials and Covent Garden towards Westminster; on the left is the Church of St Martin in the Fields near Trafalgar Square. Then, moving right, the light at the top of the clocktower commonly, if erroneously, called Big Ben shows that Parliament was in session at the time. A floodlit Westminster Abbey is next, contrasting sharply with the modern structure of Millbank Tower. Finally, I’m not absolutely certain, but I think the tower block at the right with the blue lights on top may be New Scotland Yard.

Urgent Update of Internet Explorer – Install It Now

nickfitz — Thu, 18 Dec 2008 04:03:49 +0000

Given that I’m so prone to criticising Microsoft, I have to give them credit for moving so rapidly to provide a patch for the recently discovered vulnerability in Internet Explorer.

One little niggle: The email subject line “Out-of-Band Microsoft Security Bulletin Summary for December 2008″ isn’t exactly clear. It uses terminology (“Out-of-Band”) relating to MS’s update release strategy that probably makes no sense whatsoever to most people, who won’t even be aware of the monthly patch strategy. “Out-of-Band” is such a recondite term, being a technical usage that Microsoft are metaphorically relating to what is primarily a social issue of encouraging people to install an update, that it serves to obscure the importance of said update. What’s wrong with the word “Urgent”?

Still, leaving my obligatory whining aside, the number of versions and configurations patched makes it very clear that all users of Internet Explorer must install this one – and if your system isn’t supported, you really should upgrade.

What impresses me about this update is that it includes support for systems and versions so old that no web developer supports them anymore. This demonstrates that although we web devs may be able to pick and choose what we worry about through graded browser support (as do, for example, Yahoo! and the BBC), there are nonetheless software developers out there, grappling with old C or C++ code, who are doing the desperately difficult job of supporting users of older systems. The list of systems and versions they had to be sure to fix, and test, is available at Microsoft’s site: seventeen different combinations of operating system and browser version. Seventeen!

Think about fixing and testing that little lot next time you’re upset by the 3-pixel text jog

More On ASP.NET’s Broken Error Handling

nickfitz — Wed, 10 Dec 2008 18:09:59 +0000

I’ve looked a bit more into the way ASP.NET handles HTTP errors, and frankly it now seems not just irritating, but downright bizarre.

By the way, although the original post was about a 5xx series server error, this also applies to 4xx series client errors. We’ll take the familiar 404 Not Found as an example case.

Here are the main parts (with some headers and the body omitted) of the response to a broken request for Raymond Chen’s blog – I deliberately misspelled “default” as “defult” to trigger a 404:


HTTP/1.1 302 Found
Date: Wed, 10 Dec 2008 17:46:51 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
CommunityServer: 2.1.61025.2
Location: /error-notfound.aspx?aspxerrorpath=/oldnewthing/defult.aspx
Content-Type: text/html; charset=utf-8
Content-Length: 176

So, a request for something that is not found returns 302 Found. Nice.

What happens when the browser follows the redirection to /error-notfound.aspx?aspxerrorpath=/oldnewthing/defult.aspx? This happens:


HTTP/1.1 404 Not Found
Date: Wed, 10 Dec 2008 17:46:52 GMT
Server: Microsoft-IIS/6.0
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
CommunityServer: 2.1.61025.2
Content-Type: text/html; charset=utf-8
Content-Length: 11769

So, just to get this straight: when something is not found, ASP.NET returns a 302 Found response redirecting the client elsewhere. Then, when the redirect is followed, it returns a 404 Not Found response, despite the fact that this page clearly has been found, and it was the page that redirected us here that was not found.

Weird. Just plain weird.

Update: an online acquaintance (I don’t have a URL for him) has pointed me to a page on MSDN where the rationale for this behaviour is presented:

Redirect creates a new Context, Transfer does not. Redirect requires a round-trip to the browser, Transfer does not. As a result of this round-trip, Redirect rewrites the URL to reflect the location of the error page, Transfer does not.

If this seems to be an argument in favor of Transfer, it isn’t. The rationale of the ASP.NET development team is that Redirect accurately displays the URL of the custom error page…

However, at no point is it explained why displaying such an implementation detail to clients is preferable. Given that the article starts with the words:

The quality of a site should be measured not only by how well it works, but by how gracefully it fails.

it seems strange that it then recommends a technique which causes sites to fail in a singularly graceless manner.

My suggestion would be to modify your ASP.NET application configurations so that the customError capability uses the Transfer technique instead of Redirect. If that

…breaks a tenet of the design philosophy of ASP.NET…

then so be it.

Why Can’t Microsoft Just Use HTTP Like Everybody Else?

nickfitz — Sun, 07 Dec 2008 05:57:39 +0000

A few moments ago I was following a link from Google to Raymond Chen’s excellent MSDN blog The Old New Thing. As has happened to me before, I ended up getting redirected to an ASP.NET error page at a totally different URL, telling me that the site was “unable to service my request.”

Now, the inability to serve the requested page is fair enough; Raymond has previously mentioned that the blogs.msdn.com site can be slow or overloaded because it comes under such relentless attack from comment spammers.

But a redirect to the absolute URL of an error page? That’s just annoying. It means that I can’t try to reload the page to see if the server has recovered from whatever issues are affecting it – or, more accurately, I can try to reload, but as I’m now at the absolute URL of the error page, I just keep reloading that.

Unsurprisingly, the HTTP 1.1 standard has already provided for this kind of situation by means of the 503 Service Unavailable status code:

The server is currently unable to handle the request due to a temporary overloading or maintenance of the server. The implication is that this is a temporary condition which will be alleviated after some delay.

If the blogs.msdn.com people (who, by the way, Raymond is not responsible for) would use this status code to serve their error page for the post on Raymond’s blog, I could simply come back after a few minutes and try to reload the page, as my browser would still be at the same location.

It’s also possible that they do send this status code, but with a Location: header to cause the redirect. (The server seems to be back on its feet again now, so I can’t inspect the HTTP cycle to check.)

Either way, what they do is wrong and broken. Don’t send people somewhere else to explain a 5xx Server Error status; simply serve the explanation directly using the appropriate 5xx status code, leaving your visitors ready to try a reload when the server has recovered. Otherwise, you’ll serve a lot of 200 OK responses from your error page, most of them to people who haven’t noticed that their location bar now points there as they hit [Control | Command]-R in the hope of seeing what they originally came for.

Note: A more recent post examines this aspect of ASP.NET in greater depth, and suggests the use of a configuration option that resolves the problem.

Bandwidth? Yeah, whatever…

nickfitz — Wed, 13 Aug 2008 03:08:32 +0000

Well, that’s nice.

The Council’s electoral registration form came through the door today, so I visited the web site to indicate that everything’s the same.

I now have the confirmation email.

Definition of “line” in the following examination of the content of said email: something delimited by an RFC 2822-compliant line-delimiter (see third paragraph of section 2.1), excluding empty lines (that is, lines preceded by, and containing only, such a delimiter).

Content relating to me personally: 3 lines.

Content that’s merely relating to my confirmation (including “Thank you” and such, and therefore reasonable to include): 3 lines.

Content after that stuffed with legal garbage: 15 lines.

I’m tempted to do a word count, but let’s just estimate that there are something like twenty or thirty times as many words in the legalese as there are in the actual content of the message.

And people wonder why the Internet feels slow today.

P.S. Bonus points for the fact that, if I leave the “default.aspx” off the first link, the server returns an empty page, and is apparently Tomcat, despite the fact that the actual application is running on ASP.NET.

Without default.aspx:


HTTP/1.1 200 OK
Date: Wed, 13 Aug 2008 02:22:32 GMT
Server: Apache Tomcat/4.1.12 (HTTP/1.1 Connector)
Cache-control: private
Content-Length: 0
Content-Type: text/html

With default.aspx:


HTTP/1.1 200 OK
Date: Wed, 13 Aug 2008 02:27:31 GMT
Server: WebSTAR/4.5(SSL)
Cache-Control: private
Content-Length: 71428
Content-Type: text/html; charset=utf-8

Ho hum.

Why “left: -9999px;” is Better For Accessibility Than “display: none;”

nickfitz — Wed, 14 Feb 2007 18:17:20 +0000

Update: Thierry Koblentz points out in the comments that either technique may be appropriate, depending on circumstances. I mention this in the last paragraph, but just to be clear, there should have been a “usually” or “often” or some such word in front of the “better” of the title. That, or a different title.

Update 2, December 2008: It is now accepted that it is better to use top: -9999px;, as using left: would cause a scroll bar on a page with right-to-left text.

A recurring question on various mailing lists such as the Web Standards Group discussion list is “How can I hide content but still have it accessible?” This is usually asked in the context of image replacement techniques, where one might for example wish to display a heading in a fancy typeface, but still have the content accessible to users of assistive technologies such as screen reading software.

Two techniques, both reliant on CSS, tend to come up in these discussions: hiding the text by the use of display: none or visibility: hidden, and positioning the text off-screen, using absolute positioning and left: -9999px, or margin-left: -9999px.

Access Matters determined back in June 2005 that the display and visibility techniques appeared to be inaccessible to screen readers, whereas the offscreen positioning method was accessible. The full results go into more detail.

One thing that nobody seemed to have bothered to explain was just why this was the case. Inspired by yet another thread on the subject, I finally decided to do some digging; if I don’t know why I’m doing something, I can’t be sure that I should be doing it, which leads to the risk of Cargo Cult coding.

Ask the people who know

To my astonishment, a search of the Microsoft Developer Network Library quickly brought me to the explanation I sought. (I was astonished because the MSDN library search is notorious for returning swathes of irrelevant results for even the simplest search; I have heard anecdotal evidence that Microsoft’s own developers search the library using Google with the site:msdn.microsoft.com specifier.)

The library’s section on accessibility support in Internet Explorer is extensive, but the information about invisible objects told me all I needed to know. To quote:

With Internet Explorer 6 and later, the pvarState parameter of the IAccessible::get_accState property receives STATE_SYSTEM_OFFSCREEN when the object is invisible because of scrolling and receives STATE_SYSTEM_INVISIBLE when the object is invisible because its IHTMLStyle::visibility property is set to hidden, or its IHTMLStyle::display property is set to none.

Again, in English?

A screen reader doesn’t load an HTML page: the browser (usually Internet Explorer) does that. What the screen reader does is to ask IE about the content, using an API called Microsoft Active Accessibility (MSAA). MSAA allows the screen reader to interrogate the browser as to the contents of a page; the dialog, insofar as I understand it, would go something like:

Internet Explorer:: Hey, I’ve just loaded a page.
Screen reader:: Cool, what’s it got on it?
Internet Explorer:: There’s a heading, then some links, then a few paragraphs.
Screen reader:: OK; give us the heading.
Internet Explorer:: It says “Welcome to HyperGlobalMegaCorp”.
Screen reader:: Right, hang on a moment. (Speaks the given text to the user.)

… and so on; you get the general idea.

The key is that IE doesn’t just return content to be spoken in some way; it also returns information about that content. This includes information that goes by the snappy name of pvarState, and one of the aspects of this information is that it can tell the screen reader whether or not the content of the thing it’s asking about (for example, the heading in the above dialogue) is actually displayed on the screen – that is, whether it’s visible or invisible. (Note that these terms aren’t being used here in exactly the same way as they are in CSS.)

There are three ways that IE comes to regard something as being invisible:

It has the CSS property display set to the value none;
It has the CSS property visibility set to the value hidden;
It is in a position where the window would need to be scrolled for it to become visible.

IE further distinguishes these three forms of invisibility by dividing them into two kinds. The first two forms of invisibility are denoted by the pvarState value STATE_SYSTEM_INVISIBLE, and the final form is denoted by the value STATE_SYSTEM_OFFSCREEN.

So finally it all becomes clear: screen readers will treat content with the state STATE_SYSTEM_OFFSCREEN as being content that it should read, because it’s only invisible by virtue of not being within the visible region of the window: after all, a screen reader that required the user to scroll the window to read all of the content would be of very little value to anybody. The only reason that the content can’t actually be scrolled into view when using the off-left or off-top positioning technique is that Internet Explorer itself doesn’t support the concept of scrolling the window by a negative amount, although I believe this isn’t a limitation of the Windows scrolling mechanism per se.

If, however, the screen reader finds that the state of the content is STATE_SYSTEM_INVISIBLE it apparently concludes that it must have been concealed for a reason, and doesn’t speak it.

So there you go: use one of the offscreen methods and the screen reader will treat your content as being there; use the display or visibility method and the screen reader will discard it, meaning that this is a reliable way of concealing content from both a normal user and a screen reader user, should you have a reason to do so. But armed with the information above, you’ll at least know why you’re using whichever method you apply.

This post is now available in Belorussian provided by http://www.fatcow.com/ – many thanks for that!

WebDD: Microsoft’s Reality Distortion Field is Fully Functional

nickfitz — Tue, 06 Feb 2007 17:10:33 +0000

A designer?

Originally uploaded by writerus drivelus.

Last Saturday I went to the WebDD conference at Microsoft Campus, Reading. Following my standard conference procedure, I checked in, obtained coffee, and fired up my MacBook.

At this point one of the official photographers (only authorised individuals may take photos at MS) rushed over to me and asked, “Is it all right if I take a photograph of you?”

“Yeah, fine,” I replied. As he raised his camera, I asked, “Is it the Mac?” “Yes,” he said.

I’d only been at Microsoft five minutes, but the Reality Distortion Field had already cast me into a Bateman cartoon: “The Man Who Used a Macintosh on Microsoft Campus.”

(And no, I’m not a designer.)