The most insidious cause of overengineering is over-generalizing. We will over-generalize anything given half a chance. Writing code to work with a list of students? Well, we might want to work with teachers and the general public someday, better add a base People class and subclass Student from that. Or Person and then EducationPerson and then Student. Yes, that’s better, right?
…
We have to stop championing each ridiculous feat of overengineering and call it what it is. It’s not ‘future-proof’, because we can’t see the future. It’s not robust, it’s hard to read. Applying a generic solution to a single case isn’t good programming, it’s criminal overengineering because like it or not somebody, somewhere will pay for it.

He mentions fear as a motivator; the worry that your code won’t stand up against the unforeseen use-case. He also describes the sense of productivity it engenders. In other words, “look at all this code I just cranked out”.

And while I agree with everything he says, I do have a small point of contention: He doesn’t account for the fun factor. This must be the exception to the rule. The one time it is okay to shoot way high.

I mean, isn’t it fun to create these beasts? To take a simple problem and abstract it out to this giant chain of inheritance and interfaces and abstractions? I’m serious here. I’m sure there exist the coders who enjoy nothing more than filling in a function stub with one return statement, mumbling “done” to themselves, and then moving on to the next task at hand. But aren’t most of us the kind who enjoy the creating and building of these…things?

So yeah, while absorbing the fluorescent rays of a cubicle sun, make sure not to “makes things harder than they are” (to quote my dad) too often. But try to find an excuse every now and again to exercise those creative muscles and think larger than the simple problem at hand. That’s what I say.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Patterns Schmatterns: But Don’t Forget the Fun

Ideation Limitation

I think coding a site to upload some photos, automate them into a simple slideshow is a no brainer. Your mom on the other hand thinks that’s about the most fan-futon-tastic thing ever. She and all the ladies in her card group use it religiously; sharing photos of their baby grandchildren drooling and gnawing on the dogs chew toys. Who knew.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

A Diagnosis to Which I Relate (using a word I’ve never heard)

1. Created a plugin
2. Created a repository for that plugin at BitBucket

ReadyAgain at BitBucket

The ReadyAgain jQuery Plugin

Prior to version 1.4, the array of functions saved by jQuery for execution when the DOM is ready (i.e. those functions added by $(document).ready(function...)) was an accessible property of jQuery. This meant that you could reference the array directly using something like $.readyList. Now, however, that array has been hidden within an anonymous, self-executing function (the deepest, darkest well of data hiding in javascript, here’s a bit of a primer). So re-executing all of the ready functions by grabbing a copy of that array becomes impossible.

The ReadyAgain plugin is my attempt to solve that issue. The specifics can be seen by looking at the code, but the basic concept is to override jQuery.ready to intercept each function as its added, and to save it within our own internal array.

Public Code

So the initial commit of the code is there and I’ve typed up a page on the Wiki with some examples. I hope that people use it and maybe even contribute to it. It would certainly be something fun for me to be a part of and from which to learn.

The Path to Here

An issue that has come up a couple of times regarding my ‘Read More Right Here’ Wordpress plugin is that, when the post content is loaded, effects like a thickbox or lightbox or whatever-box are not applied to images in the new content. More generally speaking, any javascript fanciness used on any of the new content elements is missing.

The reason is that most every javascript based modification is applied to the document within a ‘DOM Ready’ function (and rightly so) . With jQuery, this is the jQuery.ready function. So a plugin might add some nifty image effects to all images on the page like so: $('img').NiftyStuff(). But the images within the content pulled down by my plugin aren’t yet there. They don’t arrive to the page until after the ‘Read More’ link is clicked.

So how do you re-execute NiftyStuff and the potentially countless other plugin functions on that new content?

Live & Delegate

One quick solution would be to make use of jQuery’s live or delegate functions. When used, they will monitor the DOM for new elements and execute code as needed. But I guess this is still a relatively new process since it’s not something I’ve noticed in any of the plugins I’ve come across.

Rerun Ready (i.e. my plugin)

Re-execution of each of the saved ready functions is another possibility. What’s more, the ReadyAgain plugin will allow you to execute all of the ready functions within a more specific context (instead of the default ‘document’ context, see the wiki for more). So potentially only the new content will have the saved ready functions applied.

Risky Business: Not the final solution

At this point you might be thinking to yourself “Great, so you’ve packaged this with ‘Read More Right Here’ and everything works perfectly”. Sorry, but no. At least not yet.

I experimented with it a bit, and it’s honestly just too hazardous. I mean, it’s a serious case of “Use at your own risk”. It is generally assumed (and again, rightly so) that the code executed within jQuery’s ready function will only be executed once. So you might see a new element with a static ID value added to the page over and over. Or you might see some element that’s animating with relative values (e.g. top:'+=25px'), which could happen over and over. Or any other number of possible side-effects.

This plugin is really something that (at least in its current form) should only be added on an individual basis. You have to examine what happens within the ready function of other jQuery based Wordpress plugins. There’s just no way that I can see to have this become default behavior within the RMRH Wordpress plugin.

But time will tell. Maybe creating this public repository will put some eyes on it and who knows what solutions will develop from that.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

The ReadyAgain jQuery Plugin: Re-executing Ready

One good indicator of my own satisfaction towards a project like this is how I feel about it the next day. This design has been pretty much complete the past couple of days, and when I looked it over this morning, I was still pleased.

I think the Conde site now has a more professional, sleek feel to it. Fingers crossed that this translates to more potential customers.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Conde Software Redesign

Miter Box Slider is my submission. It’s a jQuery ’slider’ plugin (i.e. when there’s a slideshow display of images at websites). What’s awesome about it is that it provides the ability to create truly unique animation transitions. With other sliders you’ll see a set of predefined transition effects, but with Miter Box, you create the transitions. It’s actually very powerful. One of the largest issues I had developing it was that I would often end up just playing with it. It’s a fun tool for experimenting.

Regardless of whether other people decide to use it, I really am pretty proud of it. Remember that those who run the site review the code and set the price? Right now, mine is the highest priced (one of only two at that price) item in the javascript section of code. I don’t know everything that goes into that price point, but I will say that I think it’s an indication of the power my plugin offers.

If you’ve got a site, or create sites, and are looking for some way to spice up the way you display your images, check out the Miter Box demo.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Miter Box Slider

Some Details

First: be sure to notice the lettering for the header image (the ‘W’, ‘o’, ‘o’, etc.). It was drawn by my nine-year-old daughter. How fantastic is that!? And my wife drew the now official Woolie T. mascot you see in the footer. I’m pretty fond of my family.

The actual content area is larger by a couple hundred pixels, and the sidebar along the right is correspondingly smaller. I didn’t want this blog to become a collection of sidebar widgets and ads that would overshadow and dominate the content.

Some posts will have an associated image to spice things up (on both the ‘front page’ view as well as the ’single page’ view). I used the Wordpress get_custom_values in the backend to add those images (some of which will be mine, most of which will be via the Creative Commons at Flickr). I’m pretty sure there’s a better way for me to use that feature (too may invidiual custom fields, I need to combine them into a single unit), but it works for now.

I really like (and am a bit proud of) the line that runs the length of the page, delimiting everything from the header to the footer posts and all the items in between. One of my original goals with this design was creating some sort of linking graphic like that….something that would tie the page together from top to bottom.

Comments look a ton nicer as well now, though there’s no new functionality (no replying to an individual post, comment feeds etc.).

Anyone reading this with IE6? Everything is basically visible and looks somewhat the same. The drop-down menu for “Categories” doesn’t work at all. but I don’t plan on I’m going to touch the IE6 specific style sheet again. Peace out.

Some ToDos

The sidebar, though pretty small now, still needs more items. I just don’t know what I want to put there yet. I’m trying to avoid too much of the standard stuff, because I want to keep it interesting. It will most likely become a sort of experimental spot at which I’ll throw new code.

The footer area is basically blank as well. It will probably end-up with some of the more standard sidebar type items (e.g blogroll). But again, I just don’t know.

I’d like to have something more dedicated to support for my Wordpress plugin (and any others I eventually create), but for now the WP forums is the best place to keep track.

Vote for Me

I hope those who stumble across this place enjoy the look. I’d like it to be a good first impression. If you’ve visited off-and-on in the past, then maybe the change will add a nice little jolt to your day.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Yah New Look

And while I’m here, Lifehacker recently pointed me to RainyMood.com. On a whim I pushed play and then, after about an hour of interneting, realized it was still on. Super job of drowning out ambient noise.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Puter Piano and Outside Rain

My first car had a sticker of the two of them flying in a box.

.

My only tattoo is a small one of Calvin dancing.

My oldest daughter started reading through some of my Calvin and Hobbes books, and seems to truly love it as well.

So here now is the Kickstarter (fund raising site) page for Dear Mr. Watterson, a documentary about the strip.

Dear Mr. Watterson is a film that will look to the readers and fans of Calvin & Hobbes to tell the story of the strip and its creator. As we explore the art and impact of Bill Watterson through this unique perspective, the undying appreciation and love of Calvin & Hobbes and the man behind it will be evident in the anecdotes, stories, and memories shared by readers of the strip and friends and colleagues of Mr. Watterson.

While the crew has been donating their time to make this project happen, we’ll be taking several trips to conduct interviews and collect footage, so the costs of air tickets, rental cars, meals, and motel stays will add up. The benefit of raising our goal of $12,000 all at once through Kickstarter is that we’ll be able to move forward on this film without the hurdle of funding, and the more we raise on top of that, the more we can do with the film.

I would love to see this happen and am working on my contribution as these words type to my screen. Consider doing the same!

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Calvin and Hobbes Documentary (make it happen!)

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Four Dollars of Elvis

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Silent Night by House of Heroes

The original inkling of issues came via Anon’s comment, on my previous update post, that YouTube videos pulled down as part of the “more” section were broken. I tested this locally and saw that, with IE7, he/she was right. Of course, it’s not just YouTube. It would be any of the <object>/<embed> elements video sharing sites provide.

That really sucks.

The Fix (sorta)

After spending one night trying to figure out what I could do to fix this, it became obvious that the generally accepted solution to dynamically adding those flash objects to a page is to use SWFObject, which:

Offers a JavaScript API that aims to provide a complete tool set for embedding SWF files and retrieving Flash Player related information

I really (always optimistic) thought this would be a quick set of changes to the javascript file; call the swfobject.embedSWF method and be done with it. Best of all, swfobject.js is already distributed with the Wordpress install (which, by the way, I don’t see mentioned in the codex, the script handle to use to enqueue or set is as a dependency is 'swfobject'). But I couldn’t seem to get it to work, at least not in IE7.

That really sucks.

What IE Doesn’t Like

In the end, after much debugging with the uncompressed version of SWFobject, Firebug Lite and beaucoup de calls to console.log, I found the issue to be SWFobject’s call to outterHTML.

You see, when it creates this new element for the DOM, it needs someplace to put it. You provide the id of the element which will be used as that replacement. Sort of like the sacrificial lamb for the the new <object>. It’s through outterHTML that the replacement occurs. It sets the old element to be the new one.

435

el.outerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"' + att + '>' + par + '</object>';

createSWF function (line number as of version 2.2)

My plan was to replace the original object with the new one. When that didn’t work, I tried inserting a <div> as the target for replacement, right before the object, but that failed in the same way. Finally, I realized what was going on, and set as the replacement an item that already existed in the DOM (in other words, it wasn’t something pulled in and added dynamically by the RMRH plugin). That worked.

The problem seems to be that, when the element to be replaced has also been dynamically created, IE throws an exception when you try to change it. In other words, I created the sacrificial lamb and IE wants for it to have always existed.

The Fix Again (sorta, again)

But it bugged me that the call to outterHTML was the point-of-failure here. After all, I know I manipulate the DOM all the time in jQuery. Right? It provides replaceWith as part of its API after all, and that always seems to work.

So I replaced SWFObject’s call to outterHTML with jQuery’s replaceWith (does that count as ironic?), and the problem was solved.

So What Do I Do?

I don’t really want to change that one line and then bundle the modified swfobject.js file with my plugin. But that’s the only solution I can think of. Well, that and maybe just recreate (i.e. copy) the relevant SWFObject code in my javascript, to be used only with IE. But I can’t help but think there must be a better line of action here.

This has to be a relatively common situation. I mean, pull down content using AJAX, content happens to contain an embedded flash player, use SWFObject to make sure it renders in IE. I guess what’s missing is that in the common scenarios, an existing element is already set aside and ready to accept the new object. But I can’t do that with my plugin.

So what do I do?

~~~~~~~~~~~~~~~~ This has been a woolie posting.

SWFObject, IE and Dynamic Content (a problem)

Details, Details

I previously was calling a function I wrote to set the URL to the plugin root directory. This was then used to register the script with WP and was also passed down to the javascript using wp_localize_script.

The one-liner function:

function wt_rmrh_getBasePath()
{
    return get_bloginfo('wpurl') . "/" . PLUGINDIR . "/" . plugin_basename("read-more-right-here/");
}

With the 2.8.1 update, the above no longer worked. Before 2.8.1, the path in a page’s header was (in part):

   plugins/read-more-right-here/js/wt_rmrh.js

After the 2.8.1 update, the path became:

   plugins/read-more-right-herejs/wt_rmrh.js

Needles to say, that javascript file isn’t going to load.

I looked through wp-includes/plugin.php and found the plugin_dir function which

Gets the URL directory path (with trailing slash) for the plugin __FILE__ passed in

(their function comment).

So I deleted the function (which was only being called once) and replaced

$pluginUrl = wt_rmrh_getBasePath();

with

$pluginUrl = plugin_dir_url(__FILE__);

Everything seems to be in working order now. At least until the next Wordpress version!

~~~~~~~~~~~~~~~~ This has been a woolie posting.

RMRH Update for WP 2.8.1

1
2
3
4
5
6
7
8
9
10
11

$values = get_values();
$display = "<ul>";
 
foreach($values as $value)
{
    $display .= "<li>$value</li>";
}
 
$display .= "</ul>";
 
echo $display;

Why was my list spilling out of its well defined boundaries? A staggering amount of time was spent fiddling with every possible CSS property for that element and those around it. Edit, save and reload. Edit save and reload. It was driving me insane.

Solution? Append a newline after each list element.

6

$display .= "<li>$value</li>\n";

I have no idea why. If you do, please enlighten in the comments.

Dear Lord I hope this helps someone else out.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Overflowing List Elements

If you’re not familiar with it, the gist is: Story of a royal family in a modern, fictional world. And the ruler, the king, is not a figure-head. He’s the real deal with power to spare. And so there are the expected power struggles internally and externally. Military action and political action.

It’s all very well done and fun to watch. A sometime small twist to it all is the idea of the king being truly “chosen” by God. There is a strong undercurrent of signs and symbols the leads look for and notice.

I hope people are watching. I hope the show lasts (and continues to be entertaining and interesting). I hope I’m not the only one watching.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Watch Kings Rule

I just updated this site to use the latest WP (2.8) and now my “Read More Right Here” plugin doesn’t work quite right. When you click the “Read More” text, the rest of the post successfully downloads and is displayed. However, the next “click” takes you to the post’s single page display instead of just collapsing the new content.

I will hopefully get this sorted out soon. Whenever I do, I’ll update here.

UPDATE:

Unfortunately I haven’t been able to fix this. The problem is caused by the latest version of jQuery (1.3.2), to which WP apparently updated. Actually, it was caused somehow in the changes made in between 1.2.6 and 1.3.

Specifically, the function curCSS is throwing exceptions during the animation of the new content “away” (i.e. hiding).

800

var computedStyle = defaultView.getComputedStyle( elem, null );

The elem parameter being passed to getComputedStyle that causes the exception is a “\n“. With jQuery 1.2.6, I don’t see that element being passed to that function.

I tried some of the other animation techniques, but they I guess they all hit curCSS at some point or another. Even plain old hide causes problems.

So…..sorry. As of right now, the RMRH plugin does not work with WP 2.8. The only solution I can see at the moment is to include the older version of jQuery with the plugin. But I’m not sure yet how that will work out.

UPDATE 2: FIXED

It’s funny how a day away can make a difference. It only took about 10 minutes to get this fixed.

So I knew that jQuery couldn’t have a defect that serious that wasn’t already fixed. The most recent version has been available for more than four months now, and too many people use it for that issue to still be around. I figured the the problem had to be how I was creating the new content that is inserted into the DOM.

My previous method for doing this was:

var newEl = $j("<p> + newContent + </p>");

And the fixed method of the above code is:

var newEl = $j("<p>").html(newContent);

All I can think is that the use of "<p> + newContent + </p>" somehow results in newline characters (/n) being inserted as part of the string. The new method does not use string operators, only the <p> element and its html content are created.

Anyway, it’s fixed. If you use the “Read More Right Here” plugin and have updated to Wordpress 2.8, you need to update the plugin to version 1.0.3.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Wordpress 2.8 Breaks RMRH Plugin

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Where You Fit In

I was at one of those lulls where, instead of worrying about the code, I started playing with the layout. My <canvas> element is sitting inside a <div>, whose “positioning” property I changed to absolute. After this edit, the top-left corner of my <canvas> was no longer (0,0). It had changed to the (x,y) coordinate of the <canvas> element on the page.

Of course, the above conclusion was only reached after a bunch of “W.T.F is going on? Why T.F. is everything broken?”. After some other debugging routes, it dawned on me what might have happened. So I set the frame rate to 1, and used Firebug to log the mouseX and mouseY as I moved the mouse around. Sure enough, my positioning of “top: 200; left:200;” was reflected in Firebug’s console output showing coordinates near those values while hovering around the top left corner. Commenting out the style sheet’s absolute positioning returned the console output to the (0,0) area code.

So this is a defect, right? I can’t imagine that’s how it’s supposed to work. Anyway, consider this a heads-up if you decide to embark on a little processing.js play.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Absolute Positioning and the Canvas Element

And awesomely enough, he found the cause of the problem!

The Defect

I was constructing the path to the plugin’s directory using the Wordpress function get_bloginfo, and passing to that function the value 'url'. However, the doc shows that value will result in Wordpress returning the blog home URL, and not the location of the actual core Wordpress files (which is what I needed). To get that path, you have to send in 'wpurl'.

Another Problem

But this fix uncovered another problem. That same path I assumed to be correct is hardcoded in the javascript function used to create the “loading” animated gif that appears while the “read more” content is being pulled. I fixed this issue by having the javascript asynchronously (ajax) ask Wordpress for the correct path (using the now updated function I described in the previous section). But that’s not really how I wanted to do it.

More Ideally

WOW, I FEEL STUPID.. I just typed a whole section here describing how I would rather have the javascript value used as the plugin URL somehow set by Wordpress. I envisioned something similar to wp_enqueue_script that could be used to inject some javascript value to the header along with the linked script sources.

So of course, after I’ve spent loads o’ time trying to find such a solution, figured “maybe next time” and officially updated the plugin, now I find this article (and I quote):

WordPress provides an elegant way to pass parameters to your JavaScript code using wp_localize_script function.

Arg and Doh and all that. Be on the lookout for another release!

~~~~~~~~~~~~~~~~ This has been a woolie posting.

Defect Fix for RMRH Plugin

A couple months back, I came across Dewey (via Waxy, Feb 2, 2009). It offers a new, web-two-ohee method of navigating the music available at Archive.org. I wanted something to listen to at work and so started looking for some familiar names. I eventually stumbled on some Guster shows.

All my knowledge of Guster consists of two songs: Amsterdam and I’ve Got To Be Clean. Amsterdam got decent airplay however long ago that was, but the only reason I noticed that was because of I’ve Got To Be Clean. This was, by far, my favorite song on the first For the Kids CD that came out in 2002. I listened to it a lot. My daughter and I have listened to it a lot. When you listen to that CD, it’s just impossible not to gravitate to that song as the funnest, catchiest tune on there. And so I always had “Guster” stuck in my head as a band I needed to check out. Amsterdam hit my radar later, but it didn’t catch my interest and so Guster slipped away.

Back at my Dewey browsing, I somewhat randomly decided to download a 2007 Boston show. And It Is Awesome. I have listened to it on my crappy laptop speakers at work many, many times. It’s just been addictive.

So of course now I have to get some of their albums. I think once a month (gotta budget!) I’m going to download one. Last week I downloaded Ganging Up On The Sun from Amazon. And It Is Awesome.

Next month will be Keep It Together, mainly because it has both Diane and Come Downstairs And Say Hello, two of my favorites from the show I downloaded. (Here’s a Seeqpod link to Diane, give it a listen. It Is Awesome.).

All that to say, I really can’t believe it’s only now that I’m enjoying their music.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

I Missed the Guster Boat

You ever had a co-worker run to pick up food for the group? Or maybe dad’s got a family to feed and will just go it alone? The modern age affords those individuals the ability to quickly and easily confirm or update orders via the cell phone. Just recently my own dad called to ask what I wanted on the sub he was picking up for me. It’s like the folks you see wandering around Blockbuster, carefully scanning the rows and recounting what’s available to whomever is listening on the other end. But at Blockbuster you’re not doing this while the director is carefully crafting the movie just for you. At Subway you’ve got the sandwich artist to consider, as well as those standing behind you.

So they posted a sign:

It says:

Attention:
Please no use of cell phones while placing and paying for your order…
Thank you, mgmt.

Note that the photo above was taken with my cell phone. But I was not ordering nor was I paying. I was well within my rights.

~~~~~~~~~~~~~~~~ This has been a woolie posting.

No Cells at Subway