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,
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:
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.
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.
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.
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.
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 weather.com 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:
// Heat Index, or Apparent Temperature
// calculated when temperature exceeds 80 degrees F, and when the relative humidity is at least 40%
// temperature in fahrenheit
$t = $array_data['cc']['tmp'];
// relative humidity
$rh = round($array_data['cc']['hmid']);
// if the conditions are correct
if (($t > 80) && ($rh >= 40))
// apparent temperature in fahrenheit
$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)));
// apparent temperature in celsius
$at_cel = round(((5/9) * ($at_far - 32)), 1);
Bit of a laugh, eh?
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.
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.
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.
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:
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:
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.)
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.
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.
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.
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.
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.
// to insert a section of code (this section in fact)
// to insert a image
<imageins="433e" alt="A screen shot showing a comment's post time" caption="Comments display their post time as ‘time after the fact’" class="" link="large" linktitle="" />
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.
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.
I’m also indicating if the XML feeds the sites publish are invalid, and if so, what the errors are:
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.)
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.