Category Archives: Web Development

Antisocial Networking

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:

<div id="gillianssocialnetwork">
 <a href="" target="_blank" title="Follow Gillian on Twitter">
  <img src="i/twitter.jpg" alt="Twitter" width="39" height="44" border="0" class="networkicon" />
 <a href="" target="_blank" title="Gillian's facebook Page">
  <img src="i/facebook.jpg" alt="Facebook" width="39" height="44" border="0" class="networkicon" />
 <a href="" target="_blank" title="Gillian's YouTube Channel">
  <img src="i/youtube.jpg" alt="Gillian's YouTube Channel" width="39" height="44" border="0" class="networkicon" />
 <a href="" target="_blank" title="Gillian on LinkdIn">
  <img src="i/linkdin.jpg" alt="Gillian on LinkdIn" width="39" height="44" border="0" class="networkicon" />
<div class="rightcolitems">
 Do you social network? So does Gillian! Follow her on the links above
</div><br />

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:

<!--    <div id="twitterboxheader"><a href="" target="_blank"><img src="i/gillianmckeith_on_twitter.jpg" alt="Follow Gillian on Twitter" border="0" title="Follow Gillian on Twitter"/></a>
<div id="twitterboxmain">
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<br /><br />

<a href="" id="twitter-link" style="display:block;text-align:right; font-size:1.2em;" target="_blank">follow me on Twitter*lt;/a>
<div id="twitterboxend"><img src="i/twitterboxbase.jpg" /></div><br /><br />-->

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

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

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 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
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: */*
Cache-Control: no-cache
Accept-Language: en-us
Accept-Encoding: gzip, deflate
Cookie: <removed for security reasons>
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: <removed for security reasons>
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 630
Connection: close

        "created_at":"Wed Jul 14 13:06:40 +0000 2010",
        "user": {
            "created_at":"Tue Jul 08 15:26:42 +0000 2008",
            "name":"Gillian McKeith",
        "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

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:

  • BBC News: redesigned front page
    Front Page
  • BBC News: redesigned story 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.)

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

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.”
Continue reading Why Can’t Microsoft Just Use HTTP Like Everybody Else?

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

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.
Continue reading Why “left: -9999px;” is Better For Accessibility Than “display: none;”

WebDD: Microsoft’s Reality Distortion Field is Fully Functional

A designer?

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.

Continue reading WebDD: Microsoft’s Reality Distortion Field is Fully Functional