Monthly Archives: September 2003

Kemah Jazz 2003

As I may have told some of you already, I’m performing in the Kemah Boardwalk Jazz Festival again this year. This year I’m performing with a different (and honestly much better) group than I did in previous years. So on Sunday from 2:10–3:00 I’ll be on the Kemah stage, jazzin’ it up. An interesting note about this performance is that I’m going to be making my public debut on flute. So if you can make it down come and say hi to me before or after the gig and we’ll chat.

If you’re interested in seeing some of the other performances as well this weekend probably the closest thing to a good schedule online is at JazzHouston. I have some pictures from last night’s performance forthcoming. All of the music was fantastic, and I really mean that. One of the non-music highlights of the night for me (besides the beautiful sky and good pizza) was Dennis Dotson saying my name from the stage as part of troubleshooting some amplicification problems. It’s the little things. 🙂

If you need any more information, feel free to contact me. Don’t be shy, no one else is: several days ago I got a call on my cell phone from a number I didn’t recognize. I said hello and an unfamilar voice asked me if I had this year’s schedule for the festival. Apparently from a search engine she came across last year’s schedule and assumed I was the authority to contact, on my phone nonetheless, for this year’s. I directed her to a website or two that would have more current information than mine. It was certainly an interesting experience, but now I’m faced with problems of transparency. I want it to be as easy as possible for my readers to get in contact with me, except when I don’t. We’ll see how this works out. Of course it never would have been a problem in the first place if the festival had a decent website or the schedule available in a non-graphic form. What if a blind person wants to go and can only get to the schedule through the web? I guess they’re out of luck. The festival organizers are very open to suggestions though, and I’m sure if this issue is brought to their attention they’ll address it, it just probably hasn’t occurred to them.

When Jish Comes to Town

It seems lately that the prolific Jish can’t get enough of Houston. He was just here last month and this Wednesday he made another appearance. (It’s even rumored he may be back next month.) Last time we all met at the Crazy Cantina and that was the plan for this month but apparently they were a little too crazy over there so the Cantina is no more. Christine luckily found this out last week and moved the party down the street to Cabo’s. There still wasn’t quite enough air conditioning (or maybe the company and conversation was just too hot) but it was all in all pretty cool as we got an entire room to ourselves. (For better or worse, some people had trouble finding it.)

There was just too much going on that night to even begin to cover it all but I’ll add that my photos from the night are now online.

Other posts about the night:

Note: I posted the first of what I hope to be many stealth disco movies to that album, but it’s too dark and I can’t figure out how I could adjust the levels to lighten it. If you have any suggestions regarding this please let me know.

Design SIG Meeting Tonight

I just wanted to let everyone know I’m going to be presenting tonight at the web design special interest group at HAL-PC. I’m going to be covering advanced CSS layout techniques, why CSS is easier for making sites, Topstyle 3, and we’re going to do a brief makeover of someone’s site at the meeting. I’ll be going through my personal methodology in making a standards-based website and redesigning legacy sites. If you have been struggling in trying to move away from table-based design or if you’d just like a free critique of your website, come out. The meeting is free and open to everybody.

Here are the details:

When? Tonight, September 18th, 7:00 PM.
Where? HAL-PC Headquarters, 4543 Post Oak Place Drive, Suite 200 Houston, TX 77027-3103.
Why? To learn and have fun.
How do I get there? Use the map linked above. Easy directions: Take 610 and exit San Felipe, head inside the loop (East) and then take a left at the first intersection. You will come to a stop sign, then pass Microcenter, and then at the second stop sign take a right. Go on that street until it dead ends in a loop, on the right end of the loop there’ll be a driveway going to an underground garage. Park, take the elevator to the second floor, and then the only office there is the HAL-PC offices. Once you’re in the office if you have any trouble finding the room we’ll be in just ask any of the friendly volunteers and they’ll point you in the right direction.

If you have any questions just drop me an email before the meeting and I’ll send you any additional information you might need.

Clever New Comment Spammer

I think I’ve been hit with a new kind of insidious comment spam. At about four this morning I got a comment on an old entry that said:

Well, I just wanted to sign a blog on the first time in my life :))

Kind of cute, right? Isn’t that nice that some guy, “James Hatchkinson,” came across my site and was so enamored that he decided to leave a comment, his frist ever. Well, two minutes later the exact same comment, URL, and name was left on the WordPress blog. Clue #1.

The URL he left as his with his comment is nositeyet.com, which I’m not going to link because this may be this spam’s whole point. I clicked the URL from the comment before realizing it was probably just a newbie way of saying “I don’t have a site yet.” People I know have left similar things for their URL in the past. Well, the link takes you to some sort of web company with a hideous flash intro and an equally mediocre web site. Hmmmmm. Clue #2.

Clue #3, each comment came from radically different IP addresses. Let’s give this guy incredible benefit of the doubt and say just maybe he was a newbie user who just came upon an old entry, left a silly comment with what he thought was a fake website, and then continued browsing to another one of my sites, went to a slightly old entry, and left the same comment. So why did his IP change? The first comment came from 195.200.168.250, which resolves to anaconda.pacwan.net, and the second from 80.58.4.44, which is a proxy of some sort. Most users, especially the type that would leave this sort of comment, don’t randomly start using proxies mid-browsing. Strike three.

Finally, I decided to look up this guy’s IP in my access logs, to see what pages he visited. There were no records of his IP visiting any pages on either site in my PHP/Javascript based logging software, which means whatever client was used to leave this comment doesn’t support javascript or the <noscript> tag and images. Time to grep the raw logs. No referrer, none of any of the usual signs you would see in a log entry. Here’s the relevant lines from my photomatt.net logs:

80.58.4.44.proxycache.rima-tde.net - - [18/Sep/2003:04:03:50 -0500] "GET /p644 HTTP/1.0" 301 303 "-" "Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1)"
80.58.4.44.proxycache.rima-tde.net - - [18/Sep/2003:04:03:54 -0500] "GET /p644 HTTP/1.0" 200 15796 "-" "Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1)"
80.58.4.44.proxycache.rima-tde.net - - [18/Sep/2003:04:03:56 -0500] "POST /b2comments.post.php HTTP/1.1" 302 5 "-" "Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1)"

And from wordpress.org:

anaconda.pacwan.net - - [18/Sep/2003:04:01:35 -0500] "GET /development/archives/39 HTTP/1.0" 200 7220 "-" "Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1)"
anaconda.pacwan.net - - [18/Sep/2003:04:01:40 -0500] "POST /development/b2comments.post.php HTTP/1.0" 302 0 "-" "Mozilla/4.0(compatible; MSIE 6.0; Windows NT 5.1)"

There’s got to be a good story behind this. If this is indeed malicious comment spam then this is the most clever I’ve seen yet. If I hadn’t been the author of two posts he spammed and gotten the email notification I never would have suspected a thing. Has anyone else seen this?

What’s worrying about this whole thing is IP filtering (reactive) techniques that are usually used to block comment spam or content filtering (proactive) techniques which we’ve been experimenting with on WordPress wouldn’t catch this guy. In fact I can’t think of any good way to preemptively block this sort of thing. If Google didn’t give blogs so much credence we wouldn’t be having this problem. I suppose now we have to watch every comment with an eagle eye, on the lookout for anything suspicious.

Update: I got it reversed above, “he” commented on the WordPress blog first and then here.

Assorted

A little of what’s going on in the corner of the world wide web I frequent:

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.

Books to Live By

Jeffrey is in good company:

Zeldman's book with other great classics

In the early stages of moving I could only take a handful of books so I chose the ones that I knew I would need for my classes, the ones that I referred to often, and the ones that mean the most to me. The books, from left to right:

  • On Writing Well, William Zinsser
  • The Journey of the Mind to God, Bonaventure
  • MLA Handbook
  • Philosophy of Language, William Lycan
  • Autobiography of Red, Anne Carson
  • Fear and Trembling, Soren Kierkegaard
  • Selected Poems, William Wordsworth
  • The Republic, Plato
  • Designing with Web Standards, Jeffrey Zeldman
  • History of the Peloponnesian War, Thucydides
  • The Federalist
  • The Prince, Niccolo Machiavelli
  • Four Plays, Aristophanes
  • Bowling Alone, Robert Putnam
  • The Anti-Federalist Papers and the Constitutional Convention Debates
  • Utilitarianism, J. S. Mill
  • The Diamond Age, Neal Stephenson

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.

New Business Cards

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.