Here’s the deal (sort of)…

OK, so here’s the deal (sort of) with those last couple of ambiguous posts. I’m trying to take advantage of some of the newest features of WordPress (which seem largely intended to keep WordPress relevant in a post-Tumblr world), especially the ability to create different post formats, which, in addition to the “standard” format, include asides, links, galleries, status(es), quotes, and images.

In order to get access to these new features, I’ve switched from my old, built-from-scratch custom theme to the current stock theme, Twenty Eleven, which I am currently modifying for my own nefarious purposes. (If you consider hot pink text in a whimsical retro font nefarious, which you should.) My goal is to get things fairly close to how they looked before the switch, while still gaining access of all of that new WordPress mojo.

Cool. But what I really want to do is to take all of this even a step further, and let this WordPress-based blog become my single hub for posting anything online, except I guess for photos, which I still plan to post through Instagram, because I like how the app works. (Although having those show up in the main blog content stream instead of, or in addition to, in a sidebar widget would also be nice.)

The biggest stumbling block for this grand vision, so far, is that Twitter Tools, the WordPress plugin I use for all of the Twitter integration (a.k.a. “twittergration” in my compulsive Twitter portmanteau, or “twortmanteau”, parlance) on the site, isn’t smart enough to handle these special formats in the way I’d like. It should recognize asides, and especially status(es), as such and just run them as the entirety of the tweet, without the usual “UoP:” prefix and permalink consuming precious characters.

Or, perhaps more rationally, the ability of Twitter Tools to turn tweets into posts should allow you to define the format of those tweet posts (“twosts”), so I could tell it to make all of my twosts into status(es) instead of “standard” posts. Yes, this is definitely a more rational approach, and one that makes me slightly embarrassed to have written the previous paragraph (but not enough to make me delete it). I’m very accustomed to tweeting on-the-go from my iPhone, and I’d prefer to keep using Tweetbot for that, instead of somehow trying to turn the WordPress app into my go-to tool for depositing random brain cruft onto the interwebs.

While I’m wishing for alternative methods of funneling content into WordPress, as I mentioned above it would also be super neato if I could get Instagram photos to automatically show up on the blog as image posts… which might be possible, if I were to take the time to investigate it, but one thing at a time.

The end result of all of this angsting is that my blog is currently not in a state that I intend for it to remain in for very long. It’s a work in progress (as is everything in the world that isn’t just being allowed to decay), and I suppose I can live with it for now. I have more important things to worry about at the moment, unless you’d care to make a generous donation for the ongoing care and feeding of my blog. (4 figures minimum, and that’s U.S. dollars… not pennies, wooden nickels or, um… “Star Bucks”)

Then again, maybe I’ll be able to think about all of this a little more rationally come Monday, when the Minneapolis Public Schools’ winter break is finally over.

Yes, it’s… yet another redesign

I’ve redesigned this blog more times than I can count. Many of those redesigns have been incremental tweaks, to be sure, but still, there’ve been probably dozens of times that I’ve completely torn it down and rebuilt it, more-or-less from scratch. This is one of those times.

I’ve also (finally) wised up a bit. Usually when I post these redesign announcements, I don’t include a screenshot… as if this is the last time I’ll ever redesign the site. I wish I could go back to some of those earlier posts and see what the site actually looked like when I announced the changes. I can remember most of them, even from the pointless ramblings I composed to commemorate their creation. But it would still be nice to see them on the outside of my brain.

There are some big changes in this version. Most significantly, I’m using two (relatively) new technologies as both key components of the underlying structure and also as inspiration for the design itself. They’re created (or at least inspired) by some amazingly talented people in this field, so they deserve recognition.

First, the fonts are being delivered by Typekit. Finally, web designers have more fonts at their disposal than Arial, Georgia and Verdana. (Yes, there are some others, but these three are the most excessively used.) There are some awesome people behind Typekit, but I especially want to call out founder Jeffrey Veen and creative director (and probably the best web designer on the planet) Jason Santa Maria.

Next up, we have a responsive web design using CSS3 media queries. (Yes, that’s probably the most boring possible link about one of the coolest technologies out there right now in web design.) I think we have Ethan Marcotte to thank for devising this brilliant use of CSS3 media queries to dynamically adapt web page layouts to the size of the browser window. At the very least, he named it and helped spread the word with the aforelinked A List Apart article and his new book.

In short, by employing CSS3 media queries to adjust the page layout to an appropriate width and number of columns (and smartly resizing elements within), it’s possible to easily adapt a web page’s presentation to suit the capabilities and dimensions of a number of screens. Just take a look at this site on your 27-inch iMac and then on your iPhone (or your roughly equivalent non-Apple devices) to see what I mean. I’m sure I’m not doing Ethan’s work justice, either in my description or in my application of it here, but I’m excited about the potential regardless.

It’s a great time to be a web designer!

Update: I went for less than 48 hours with Futura PT Light as my primary font for body text here, despite knowing it was too light and, perhaps, too geometric for good body type. Finally, at a friend’s prodding, I resorted to the inevitable: Proxima Nova. I love Proxima Nova. It’s the primary font I use in all of my business materials (and in my logo itself). I had envisioned a kind of ’50s retro school textbook concept with this site redesign, and Proxima Nova, a 21st century font, doesn’t fit that description, but… man, it just looks so good. So, now it’s here.

UoP’s Greatest Hits

In the spirit of “If you can’t say anything nice, don’t say anything at all,” I will refrain from writing about last night’s midterm election results, except to say, “Don’t blame Minneapolis.” Also, to quote Apu Nahasapeemapetilon, “If you survive, please come again.” The next two years will either prove or disprove the merits of the Tea Party movement, and if we’re lucky we’ll still be around in two years to start cleaning up the mess.

OK, I knew I couldn’t avoid saying something snarky about it, but that’s it. No more. Let’s move on to something fun… ME! I’m taking a look back at the top 10 posts on Underdog of Perfection, based on the number of hits they’ve received according to WordPress stats. Without further ado… I present the all-time top 10 Underdog of Perfection posts to date.

OK, just a little further ado: here’s a chart of my hit count over the past month.

And now the list…

10. Mechanically-separated chicken or soft serve ice cream? You be the judge.

January 17, 2009 — When the gross picture of mechanically-separated chicken exploded as a full-fledged meme last month, as part of a factually challenged story hyping the dangers of the stuff (come on… you don’t need to make up stuff like “bathed in ammonia”; the truth is bad enough), I immediately recognized the picture as one I had seen about a year before. As I recalled, I had seen it on TotallyLooksLike.com next to a strawberry soft serve. I had forgotten that I had created that “totally looks like” image, which apparently is no longer available on that site, but is still on mine. Hence, traffic!

9. Best Google Doodle yet

June 6, 2009 — Ah, that would be the Tetris Google Doodle. But I suspect that every time there’s a new Google Doodle, someone googles “Best Google Doodle yet” and finds this post. Traffic!

8. Honda Fit iPod controls: when something is worse than nothing

August 23, 2009 — Rants are always good for some hits, especially when it’s something other people are annoyed by too. The fact is, the Honda Fit iPod controls suck, and Honda doesn’t seem to be doing anything about it, so I suspect as each model year is introduced, this post will generate more… traffic!

7. Migrating from CakePHP 1.2 to 1.3: My Story (Part One of… Possibly More than One)

May 16, 2010 — Writing about technical issues surrounding web development is one of the ostensible purposes of this blog, especially since I went freelance, so it’s gratifying to see my fellow developers relying on me for information, on those rare occasions when I actually have some to share. Thanks for the traffic! (I really didn’t set out to end each of these with the word “traffic” but it seems now that I am destined to do so. Um… traffic.)

6. This is what I wanted all along

October 27, 2010 — Being just a week old, this may be the fastest ascension of any post I’ve written to date. I suspect a lot of that has to do with the timeliness of the topic, but given the vague and keyword-free title (take that, SEO strategists!), the most logical explanation for its popularity is surely the conscious effort I made to promote it. Near the end of the post I make reference to the review of the MacBook Air by Jason Snell for Macworld. I also tweeted an announcement of the post, and stuck in an @jsnell, both in honest appreciation of his review, but also in the somewhat crass hope that he would retweet it. Which he (and several others, most notably Michael Gartenberg) did. Boom! Traffic!

5. Brooks Brothers: what’s up with the sheep?

July 25, 2007 — I’m glad some of these “random observation” posts are generating traffic. I believe I’ve spent a grand total of less than 5 minutes of my life inside Brooks Brothers stores, but I’ve pondered their bizarre logo for much longer, and the fact that others have too has brought my blog significant traffic.

4. Why does Safari 4 Beta take SOOOOO LOOOONG to start up? Am I the only one having this problem?

March 1, 2009 — I kind of wish some of these posts would stay buried. Three of the top four all-time posts on my blog are related to issues with Apple products, specifically, issues with early releases and/or beta software. People continue to visit these posts long after they’ve become irrelevant. Seriously, Safari 4 Beta? It’s currently up to version 5.0.2! Please, this post needs no more traffic!

3. Dog inequality in Walt Disney’s world

November 18, 2008 — And then there are posts like this one. Awesome. I love the fact that this has resonated with so many people. Goofy + Pluto = Traffic.

2. Solution for the iPhone Facebook problem

June 8, 2009 — Here’s another post pertaining to early software, and one that’s way past its sell-by date. Here, from an SEO perspective, we have an interesting case study: a keyword-laden but still generic title. What iPhone Facebook problem? The post was referring to the dilemma of iPhone users who were stuck with the then-crappy iPhone Facebook app or the then-crappy iPhone-optimized Facebook mobile site. The best option at the time, in my opinion, was the non-iPhone mobile site, but Facebook had a redirect built into that site that would automatically take iPhone users to the inferior iPhone mobile site. I found a way around that, and shared it in the post.

This is not really relevant anymore, but now any time there is any kind of problem with iPhones and Facebook, this post sees a surge in traffic.

1. Disabling the pinch-zoom feature on the new MacBook

March 9, 2009 — I’m always a bit annoyed when I look at my stats and see this post near (or at) the top. To me it’s a long-dead issue, but apparently not. I just showed this solution to SLP yesterday, so the problem still persists, and whenever I get a new Mac or reinstall my software, I have to remember to go in and deal with this again.

I don’t know whether or not I’m in the minority of Mac users here, though I suspect not, but I do not like the multitouch features of the MacBook trackpad. The only one I use is two-finger scrolling. That’s nice, but the rest are just an unwanted nuisance. I forget they even exist until I trigger them accidentally when I’m trying to do something else. Then I have to dig into System Preferences again and turn them off. Apple may love multitouch, and it’s great on iOS devices, but clearly there’s some distaste for it on the Mac, which for me means traffic.

P.S. You may notice a logical inconsistency here: the rankings in this list — specifically, the placement within the rankings of #10 and #6 — don’t jibe with the chart I showed at the top. That’s because most of the traffic driven to my site in the wake of the mechanically-separated chicken meme went to the home page, for whatever reason, not directly to the post. In which case those visitors would have completely missed the mark. In short, it’s a failure both for Google and WordPress Stats. Great job!

Incremental redesign

If you are the a regular reader of this blog, you may notice things look slightly different than they did before. The light blue striped background behind the right sidebar is gone; there’s navigation at the top; the left sidebar on the featured item on the home page has now become a standard element of all of the posts and, hey, the home page is now back to a standard one-post-after-another blog layout. Also, the sidebar widgets are different, and if you scroll waaaaaay down to the bottom, that’s different too. But since you’ve never bothered to do that before now, you probably wouldn’t have noticed anyway.

Incremental redesign seems to be more common with websites these days than the biannual complete overhaul we’ve grown accustomed to from sites large and small over the years. Why? Perhaps it’s a sign of maturity (of the designs, not the designers): designs stabilize over time as they’re refined based on user feedback. Perhaps it’s inertia: sites are so much more complex these days that, despite the benefits of semantic HTML and CSS, it can still be a massive undertaking to redesign a website from the ground up. And perhaps it’s strategic: designers have an idea where they’re going, but it can be jarring to users to have the proverbial rug pulled out from under them with abrupt and large-scale changes to a site’s design.

So, which is it in my case? Honestly, it’s probably a combination of all three. Anyway, I hope you like the refinements, and if not, feel free to let me have it in the comment section!

The new site design, phase two

Lots to choose from...As I mentioned the other day, the initial launch of this new site design was just phase one — window dressing. Window dressing I happen to like a lot, but still… same old clunky underlying structure. But not anymore.

WordPress has a pretty rudimentary home page structure by default. Everything’s just *SPLAT* right out there on the home page. Sure, you can use the <!--more--> tag to trigger some automagic stuff with “Read more” links, but overall, it’s not too fancy. Which isn’t to say it’s bad. Now, the default page layouts for some other open source CMSes like Drupal or Joomla, on the other hand… yeah, they’re bad. (Or at least they were, the last time I bothered to care.)

So while WordPress out of the box doesn’t do much fancy stuff with the home page layout, it’s extensible enough that a crafty developer (or a well-read tinkerer) can do some pretty nifty stuff with it. And that was my goal with this new redesign: I’ve got hundreds of posts dating back over seven years now, and most are eternally buried in the archives. I’m hopeful this new approach will bring some of that older content to light, with the random articles list on the home page and the related articles list at the end of each article page.

I didn’t do it all alone… I had some help from a nifty article from Smashing Magazine: 10 Exceptional WordPress Hacks. In particular I made use of numbers 5 through 8 on this list… with some modification. Some of my changes were purely to suit my taste, but others were to improve the usability of the features and in at least one case to fix a bug in the provided sample code. It’s probably worth discussing the details here.

5. Display Related Posts Without A Plug-In

I set this up in single.php so it will appear at the end of each of my articles. I experimented a bit with matching both tags and categories, but I found (for reasons I didn’t dig deep enough to explain) that WP_Query() does well with either tags or categories, but not both.

And, most importantly, I found (or actually, SLP did) that this sample as given breaks comments on the page. Some commenters on the original post mentioned this problem too, along with its solution: you need to call wp_reset_query(); at the end, to tell WordPress to go back to working with the original post’s content.

I also modified the example to look at all of the tags associated with the post, not just the first (can’t really figure out why the original version did that), and tweaked the HTML/CSS output to suit my design. Here’s a simplified version of the code I’m running:

<?php
// Get related posts
$tags = wp_get_post_tags($post->ID);
if (!empty($tags)) {
  $tag_list = array();
  foreach ((array)$tags as $tag) {
    $tag_list[] = $tag->term_id;
  }
  $args = array(
    'tag__in' => (array)$tag_list,
    'post__not_in' => (array)$post->ID,
    'showposts' => 5,
    'caller_get_posts' => 1,
    'orderby' => 'date'
  );
  $related_posts = new WP_Query($args);
  if ($related_posts->have_posts()) {
    ?>
    <h2>Related Posts</h2>
    <ul>
      <?php
      while ($related_posts->have_posts()) {
        $related_posts->the_post();
        ?>
        <li>
          <a href="<?php the_permalink() ?>"
          rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
        </li>
        <?php
      }
      ?>
    </ul>
    <?php
  }
  wp_reset_query();
}
?>

My version also uses a special truncation function I wrote to display a short excerpt of each post, not shown here. (And yes, eventually I am going to get syntax highlighting set up.)

6. Automatically Retrieve The First Image From Posts On Your Home Page

This one worked pretty well. I changed the function name to something a little less quirky, and I also added some code to verify that the image actually exists, instead of just looking for an <img src> and assuming everything’s OK. This involved inserting the following block of code into the function immediately before if (empty($first_img)) {:

// Check that file exists
if (!empty($first_img)) {
  // remove http/ https/ ftp
  $src = preg_replace("/^((ht|f)tp(s|):\/\/)/i", "", $first_img);
  // remove domain name from the source url
  $host = $_SERVER["HTTP_HOST"];
  $src = str_replace($host, "", $src);
  $host = str_replace("www.", "", $host);
  $src = str_replace($host, "", $src);
  if (!file_exists(ABSPATH . $src)) {
    unset($first_img);
  }
}

If some of that code looks familiar, that’s because I copied it straight out of the next item. If I were writing it myself, or bothering to rewrite it, I would swap out that slightly cumbersome-looking three lines of str_replace() with a single preg_replace() — although perhaps the original coder knows something I don’t, like that doing it this way is actually faster. It very well could be; I know regular expressions are significantly slower than straight-up string replacements.

7. Resize Images On The Fly

I’m using this in conjunction with all of the other items here, no big surprise. I left it mostly as-is, although I did make one small change. I know well the dangers of scaling images up — they look like crap, basically. But a little scaling up doesn’t hurt. At least, it’s much less glaring than having a big set of uniform-looking images marred by one image that’s slightly smaller than the rest. That happened to me as I was putting this together, so I tweaked the script to allow images to be enlarged up to 1.5 times their original size. In timthumb.php I changed lines 103-109 to be:

// don't allow new width or height to be more than 50% greater than the original
if( $new_width > $width * 1.5 ) {
  $new_width = $width * 1.5;
}
if( $new_height > $height * 1.5 ) {
  $new_height = $height * 1.5;
}

8. Get Your Most Popular Posts Without A Plug-In

There was something about the way this one was written that really bothered me. Maybe it’s just that I have a knee-jerk reaction to seeing SQL code appear directly in a page template. But mostly it was that this didn’t match #5 closely enough. Luckily I discovered along the way that regardless of whether you retrieved post data using WP_Query (which returns an object) or with the $wpdb->get_results() method (which returns an array), you can use the same post functions once you’ve called setup_postdata(). So I kept everything from this example up through that, and then I used my modified version of the output code from #5 and it worked like a charm.

One other thing I’d recommend changing: it’s kind of silly to have the if ($commentcount != 0) conditional in there. Much better to just put WHERE comment_count > 0 in the SQL. I also added a date range to the SQL, to keep the list dynamic. In my case, it’s only looking at the most popular posts over a 3-month range. More active blogs could shorten that time frame. My full query looks like this:

$popular = $wpdb->get_results("SELECT * FROM " . $wpdb->posts .
" WHERE post_date > '" . date('Y-m-d',mktime(0,0,0,date('n')-3,date('j'),date('Y'))) .
"' AND comment_count > 0 ORDER BY comment_count DESC LIMIT 4");

There may have been some other changes I made that were relevant here but I think I covered all of the major ones. The tips on the Smashing Magazine site were invaluable in kick-starting my overhaul of the home page. It was uncanny that I stumbled upon this page today, just as I was getting down to this task anyway. It saved me a ton of time. But it still kept me on my toes, since all of the so-called “hacks” required some additional hacks of my own to get them working, or at least, to get them working the way I wanted!