The making of RobsHouse.net

I’ve relaunched RobsHouse.net on Drupal 5, yay! It was about time, too. For years it was running on a 4.6 Drupal (Civicspace, actually), and I had done nothing but break it more and more over the years. Thank goodness nobody could see the watchdog messages… PHP errors galore and just about everything else wrong as well. This site, however, is a different beast. While it is not comparable in complexity to some of the large media sites that are being launched on Drupal these days, it’s a pretty good effort for one guy over a long weekend. I’m using 54 custom modules on this site! Click here to see the full list. More details after the break.

Drupal vs the rest of my life

The old RobsHouse was mostly a Drupal developer blog. The only people who read it were those coming from Planet Drupal. The rest of the content on there got totally buried beneath the Drupal content, and people who know me but don’t care about Drupal were intimidated by the amount of technical (boring as my wife says) articles. Thus on this version I have separated the content areas a little better. There is an Articles section for posts like this one, and a Projects section to showcase websites I have made and modules I maintain. Those are the Drupal sections =) For the rest of the people, the Blog, Photos and Books and CDs sections show a more rounded view of who I am and what I’m doing or thinking about.

  • Recipe: I have 13 different content types on this site to allow me the most flexibility for separating everything into the right channel. For blogs I create a “Blog” post. For articles I create an “Article”. CCK gives me the fields that make them unique. The navigation across the top is done with the standard Primary and Secondary Links menus from the menu module. Most of the navigation tabs link to views from the Views module.
  • Likes: I like the idea that people other than Drupal developers might start to read my site =) The goal is to get my Mom to read it from time to time… that’s how I know I’ve succeeded.
  • Dislikes: I’d like more of a portal page for the front page. Right now it is the Blog, which is a river-of-news listing of a few of the content types. I feel the front page should do more to invite you to explore the various sections of the site.

Images

One of the things I disliked about the old version of RobsHouse was the organization of images. Galleries of any sort just don’t do it. I wanted the groupings of images to be more fluid and organic. This was a clear case for taxonomy and I set up two vocabularies: Tags and People, both of which are freetagging. I completely removed all of the old gallery information that grouped my images on the old version and now have quite a bit of work left to do before all of the new images are appropriately tagged. This is ok, though, as it affords me the opportunity to walk down memory lane a bit =)

With the new tagging in place I was able to make a cool page for browsing the images. The default listing is the most recent photos in a teaser list, but perhaps more interestingly are the two tabs that are there (perhaps not prominent enough, visually…): Photos by Person and Photos by Tag. On these pages you can search for people and tags and get a grid of photos as a result.

  • Recipe: Views for the three tabs and the three listings, plus Views Bonus for the Grid view.
  • Likes: Different ways of looking at photos, especially if you know a person’s name. The autocomplete is pretty neat, too.
  • Dislikes: I wanted to have single select lists instead of the autocomplete field because otherwise nobody knows what the options are. This filter widget isn’t available for freetagging vocabularies, however. Somebody please file a feature request!

Books and CDs

I love books and music, and I often want to share books and CDs with people. There is now a dedicated section for these. I use the Amazon Tools module to import these from Amazon.com and then I can write more about them if I want. I used CCK to add a field to the amazon_node type so that I could write about my specific involvement with any book, such as my Building Online Communities with Drupal book. This is a really convenient tool, and it might even generate a small amount of affiliate revenue for me over the long run.

  • Recipe: Amazon associate tools module enhanced with a CCK field.
  • Likes: Easy to import books and CDs. The Views integration is very good so I can build views with many details from the imported items. Possible revenue from affiliate program.
  • Dislikes: I have to manually switch the Amazon associate tools settings at the global level to import from Amazon.de or other global Amazons. This is necessary because not all products are the same.

Projects and Modules

RobsHouse is designed to do a little more to promote my professional activities. The main two sections for this are the Articles and Projects sections. Articles is just a view that lists article nodes from most to least recent. The Projects section is more interesting. It is a panel from Panels 2 that has two views. One view lists sites I’ve helped build and the other panel lists modules I help maintain. I have to finish listing the modules =) The content types are both created with CCK and use the image field and image cache modules to handle the screenshots. I also added a date field to the sites so that I could order them by the year I was involved. I also have an RSS feed from the Feed API module that ingests my CVS commit messages from Drupal.org. I’m not sure how useful this is to anyone, but it lets you see what I’m working on at the moment.

  • Recipe: Views, Panels 2, CCK, imagefield, imagecache, date and link modules. Feed API for the RSS feed.
  • Likes: People get to see on one page what sites and modules I’ve helped build.
  • Dislikes: I had wanted to integrate my CVS commit feed from Drupal.org on this page. It’s in a block on the right and it looks like crap. Oh well.

Search

The search on this site rocks. It is one of RobsHouse’s best features. It is based on the ApacheSolr module that I recently wrote, and the searching is handled in the background by Solr running on Tomcat. What’s so good about it? The facets. Do some searches, or try some of these, and notice the blocks that appear on the right. These are facet blocks and they are showing you how many items will remain if you narrow the search. For example, if you search for Drupal, the Type facets will tell you how many results remain if you narrow the search to include only images. With this tool you’ll find everything on RobsHouse quickly and easily.

  • Recipe: ApacheSolr module with Tomcat running in the background. I also used the patch from the Core searches module to get rid of Drupal’s core content and user search.
  • Likes: superior search results with less performance overhead than the built-in search. I also wrote an extra module for ApacheSolr that displays image thumbnails in the search results - really cool!
  • Dislikes: It was hard to set up. I burned quite a few hours trying to get Tomcat runing Solr “the right way”, ie. with the .war external to Tomcat and letting Tomcat know about the context and the solr/home data via JNDI. I ended up plopping that .war file in the webapps and starting Tomcat from the solr/home directory instead. I still can’t use the Solr admin application because of a Java error. Grrr.

Performance

I wanted RobsHouse to be fast. I also wanted to make sure I eat my own dogfood, so I went a little overboard on the performance tuning, considering this is “only” my personal blog. All my sites run on my own dedicated servers with Strato.de, so there is a decent amount of processor available. The PHP is the most recent for Debian Etch, and APC caching is enabled. Beyond that I am running memcache and advcache modules to cache as much of the data in memory as possible. I am also serving the static files using a separate server (running on the same machine but with a different host name), which in this case is Lighttpd. I also went through and added some tweaks to some of the modules, but those are all in the issue queue on Drupal.org, so if they’re any good you’ll be able to use them soon enough.

The theme

The old RobsHouse was pretty ugly. It was broken on Internet Explorer (and I didn’t care one bit), and I had not personalized it in any way. I wanted to improve upon that with the new RobsHouse. This theme is based on the baron theme available on Drupal.org, and I even took the radical steps of personalizing it a bit. For example, I though it would be a great opportunity to use the hanging monkey picture I had (no good reason… just because), but he only fit in the header sideways. Then I wanted to make the header a bit more compact so I put the menu links at the very top and eliminated the middle stripe that baron has. I also found another nice picture I had taken of a sunflower on our balcony. Since the flower is long gone I decided he could live on at the bottom of RobsHouse and shine upon all visitors.

That would have been enough except that I condescended to look at the site in Internet Explorer once before launching “just in case”. And what a mess! I mean, really. Opera, Safari and FireFox were all perfectly happy with my limited CSS skills, why couldn’t IE 7 be happy too? It’s supposed to have improved, after all. Instead, it looked like an Internet dog had pooped doggy hyperlinks on the middle of my website. What crap. So I did what any reasonable developer would do and I hacked the theme to have special, simplified (and annotated) markup for Internet Explorer. Since I don’t expect you to open up IE to see what I mean (we’re friends, right? Friends don’t let friends use IE), I’ll share the code for you here:

<!-- START: MSIE suck zone -->
<!-- Personal note: Members of the Internet Explorer development team are welcome
     to contact me and tell me how I can get the real markup and the included style
     sheet looking in IE like it does in all of the *good* browsers.
-->
<!-- This table is dedicated to the suckiness of Internet Explorer. -->
<table>
<tr>
<td><a href="/blog">Blog</a></td>
<td><a href="/articles">Articles</a></td>
<td><a href="/photos/recent">Photos</a></td>
<td><a href="/projects">Projects</a></td>
<td><a href="/calendar">Calendar</a></td>
<td><a href="/books-and-cds">Books and CDs</a></td>
</tr>
</table>
</div>
<div id="nav">
<!-- Let it be known; if it works in Safari, Firefox and Opera, it's good enough for me.
     If you then look at Internet Explorer and see that your site looks like jumbled
     dog poop, you have Microsoft to thank. At that point, the only option left is
     to whip out some tables, because who the hell wants to have to write CSS for
     Internet Explorer??? -->
<table>
<tr>
<td><a href="/faq">About</a></td>
<td><a href="/links">On the web</a></td>
<td><a href="/contact">Contact</a></td>
</tr>
</table>
</div>
<!-- END: MSIE suck zone -->

Long live table based layout in IE! I’m sure a large number of you know how to write CSS that works in IE - feel free to give me some helpful pointers. I don’t promise I’ll change it, though… something inside of me still feels that IE deserves its bad rap and why should I spend more of my time trying to appease it?

All the modules

mysql> select name from system where status = 1 and type = 'module' and filename like 'sites%';
+---------------------------+
| name                      |
+---------------------------+
| pathauto                  |
| devel                     |
| image                     |
| codefilter                |
| textlinkads               |
| image_gallery             |
| views                     |
| views_rss                 |
| views_ui                  |
| amazon                    |
| cck_extras                |
| commentmail               |
| content                   |
| imagecache                |
| imagefield                |
| jcarousel                 |
| jquery_update             |
| nodereference             |
| panels                    |
| panels_carousel           |
| panels_mini               |
| panels_page               |
| panels_views              |
| text                      |
| marksmarty                |
| robshouse                 |
| xmlsitemap_term           |
| xmlsitemap_engines        |
| xmlsitemap                |
| twitter                   |
| globalredirect            |
| faq                       |
| views_alpha_pager         |
| views_bonus_panels        |
| views_bonus_archive       |
| views_bonus_grid          |
| tagadelic                 |
| community_tags            |
| token                     |
| apachesolr_image          |
| apachesolr_search         |
| apachesolr                |
| date_api                  |
| date                      |
| calendar                  |
| parser_common_syndication |
| feedapi_node_views        |
| feedapi_node              |
| feedapi_inherit           |
| feedapi                   |
| link                      |
| search404                 |
| memcache                  |
| advcache                  |
+---------------------------+
54 rows in set (0.01 sec)

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.

More information about formatting options