Stylish Thumbs and Navigation

MRT

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.

New Business Cards

Uncategorized

Nothing brightens a long day (or night) like fun new business cards. If you’re in to this sort of thing, here’s mine:

The front of my new business card. The back of my new business card

If you’d like one (or two, one to pass on) let me know. In other news I heard a rumor that there may be navigation at the top of the page sometime soon. We shall see.

Keeping Links Kosher

MRT

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

MRT

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.

On the Dvorak Keyboard Layout

Tech

It’s a relatively well-known fact that I am a Dvorak typist, and have been for about four or five years now. Just an introduction for the uninitiated, the Dvorak keyboard layout is just a different arrangements of letters purposively chosen because it is more efficient for typing the English language. For example, instead of my left hand resting on the letters ASDF it rests on the letters AOEU. There have been studies both ways saying it is or is not faster than QWERTY, and frankly I think most of them are useless. Logically you can see that if the letters you use most are right under your fingers, ultimately you’re going to work less while typing.

Why did I switch? If I remember correctly, I was surfing around the website of columnist John Dvorak and on some page he mentioned the Dvorak keyboard layout and linked to a site about it. Several web searches later, I had read all about the layout I could find on the web and I was ready to switch. Some of my motivation was that I wanted to be as fast as humanly possible, but it was mostly that I spend a tremendous amount of time typing and I often got pains in my hands and wrists. Switching did not seem like a big obstacle simply because it seemed very similar to learning to play a new instrument, something that as a musician I could relate to and didn’t seem too challenging.

I know now that some of my reasons for switching may have been hype on the part of the websites I read, I can offer what I have found in my personal experience to be true.

Switching is not as hard as people make it out to be. Even if you are already quite proficient at QWERTY, it’s not too hard to switch. You don’t need to buy a new keyboard, in every operating system there is a mechanism for switching what’s called the “keymap” or the mapping between the physical keys on your keyboard and what the operating system prints out. So if you switch your keymap to dvorak you can immediately begin typing dvorak in all your applications. However it can be confusing to press the button labeled T and get a Y, so it is generally better, at least while learning, to give yourself some visual aids. What I did was print out letters on a piece of paper and then stick them to the keys using double-sided tape. Of course I was 14 or 15 and had a lot more time on my hands. For some people it might be enough just to have a printout of the layout by their monitor or keyboard, but there is something to be said for being able to look at the key and seeing what you’re going to type. What I do now, if I want to physically switch a keyboard over, is actually pop off the keys and put them back in the Dvorak positions.

This is much easier than it sounds, and probably takes about ten minutes. Of course be careful because sometimes the keys literally pop right off and might jump behind a desk or something, speaking from personal experience. The main disadvantage to doing this in that your home keys no longer have ridges on them and because of the bizarre way that keyboards are manufactured, on every keyboard I’ve done this two the hook on back of the guide keys (usually F and J on your keyboard) is sideways to every other hook for every other key which means that to put those keys someplace else you’d have to put them sideways, and whatever key you put in that position will also have to be sideways. This isn’t as bad as it sounds because it actually serves as a new guide mechanism, but it looks a little funky. I can’t think of a way to do this with a natural keyboard. You can buy keyboards designed for Dvorak, but for me it has never been worth the bother. I don’t want to have to special-order my keyboard, I just want to pick up whatever is the coolest at the computer store.

My writing speed did not increase significantly. Although I could type faster than ever, the limiting factor in my writing speed is and was the way I formulate sentences in my mind, often thinking of several different ways to say something. However in situations where I can type without thinking too much, for example taking notes in class or at a conference, it has been a huge benefit and often I can keep up almost in real time with what’s being said. Of course if I stop to consider something or participate in class discussion I get behind but I think the advantage of actively participating in the class or conference outweighs whatever benefits I would get from having a transcription of it.

The big thing for me is comfort. I can now type for long periods of time with no fatigue at all, and that isn’t even an issue I think of anymore. I can’t point to anything scientific that says for every person Dvorak will be more comfortable, I just know it’s been a major improvement for me.

One advantage I don’t think I have seen mentioned before is the security aspect. On my laptop in particular there is now a device with all of my personal information on it that might be in the hands of anyone. Lets say that you knew my password, if you picked up my laptop you still would have trouble getting in simply because you wouldn’t know how to type the password in Dvorak. In the grander scheme of things this might only be a minor deterrent, but it’s enough. In situations where I want other people to use my laptop I can configure a keyboard shortcut to switch between the two layouts transparently, but more often I don’t even have the QWERTY keymap installed, simply because I don’t want to switch back and forth accidentally.

It would be overly biased of me not to mention some of the disadvantages though. Nearly every problem I’ve run into isn’t so much a problem with the layout itself, but rather being a Dvorak user in a QWERTY world. Non-configurable keyboard shortcuts are often designed to be convenient on QWERTY and so when you’re under Dvorak they can be awkward. The most notable is X, C, and V, which in most applications becomes cut, copy, and paste when used with CTRL, are no longer right next to each other and are instead all over the keyboard. I’ve found it to be not that big a deal. Though I am still alright with typing QWERTY, I am often self-conscious while at other people’s computers, because as someone who is supposed to be computer savvy it must look bad to have to hunt and peck. Of course I may just be blowing it out of proportion. If I use QWERTY for anything more than a minute or two it comes back to me and I can at least partially touch-type again, but usually my exposure to it is much shorter than that. There might be something else that has slipped my mind, but those are the only two drawbacks I can think of.

I suppose it might be significant that I am the only person I know that uses Dvorak. At some point or another, I know that many of my friends and family have given Dvorak a try, but none have stuck with it. There are hundreds of possible reasons why, but I suspect with most is they didn’t feel like investing the time. For my it was a no-brainer because I knew that however long it took me to learn it would be incrementally paid for by the increased productivity and comfort in the future. Part of it may have been incentive though, and to make things interesting I’m willing to spring for a prize.

I will buy a Logitech Elite Keyboard for the first person who switches from QWERTY to Dvorak (and sticks with it!) as a result of this post.

The judging is completely subjective, but using Dvorak exclusively for more than a couple of weeks is good enough for me.

Funnily enough, this whole thing started out as a simple link/commentary post that was supposed to be about twenty words. Getting to that, there’s an article at Kuro5shin called An Argument for Dvorak that makes some good points. The comments, on par, are mostly useless or misinformed so I wouldn’t weigh them too seriously.

Athenian

Personal

It’s appropriate to write about this topic as so many changes are happening all around the world, but particularly in my own life. A child of the web, weaned on ADSL, at some point in my development I developed an insatiable thirst for change, newness. Whether this was an inherit quality magnified by the hyperlinked nature of the web or whether it was actually developed as a result of my exposure, I don’t know.

My desktop is a randomly generated fractal pattern, changing every two minutes. Before that it would rotate between about a hundred random photographs from my photolog. When listening to music at home I’m more inclined to put my entire collection on random (a virtue of having them all in electronic format) than pick any one CD. Anything that doesn’t constantly change loses my interest over time until I’ve moved on.

Now this isn’t true of everything in my life, though it may be more than I like to admit. The design of this site, after changing every month for several months, has remained relatively constant over the past year or so. When driving I’ll often attach to a single CD and listen to it repeatedly for anywhere from a day to weeks. (Fiona Apple comes to mind.) My tribe of friends has settled down more than it has in the past. I’ve settled down more.

I saw my friend Alex Jones today and one thing I like about him is that he never looks the same twice, every time you see him his hair in particular can be completely different from the last time you saw him. (I should find some pictures.) That’s a quality I’ve tried out myself, but I’ve never been successful to any significant degree.

Most of all I’m curious how this chaotic thirst affects the things I do. This current design, once finished, will probably be around for a while. However at the top of every page is a randomly rotating thumbnail drawing from no small corpus of photos. If I didn’t touch anything else on the site, you could refresh every minute of every day for the next week (roughly) and never see the same thing twice. Is it too much? Am I alone? Looking back at every significant website I have created for myself since I began, there has always been an element of controlled chaos, a random rotator or quote or time or weather or timer or whatever the technology would permit me at the time.

Why am I so afraid of the static?

Getting back to the web at large, it keeps me content. There is a constant stream of new information coming in, and I don’t even frequent traditional news sites or use a RSS aggregator. First there are stats, thousands of referrers every day to dozens of sites, each referring URI representing an avenue of exploration. Technorati is an extension of this, cleaning things up and alerting you to something you might have otherwise missed. The WordPress Support Forum has frequent traffic, and represents hours and hours of possible diversions not only in itself but also in the actions it elicits. I’ve shunted all but a few of my subscriptions to lists, procmail keeping them out of inbox and out of mind, but still there is a constant stream of new communication, beautiful in its asymmetry; I can address it at any time, and do. Let’s not even touch instant messaging, the killer app of online communication and singly the greatest timesuck of anyone overly connected.

There aren’t enough hours in the day.

It Is Time

Meta

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.

To Read

Personal

Several people have asked what I’m reading this semester, so I thought I might as well post it here. I’m too busy right now to link everything, but they’re all fairly well-known works. Plus I love nesting lists.

  • Intro to Political Science
    • Machiavelli, The Prince
    • God & Company, Five Books of Moses
    • Thucydides, The History of the Peloponnesian War
    • Dostoyevsky, The Grand Inquisitor
    • Plato, The Republic
    • Locke, Two Treatises of Government
    • Marx-Engels, Mark-Engels Reader
    • Kierkegaard, Fear and Trembling
  • Philosophy of Language
    • William Lycan, Philosophy of Language
    • Jay Garfield & al., Meaning and Truth
  • Honors American Government
    • Ketcham, Anti-Federalist Papers & the Constitutional Convention Debates
    • Mary Nichols and David Nichols, Readings in American Government
    • The People Shall Judge, Vol. 1
    • John Calhoun, Union and Liberty
    • Hamilton, Madison, Jay, The Federalist: Gideon edition

Ah, I shall have to finish this when I get back. Mostly done now. Heading out to see this Mars business with Elissa. We saw Mars, I think.

Another Semester

Personal

It is with a slightly stuffy nose that I will start my third semester of college tomorrow. For the curious here is my schedule as it stands now, as much for my own reference as anyone elses.

  1. Monday
    • 10:00–11:00 — 3310: Introduction to Political Theory, taught by the prolific Ross Lence. AH 302.
    • 11:00–12:00 — 1336: U.S. and Texas Constitutions and Politics, taught by my favorite instructor of last year Dr. Little. PGH 350.
    • 2:30–4:00 — 3319: Politics of Social Policy, by Dr. Lineberry. PGH 347.
  2. Tuesday
    • 10:00–11:30 — 3332: Philosophy of Language, Dr. Saka. AH 205.
  3. Wednesday
    • 10:00–11:00 — 3310: Introduction to Political Theory. AH 302.
    • 11:00–12:00 — 1336: U.S. and Texas Constitutions and Politics. PGH 350.
    • 2:30–4:00 — 3319: Politics of Social Policy. PGH 347.
  4. Thursday
    • 10:00–11:30 — 3332: Philosophy of Language. AH 205.
  5. Friday
    • 10:00–11:00 — 3310: Introduction to Political Theory. AH 302.
    • 11:00–12:00 — 1336: U.S. and Texas Constitutions and Politics. PGH 350.

As you can see it’s a little light, but that’s by design as I’d like to devote myself as much as possible to excelling in these courses, which by virtue of their instructors should be pleasantly challenging. Also playing in two or possibly three big bands, developing a new business, and moving WordPress forward, I knew that my extra-curricular commitments would be high and I didn’t want to over-commit myself (and possibly get ill again) like I did last semester.