UNDERDOG of PERFECTION - Page 106 - a blog on technology, music and geek culture from room34

March 21, 2010 was a good day

There were two huge news events yesterday, both of which made me more hopeful about the future of our nation, for drastically different reasons.

First, health care reform. I’ve been a big supporter of this since the beginning. The promise of reform of our woefully dysfunctional health insurance system was a key issue of President Obama’s campaign, and I am impressed that he stuck to it against considerable odds. Charting a course both idealistic and pragmatic, he achieved something other presidents have tried, unsuccessfully, for decades.

Is it a flawed and perhaps inadequate reform? Yes. But it’s a start. We’ve known we were on the wrong road, a dead-end road, for decades. We’re not back on the right road yet, but at least we’ve finally turned around and are heading in the right direction.

I’ll save the particulars for another discussion, and I’ll refrain from my usual complaints about the likes of Michele Bachmann, Glenn Beck, Sarah Palin et al. I believe this is a profoundly good thing for America, and I believe in the coming months it will get better. By election day, the true value of what has been achieved will have started to become apparent. We’ll still be plugging our ears over the screeches from the far right, but in the end it won’t matter, because the Democrats in Congress, despite themselves, managed to get something, something really big, done. For more on what this reform bill means, there are some excellent articles at the New York Times.

The other big news, less essential to most Americans’ day-to-day lives, but great for Minnesota Twins fans, and really for anyone who appreciates the role baseball plays in America’s cultural life, is that the Twins signed Joe Mauer to an 8-year contract. And not just any 8-year contract, but a New York Yankees-sized 8-year contract. The amount of money involved may seem obscene to many, and I’m sure there will be complaints that if the team can afford that kind of salary for one player, they could have afforded to chip in more of the cost of Target Field. (I’d have to admit, there’s some credence to that argument, considering that this 8-year contract for Joe Mauer — $184 million — is more than the Twins’ share of stadium construction costs — $167.4 million.)

But that doesn’t matter. The fact is, Joe Mauer is unequivocally a superstar of Major League Baseball. And this is the scale of MLB superstar salaries. If Mauer had gone to free agency at the end of this season, he would have been signed by the Yankees, or the Red Sox, or another “large market” team on the East or West Coast, and if anything, he would have been paid more. I’m proud of the Twins for sticking it out, keeping the hometown boy at home, and giving him the kind of salary his stature in the league warrants.

Considering that less than a decade ago the Twins were being considered for contraction, the fact that they have become a perennial contender, and are now beginning a new era in a first-class ballpark with an MVP catcher, this contract is a decisive statement that mid-market teams do count, and that Major League Baseball really does happen outside of the Bronx. For more thoughts on the Mauer contract, check out this article from ESPN.com.

Fun with CSS in WordPress

I just had an email exchange with an old friend and fellow web developer (and WordPress user) regarding some techniques for CSS trickery on home pages in WordPress themes. Up until this week, I had been running a version of my theme that just featured brief excerpts of articles on the home page. I was doing this by brute force in PHP, truncating the post text with the substr() function, and then cleaning things up using the strip_tags() function, which removes all HTML tags from a string.

It got the job done, but as he and I were discussing, it wasn’t pretty: it stripped out the “dangerous” stuff — that is, unclosed HTML tags (cut off during truncation) that would have screwed up the formatting of the rest of the page. But it also stripped out desirable styling (bold, italics, links) and paragraph breaks.

The ideal situation would be to have a way to show just the first two paragraphs of each post, retaining all of their original formatting. Of course, WordPress has a feature to handle this: if you put a  comment tag in your post, your page template can truncate the post at that point, with a link to the single-post page to display the rest of the content. But I’ve never liked having to put that  into my posts. I want a completely automated solution.

And then it hit me… this could be done with CSS. It took a little trial and error, but I came up with the following:

#content .entry p,
#content .entry h3
{
display: none;
}

#content .entry h2:first-child,
#content .entry h2:first-child + p,
#content .entry h2:first-child + p + p
{
display: block;
}

A few things to note:

This assumes that your entire loop is wrapped inside <div id="content">...</div>. You may need to come up with a specific ID to use just for this block in your index page, and be sure not to use that in your single-post page, or your posts will never appear in their entirety.
This also assumes that you’re using the WordPress convention of wrapping your posts in a pair of <div> tags with the attributes class="post" and class="entry" (though technically, class="entry" is the only one that matters here).
Your post title should be in an <h2> tag, immediately following <div class="entry">.
The first definition may need to be extended to include other HTML tags you want to hide on your index page. In this example, it’s only hiding content that is inside <p> or <h3> tags.
If you want to hide every HTML tag except the ones you explicitly specify, you could change the first block to #content .entry *, but keep in mind that will also remove styling like bold and italics, and it will remove links. Probably not what you want.

The specifics may vary depending upon how your WordPress theme is set up; I just know that with the way mine is set up, which pretty closely follows standard convention, this CSS worked to get the index page to list the posts and only show the first two paragraphs of each. (It also retained the images that I embed at the start of each post, and also retains any embedded video from YouTube or Vimeo, since — at least the way I insert them — those are not wrapped in <p> tags.

Note that all of the HTML content for each post is still loaded by the browser — we’re just using CSS to tell the browser not to show it on the page. This is not going to help with performance; it’s strictly aesthetic.

Twittegration (or… uh… something like that)

Yes, I should inaugurate this new feature with a profound, witty, or at least marginally purposeful post. Alas, I might as well just say “Hello world!”

This post is a test of a new Twitter integration I’m trying out, using the Twitter Tools plugin for WordPress. Here goes (hopefully not) nothing!

Update: Looks like it works. Now I just need to get my custom URL shortener integrated into it all.

Limitations inspire design

What makes great design? Why did design seem to take such a wrong turn in the ’80s and ’90s? What has prompted a partial resurgence of “great” design in recent years? And why am I asking all of these highly subjective questions?

My fascination with design first took hold in the early ’80s, and was largely attributable (along with my love of technology) to my experiences with the Atari 2600. I became obsessed with package design and logos, and I also became obsessed with the art of low-resolution, pixilated on-screen graphics.

My interest in “current” video games tapered off as the ’90s wore on, especially when the 3D polygon-based era began. All the new games just seemed ugly and stupid, even though, in an obvious way, they were more complex and more graphically detailed than the Atari games I loved as a child. Simultaneously, my fascination with logos and package design waned as both seemed to just get more obnoxious and overloaded with swooshes and swirls and gradients and shadows and beveled edges and all of the other excesses technological advances made possible.

I’ve wondered for a while what it was about blocky, bitmapped video game graphics that I found so aesthetically appealing. And, in much the same way, what it was about package design from the ’50s, ’60s and ’70s that just seemed so right to me, even though they were a lot simpler, and made using much cruder technology, than what was happening in the “now.”

Finally, I realized it was limitations that were the key to the great designs I admired so much. The designers were up against strict limits to what was possible. Mastering these earlier, more difficult techniques required years of practice and experience. And butting up against those limits to produce something of quality required real creativity. This realization led me to the axiom:

Great design happens when designers’ creativity exceeds the limitations of the technologies they use.

Once I understood this, suddenly it made sense to me why so many of the low-budget shareware games I’d seen for the Mac over the years looked and felt like crap to me, even though on a surface level they were clearly more advanced than those old Atari games: it’s easy to create a game on a modern computer, using modern graphics software and object-oriented programming languages. You don’t have to have any particular skill or knowledge to do so. But, because it’s so easy to do passably, it’s much harder to do really well.

Pitfall! and Super Mario 64: Yes, strangely, I really do prefer the one on the left.

Atari 2600 programmers needed an immense amount of knowledge of the intricacies of the system, and the tricks to exploit its extremely limited, but quirky, technical capabilities. You didn’t get into programming games for the Atari 2600 unless you knew what you were doing. Well, OK… there was plenty of shovelware in the system’s later years, but the ratio of good to crap was much higher among the 700 or so games released during that system’s lifetime than it is for the tens of thousands of mostly worthless games currently available for the iPhone.

So then, what is it that has caused — to some extent — “great” design to re-emerge in recent years, even as technology has advanced even faster than before? I suspect it’s due to a reawakening among designers to the merits of the earlier ways of doing things. Letterpress, for instance, has experienced a massive resurgence of popularity lately. “Retro” design is popping up everywhere. Perhaps it’s just that the hipsters are taking over the world, but I think this renewed awareness of what made mid-century design so great has led to designers re-imposing those limitations on themselves. Technology has advanced far enough now that there’s almost nothing that can’t be done, including recreating the limitations of earlier analog technologies in the digital realm. Think of things like Hipstamatic for the iPhone: it takes your iPhone’s digital photos and makes them look like something from an old point-and-shoot camera from the ’60s. Or look at the background design on Web Designer Wall, a visual style that saw a surge in popularity about a year ago but that’s inspired by watercolor and ink techniques that were especially popular in the ’60s. Or look at video games like The Legend of Zelda: Wind Waker (among others) that brought a cel-shaded animation style to 3D polygon-based video game design.

These are just a few examples off the top of my head of modern designers imposing limitations on themselves to inspire their designs, now that technology no longer forces those limits directly. If you can do anything, it’s hard to do anything well. It’s too easy to get lazy or to simply lack direction and focus. In the past, technological barriers forced designers to focus. Now, they have to do it for themselves. Fortunately, that’s starting to happen.