Category Archives: Computers & Technology

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 <!--more--> 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 <!--more--> 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.

“All in” is right

Today, according to banner ads and discussions from the likes of Neven Mrgan and Gizmodo, Microsoft is “all in.” All in “the Cloud,” that is, though the poker metaphor of betting the company on an all-or-nothing strategy seems apt.

Reading some of Steve Ballmer’s vacuous corporate speak surrounding this campaign (including the following PowerPoint-ready bullet points), I am not overwhelmed with enthusiasm for the endeavor:

– The cloud creates opportunities and responsibilities
– The cloud learns and helps you learn, decide and take action
– The cloud enhances your social and professional interactions
– The cloud wants smarter devices
– The cloud drives server advances that drive the cloud

My perspective on this kind of “communication” (such as it is) has evolved over time. When I was 25, it intimidated me, because I didn’t understand it. When I was 30, it annoyed me, because I realized there was nothing to understand, and it was just wasting my time. Now, at 35, it worries me, because I realize that this is how the people who are running things — important things like Microsoft, for crying out loud — actually think. They write nonsense like this and think it’s meaningful.

I wouldn’t bet on that.

Update: In Ballmer’s defense, the full presentation provided a lot more details than this bullet list, but it’s still a lot of not really very much.

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.

Group improvisation for one

In the mid-’90s, I was a member of a musical group called Bassius-O-Phelius. Working under a name based on an obscure Captain Beefheart reference, my friend Mark Bergen and I, occasionally supplemented by other musician friends, recorded a number of albums of free-form improvisation. Mark played organ, electric piano, and viola, and I played electric bass, woodwinds and percussion. It was all about experimentation and the power of music to convey mood and mystery. It was also kind of ridiculous, but we did everything with a sense of humor.

The Bassius-O-Phelius method was to use a 4-track cassette recorder, lay down an initial pair of tracks — typically on keyboard and bass — and then play the tape back and improvise another pair of tracks on viola, clarinet, and assorted other instruments. This led to some interesting results, as our improvisations were based not only on the live interplay of two musicians standing in a room together, but of those two musicians interacting with themselves via the prerecorded tracks.

For this year’s RPM Challenge, I decided to channel that spirit into a solo album, which I have entitled 222: Improvisations for 6 Instruments. Obviously the dynamic here is different: there’s only one of me, so I can’t interact with another player live. This difference was most apparent while laying down the first instrumental track: it was just me on the keyboard, with no frame of reference. My experience with Bassius-O-Phelius, however, taught me that it was important, among other things, to establish a steady, repetitious groove from time to time, anticipating opportunities for solos in subsequent tracks.

Another difference was the recording tools at my disposal: in the ’90s we recorded on a 4-track cassette recorder, but I recorded this album in GarageBand on my MacBook. The number of possible tracks is (in principle) unlimited, so I could easily lay down six individual instrument tracks without needing to worry about “bouncing down.” But there was another significant effect of using GarageBand: I could watch the waveforms of the other instruments as I played. Obviously this couldn’t totally allow me to “read the mind” of… well, myself… from the prior tracks, but it did allow me to anticipate major events. This might seem like “cheating,” but it actually felt more akin to the “two people in the same room” experience: while musicians are collectively improvising, it is common for them to make eye contact and give each other visual cues to facilitate group events in the performance.

Once the six instrument parts were recorded, I created 8 distinct “pieces” based on this single 8:38 track, by splitting up the instruments into different arrangements. For instance, the first track is just keyboard and guitar; the second is just Bebot and bass clarinet. Only on the final track do all six instruments finally come together and reveal the ultimate end product of my endeavors.