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

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

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

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

So let me take you through my links and hopefully summarize what I’ve learned. First though, let me say, I’m assuming that you already know what it means to hook into the Wordpress application flow by adding “actions”. If not, read up.

Inject Your Javascript

The Wordpress Codex for wp_enqueue_script has a list of other javascript libraries included as well as a link to this brief tutorial at Nick Ohrn.

Basically Wordpress provides the wp_register_script method to register a javascript file and its dependencies using a unique string to serve as a “handle”. After you’ve registered them, you can then use that handle when calling wp_enqueue_script. This will spit out the appropriate <script> elements to your document, in their correct order, and (hopefully) avoid any duplicate entries or conflicts with other scripts.

I’ve added both the wp_register_script and the wp_enqueue_script calls to the method I’ve added as part of Wordpress 'init' (i.e. add_action('init', myLoadJsMethod)). I think you can also just use wp_enqueue_script directly, without first registering, but it seems like a good idea to do both. For example, if things change, you can keep the registration in 'init' but then move the call to enqueue somewhere else, like the 'template_redirect'.

What’s important to know, though, is that you cannot call wp_enqueue_script as part of the 'wp_head' action. At that point, it’s too late. This was confusing to me because I was originally just echoing out the path to my script within the function I set for 'wp_head', and it worked fine. But to work within the Wordpress world, it has to happen before the header action, which means 'init' or 'template_redirect' (or possibly others, not sure).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function my_init_method()
{
    // include the js if not a single post page
    if(!is_single()) 
    {
       wp_register_script(
       		'my_handle', 
                my_get_base_path() . "js/my_javascript.js",
                array('jquery')); // my_javascript.js depends on jQuery
 
       wp_enqueue_script('my_handle');            
    }    
}
 
function my_get_base_path()
{
    return get_bloginfo('url') . "/" . PLUGINDIR . "/" . plugin_basename("read-more-right-here/");
}
 
 
add_action('init', my_init_method);

Notice that at line #11 I only needed to use the string ‘jquery’ to register my script as being dependent on it. This is because ‘jquery’ is included with Wordpress and has already been registered with that handle.

Making jQuery Work

Let’s test this out with a simple call to alert in our javascript. Following good practice, we’ll make sure to do this after our page’s DOM is locked and loaded.

1
2
3
4

$('document').ready(function() 
{	
	alert("ready");
});

Ahh Crap. Firebug is telling me that $ is not a function. A little google later and I’m at this thread, with the answer I’m seeking nine messages in, right here.

jQuery in WordPress uses the noConflict option to prevent issues with
Prototype…….Check online for jQuery.noConflict()

It’s always something. Alright, so what do the jQuery docs say?

By default, jQuery uses “$” as a shortcut for “jQuery”. However, you can override that default by calling jQuery.noConflict() at any point after jQuery and the other library have both loaded.

It goes on to say that you can also just set something else as the new “$” by setting a new variable to the result of jQuery.noConflict().

So the above javascript is changed to this:

1
2
3
4
5
6

var $j = jQuery.noConflict();
 
$j('document').ready(function() 
{	
	alert("ready");
});

And it works!

Summation (Because I Type Too Much)

• Use wp_register_script and wp_enqueue_script to load your javascript
• Do not use wp_register_script and wp_enqueue_script as part of the wp_head hook, it must happen earlier (e.g. init, template_redirect)
• jQuery in Wordpress uses “no conflict” mode, see here for workarounds

If I’ve misstated or completly misunderstood anything above, please feel free to correct me in the comments.

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

Wordpress, jQuery and ‘noConflict’

But who cares. It’s just plain funny. I mean, I’ve read the two front page examples (very bottom of the home page) at least twenty times and it still manages to entertain.

COUNT!!1

HAI
CAN HAS STDIO?
I HAS A VAR
IM IN YR LOOP
	UP VAR!!1
	VISIBLE VAR
	IZ VAR BIGGER THAN 10? KTHXBYE
IM OUTTA YR LOOP
KTHXBYE

GeSHi (used by WP-Syntax) needs to get up in that piece so my blog can have syntactically correct formatting of LOLCode.

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

LOLCode Has Me LOL’ing OMG DOOD

There’s a small error I didn’t notice (but should have). It had me stumped for a bit but, as is most always the case, the solution was painfully obvious.

I’ve got the video running and am coding along as the guy speaks. Pretty early on, when setting CodeIgniter to automatically connect to a particular database, you’re instructed to open system/application/config/autoload.php file to modify the $autoload['core'] array to include the database “core library”.

/*
| -------------------------------------------------------------------
|  Auto-load Core Libraries
| -------------------------------------------------------------------
|
| DEPRECATED:  Use $autoload['libraries'] above instead.
|
*/
$autoload['core'] = array('database');

A little later, after creating a couple of database entries and setting the page to display their values, I was greeted with the following error:

A PHP Error was encountered

Severity: Notice

Message: Undefined property: Blog::$db

Filename: controllers/blog.php

Line Number: 16

The call to $this->db->get failed because the $db member of Blog (which extends CodeIngiter’s Controller class) didn’t exist.

You know why? Did you actually read the comments in the php code above? I didn’t. I was quickly moving around and typing while the tutorial played. If you didn’t notice it the first time, reread them now.

See it? Nice and big and all-caps: DEPRECATED. “Use $autoload['libraries'] above instead.” Which I did and then it worked.

Lesson learned, right? Always read the comments.

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

Heads-Up Regarding the CodeIgniter Video Tutorial

Three or four years ago I came across BufferedReader and, whatdya know, its got the function readLine. Of course, each time I start anew, I forget the lessons I’ve previously learned. Then, when the code’s starting to look rough, I remember “Oh yeah, there’s a really easy way to do this.” So I find the old code and voilà.

I realize this is simple stuff. It’s just one of those things that’s worth putting out there for the occasional search result that might help someone out .

/* Note that I've left out exception handling. */
 
ArrayList<String> lines = new ArrayList<String>();
File file = new File("C:\path\to\file.txt");
 
BufferedReader reader = new BufferedReader(new FileReader(file));
 
String line;
while((line = bufferedReader.readLine()) != null)
     lines.add(line);			
 
bufferedReader.close();

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

Reading Lines Using Java

The original author, Joe Hewitt, open sourced Firebug sometime last year and back in mid-July, John Resig (a well-known javascript guru and Mozilla employee) announced that he was taking over its development. Today he laid out his initial plans:

• Improve the knowledge of Firebug that we have
• Build a runnable set of test cases to prevent regressions
• Track the state of Firebug performance
• Audit and Improve

I can’t wait to see how Firebug evolves now that Resig has reign.

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

Firebug’s Future

The Setup

The overall gist of the article is the promotion of good OO design. The focus is interface design, and the author begins with an example of acceptable code that could use a little redesign.

I start with a simple implementation of a PolarArray class that meets the requirements previously specified. I fixed the size of the globe to 8×8 (via const variables); see Listing One.

Okay, “Listing One”. I flip the page and there it is, “Listing One”, which is a complete implementation for his example class (plus six lines of example calls). This listing takes up more than half of the page. I am fully aware that this is the stepping stone towards greater understanding. I can see that the author has laid out some perfectly plausible code, in its entirety, as the starting point of a lesson.

Then, predictably, refinements are described. (By the way, all bold text in all of the following quotes are mine).

Consider how you might use the various features of object-oriented design to better differentiate the two concepts in play. What if you refactor the index-translation portion of the class so that it is publicly available? You could force users to understand coordinate system and coordinates as distinct concepts from value lookup.

Listing Two (available online; see “Resource Center,” page 5) certainly differentiates the value lookup from the coordinate system.

Okay, “Listing Two” isn’t included with the article. It appears that the author thought it would be included, because he doesn’t even really describe what he’s done. But whatever. I know that there’s only so much code they’re going to put in a print magazine. The author probably has a few more iterations of improvement to make anyway. And I am curious what the final result will be.

Let’s back up a step and try a different approach….If you add a few enums to the code, the implementation might look like Listing Three (available online). Now we’re getting somewhere!

What?! Alright, there’s no “Listing Three” code either. And seriously, is it just me, or does it seem like the author assumed it would be included with the article? Did the editors at Dobbs do any…editing work on this?

Let’s take this a step further….Similarly, you will create a Pole base class, from which we will derive NorthPole and SouthPole; see Listing Four (available online).

Now we’re really making progress! Looking at the example client code, you see that the distinction between the three concepts—value lookup, coordinate system, and coordinate—is clearly differentiated.

Sweet. What I like to do while reading Dr. Dobbs on the can is to also bring the laptop in with me just in case there’s some code I want to view.

Pay particular attention to the example client code at the bottom of the listing; notice how it is both readable and clearly differentiates the three concepts into separate tokens; see Listing Five (available online).

That’s it. The rest of the show is mostly a recap. Which is what I’d like to do as well.

The Punchline

There were five listings of code, each one serving as a point of improvement against its previous. The only code listing included with this article is the first one, the “wrong” one. It occupies more than half (literally) of the page. It didn’t have to be that way. It’s an interface that’s being described, right? So why not just print the function signatures? We don’t need no stinkin’ function bodies. And example client code? I need to see examples of function calls that have no parameters? With all the space used for that first listing, there’s more that could have been done.

The Kicker

Did you follow my link to the story at their website? You might have already noticed what I find to be the best part of all of this. I expected to see instances of “(available online)” replaced with the actual listings. They’re not. “Listing Two” is followed by “(available online at www.ddj.com/code/)”. The rest just say “(available online)”. That’s it. Not even a friggin’ link.

The magazine’s “Resource Center on page 5″ is a box that mentions “www.ddj.com”. The homepage. I guess they figure you can track down the specific article and from there find the code.

When you have found the article at their website, you are rewarded with “ddr.com/code“? What’s there? A list of three links, each a publications you might have read and for which you might be searching for code.

It’s all so wrong in so many ways. But I feel cleansed having now ranted.

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

Available Online: When Print Has No Space for Content

When it comes to software, the same rule applies. If you aren’t building, you aren’t learning. Rather than agonizing over whether you’re building the right thing, just build it. And if that one doesn’t work, keep building until you get one that does.

This is advice that I sincerely need to start following. I tend to have the debilitating problem of starting to work on an idea but never completing it because of constant tweaks and muddles and experiments and refinements ad nauseam. With an approach like that, your results are always incomplete. And when you feel like you can never complete something, you tend to move on to something else (i.e. quit).

When I used to create and record music, it was the same thing. The difference, however, was that there was always something to show for the effort, even if I wasn’t totally satisfied. No matter my perceived flaws, there was still a piece of recorded music I could share with others. But when the code isn’t finished, or the design still “in-flux”, it’s pretty difficult to call it a day and let the beast loose on the world.

I hereby resolve to…oh who am I kidding.

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

Do More to Do Better

It’s more than likely due to mod_rewrite not being allowed to do its job. If you don’t know anything about mod_rewrite, here is a nice howto. Also, of course, is Apache’s own documentation.

In a nutshell, the redirects created by Wordpress in your .htaccess need the authority to send a page request elsewheres. Open httpd.conf and make sure that you have AllowOverride set to All.

e.g.


Options Indexes FollowSymlinks MultiViews
AllowOverride All
Order allow,deny
Allow from all

I don’t mean in the default “<Directory />” section of httpd.conf, I mean in the actual domain. For example, you’re testing Wordpress and you’ve got something like:

    Alias /wp "F:/webSites/wordpress"

Make sure you also have:


<Directory "F:/webSites/wordpress">
    Options Indexes FollowSymlinks MultiViews
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Of course, mine was set to “None” instead of “All”.

Note also that you will obviously need to tell Apache to load that module by making sure the following line is uncommented (with ‘#’ characters denoting line comments):

    LoadModule rewrite_module modules/mod_rewrite.so

I spent way too much time trying to figure out what was wrong. It’s almost always the case that the longer you spend trying to debug a specific problem, the more likely it is that the solution is dead simple.

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

Friendly Reminder – mod_rewrite needs AllowOverride All