Category Archives: Computers & Technology

The pleasure (and pain) of independent discovery

Menu screenshotI was pretty proud of myself when I came up with the solution for the dropdown menus I use in the navigation bar in my current site design. They don’t require all of the cockamamie JavaScript most older solutions did. They surely don’t work in older browsers (I’m guessing), but that really doesn’t matter now. Most significantly to me, though, I had never seen a solution that worked like what I am doing.

I guess it was just a lack of looking. There’s even a term for this approach, Suckerfish Dropdowns, although I’m not doing exactly what they recommend as far as IE support is concerned. However, I haven’t actually noticed it being necessary.

Now that may well be because I’m not even trying to support versions before IE 7, what with all of the transparent PNGs I’ve got everywhere. But still, the solution I’m using works great across all of the browsers I’ve tested: Firefox 2.x, Safari 2.x/3.x, and IE 7. The only complaint I have with it is that the positioning differs slightly between the browsers: the menus appear a few pixels higher in IE than in Firefox or Safari, such that they’re jammed up against the text of the menu header. But if I move them lower, the necessary contact (or really, probably overlap) between the menu header and the menu itself doesn’t happen… and if there’s a gap of even 1 pixel between the bottom of the header and the top of the menu, the menu will disappear if you don’t mouse over it fast enough.

Geez. I read a paragraph like that last one and I just have to ask myself, what am I doing with my life???

Proof that music and techno-geekery go together (or, Why Paul Slocum is my hero)

I’ve been a fan of Paul Slocum‘s various projects for several years now, but this takes the cake. From his blog post about a new project:

The program generates house music by progressively calculating the digits of pi and feeding them into an algorithmic music generator that I wrote…

The song is infinitely long and static. Every byte of the audio output is predetermined, even though only a small amount of it has actually been listened to. So you can jump to any measure in the song and it will always play the same music for that measure.

And it gets only more delightfully geeky from there.

A useful tip if you love both YouTube and markup validation

Not valid!YouTube is worlds apart from the likes of MySpace (*shudder*) when it comes to good code, but like most massively influential sites, they don’t really seem to care that much if their code validates, and even less if the code they provide webmasters for embedding content in their own sites does.

Frankly, I usually don’t care that much about validation either. I worked in this field for too many years when no validators even existed, and I’ve always taken the pragmatic approach: make it look and work the same, more or less, in all reasonably recent versions of Internet Explorer and Netscape (with Firefox and Safari having replaced Netscape over the past few years), and be done with it.

But I still have to admit that it’s a bit embarrassing that the “Valid XHTML” link (which appears in the Meta sidebar by default in WordPress) proves just how not valid my XHTML really is. I checked it today and was shocked to find 76 errors. I was relieved, however, when I dug in and discovered that only three of those errors had been my own. I had nested a <ul> inside a <span> (which I honestly didn’t even realize was a mistake, although I understand why it’s wrong, and it was easy enough to change from <span> to the valid <div> without any visible difference), and I had omitted alt attributes from a pair of images that don’t need to be identified by page readers anyway (and would probably be better off being worked into the CSS somehow).

These were pretty minor errors, if I do say so myself. 67 of the remaining 73 errors originated in cut-and-paste code blocks I got from PayPal and LinkShare (the latter of which I deal with only very reluctantly because they provide the mechanism for Apple’s iTunes affiliate program). What a surprise that the code from these sources looks like it was written by a tech support grunt in 1996 (in other words, by me in 1996)!

These were easy enough to fix, as well. I’ll just need to remember to fix them again if I ever change the code in those ad blocks, which I’m sure I will. The final 6 errors were the result of a YouTube video embedded in one of my blog posts. Ah yes, the age-old <object> vs. <embed> conundrum. I’ve always hated <object> because it seems unnecessarily complicated, with a slew of nested <param> tags that could just as easily have been attributes of the tag itself (although I suppose the point was to allow new parameters to be added without having to add support for new attributes in the DTD); plus it reeks of Microsoft’s platform-dependent ActiveX crapfest. I especially loathe the presence of, and need to hunt down, a ridiculously long, completely arbitrary clsid string representing the file format of the embedded file. (What’s wrong with a freakin’ MIME type?)

Unfortunately, the cleaner and more straightforward <embed> has never been part of any HTML specification, so it doesn’t validate.

Now it appears that there’s a solution to embedding YouTube videos in an XHTML-compliant way. Huzzah! But that means I’ll have to go back through all of my posts that have YouTube videos in them (which is a surprisingly large number) and fix them. It should be easy enough to hit them all at once with a well-constructed SQL query; I just need to study the pattern and do it. In fact, if I’d spent the last 15 minutes studying the problem instead of just complaining about it, I’d probably be done already.

But sometimes, complaining’s just more fun.

The R’s have it… “It” being the most distinguishable difference between Helvetica and Arial

The R’s have itWhether or not my aesthetic sense and artistic ability really warrant the appellation “designer,” design has been a part of what I do for my entire career, and I’ve had the eye for detail (minutiae?) since I was a kid. It follows naturally that I have an unhealthy fixation on fonts. Just ask anyone how I feel about Verdana to erase all doubts on that point.

My obsessions seem slightly less unhealthy working in the publishing field, and they’re downright validated at moments like last Friday, when the recent documentary honoring the 50th anniversary of Helvetica was screened in our boardroom over lunch. I loved it.

While I unequivocally loathe Verdana (unless, that is, it’s displayed at such a small point size that it’s hard to tell what it is), I hold Helvetica in high regard. It’s rather plain, I’ll admit, but it’s just such a perfectly realized vision that in its relatively short lifetime it has become the norm. Helvetica is just how letters should look, and any other font’s uniqueness is judged most clearly by how it differs from that norm.

Unfortunately, on-screen type is a world of its own. Although with the advent of Mac OS X, system-wide anti-aliasing has made smooth font rendering possible, most computer systems still look better when fonts are specially tooled for the low-resolution environment of a CRT or LCD display. And for the most part, Helvetica has never really fared too well in such an environment.

So when, in the mid-’90s, Microsoft made what might have been their single most thoroughly positive contribution to the world by releasing a set of standard fonts to be used on web pages that look (reasonably) good on computer screens, I embraced them wholeheartedly (Verdana notwithstanding).

The closest counterpart to Helvetica in this set of fonts is Arial. Many people hate Arial, for reasons generally too arcane even for me to appreciate, but ultimately, for me, the fact that it doesn’t quite hit the mark of being a pure Helvetica clone, it tends to render much better on-screen than Helvetica does, and it’s become my own personal standard (along with another of the Microsoft web fonts, Georgia) for web design.

But this Helvetica movie has turned my world on its ear. For the last week I’ve been hyper-sensitive to fonts, noticing Helvetica everywhere I turn all day long, and becoming acutely aware of every slight difference between Helvetica and its web font doppelgänger, Arial. I think I’ve hit upon the most easily identifiable difference between the two fonts: the right “foot” of the capital R.

To be honest, I don’t really like the capital R in Helvetica. That wavy little foot seems too jaunty, too incongruously immoderate next to its supremely efficient and utilitarian siblings. But if anything is worse than the capital R in Helvetica, it’s the capital R in Arial! What the heck is that? It’s almost enough to make me want to give Verdana another chance. (After all, it’s even used on the Helvetica site.)