Category Archives: Meta

Well That Was Fun

I said I would take it down, I never said for how long. Thank you to everyone for taking a little time out with me in celebration of the big day. I was as surprised as everyone else, and watching the reactions come in was pretty interesting. The emails ranged from shocked to congratulatory to incredulous to angry. Thank you to everyone who wrote in. Many people linked to the site being down which should help solidify the #1 position in the eyes of the fickle mistress Google. Thank you all as well.

You’d think it would be cooler here in Houston, with hell freezing over and all, but it is as hot as ever. At the same time I’m told in San Francisco I need to dress in “layers.” I packed all my layers up months ago! Might have some <div>s around though…

I was able to get some of the work I was planning to do on the site done, mostly tweaks to the look and layout of things. I wouldn’t call it a redesign, more like a summer variation on a theme. Many of the changes are very subtle, but in my eyes important. The most obvious change, the sun in the corner, looks nothing like I want it to, so I’m not sure what will happen to that. (If you have any ideas, send them in.) Many other things still need attention, so expect to see occasional breakage and constant tweaking over the next week. I finally closed the comments on the mosaic. So it will stand at 1,017 comments,. The page is still huge, so I’m going to move the comments to a separate page just for that entry. The jazz quotes need some cleaning up, and I’d like to add a little information about each player to each page, including at least a picture. The photolog is being overhauled, and the long-promised classics section is almost done. Finally I promise that photo will be random again, any day now.

It was just a little over a day, but it feels good to be back. Let’s not do that again though. I really missed writing here.

I’m going to be in San Francisco next week, so if you are too I’d love to meet up. Drop me a line.

On Asides

As you may have noticed on this page or in your aggregator my normal entries are now interspersed with smaller link and commentary entries represented in an unordered list. These fall in chronological order with my other entries and are real posts with permalinks, comments, categories, trackbacks, and pingbacks. I have been wanting to do this for a long time and there was a flood of entries when I first got this working. I fully expect to post in this category with a much higher frequency than my normal posts. I come across things all the time that I want to link so badly but I just don’t have the time to write an entry about. Now every interesting tidbit I come across is just a click of a favelet away from my readers. It’s liberating.

The format of a weblog dictates its writing. There is no getting around this. Ever since my redesign I’ve had these big important titles that—as a writer—are intimidating. Everything I write has to be worthy of its 32-point Dante banner. This was a deliberate to force myself to put more thought and effort into my entries and it has worked; some of my best writing has been since the redesign. It has been stifling as well. To express what I want to express these days I need something more dynamic.

This type of linklog is nothing new. I first saw it at Kottke and since have enjoyed it at Charles Gagalac’s site. Charles was the first person I know of to do it in WordPress. This inline style fits my requirements very well, the biggest being that I wanted to use my existing post taxonomy so a second weblog would have been inconvienent. I also get the benefit of a combined RSS feed and combined update pinging. More than all of that though, I don’t want to limit myself to one type of post in a new weblog, or in this one. I already have plans to use this feature to not only highlight interesting links, but comments I make on other sites, upcoming gigs I have, photolog updates, and various activities and writing I now have spread out over a half-dozen blogs. It’s a perfect application for WordPress‘ multiple sub-categories feature. Technically, the whole thing was very easy to implement.

First I made a new category all of these posts would be a part of, it was late and I couldn’t think of anything too clever, so I went with “Asides.” This may have been subconciously inspired by Movable Blog. So I created the category in WordPress, and it had an ID of 33. Next it was simply a matter of telling my template that if a post was in the Asides category to lay it out a little differently. I wrote a quick function, in_category() that does this with no additional DB queries that is now in the WordPress CVS and will be in the 1.2 release. The function takes a single argument, a category ID, and it returns true if the current post is in that category. Here’s what I have in my post loop:

<?php if (in_category(33) && !$single) { ?>
<ul class="asides">
<li id="p<?php the_ID(); ?>"><?php echo wptexturize($post->post_content); echo ' '; comments_popup_link('(0)', '(1)', '(%)')?> <?php edit_post_link('(e)'); ?></li>
</ul>
<?php } else { ?>

So basically what this is saying is that if the post is in category #33 and we’re not on a permalink page to format it using that code, otherwise do our normal thing. We have a simple unordered list with a uniquely ID’d list item. (The ID is a throwback to about two years ago when I had a heavily hacked version of b2 with monthly archives. Can’t let those permalinks break.) I get the post content directly because I didn’t want to mess with the normal filters (like autop) applied to the_content(). I run it through texturize to keep everything pretty. Then I have a simple comment link, and finally a link that only I see that allows me to easily edit any entry. This worked great, but you can see that I have a separate unordered list for each entry, which isn’t what I want; I want all consectutive aside entries to be part of a single list. This gets tricky because you have to start the list when the current entry is an aside but the newer entry and stop it when the next entry is not an aside. Tricky tricky, and I don’t want to think what would happen if someone decided to reorder my content. I had only allocated myself ten minutes for this entire project and I was at minute number eight, so it came time for ugly code:

function stupid_hack($str) {
return preg_replace('|</ul>\s*<ul class="asides">|', '', $str);
}
ob_start('stupid_hack');

I swear that’s the actual code in my template. Put it somewhere around the top of the template, it really doesn’t matter where. It’s a hack, but it’s been working great. Simon says it is “ugly as sin,” and that’s what I thought when I wrote it. Since then, however, it has grown on me a bit. It’s like the supermodel who goes out every day dressed to the nines relaxing at home in a bathrobe, slippers, and no makeup. I keep the pretty code elsewhere, here at home I’m a little more casual. Perhaps when I have a little free time I’ll put in the more complicated logic I described above but if it ain’t broke…

0wn3d

I’m not sure if I’m one of the “six prominent webloggers” Brad mentions in his post Gmail major security flaw, but when I got a mail from him saying that I was guilty of exactly what he described, I thought it would be a good time to change my secret question and password. I guess he was really anxious to get a Gmail account. He could have asked though, I let Adam poke around mine.

My thoughts on Gmail? It’s really well-done in terms of how the interface works. It’s faster than Thunderbird for common tasks and I could see using it full-time. But I wouldn’t even consider it until they provide a good way to import and export everything. Email is the lifeblood of everything I do, and I’ve been burned too many times to trust it to a third party—even if it’s non-evil Google. When I put my address out there in a previous post I was pleasantly surprised to get emails from a number of people I’d never corresponded with. Unfortunately soon after that the spam started coming in. It’s more than I get on my “real” account, but I can’t expect a beta product to compete with a finely-tuned SpamAssassin installation and 22MB bayesian database.

Speaking of passwords, a few months I switched to using 8+ characters of random junk for everything, and different passwords for everything. You can use the random password generator to get a few of your own. Throw in SSH tunneling, a great VPN through my university, and consistent rotation schedule and I’m feeling pretty secure. (Knock on wood.) I just need a fingerprint scanner.

In other news, the place of residence has been spruced up a bit with surround-sound speakers, a cut-glass-hanging-thingy, and some additional lighting. Pictures forthcoming.

Finally, the mosaic thread currently stands at nearly 669 comments, and soon there will be more comments on that post then there are posts on this site. I don’t generally talk about traffic in public because I think it’s bad taste, but the numbers this month have been intimidating. In terms of bandwidth photomatt.net used a few dozen gigabytes last month, mostly in photos. So far this month the usage stands at 305 gigabytes for this domain alone and I’m at a loss for words, except to say it’s nice to know I have that sort of scalability. I think I’ll go back to posting pictures of my cat.

Update: Final usage for April on photomatt.net was 511 gigabytes.

New Yahoo Search

Yahoo has flipped the switch and is no longer using Google for their search. (Some technical details.) The question on everybody’s mind: Is Yahoo’s search better than Google’s? Yes. Why do I think so?

  1. Results are given as an ordered list, or <ol>, which is a good thing.
  2. It shows 20 results instead of just 10.
  3. You have an option by each result to open it in a new window.
  4. They are somehow detecting RSS feeds for sites that have them, and linking to them directly and also allowing you to add them to My Yahoo. They seem to have gotten my RDF file instead of my RSS 2.0 file, which is prefered, but no worries. I’ve been meaning to replace that with a 301 redirect lately anway.
  5. It is much better designed.
  6. But the best reason to use Yahoo? I’m the #2 hit for “Matt”. Yes, even ahead of that Drudge clown.

What? Were you expecting me to check for any other search terms?

A quick trip to MyCroft and you can make Yahoo your default search engine for Firefox. Easy as pie.

Best Postcard Ever

My friend Becca just returned from the Dominican Republic where she taught English at several local schools and an orphanage for a couple of weeks. I’ve read over her notes from the trip and they sound really interesting, I hope she publishes them somewhere. When she came back she brought a “postcard” that was actually a picture she had taken on this gorgeous beach, “behind El Morro en Monti Cristi.”

1/30/04, Hi Matt! - Rebecca

It says:

1/30/04
Hi Matt!
– Rebecca

What I would give to be on that beach right now!

Style Updates

For better or worse, there have been a number of stylesheet updates around here, so you may notice things looking slightly different. First off are the shadows behind the main content box, for whose sake non-semantic elements were added to this page for the first time ever. How quick we are to sell out!

Speaking of selling out, text advertisements may appear at the top every now and then. Yes they suck but it’s the holidays and extra cash is always nice.

I moved the background image for the post titles from the anchor element to the h2 element to prevent the blinking when you rolled over the titles in IE on Windows. My Mother will be sorely disappointed as she thought that was a rather cool effect I had done intentionally. I wish!

Tantek and Eric informed me that my site was completely borked in respectively Mac IE 5 and Safari. This site is an experiment, so I make no guarantees as to browser compabilitiy but I try to be good about testing things on browsers available to me. Last night I used Greg’s Powerbook to see what was going on. It seems Safari was having trouble with some commented out content (the ads that are temporarily disabled) so I moved that from HTML comments to PHP comments. Commenting things out server-side is actually a much better practice because it keeps the source code maintainability for you the author but hides the comments from any visitors. There is also a savings in bandwidth, but in many cases that will be minimal. So as a best practice go from:

<-- Three extra divs added because prima the donna designer just HAD to have his shadows. And my idiot boss agrees with him. -->

to:

<?php /* :-- Three extra divs added because the prima donna designer just HAD to have his shadows. And my idiot boss agrees with him. And they'll never see this comment. MUHAHAHA! */ ?>

As for Mac IE, I wasn’t sure where to begin. It doesn’t handle the float on the menu list items well so instead of a nice tabby menu you have a series of giant honking bars in the header. I could go to display: inline for the navigation list items and work with the horizontal menu from there, but I’ve always prefered having the list items floated and the anchors as blocks, which you can’t do when the containing list element is inline. If I remember correctly Eric helped me around this problem before on the WordPress site (thank you!) by giving the items a fixed width, but I don’t have the space to burn here like I did on that menu.

Checking over my stats, Mac IE users make up approximately 2.1% of my viewing audience over the life of this site, and closer to 0.9% over the last month. Uowever is this low and declining number because other browsers are now in vogue on the Mac and IE hasn’t been updated recently to quench Mac users’ insatiable desire for upgrades? Or is it because my site looks so bad in their browser? The world may never know.

So the moral of the story is: the web is a jungle and watch your comments when on Safari.

Some Progress

More and more people are searching for an answer to typing problems and finding Dvorak. My Dvorak keyboard layout post continues to get interesting comments every couple of days, including this latest one from someone who apparently has a keyboard that is designed to switch between QWERTY and Dvorak, something I assumed existed somewhere but I’ve never come across. Maybe that’s the keyboard I should give away as the prize? The prize no one has claimed yet, by the way.

New Furnishings

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.

More Writing

So how is the experiment going? Pretty well I would say, except that I didn’t realize that some words are much harder to write than others. Some words flow while others trickle. Sometimes some words flow where there kshould be no words. A “quota” encourages writing more than editing. So I’m not tracking word counts anymore, though the part of me that wants to quantify everything than can be quantified really wants to.

Everything that can be counted does not necessarily count; everything that counts cannot necessarily be counted.

Robert said that “don’t worry about writing or minimum quotas. Lousy way to learn to write. Just keep blogging, write a web article or two and when you find a good thing to write about for a school assignment, run with it. ” He was right and wrong. Explicit quotas are lousy, but the musician inside me knows that discipline is necessary to excel, and daily practice makes perfect. (To which Kel often counters “But nobody’s perfect, why practice?” I suppose it’s the thought that counts.)

Dig Those Permalinks

A little afternoon hacking has produced a new WordPress feature that is in the CVS for the curious. Thoughts? So are you ready to use WordPress yet?

Old links of the style /p123 are being permanently redirected to the new format using a very simple PHP script and a modification of my old mod_rewrite rules. No link left behind! The RSS feeds (feedii?) should be fixed as well. This is a feature I’ve been wanting for a long time and it has been surprisingly easy to implement so far. I need to tweak the bread crumb function still, but that’s an issue specific to this site, not the general implementation.

Also now notice that the date attached to each post is in fact a multi-level link, an idea I stole from the best, Dunstan Orchard.

RSS Requests and Browsers

Out of curiousity I ran some stats on the different RSS versions I offer here. The results were pretty much what I expected:

  1. 47 % — RSS 2
  2. 39% — RSS .92
  3. 14% — RDF 1.0

Also as an update to a previous look, I don’t know what it was about Mozilla that month (August). Here’s what is happening currently:

  1. 38% — Internet Explorer
  2. 36% — Netscape/Mozilla
  3. 6% — Googlebot
  4. 3% — Safari

That’s pretty much on par for the course. One interesting note is that IE6 users seem to spend the most time on the site, for whatever that’s worth. As before, let me know how these things stack up in your neck of the woods.

Structure Updates

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.

Whip Gallery Into Shape

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.

Stylish Thumbs and Navigation

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.

Keeping Links Kosher

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.

Introducing: Matt Reality TV

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.

It Is Time

The live redesign has started. There will be constant and possibly dramatic changes to this site’s structure, layout, and design until it is done. Check back often and feel free to comment at any stage of the process.

Funky Greenery

What can I say, I was getting tired of blue. Really tired of blue.

“The beauty of CSS is that you can mess up your entire site in one fell swoop.”