The Montoya Herald, a weblog about Blueprint, jQuery, design, music and life, publishing on the web since September 2005. Written by Christian Montoya: developer, designer and entrepreneur.

I want cruft-free cruft-free code, ok?

Posted on April 13, 2007.

I decided to update my Text Link Ads plugin for the two sites where I use it, and I went through the usual process of downloading the plugin from the Text Link Ads site. Last time I did this, I found cruft in the markup produced by the plugin that applied CSS styles to the links directly, which I had to remove. This prompted me to write the entry How to remove cruft from Text-Link-Ads, which I'm pretty sure nobody really cared about.

This time, however, the download process didn't force me to set styling properties for the plugin which I would never use… right at the beginning of the download process, I found an option asking,

Do you want the links auto-formatted by your theme?

with, obviously, a yes/no response. I was happy to see this and figured that the plugin would finally come with cruft-free code, containing nothing more than the basic semantic HTML that my CSS would be looking for. I picked "yes" in a hurry and downloaded the plugin… how disappointed I was! Here's the cruft I got, even when I insisted on getting cruft-free code:

echo "\n<ul style=\"margin: 0; padding: 0; overflow: hidden; width: 100%; list-style: none;\">\n";
  foreach($this->ads as $ads) {
    echo "<li><span style=\"margin: 0; width: 100%; display: block; padding: 3px;\">".$ads->before_text." <a href=\"".$ads->url."\">".$ads->text."</a> ".$ads->after_text."</span></li>\n";
  }
echo "</ul>";

This is packed with very destructive properties, especially the margin:0 and padding:0, which ruined the appearance of these ads over at Liquid Designs. Obviously I had to go through the process of removing the cruft again, reducing the markup to this:

echo "\n<ul>\n";
  foreach($this->ads as $ads) {
    echo "<li>".$ads->before_text."<a href=\"".$ads->url."\">".$ads->text."</a>".$ads->after_text."</li>\n";
  }
echo "</ul>";

Notice the complete lack of inline CSS and random spaces… this is the kind of code I like. I still can't understand why developers don't offer the option of getting plugins and widgets like this… being a developer myself, I like to be in control of my code and I write my own CSS. I don't need any extra help with the formatting of my markup, and cruft like this only wastes my time. I'm not trying to pick on Text Link Ads here; I see this problem everywhere. My message to all developers is this: offer cruft-free options, and make your cruft-free options truly cruft-free!

Get a trackback link

2 Comments

1. Tom on April 13, 2007

   Great tip, I've just upgraded my Text Link Ads Wordpress plugin following your suggestions

2. Phil on April 15, 2007

   Great! I'm not the only one who thought that letting the links be formatted by my own theme meant no CSS from TLA. I instantly removed the margin:0 and padding:0.

   Let's hope they pay attention to this and give us, as you say, cruft-free code when we select cruft-free code.