With all the serious talk around here lately of hacks and writing and markup, I think I’ve been neglecting some different but still important things like lunch with Elaine and the crazy birds there, the new haircut, and such.
But what I’m really excited about is my room. Comments, questions, and advice welcome.
I’m going for something comfortable yet stylish in a functional way, if you drift my catch.
Just to update on some of the latest changes going on around here as part of the redesign.
The biggest changes have come as part of the new “photos” section. In moving the photolog from /p/ which I consider (in hindsight) to not be the best URI I thought about what sort of photographic content I have on the site now and what I’d like to have in the future. In my mind three sections came to mind, the photolog, selected series of works, and old photos. I’ve experimented with putting older photos into the photolog but it doesn’t really work well with the reverse chronological organization of the albums. Plus as part of my moving I’ve dug up a ton of old pictures that I’d love to scan and archive online. The series idea never really developed beyond the first two I did (and it’s built on the structure of the photolog) but I really like the idea of it and I’d like to keep it around. For instance it’d be interesting to do a “Best of 2003” series at the end of the year, or something similar. (Though the thought of choosing a dozen or two from over 7,000 photos is a little intimidating.)
The re-coding of the photolog itself is actually going much better than I thought it would. Finding things in Gallery can be frustrating sometimes, but I’ve managed to get the vast majority of the program completely free of tables, simple syntax errors, and it’s now using a CSS-based design. I am using one hack to get XHTML 1.1 validation, but it’s because of a bug in PHP that I will devote an entire post to. As soon as I finish cleaning everything up for the photolog section I’m going to copy the code over and use it to power the classic photos section.
I’ve been recoding many of the titles of pages to use the new CSS image text method, and I enjoy the results. When I recently upgraded to PHP 4.3.3 something changed in the Freetype library and now the letters are rendering at what seems to be a lower weight, which is a pleasant surprise because they were a little chunky before. I have no idea why it would do this. Unless perhaps a newer version of Freetype could better understand the font file, which I suppose is the only explanation.
I changed the text image generator script to turn underscores to spaces instead of hyphens. Though I like hypenated “filenames” better the problem came in the photolog where there were actual hypens needed in the titles, so having those translated to spaces was a little funky.
Finally I’ve done a little work on the jazz quotes section of the site. Although I have been neglecting it lately, these pages account for a good fifth of the traffic to this site and it’s really the only resource of its kind on the net. For some reason before I would seperate the first and last name in the URI with a period, which messed up some simplistic traffic analysis software (what sort of extension is .Coltrane?) but it’s what I chose for whatever reason. I’ve updated all the new URIs to use hypens instead of periods, which is much cleaner in my opinion. There are so many links to these pages and so much search engine traffic that it would just be stupid to break any of the links. Of course the old URIs still work, though I haven’t set them up to serve a permanent redirect yet, they just return the page like before. This section still needs a lot more work, in its styling and also just in the backlog of submitted quotes I have to catch up with.
The Zeitgeist has been updated to no longer return script errors, but it isn’t cached so it’s very slow, and it needs to be restructured.
For too long this site has been beautiful XHTML 1.1 served with the correct DOCTYPE and MIME type save for one section. One major section, with thousands of pages. The photolog. Part of it has been that Gallery is so inflexible I have to make extensive modifications just to get it to look like the rest of the site. The logic and presentation is all a mess in the code, and it’s quite invalid out of the box. Well, version 1.4 has just been released, and I can live with that until 2 comes out, so I’m going to use 1.4 as my baseline and get it 100% valid to the point I can serve the pages with application/xhtml+xml without fear of the pages not working. Wish me luck. The photolog may look quite funny during the process, but give it time and it should be back to its rosy and frequently updated self.
On the last post I had decided to do something I do occasionally, embed some thumbnails from the photolog in a relevant post. While I was writing the post I thought to myself, “Man this thumbnails are going to look funky, I should center them with <p align="center">.”
Blasphemy! I know. Forgive me, I was tired. Still, align="center"? That is so last decade. So I decided to give the paragraph a little class, postthumbs, which to me describes the content of the paragraph and is something I could see myself reusing. What follows is trying to add a little style to some simple thumbnails.
I’m a fan of the double border look for thumbnails, a thick white border surrounded by a very thin darker border. You see it done all the time, for example Rannie and Christine, but in both cases the border is actually part of the image itself.
This is cumbersome for several reasons. First, this may be geeky of me, but it seems like it’s violating the principle of separating content (the thumbnail or picture) and the presentation (the border). In addition this technique is rather inflexible. If Rannie decided tomorrow that he wanted orange and green borders instead of the white and black ones he has now he would have to regenerate every single thumbnail. Since I suspect both Christine and Rannie do this effect in Photoshop, this is a pain however you cut it, even with heavy batch action.
So the solution is CSS. If you remember the box model you’ll see that this effect should be rather easy. We can just put a background on the element and it will show through on the padding, then the border goes outside that, creating the effect of a double border.
How I do these sort of things is I create an HTML file on my desktop with the generated code from whatever page I’m working on and then I use it as the preview in the excellent TopStyle 3.1 so I can see whatever changes I’m making to the design live. In my opinion this is the only way to design with CSS. The only downside is right now I can only preview things in Internet Explorer because the Mozilla object it calls doesn’t seem to work quite right with 1.5 betas. However for most projects getting it working in IE first is the most realistic thing to do.
So let’s take a look at the code we’re going to be styling:
<p class="postthumbs"><a href="/p/9-9-2003/DSC06440"><img src="/a/9-9-2003/DSC06440.thumb.jpg" alt="The front of my new business card." /></a> <a href="/p/9-9-2003/DSC06439"><img src="/a/9-9-2003/DSC06439.thumb.jpg" alt="The back of my new business card" /></a></p>
So my first inclination was to apply the background and border to the anchors (the <a> element). After playing with the colors for a bit here’s what I ended up with:
.postthumbs {
background: #eef5c5;
border: 1px solid #e7f3a5;
border-left: none;
border-right: none;
text-align: center;
}
.postthumbs img {
padding: 6px;
}
.postthumbs a {
background: #fff;
border: 1px solid #cde44e;
}
.postthumbs a:hover {
border: 1px solid #8a9f18;
}
It did exactly what I was looking for in the preview, and it allowed plenty of flexibility and did exactly what I wanted to do. Let’s talk a little about what the above code does. The first class is for styling the entire paragraph, which fills up all the horizontal space available to it. The first rule gives the whole thing a background, the second rule puts a one pixel solid border on all sides, and then the third and forth rules remove the border from the left and right side. Finally we say to center everything. Occasionally I’m asked why I apply the border to all sides and then remove it instead of just having simply border-top and border-bottom rules. The simple answer is then whenever I changed the color or thickness or style of the border I would have to change it in two places, and this way I only have to change it in one place. I think it’s roughly the same number of characters too.
The second selector says that any images inside of anything with a class of “postthumbs” should have 6 pixels of space around it. Then the next two apply the white background and a border that changes when you hover over the anchor.
We’re done, right? Not quite. As soon as I loaded it up in Mozilla I noticed that the white background and border were, for lack of a better term, bunched up at the bottom. I suspect that for some reason that where Internet Explorer put the anchor “box” around the entire image Mozilla just put the box around what looked like where it would be if there was text there, so the font size (12 pixels) plus the line height. Generally in cases like this I assume Mozilla is right and IE is just being overly forgiving, so I find a workaround. I’d like to find the exact reason for this behaviour, but I don’t have a lot of time right now and the Mozilla Bugzilla interface is so painful.
So the previous method looks funky in Mozilla, but a solution quickly came to mind. If I put the padding, border, and all on the image then that should avoid all problems. I could even keep the hover psuedo-class on the image even though IE users wouldn’t see the effect. Here’s the final code:
.postthumbs {
background: #eef5c5;
border: 1px solid #e7f3a5;
border-left: none;
border-right: none;
text-align: center;
}
.postthumbs img {
background: #fff;
border: 1px solid #cde44e;
padding: 6px;
}
.postthumbs img:hover {
border: 1px solid #8a9f18;
}
As you can see this is a bit less verbose and generally simpler to understand. What we have is a consistent look in IE and Mozilla and enhanced functionality in more technologically advanced browsers, which is something I’m perfectly comfortable with.
In other news the links on the page are no longer bruised blue and purple, but rather some shades that I think match better. I’m a big fan of :visited link states as it can be very useful when browsing and is also interesting to see links you’ve already visited on other sites. I usually make visited links a little darker, which seems to delineate them clearly. Another common technique I’ve seen before is to not have visited links underlined, which I think is also nifty. However sometimes I see :visited states on site navigation, where it is nearly useless.
Navigation has started to flesh itself out, but it still has a long way to go. I’m going to have to reevaluate the site’s information architecture and reassess what sections could be combined and which need to be retired. There is also the question of what to do with all the contemporaria I kept in my sidebar before, and I’m not quite sure yet. I think maybe a nested sidebar that you can turn on but is off by default. I’m using these changes to give Dreamweaver MX 2004 a solid run-through and so far I’ve been very satisfied. It’s nothing revolutionary, and many of the new features they’ve been pushing don’t really appeal to me, but it has the polish of a mature product that I feel comfortable spending a lot of time in. I would have called it 6.5, but then again over at WordPress we put major functionality upgrades and changes in to hundredth point upgrades.
As part of the re-vamp I’ve put together a 404 script that emails me whenever it’s called. This has certainly been an eye-opener as to the misguided traffic that this site gets. An email is so much different than just seeing the hits in your logs, and I would recommend anyone serious about maintaining a site do something similar.
There are a few links to my old curly quotes entry that link to a rather funky perversion of a fly-by-night URI scheme that has long since gone by the by. These links worked just fine until I deleted the file that was keeping things going, now it’s time to move things into the magic .htaccess file.
Let’s take a look at the URI in question:
http://www.photomatt.net/archives/m/200209?p=186
My first thought was to just plop latter part of the request and create a rule just for this link, as such.
Redirect Permanent /archives/m/200209?p=186 http://photomatt.net/p186
Didn’t work, never matched. Next try I decided to go for something a little broader:
RedirectMatch 301 .*p=([0-9]+) http://photomatt.net/p$1
Didn’t work, never matched. Some research found that the problem lies in the query string, and the Apache redirect directives don’t address the query string. So let’s give mod_rewrite a go:
RewriteRule ^.*p=([0-9]+) http://photomatt.net/p$1 [R=301,L]
Still no luck. (For those that wonder, the HTTP response code 301 indicates that the resource has been permanently moved. “Permanent” in the first try is just a synonym of “301”.) It looks like the magical mod_rewrite doesn’t match query strings either. Some more research turned up that while redirect doesn’t match or rewrite query strings, it does pass them all. So we are left with:
Redirect Permanent /archives/m/200209 http://photomatt.net/
Which, counter-intuitively, works. The ?p=186 on the end is just passed to the root of the site, which gives it to my index file which knows just what to do with it. I would like to eliminate the query string entirely and forward the URI to http://photomat.net/p186 but while that would be trivial in any scripting language I can’t nail down how to do it on the Apache or mod_rewrite level. So my options now are to add something to the global header to catch p=something query strings and redirect it, but I’d like to keep that file clean, so more likely is that I’ll start adding some URI management code into the 404 handler and generally make that file more sophisticated in general. We’ll see.
I know that if I don’t document it as I go along I’m never going to find the time to do it at the end, so I’ve decided to do a play-by-play of all aspects of redoing this site. The details will range from purely aesthetic to highly technical. It will cover software such as WordPress and Gallery, and the modifications I make to each, plus a little about the home grown database stuff I have running most of the rest of this site. I’ll be going through section by section until it’s all done.
Also, starting tomorrow, I am going to be moving out of the house and into a new apartment with my new roommate Josh, another event which I plan to document and photograph mercilessly, so I christen this new category Matt Reality TV, or MRTV for short. It’s not going to be overly put together, just stream of thought and code very similar to the actual process I use. It’s raw, hence the “reality” name. I invite commentary on everything, but please try to keep it constructive.
Of course at this point I should probably discuss what’s been done so far, and I’ll try to catch up, even though I’m awfully tired.
The many reasons for the redesign have been touched upon, but I haven’t really said why I kept the old one for so long, after changing every month since the site started. It was actually because it was stolen not too long after I first finished it. While I complained on the surface I was actually genuinely flattered on some level because it was the first design I had done that someone had thought good enough to swipe, as silly as that sounds now.
So far I’ve been playing around with different things. The current layout comes from a sketch I did on a piece of paper (thanks Rannie!) that I later discussed and brainstormed some things with Greg. Greg helped me come up with some colors (not the current ones exactly) and the rest was really just implementation. I had Dante in my mind from the beginning as the serif I wanted to build things around, but I didn’t have it in the format needed (OpenType or TrueType) so I ended up springing for it (a bargain!) at My Fonts. The title I put together and tweaked manually in Photoshop but the entry titles are all generated dynamically from a very simple PHP script (source). The titles are actually text with CSS backgrounds and hidden text using a modified CSS image replacement technique with the common elements in the CSS and the actual image reference inline so as to make things easy. I have just made the titles smaller than they were (32 instead of 36) and I like this better, I may make them smaller still.
I like this technique because (amoung other things) you can still use Mozilla type-ahead for links and you can still search for text within a page. Nifty. I went ahead and made the titles the permalink as well, which I’ve advocated several places before and made the default in WordPress, but never got around to doing it myself.
I just cleaned up a bunch of stale files, particularly in the root directory. That sort of thing can accumulate to an alarming degree. Now I try to put everything I used to stick in the root for convinence in subdirectories, usually divided chronologically so as to start “fresh” every year. This also lends to the permanence of everything I may link to, most of the work in keeping links valid comes from forethought. I also used a number of files that were purely for my own testing into a more appropiate sandbox area.
The background is a simple GIF image that is actually derived from that garish green that was on here the other day, faded and changed a little and then filled with a line pattern in Photoshop to get where you see it now. The colors need more tweaking, which I’m going to work on after this post, but I’m leaning away from the green look I was so partial to the other day. We’ll see where this goes.