Post #433

Version 2

17th July 2004, the wee hours | Comments (96)

I remember hearing Sir Peter Ustinov explain that the making of the film ‘Spartacus’ took so long, that his first child, conceived during filming, was able to answer a school-mate’s question of, What does your father do? with the reply, Spartacus.

The reason I bring this up is that if you asked The Girlfriend what I do for a living, she’ll only know to reply The Blog. I think I’ve been working on it for more than half the time we’ve been seeing each other, and its redesign has rather taken over our lives.

Most of the last 40-some days have followed one of two patterns. Either:

  1. 9am: get out of bed
  2. Walk to kitchen
  3. Turn on the computer
  4. Start work
  5. Nineteen hours later at 4am: realise the time
  6. Realise I forgot to eat
  7. Realise I forgot to wash
  8. Realise I forgot to move
  9. Walk to bedroom
  10. Go to bed


  1. 9am: get out of bed
  2. Get washed
  3. Walk to cafe
  4. Turn on the computer
  5. Start work
  6. 8pm: cafe closes
  7. Walk home
  8. Go to kitchen
  9. Turn on the computer
  10. Continue work
  11. Four hours later at 4am: realise the time
  12. Walk to bedroom
  13. Go to bed

And throughout all this, the GF has been heroic; she’s hardly seen me, has put up with my constantly wandering mind, and has always managed to sound interested as I explained the intricacies of learning to parse XML feeds in Python and PHP.

What a gal.

Having said all that, the redesign still isn’t complete: there’s most of the backend still to rewrite; IE’s CSS tomfoolery to take into account; a few Javascript widgets to fix or create; and one very large project which I can’t tell you about just now. (Ooh, the mystery of it all). But we can’t go on like this forever, so, despite all its faults, the redesign is getting launched today. Tweaks and enhancements will follow over the coming weeks.

So, what’s new?

I’ll write a detailed account of each step of the process in the coming weeks, outlining the What and the How of everything here, but for now here's a quick overview.

Better XHTML

I’ve managed to lose quite a few divs; use lists where there were previously just paragraphs with separating-pipes; and re-code the comments to use definition lists, as opposed to headings and paragraphs. All in all it’s a tighter, more semantic site.

Split CSS

Following a lead from Doug, I’ve decided to split my CSS into several files; one for colours and images, and one for layout. I’ve also organised the files by tag type, rather than by what they represent, which has let me identify redundant code and make several sweeping cuts to my CSS. I may go a step further and split out my font styles into a sperate sheet as well.

More weather information

I’m now pulling in weather information for San Francisco as well as Dorset. I completely rewrote my PHP scripts to do this, transforming them from a loose collection of functions into a leaner and neatly packaged weather-fetching class.

On top of the information that feeds me, I’m also calculating wind chill and apparent temperature, then using them to display a ‘feels like’ temperature when appropriate. The calculation for apparent temperature is a little involved. Here it is:

  1. // Heat Index, or Apparent Temperature
  2. // calculated when temperature exceeds 80 degrees F, and when the relative humidity is at least 40%
  4. // temperature in fahrenheit
  5. $t = $array_data['cc'][0]['tmp'];
  7. // relative humidity
  8. $rh = round($array_data['cc'][0]['hmid']);
  10. // if the conditions are correct
  11. if (($t > 80) && ($rh >= 40))
  12. {
  13. // apparent temperature in fahrenheit
  14. $at_far = round(16.93 + (1.85212 * pow(10, -1) * $t) + (5.37941 * $rh) - (1.00254 * pow(10, -1) * $t * $rh) + (9.41695 * pow(10, -3) * pow($t, 2)) + (7.28898 * pow(10, -3) * pow($rh, 2)) + (3.45372 * pow(10, -4) * pow($t, 2) * $rh) - (8.14971 * pow(10, -4) * $t * pow($rh, 2)) + (1.02102 * pow(10, -5) * pow($t, 2) * pow($rh, 2)) - (3.8646 * pow(10, -5) * pow($t, 3)) +(2.91583 * pow(10, -5) * pow($rh, 3)) + (1.42721 * pow(10, -6) * pow($t, 3) * $rh) + (1.97483 * pow(10, -7) * $t * pow($rh, 3)) - (2.18429 * pow(10, -8) * pow($t, 3) * pow($rh, 2)) + (8.43296 * pow(10, -10) * pow($t, 2) * pow($rh, 3)) - (4.81975 * pow(10, -11) * pow($t, 3) * pow($rh, 3)));
  16. // apparent temperature in celsius
  17. $at_cel = round(((5/9) * ($at_far - 32)), 1);
  18. }
  19. Download this code: 433a.txt

Bit of a laugh, eh?


The new weather information is now displayed as a set of drop-down panels that slide in from behind the panorama. Those without the benefit of Javascript will see the information displayed in the right hand column, as a set of tables.

Tabbed navigation

The little tabs have gone, and in their place is a neater, less obtrusive set of links. Some might say too unobtrusive, but there we are; we’ll have to see if it works or not. I’ve been using them for a while now and like their out-of-the-way feel.

Screen shot showing the site’s navigation
New, low-key tabbed navigation

Archive layout

The archive has retained the general look and feel, but I’m making use of display: block and position: absolute to produce a sort of tabular layout, and ensure each link has a large clickable and hoverable area.

Every date is a link

With the exception of the blank days in the calendar, every bit of every date you’ll see on the site is now clickable. It seems people were trying to click on headings that contained dates, and getting frustrated at the lack of linkage. That’s fixed now.

Post times

When I make a post to my blog, I enter two different post times: one for UTC, and one for the local time where ever I happen to be. By recording both timestamps I’m able to ensure that the logical order of posts it preserved (by using the UTC timestamp) while still providing relevant local datetime information. In this case I’m using the local post time to display a more human timestamp than normal:

A screen shot shwoing a post title and it’s post times
A human-style timestamp: “late at night”

Comment times

I’ve altered the popular PHP timesince() function to accept another, optional, date variable. When I include this second variable the function works out the time that’s passed between the two dates, not between the current time and a single date. This allows me to display the time that has passed between me posting a blog entry, and a comment being made on that blog entry:

A screen shot showing a comment’s post time
Comments display their post time as ‘time after the fact’

Comment relationships

The styles that indicate a comment in focus, and its child, and parent comments, have been updated. They now have a background colour, as well as a little icon to help you pick them out among the mass of information. I’ve also included a style for comments I’ve made, to stop any confusion should someone decide to spoof me.

(By the way, I’m well aware that this whole area is rife with problems, and it’s one of the first things I’ll be fixing when I get a moment.)

The panoramas

I’ve produced a page that displays all the panoramas, for those who are interested. It takes a while for them to download, but if you’ve wondered what they all look like, then it’s worth a peek. You can access it via the Colophon.

Contact page

The contact form uses the same style as the comment form now. So if you’ve left a comment before, you get one style, with all your details filled in; and if you’re a newbie, you get another, more explanatory form.


The reading page has a new twist on the flexible floats script, which I’ll explain at a later date.

Demos, downloads, and updates

I’ve moved coding demos out from the posts that explain them, and into a demo sub-domain. Any post that deals with coding examples now has a little ‘coding information’ blurb at the start of it, which explains the status of the code, and links to any updates, demos, or downloads. For an example take a look at the drop shadows post.

From fluid to fixed layout

I decided to move to a fixed layout for two reasons: firstly because I’ve had enough of dealing with fluid-width layout problems, and fancied tackling a new set of issues; and secondly because I want to start using larger images in my posts, and knowing that I have a fixed-width container lets me do that without fear of breaking the layout.

I did wonder what would happen if I ever redesigned again and these large images were too large for the new design. I put the brain to work, and came up with the solution below.

Code and image inserts

All my code examples and images are now inserted into the database as simple, one line, homegrown XML tags. These tags are parsed on-the-fly, with the correct image or code example being plucked from the server, formatted according to my current needs, and then displayed in the post as requested. This means that I’ll never have to edit a post again to take into account a new design or a rethink of the way I present these elements; all I need do is alter one PHP file, and everything will change. I’ll be explaining this in a lot more detail later on.

  1. // to insert a section of code (this section in fact)
  2. <codeins="433b" />
  4. // to insert a image
  5. <imageins="433e" alt="A screen shot showing a comment's post time" caption="Comments display their post time as &#8216;time after the fact&#8217;" class="" link="large" linktitle="" />
  6. Download this code: 433b.txt


I’ve had the commentators page running privately for a while now, and have been waiting for a piece of Javascript to be written before I put it live, but the Javascript is never going to appear, so I’m giving in, and releasing it as it is. Basically it’s a page that lets you see who’s commented on this site, and what they said.

It’s not perfect for two reasons: one, not everyone uses unique names when posting a comment (there could be more than one guy called ‘Ethan’, for example); and two, I still haven’t figured out how to deal with certain characters in my system, so names like “Mathieu ‘P01’ HENRI” break the system. (And actually, the same goes for the Blogged People list. “Tantek Çelik” breaks that every time, damn him.)


I’ve gone a little alpha-transparency crazy here, but I rather like it. The vertical dividing line was originally a spine shadow from a copy of National Geographic, before I recreated it in Photoshop and changed it into a PNG. The shadows on the header and footer, as well as the ‘Panorama information’ tab and the dropdowns it triggers, are also PNGs. I especially like the way they slide over each other as the browser resizes.

IE people get no shadows on the header, footer, dropdowns, or information tab, but do get a GIF version of the spine shadow to help the structure of the page.

Oh, and as before, the graphics for the header and footer change colour depending on the time of day, only this time the panorama information tab joins in. Blues for day time, greys for night.

A screen shot showing the PNG shadows in effect
All the shadows are visible on this page


This is possibly the neatest bit of the whole redesign. Using a combination of homegrown PHP and Python scripts, some help from Stuart Langridge and Simon Willison, and a combination of Mark Pilgrim’s Fetch Anything, and Ultra Liberal Feed Parser scripts, I’ve managed to grab and display the title of the last post each site on my blogroll published.

Now, when my blogroll tells me a site has been updated, I’m able to tell which post I’ll see if I click through to the site. If it’s one I know I’ve already read then there’s no need to click.

A screen shot showing a blog’s last post title as a tooltip
Matt’s last post title

I’m also indicating if the XML feeds the sites publish are invalid, and if so, what the errors are:

A screen shot showing an error message
The kind of error message invalid feeds produce

All three bits of information (the title, the validity, and the error) can be accessed as title tooltips. To see a post title, just hover over the names of any of the sites which have an XML feed. And if you want to see the invalid feed error, hover over Photo Matt’s XML feed link. (I’ve also visually styled the invalid feed links to indicate an error, although I might change that to something slightly different.)

What’s broken?

Hmm, well, it’s not a short list, I’ll tell you that much, but the main buggy areas are to deal with: the comment highlighting in all browsers; various JS widgets not working in Safari; insane layout issues in IE; and the dropdown menus not functioning 100% in Opera. So, please consider this a site under public development, not a finished product.

As I said before, I’ll endeavour to write up each of the points above in more details over the next few weeks. In the meantime, take a look around the site, break what you can, and let me know what you think.

Jump up to the start of the post

Comments (96)

Jump down to the comment form ↓

  1. Jmc:

    I tried your blog on my RSS reader about ten minutes ago, and it said there was no feed. Then I loaded your blog from the address bar, and I got an error! I was really worried that after the (understandable) inactivity of late while you've been in California, you'd decided to fold the blog. I sure am glad I was wrong, because your blog is one of my favourites to read.

    Anyway, this praise-ful comment is going to hide under the guise of me testing out the new comment system. (BTW, your current RSS feed says the latest entry is "Laptops as social aids" rather than "Version 2". But maybe I'm posting a comment to a now-deleted article...

    Posted 18 minutes after the fact
    Inspired: ↓ Dunstan, ↓ Jmc, ↓ Pickyin
  2. Dunstan:

    JMC, thanks for the first comment!
    The XML feeds are broken right now as the code that generates them has gone for a burton, and my access to the server has died as well.

    I'm certainly not going to vanish, in fact part of the reason I've failed to post recently is that all my time and energy has gone into development, rather than writing. Hopefully that'll change now :o)


    Posted 24 minutes after the fact
    Inspired by: ↑ Jmc
    Inspired: ↓ Jmc, ↓ Pickyin, ↓ David Barrett
  3. Zach:

    I cannot tell you how incredibly beautiful and inspiring your site is. You have made this site a masterpiece. Awesome Job!

    Posted 48 minutes after the fact
  4. Rob Mientjes:

    I. Love. This!

    And I've been screenshot! Hurrah!

    Nice work, Dunstan. Think I'm going to 'borrow' some things of this ;)

    Posted 1 hour after the fact
  5. David House:

    This is looking rather pretty. Just a couple of thoughts:

    I would have used the whole world instead of the beginning letter in the little top-right hand corner icons for comments. I can only guess at what f, c and p stand for (fact, child and parent?).

    Why on earth would someone want to 'see' the XML feed for one of your blogmarks? Surely a more effective caption would be 'URI for the XML feed of this weblog'?

    I personally preferred the tabs: intuitive (and therefore usable), but still small and unobstrusive.

    How about resolving the commentators many-people-to-one-name issue by GROUPing by email as well as name?

    The comment preview is still broken: it thinks my name is ''.

    Posted 1 hour, 4 minutes after the fact
    Inspired: ↓ Dunstan
  6. Colin D. Devroe:

    Dunstan, well done ole' chap. Pin yet another feather in your cap, and if you were around, I'd buy you a drink. Not even for the fine job you've done in "restructuring" your blog, but rather - for taking out the time that it took to complete it. Unfortunately, I have not been able to spend as much time with my blog as it deserves. Thanks to your efforts, which has given me inspiration and motivation, I will probably be spending some red-eye hours on my site now.

    My wife, my cats and my friends all hate you now. However, my gut which continues to grow loves you.

    Kudos and congrats.

    Posted 1 hour, 6 minutes after the fact
  7. Zzen:


    You bastard! How dare you?! This is, this is...

    I mean this is absolutely unbelievable! The best designed blog(tm) has just gotten even better - by order of magnitude.

    Ah - I'm going to drop all my web development. This masterpiece cannot be surpassed.

    Posted 1 hour, 30 minutes after the fact
  8. Cam McVey:

    DUDE! Awesome. No, seriously!

    Posted 2 hours, 2 minutes after the fact
  9. Mark:

    Fantastic work as always Dunstan. Was checking the site randomly last night and when I saw that only the blog section was down I knew something good was coming.

    Must say the comment modifications, or full out overhaul, are quite a change from what is normally lacking about everyone's blogs. Makes reading comments more interesting with the color changes.

    Posted 2 hours, 6 minutes after the fact
  10. Jmc:

    I have to add that the wait was definitely worth it! It's intuitive and feels like... well, it just feels like this is what it's supposed to feel like.

    Anyway, my second praise-ful comment is going to pretend to be my way of checking out the parent/child/etc relationship for comments.

    Now I have to go wipe the tears out of my eyes after crying at the sheer beauty of it all...

    Posted 2 hours, 28 minutes after the fact
    Inspired by: ↑ Jmc, ↑ Dunstan
  11. Chris Vincent:

    Very good work, Mr. Orchard. Not a huge deviation from the past, but the first version was very good. Version two is gooder. ;)

    I looked at the commentators page. I would be third on that list if you count my old persona ("Dris"). And since you yourself are the number one commentator, that would make me your second-biggest fan! :)

    Posted 3 hours, 15 minutes after the fact
  12. Pickyin:

    I like the redesign!

    I use fixed width on my blog too, after contemplating fluid design for quite sometime and worrying about image displays.

    Worth the wait!

    Posted 4 hours, 35 minutes after the fact
    Inspired by: ↑ Jmc, ↑ Dunstan
  13. Peter Ramus:

    "Spartacus," eh?

    You have a tremendous eye for design. My compliments.

    Posted 4 hours, 55 minutes after the fact
  14. [m]:

    All I can say is... I'm glad I have an unusual name. ;)

    It looks great, it has a more finished look to it. And I must say, yay to icons! At first I thought that this must be one of the shabbiest redesigns, ever. "A vertical line doesn't constitute as a redesign!" But then I saw the icons and the 'panorama information' button. Then I read the entry.

    Now I feel stupid.

    Great job on the added functionality! Now let's hope those problems are easy to fix.

    P.S. You still need to add members-only stuff, so I can edit my comments. :P

    Posted 6 hours, 2 minutes after the fact
  15. Kitta:

    I knew the great Dunstan re-design was going to be great, but I never thought it would be this great. Good job Dunstan, you may now go wash and eat... But don't get too comfy with the washing and eating, there is de-bugging to be done. ;o)

    It's hard to believe I've left over 35 comments (this one will be 36) since Christmas time last year.

    Posted 6 hours, 41 minutes after the fact
  16. Allgood2:

    So very impressive. You always introduce new things that I want to try. I love the "Commentators" section, even though you've indicated its not done. But it was really great to see someone's name and view their past comments. I'm in the beginning stage of designing a "neighborhood blog" for the neighborhood I live in, in Madison, WI and that type of functionality is now on my to-do list.

    The Weather script is just fantastic. Absolutely amazing. Great to be able to get San Francisco weather from one of my favorite sites as well. I just moved from SF to Madison. I love Madison, but find myself missing little things about SF. Like Craigslist.

    Great job, and great girlfriend for putting up with the time spent recoding.

    Posted 6 hours, 49 minutes after the fact
  17. Ken Walker:

    Dunstan--absolutely fantabulous. I heart the panels--what a cool implementation of such a snazzy UI widget. :)

    FYI, the panels are scrolling a bit slow for me on a 1.1 Ghz PC running Firefox 0.9. Looking forward to seeing what's next in the queue!

    Posted 7 hours, 16 minutes after the fact
    Inspired: ↓ Dunstan
  18. Dunstan:

    Ken, it's a bit of a bugger trying to get the speed right: I tweaked it so they worked just right for me on Safari, but then yes, they're a little slow on Firefox, although (and this is the problem) sometimes they whizz down at just the right speed. It's a bit confusing.

    I tested on my PC in IE and the speed seemed good there.

    Maybe I'll bump the speed up a bit: a fast drop down is not annoying, but a slow one is.

    When I get back from my weekend away (launching a redesign and then going away for three days: interesting) I'll have a play :o)

    Thanks for the feedback.

    Posted 7 hours, 58 minutes after the fact
    Inspired by: ↑ Ken Walker
    Inspired: ↓ Mark Tranchant
  19. David Barrett:

    It's a pretty sweet design Dunstan. Your work on the custom backend has made me want to make my own. Thanks for the inspiration.

    I wonder how many times this particular chain of events has happened over the last month:

    "Dunstan, where were you?"
    "Sorry honey, I was working on the blog."
    *Dunstan gets punched in the head*

    Posted 9 hours, 2 minutes after the fact
    Inspired by: ↑ Dunstan
  20. Faruk Ates:

    Very nice stuff there, Dunstant. Two nitpicky things though:

    1) Dunstant-comments become plain old normal comments after any highlighting has hit them (ie. a P, F or C will remove the Dunstan icon, even after de-highlighting the entire thread)

    2) You've got a panorama for Christmas 2004 already? Is that intentional or did you forget that last christmas was still 2003? :)

    Other than that, looking sharp!

    Posted 9 hours, 42 minutes after the fact
    Inspired: ↓ Mark Wubben, ↓ Dunstan
  21. Tobi:

    Uuh, I love the well thought-out details on the site.

    The only problem is that the main text is moved off my browser's window, so that the title for this post reads "ersion 2". Also makes for some word-guessing on the subsequent lines.

    Since nobody has pointed this out, it seems like it's a problem specific to my very 'puter setup, no? [Firefox 0.8 on Linux machine.]

    Other than that, a wonderful evolution of the site: Keeping out the bad stuff and making the good things even better.

    Posted 9 hours, 43 minutes after the fact
    Inspired: ↓ Allgood2, ↓ Waylman, ↓ Dunstan
  22. Michael Simmons:

    NIce job, Dunstan! This site keeps getting better and better.

    I love the shadow separating the content and the side panel. The weather information is a very nice touch.

    Posted 10 hours, 27 minutes after the fact
  23. Allgood2:

    Hey Tobi. I notice the same thing in Safari, but then realized resizing my browser window brought back the proper spacing. The blog is centered but a bit wider than my normal browsing window.

    Posted 13 hours, 3 minutes after the fact
    Inspired by: ↑ Tobi
    Inspired: ↓ Waylman
  24. Karen:

    From the weather drop-downs to the linked dates, the new format is more navigable than ever. Nicely done, Dunstan! By the way, my significant other is a programmer, and I can attest to the patience and tenacity it takes to remain "interested" in week-long discussions of XML, Python, etc. The Girlfriend is indeed a hero. :)

    Posted 15 hours, 13 minutes after the fact
  25. Niket:

    Whoa! Lost for words.
    No wonder your girlfriend thinks that you do "The Blog" for living. The most amazing thing of the redesign: all this work and IE doesn't break it. Wow!

    [BTW, the naked dunstan disappears when any of the comments are clicked]

    Posted 15 hours, 22 minutes after the fact
    Inspired: ↓ Mark Wubben
  26. Mindy:

    I randomly found your site on google, researching iframes. I think this is the best discovery I've ever made. The header is so creative. I wish I'd thought of it. I would love to do that for my family's farm. The whole site is amazing. I think you've set the benchmark for web developers everywhere.

    Posted 17 hours, 4 minutes after the fact
  27. Anon:

    you're wasting your life.

    Posted 17 hours, 39 minutes after the fact
  28. Sean:


    It's beautiful.

    Posted 20 hours, 18 minutes after the fact
  29. Conor:

    Awesome job Dunstan, I wish I was as talented as you.

    Posted 20 hours, 51 minutes after the fact
  30. Sean Devine:

    Fantastic job with the redesign. I love the little touches like the redone comments style and the extra weather details. I'm glad that you stayed with the basic design elements that made you so well known (the panorama, the little-dunstan-guy, etc). I wouldn't mind if you made the style for your comments a bit more noticable when my mouse isn't over it. The how-to articles to come will be lots of fun - I can't wait.

    Posted 21 hours, 8 minutes after the fact
  31. Prashant Mullick:

    "Dunstan not post for while, Dunstan come back with big bang!"

    That was doing the rounds at the unoffical Dunstan fanclub!!!

    Oh, what a relief!!! You are alive and kicking some serious butt!

    Good Job!

    Posted 22 hours after the fact
  32. Jorge Garcia:

    [Following a lead from Doug, I’ve decided to split my CSS into several files; one for colours and images, and one for layout.]

    Could you show me the link to this lead from Doug?.
    I'm interested in the theory behind the method.

    Posted 1 day, 2 hours after the fact
    Inspired: ↓ Mark Tranchant, ↓ Dunstan
  33. Andy:

    Oh, you big show off. This is really impressive - everything I've seen has elicited an 'ah, that makes sense'.

    One little thing - on the weather panorama, you really need to amend the title attribute on the link to read "warning, may cause drooling"...

    Posted 1 day, 3 hours after the fact
  34. Mark Wubben:

    Regarding the naked Dunstan disappearance on the comments, I wrote a fix for Dunstan yesterday, just before he left. He'll probably integrate it when he gets back.

    [Dunstan, you better do that ;-)]

    Posted 1 day, 5 hours after the fact
    Inspired by: ↑ Faruk Ates, ↑ Niket
  35. Conor:

    Also as for the commentators page, for the people that dont have unique names why not further seperate by email or ip address. Those would definately be unique.

    Posted 1 day, 7 hours after the fact
  36. Scooper:

    No alternate stylesheet with a panoramic view from your place in San Francisco?

    Posted 1 day, 8 hours after the fact
  37. Daniel:

    Simply awesome. That's all there is too it. I don't really know what to say except wow.

    Posted 1 day, 10 hours after the fact
  38. Pascal:

    a wonderful piece of work that is!

    simply awesome. congratulations.

    Posted 1 day, 10 hours after the fact
  39. Scott:

    Wow Dunstan! This is amazing! I am so glad you decided to keep the panoramas, that's by far my fav part of the site. Also, the posts and comments are simple amazing! Great Work!

    Posted 1 day, 15 hours after the fact
  40. Tom:

    ^speechless *bows to Dunstan

    Posted 1 day, 15 hours after the fact
  41. Timmy:

    I... but with the... and it... are you...

    I don't know who you are. I don't know where you have come from. But with ideas like your's the US government will surely be passing restrictive laws on what you do. Be prepared my friend.

    It looks amazing in Firefox. I love your javascript ideas. I never thought that I would find anyone who used javascript in such an unannoying manner. What most impresses me though is the attention to information architecture. Things appear to be more easily found. I also like to be able to see all the awesome insight which I have contributed to you're site.

    Posted 1 day, 16 hours after the fact
  42. Jeff:

    Hello, I was trying to find an error in your site as you suggested, so I headed over to ie and noticed that on rollover of the header image it flashes whte with the message that it's loading and then returns back to the image immediately. I wasn't sure if you were aware of this but figured I ought to point it out. Oh, and by the way, I love reading your stuff and have been for quite some time.

    Posted 1 day, 18 hours after the fact
    Inspired: ↓ Dunstan
  43. Rick Yribe:

    Dunstan, I'm jealous. I honestly can't think of anything else besides that.

    Well, maybe I can, but, it would sound extremely cheesy, so I won't.

    Posted 1 day, 18 hours after the fact
  44. Chad:

    Wow. Who'd have thought you could actually make this comment system (and the weather stuff) any cooler and slicker...nice work. 'Nuff said.

    Posted 1 day, 20 hours after the fact
  45. Keith:

    Hey Dunstan, sorry to make a contentless comment, but I wanted to test how your comment system handles something. Please feel free to delete this comment.

    Posted 1 day, 21 hours after the fact
  46. Seriocomic:

    setting the standard for excellence is one thing Mr Orchard, but raising the bar is just plain silly...

    will you let the rest of us dweebs catch-up!?

    Posted 2 days, 2 hours after the fact
  47. Mark Tranchant:

    I wish I had as much free time as you. This site does everything, and does it right.

    My only comment would be that the weather drop-down panels, although →really← cool, are still distractingly slow. I don't think this matters too much from a usability point-of-view — how many people seriously use your site to check out the Leigh or ‛Frisco weather? — but it is a sore point on an otherwise excellent design.

    I'd also be interested in the rationale behind splitting the colour and layout styles into separate sheets.

    Posted 2 days, 3 hours after the fact
    Inspired by: ↑ Dunstan, ↑ Jorge Garcia
    Inspired: ↓ Dunstan
  48. David House:

    By the way, I've ripped off that code-snippet system of yours and made a WordPress plugin out of it. Read all about it at my blog [1]


    Posted 2 days, 3 hours after the fact
  49. Tom Dell'Aringa:

    Dude, positively cracking! (I love using English sayings when I barely know what they mean!)

    You never cease to amaze me. One thing, when I went to click and see my comments in the commentators section I got a 404(I think). My guess is that the old apostrophe in my name which has caused trouble since the dawn of time is throwing off a URL or something. I may not be the only one with one in my name who knows.

    Great job!


    Posted 2 days, 5 hours after the fact
  50. Geeky:

    fantastic. i love the new look, as well as all the new extras. the weather dropdown is very cool. can't wait to see what else you've got up your sleeve. you never fail to impress! :)

    Posted 2 days, 5 hours after the fact
  51. Cheah Chu Yeow:

    I skimmed this once on my computer, then printed it out to read in full. This is awesome stuff you are doing Dunstan. Imagine if Dunstan was working on WordPress or some other blog script. If it's this good, I'd pay for it (and that's saying something, because I don't pay for _anything_).

    Posted 2 days, 6 hours after the fact
  52. Robert Lofthouse:

    Very nice, Dunstan.

    The only issues i've noticed are:

    1. If people use a low resolution the text gets "truncated" on the left of each entry.

    2. It's a tad too slow atm

    I've used seperate stylesheets for my fonts and layout for ages now. It just helps me to easily identify a problem + reduces the time I spend looking for a specific rule.

    Nice to know i'm not the only one who works from early in the morning till about 4/5am the next day - every day.

    Oh.. after previewing my comment I just noticed on more thing:

    Underneath "posted 2 days blah blah" it says "Alert Robert Lofthouse to your comment" - I don't want to alert myself, so that should be removed on the previewing section :P

    Posted 2 days, 6 hours after the fact
    Inspired: ↓ Dunstan
  53. Waylman:

    Excellant job. Your attentions to detail to inspring, espesially when it comes to all the little features you code in with php etc. I look forward to seeing the kinks worked out and more explainations.

    Speaking of kinks, I noticed, as did Tobi, that the left of the page was cut off in my browser (Firefox/Win98) with no option to scroll left. But, as Allgood2 mentions, a quick resize of the browser window (enlarging it)solves that problem. I haven't studied your code but I wonder if it is the same problem SvN ( )had with their fixed width site. I wrote up an explaination of the problem and a solution over on my sight before they fixed the problem with theirs. You might want to check it out.

    Posted 2 days, 6 hours after the fact
    Inspired by: ↑ Tobi, ↑ Allgood2
    Inspired: ↓ Dunstan
  54. Rahul Choudhury:

    Great work buddy, nice natural evolution from the previous iteration. Sad to see your panorama system still isn't animated though! :-(

    Posted 2 days, 7 hours after the fact
    Inspired: ↓ Wolfgang Malgadey
  55. Tony:

    Dunstan, wonderful job. I love the book feel, and all the little extras are just perfect. It's a joy to browse this site, and just glory in the polished effort you put forth.


    Posted 2 days, 7 hours after the fact
    Inspired: ↓ Wolfgang Malgadey
  56. Jason:


    I love the new layout. It's very simplistic, but striking at the same time. The subtleties have really made this redesign standout. I was wondering, I haven't read the entire post yet, nor everyone else's comments, but could you make a panorama that represents San Francisco as well? This way the user could define what portion of your life (weather pattern) they would like to see. Whether it is your home in England, or your current residence of San Francisco. Just a suggestion.


    Posted 2 days, 10 hours after the fact
    Inspired: ↓ Wolfgang Malgadey
  57. Wolfgang Malgadey:

    You need to switch on your Computer?

    I'm doing a re:design too, but not sure where to focus on! maybe I will do the gfx-stuff at first.

    greets from sleepless cologne (germany) where I use to never turn off my Computer :)

    PS: Just wondering what this "comment relationship" would be, and what happens when I mark more than one comment. sorry for that :)

    Posted 2 days, 12 hours after the fact
    Inspired by: ↑ Rahul Choudhury, ↑ Tony, ↑ Jason
  58. Michael Heilemann:

    You set high standards Dunstan. I wish you wouldn't, now I once again have to play catch-up, how would I be able to show my face when my own blog is such a mess compared to yours!

    One thing that has always bothered me is however the usability in your comment color scheme. I couldn't remember it to save my life. Wouldn't a small unobtrusive icon be better?

    Posted 2 days, 12 hours after the fact
  59. Lee:

    Hot damn that's impressive.

    I'm curious though, as a blogger, what does the back-end look like? By that, I mean, what does the 'add new post' screen, 'edit post' screen, etc look like? I'd be interested to see a couple of screenshots if you're willing, and have the time.

    Posted 2 days, 13 hours after the fact
    Inspired: ↓ Wolfgang Malgadey
  60. Wolfgang Malgadey:

    I think he is hacking right it into his dbms :)
    with all this features on his site he probably had no time for a inputsystem...

    Posted 2 days, 13 hours after the fact
    Inspired by: ↑ Lee
  61. S&y:

    um ... "Visability 6.2 miles" may have something to do with "knowledge of the proper care, feeding and usage of credit cards," whereas "Visibility 6.2 miles" has to do with:

    Now I shall go look up the word:


    Posted 2 days, 17 hours after the fact
  62. Nichevo:

    This site is amazing first time I've visited it and wow its go to be one of the nicest looking websites around and functional as well.

    I'll definitly be back.

    ...makes my hacks with php and javascript look very sad...

    Posted 3 days, 2 hours after the fact
  63. Rakesh Pai:

    Amazing job on the site, Dunstan. Looking forward to details on how you put it together.

    Posted 3 days, 2 hours after the fact
  64. Tim:

    any chance you could rewrite the dropdown script to be more generic and not rely on the html structure quite so much? or point me in the direction of such a solution? i've tried hacking about with it but don't know enough javascript.

    Posted 3 days, 6 hours after the fact
    Inspired: ↓ Dunstan
  65. Phil Baines:

    Looking good dunstan, I look forward to reading more about it over the next few entries.

    Posted 3 days, 6 hours after the fact
  66. Paul:

    Hey Dustan,

    Love the new design... and the new tabs are fab!

    Posted 3 days, 7 hours after the fact
  67. Turnip:

    "and has always managed to sound interested as I explained the intricacies of learning to parse XML feeds in Python and PHP."

    This reminds me of a friend of mine. I am always talking to her about various web design tasks I am doing, what I am teaching myself, did she know how much sexier XHTML is than HTML.

    It all goes in one ear and out the other, but she always manages to pretend she's interested, which is what counts ;).

    I can honestly say that your panorama idea has got to be the most original thing I have seen on the web for a long time. Love it! :).

    Posted 3 days, 8 hours after the fact
  68. Christine:

    This is so beautiful it makes me want to cry. Simply amazing, and I LOVE the panorama. Wow!!!

    Posted 3 days, 23 hours after the fact
  69. Paul:

    Magnificent, Dunstan. You've single-handedly out-nerded everyone on the planet in one fell swoop. Maybe even Pilgrim. Bravo, sir.

    Are you sure the blogroll is working though? Find it hard to believe all those folks ain't updated in four days plus...

    Posted 3 days, 23 hours after the fact
    Inspired: ↓ Dunstan
  70. Tristan:

    Excellent work! If I had the time and drive, I might have coded my own content engine for my site, but as it stands, I only have time to redesign the CSS and XHTML part of it for the blog -- just launched version 3 today. Main site uses PHP though, and I am in awe of the system you've got running here. And not only the backend, but the design is superb. Very open and light, coherent, readable, and just plain beautiful.

    Posted 3 days, 23 hours after the fact
  71. Dunstan:

    Paul, you were right, I forgot to swap over some urls in the blogroll code when I copied the files from the dev site to the live site. So, the blogroll wasn't getting updated here, but the dev site version was working perfectly!

    All fixed now. Thanks for the pokey-finger heads up :o)

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Paul
  72. Dunstan:

    David, in future try writing, I think the script is deciding that your url is not a url because it doesn't start with http or www. I'll look into it though.

    As for the tabs, well, frankly they couldn't stay, they looked silly in the new design: too many curves and too much shading, it all got horribly over done. I played around for hours and hours before settling on this design. The old tabs just didn't fit.

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ David House
    Inspired: ↓ David House
  73. Dunstan:

    Tim, I'm afraid not. I have limited time I can spend on the blog, and so while people are welcome to take the Javascript I write and adapt it for their own needs (while sticking within the CC license this site has) I don't have time to write tutorials for people who don't understand what's here.

    My code isn't so complex once you break it down and figure out what each bit does, give it a go.

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Tim
  74. Dunstan:

    Thanks for pointing out those two little problems, Frank; I'm in the process of fixing both of them :o)

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Faruk Ates
    Inspired: ↓ Faruk Ates
  75. Dunstan:

    Waylman, that's exactly what's happening on Tobi's machine, and your solution is perfect; thanks very much for posting it here!

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Tobi, ↑ Waylman
  76. Dunstan:

    Mark, Jorge, I'm writing-up the rational behind splitting my CSS as the first of my explanation posts, so keep your eyes peeled.

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Jorge Garcia, ↑ Mark Tranchant
  77. Faruk Ates:


    Tsk tsk Dunstan, the name is Faruk, not Frank. :)

    Posted 4 days, 6 hours after the fact
    Inspired by: ↑ Dunstan
    Inspired: ↓ Dunstan
  78. Dunstan:

    Hmm, I can't replicate that problem, Jeff. What browser are you using?

    Posted 4 days, 7 hours after the fact
    Inspired by: ↑ Jeff
    Inspired: ↓ Jeff
  79. Dunstan:

    Robert said: "Underneath "posted 2 days blah blah" it says "Alert Robert Lofthouse to your comment" - I don't want to alert myself, so that should be removed on the previewing section"

    If I leave that bit off then people who've not posted before won't see how the alert system will function with their details before pressing submit.

    Think of it as a comprehensive preview.

    Posted 4 days, 7 hours after the fact
    Inspired by: ↑ Robert Lofthouse
  80. Dunstan:

    Faruk, I'm sorry! I hate it when people get my name wrong (they even do it in my own blog comments), so I'm sorry to have done it to you.

    I've only had 4 hours sleep in the last 48 hours (I've just flown back to the UK), so my brain isn't working so well.

    Faruk, Faruk, Faruk, Faruk...

    Posted 4 days, 7 hours after the fact
    Inspired by: ↑ Faruk Ates
    Inspired: ↓ Faruk Ates
  81. Faruk Ates:

    Hehe, it's okay, but I figure, if I don't point it out now, then five months from now you'll still be calling me Toby, err, I mean Frank (a Cookie for who gets that reference).

    Don't worry about it. :)

    Posted 4 days, 7 hours after the fact
    Inspired by: ↑ Dunstan
  82. David House:

    Yes, I tried that in <a href="#cmnt3176">my later comment</a> and it seems to be working fine. Doesn't your script know which text is the URI? Then it's just a simple matter of:

    $uri = (substr($uri, 0, 7) == 'http://') ? $uri : 'http://' . $uri;

    By the way, the comments by you are displaying '0' as their number until they are clicked, then they remain labelled with the correct number. This is also affecting the numbers of the later comments - they are not displaying their correct position but instead one that would be their position if all the comments labelled '0' were excluded. Did that make sense?

    I assumed that was a serverside and not clientside problem and therefore wasn't covered by 'comment highlighting in all browsers'.

    Posted 4 days, 8 hours after the fact
    Inspired by: ↑ Dunstan
  83. Rahul:

    Can I still be Garth?

    Posted 4 days, 8 hours after the fact
  84. Federico:

    OK, OK, I had just bookmarked your site on my NetNewsWire "wevdesign" section because it was *great*...

    I check it today just to get a *literal* jaw-dropping effect in seeing your drop-down weather info.

    This blog design is greater and greater!

    Byez from Italy!


    Posted 4 days, 8 hours after the fact
  85. Jeff:

    IE6 windows it just doesn't preload the image, maybe it's pulling from the cache or something for you. Maybe somebody else got the results?

    I usually use firefox though so I don't really mind, and if I'm the only one that has the problem it won't matter.

    Posted 4 days, 10 hours after the fact
    Inspired by: ↑ Dunstan
  86. Ssp:

    I loaded the page in Safari for the occasion and was happy to see that the panorama survived the redesign.

    Besides, all I can say is that it's too wide for my browser window. But thankfully the stuff at the right isn't that important.

    Posted 5 days, 6 hours after the fact
  87. Danithew:

    Sigh .... sigh .... sigh.

    Beautiful job Dunstan. I just learned about your site but the more I've seen of the details, the more incredible it seems. Wow!

    Posted 5 days, 10 hours after the fact
  88. Michael Wilcox:

    I'm intrigued by the weather info. You say you got it from the site, but I can't find info about it there. Got a link?

    Also, I don't suppose it's possible to allow the user to click somewhere outside panorama panel (PanaPanel?) to make it close, in addition to the "Hide This Panel" link?

    Posted 5 days, 11 hours after the fact
    Inspired: ↓ KC
  89. Karan:

    you do realise how much I envy you?

    *wishes he had half the skills of dunstan*

    Monstously well done re-design man. You make the unsexy blog world look damn good =)

    How much do we have to pay if we're "inspired" by your site? :D

    Posted 5 days, 22 hours after the fact
  90. JD:

    Just one word. Beautiful!

    Love this new look! I specially like how Comments are displayed! Bravo!

    Posted 6 days, 12 hours after the fact
  91. KC:

    The xml feed is
    There is a PHP library function ( you can edit to just get an array of the weather. Very simple.

    I think one of the most interesting features on this site is the blogroll. I have looked at other blogroll scripts, and Dunstan's is unique in the respect that it tells when it was last updated, and what the updates tite is. That and the search feature. How it displays the results highlighted, and just a snippet of the post that is relevant to the search.

    Posted 6 days, 17 hours after the fact
    Inspired by: ↑ Michael Wilcox
  92. Martin-Éric:

    Congratulations, you've done it again!

    What's really neat about your blog, assides from the Sheep Channel's Weather Report banner, is the clarity and simplicity of the design: nothing surprising about the fonts used or the layout (it's stuff we've become used to by reading books in school or magazines), yet it's so pristine and, most of all, usability is great.

    Makes me wonder if flatery thru copying might arise among the fans of this weblog+site. *grin*

    Really neat colour choice for the comment highlighting, btw.

    Posted 1 week after the fact
    Inspired: ↓ Dunstan
  93. Dunstan:

    I think so Martin, because everything's fine on my screen right now. 92 all round.
    I will certainly look into clearing this weirdness up.

    As an aside: 92 comments! Crikey!

    Posted 1 week after the fact
    Inspired by: ↑ Martin-Éric
  94. Jack:

    Hello Dunstan,
    really nice site. I visit it now for nearly a year but this is the first time i add a comment :)

    Do you ever thought about release a Weblog-Script for other people to use it? Because your comments system (the whole site)is fabulous! (Maybe under GPL? ;) )

    Posted 1 week, 1 day after the fact
  95. Dante Evans:

    Dunstan, I bet you could make a lot of money if you put your blogging scripts up for sale.

    Posted 4 months, 1 week after the fact
    Inspired: ↓ Nathan Logan
  96. Nathan Logan:

    Or better yet, your homegrown CMS!

    Posted 6 months, 3 weeks after the fact
    Inspired by: ↑ Dante Evans

Jump up to the start of the post

Add your comment

I'm sorry, but comments can no longer be posted to this blog.