Mike Industries

After almost five years of running Mike Industries, it’s time for a change! The fact that I made it this long without redesigning is either a testament to the majestic timelessness of the original design or my general uncomfortableness in doing “self identity” work. Since we know there is no such thing as timelessness on the web, we can therefore assume it’s the latter.

This redesign had five objectives, in order of importance:

1. Make shared items such as found links, video, and photography more a part of the overall content presentation. I still write original posts 1-3 times a month, but it’s nice to keep things fresh in-between as well.
2. Refresh things visually with a wider layout, new typography, and a fuller footer, among other elements.
3. Modernize and completely rewrite the code that was brought over when I switched from Movable Type to WordPress a year ago.
4. Offer more feed customization, including full-text RSS.
5. Don’t break old pages with the new design.

… and away we go:

Bringing multi-source aggregation into the fold

It’s easy to take posts from other places like Delicious, Tumblr, and Twitter and display them in various places around your blog. It’s a bit harder to ingest those same posts into your blog’s publishing system and then output them as actual native blog posts that people can comment on. And finally, it’s incredibly hard to do the second thing in a way that’s flexible enough to display many different types of content in many different contexts.

Getting to the first stage would have been easy via a few lines of javascript, and in fact, I already got there with the previous design, embedding my Delicious links in the Mike Industries sidebar.

In trying to make it to the second stage, I tried several different “aggregation” plug-ins for WordPress, but eventually settled on a wonderful little creation called FeedWordPress, by the one they call “Rad Geek”. After installing the FeedWordPress plug-in, you simply give it some feeds to suck in, tell it how to categorize and tag items from each feed, and then let WordPress templates do the rest.

I was originally going to move over all of my link-saving from Delicious to Tumblr because I love Tumblr’s posting interface, but since my Tumblr account got hacked within a couple weeks of opening it, I decided to only use the Tumblr account to post fun stuff like videos. My initial reflex was to move all “collecting” to one platform, but since everything is getting pulled directly into the main blog anyway, I’ve convinced myself that the use of multiple platforms is actually a strength. I’m essentially pulling my Tumblr and Delicious feeds into the “Shared” column and my Twitter feed into the “Overshared” column.

I am unconvinced that Twitter will be a permanent part of this blog, since I still don’t enjoy either publishing or reading many tweets, but I’m giving it a try to see if it sticks. Twitter’s rising popularity continues to amaze me to the point where I’m almost ready to officially consider myself “too old”. On the one hand, I totally understand it because it’s so easy. But on the other hand, I totally despise it because it enables such laziness and extravagance of expression. Anyway, that’s a conversation for another blog post.

The single hardest part of the entire redesign was writing a script that ensured no items in the Shared column would render wider than the column itself. Since there will be plenty of YouTube video tags in there, it was essential to resize them all as the column renders, but not permanently in the database, so that they can render at full size when viewed from the permalink pages. I am no Wolf with regular expressions, but after hours and hours of hackerations, I came up with this:

function shrinkContent ($matches) { // SET WHICH $matches PARAMETER APPLIES TO HEIGHT AND WHICH TO WIDTH if (preg_match('/(\<[^\>]+?(width=([\'|"|0-9]+))[^\>]+?(height=([\'|"|0-9]+)).*?\>)/',$matches[1])) { $widthspot = 3; $heightspot = 5; } else { $widthspot = 5; $heightspot = 3; } // CHOOSE A MAX WIDTH $maxwidth = 240; // INTEGERIZE WIDTH $width = (int)preg_replace('/[^0-9]+/','',$matches[$widthspot]); // IF WIDTH IS MORE THAN OUR LIMIT PERFORM THE TRANSFORMATION if ($maxwidth/$width < 1) { $height = (int)preg_replace('/[^0-9]+/','',$matches[$heightspot]); $height = round(($height*$maxwidth)/$width); $width = $maxwidth; $pattern = '/width=([\'|"|0-9]+)/'; $widthstring = 'width="'.$width.'"'; $resizedtag = preg_replace($pattern,$widthstring,$matches[1]); $pattern = '/height=([\'|"|0-9]+)/'; $heightstring = 'height="'.$height.'"'; $resizedtag = preg_replace($pattern,$heightstring,$resizedtag); return $resizedtag; // ELSE LEAVE IT ALONE } else { return $matches[1]; } } function scale_image_240($matches) { $p = $matches[3]; $mw=240; $mh=1000; if(list($w,$h) = @getimagesize($p)) { foreach(array('w','h') as $v) { $m = "m{$v}"; if(${$v} > ${$m} && ${$m}) { $o = ($v == 'w') ? 'h' : 'w'; $r = ${$m} / ${$v}; ${$v} = ${$m}; ${$o} = ceil(${$o} * $r); } } return("<img src='{$p}' alt='' width='{$w}' height='{$h}' />"); } } // START WITH YOUR HTML $contents = $yourhtml; // LOOK FOR TAGS WHERE WIDTH IS BEFORE HEIGHT AND REPLACE $pattern = '/(\<[^\>]+?(width=([\'|"|0-9]+))[^\>]+?(height=([\'|"|0-9]+)).*?\>)/'; $contents = preg_replace_callback($pattern, 'shrinkContent', $contents); // LOOK FOR TAGS WHERE HEIGHT IS BEFORE WIDTH AND REPLACE $pattern = '/(\<[^\>]+?(height=([\'|"|0-9]+))[^\>]+?(width=([\'|"|0-9]+)).*?\>)/'; $contents = preg_replace_callback($pattern, 'shrinkContent', $contents); // LOOK FOR EMPTY IMG TAGS $pattern = '/(\<img[^\>|^width=]+?(src="([^"]+?)")[^\>|width=]+?\>)/'; $contents = preg_replace_callback($pattern, 'scale_image_240', $contents); // VOMIT OUT NEW CODE WHERE NOTHING IS MORE THAN 240 PIXELS WIDE echo $contents;

I cribbed part of the short scale_image_240 function, but the rest was from scratch. Beforehand, I searched for quite some time on Google for a function to do exactly this and couldn’t find it, so hopefully this post will help some future searchers in their own quests to resize content.

Even though running these computations when the sidebars render isn’t too computationally ferocious, I went ahead and “widgetized” my sidebar in WordPress as well, so I could make use of the excellent WP Widget Cache plug-in. WP Widget Cache writes your entire sidebar out to disk so that it can be served up quickly and statically.

Ok, now that the geekiest part of the redesign has been explained, on to hopefully more interesting matters…

Separation of different content types

As much as I love what Doug and Dave have done with their superb redesigns, I just don’t like displaying original posts and peripheral content in the same column. I may not be the most prolific original post writer, but when I write an article, I want it front and center, and not pushed down by links or other distractions. With this redesign, the flow is simple: the most important stuff is on the left, the semi-interesting stuff is to the right of that, and the barely-interesting stuff is to the right of that. Size also flows according. The wide column is important, the medium column is semi-interesting, and the narrow column is barely-interesting.

Typography

sIFR lives on in the new Mike Industries — of course — in the form of Trade Gothic Condensed. While I don’t think sIFR should be used in every project (we don’t use it on Newsvine), I still find it an invaluable method to really shine up blog design. The first version of Mike Industries used Agency Condensed rendered with sIFR 2, while the new version uses the aforementioned Trade Gothic (a Stan favorite) and sIFR 3.

By the way, I don’t usually like to call fellow developers out, but I will say this about sIFR 3: it’s beautiful and it’s been ready for at least a year, in my opinion, and yet it’s not officially “released” yet. I find this highly unfortunate. When you’re developing software for the web, it’s never going to be perfect. As long as your software generally works and isn’t causing any damage, release it. The entire web is a beta. The entire web is a hack. It always will be. Don’t fight it. If you’re on Release Candidate 436, that’s a sign you may need to let go a little.

Aside from the Trade Gothic, Mike Industries now uses Helvetica Neue for body copy and downwind headers. I am certainly no devotee of Helvetica, like 90% of the people in the film are, but with anti-aliasing so much improved in the last decade, it does make for some good readability these days. Plus, I just needed to get off the Lucida Grande/Verdana bandwagon for awhile at least.

Grids, shmids

I feel like grids are the new web standards. What I mean is that they are a potentially useful tool to achieve a noble means, but they aren’t the second coming of the messiah. If grids help you do great work, then by all means learn them, love them, and live them. But if you’re perfectly happy eyeing layouts as a drunken painter eyes a canvas, then eye away. I’m no painter, but I’m plenty happy creating layouts without the use of grids or any sort of sizing heuristics. I don’t make sure my main column is sized according to a golden-ratio and I don’t make sure every line of type lines up vertically with every other.

I just do what feels right… and that’s plenty good enough for me. You should do the same, whether or not that involves the use of grids.

Feeds revisited and reloaded

Due to popular demand, I am now pushing out full text RSS feeds. I would still rather not publish these because of content theft and other reasons, but in the end, my reticence should not trump the will of my subscribers. I’ll try it out and unless I notice widespread plagiarism on spam blogs, full-text feeds will probably continue.

Also, after running this poll about a month ago, I’ve decided to include original and shared items in the default RSS feed (the one you’re probably already subscribed to). According to the poll results, most people want to see interesting links and other stuff in the main feed, so that was the justification. If, however, you find the shared items superfluous, please switch over to the Articles Only feed. I hate the idea of anyone unsubscribing entirely because the main feed is now updated too often.

One thing I can’t seem to figure out is how to correctly enable the “all” feed in WordPress. For all of you WordPress gurus out there, I basically applied a filter to my existing “/blog/feed” feed to remove the Overshared/Twitter categories. It is as follows:


function exclude_category($query) {
if ( $query->is_feed ) {
$query->set('cat', '-473,-281');
}
return $query;
}

add_filter('pre_get_posts', 'exclude_category');


That correctly takes the stuff out of the “main” feed, but I need to provide another feed with everything in it. Something like maybe “/blog/feed?all”. I figured I should be able to just modify the line above to:


if ( $query->is_feed &! $query->query_vars['all'] ) {


… and it should work. It doesn’t. If anyone has any ideas, I’d love some help on that one (or another way to do it entirely).

Big footers are in

My footer now contains a lot of what was previously in my sidebar and more. I’m not sure how I feel about this yet. On the one hand, I like big, informative footers. But on the other hand, I don’t like burying such potentially important stuff so low on the page. If I end up getting rid of the Overshared column, some of the footer content may end up replacing it.

Backwards compatibility

Originally, I wanted to find a way to keep old blog posts in the old theme and style new blog posts with the new theme. I like this idea because it preserves the context in which posts were originally written and it also doesn’t break heavily designed posts like this one. In the end though, I was able to keep my main content area the same size as my old one, so the new theme really didn’t break any entries, so I have — for now — decided to move everything to the new theme. This decision is definitely subject to change though as I really don’t want to be tied to a 450 pixel wide white column for the rest of my life.

So anyway…

So anyway, that’s it. I’m pretty excited to get this rolled out, but at the same time there are still details that need some shining and bugs that need squashing. If you see any, give me a holler in the comments. Thanks!