Archive for December, 2009

Friction feedback loop

Your organization is highly focused on time-to-market. Burn rate is high and revenue is low. Proposals to spend time optimizing development processes are entertained on principle and swiftly discarded out-of-hand; every ounce of developer attention must be devoted directly to product development.

Yet developers are spending increasingly large portions of their time on tasks not directly related to product development. Hand-copying file revisions across release branches, rewriting functionality and interfaces to match violently flagellating specs, while still turning out heaps of code optimized for schedule rather than maintainability and reuse.

Heaps of hacky code makes for heaps of bugs. Specs change again and bugs continue to roll in. The workload continues to increase as time ticks away, the project’s air supply growing heavy and toxic. Management caves to pressure, granting a milestone slip and the team has a momentary breath of fresh air. The loop continues, only now behind schedule.

Development progress slips into the red as each day more bugs are reported than fixed. The release date approaches on the long crunch toward release. Eyes go bloodshot as nerves begin to fray. Weekend and vacation work become the norm. Then the big day.

Release! To a cheerful management with plenty of rewards and good-on-yas with cherries on top and glimpses of grand rewrites in the sky. Just another speed bump. Back to the grindstone as customers do their own QA, reporting blazing hot ultra-mega-high priority bugs with varying degrees of rage, elation and flippancy.

Your product is cool.
Your product is hot.
Your product sucks.
Your product is moot.
Your product is a dream come true.

But does your product make money?

If not, you’d better cancel that second honeymoon and gear up for what can only be described as war. Man Vs. Machine, developers hack through twisted wrecks of code leaning heavy on what-were-supposed-to-be-temporary structures that ought to be condemned. Days bleed into weeks and all semblance of a unified product direction is drowned by the cries of screaming souls.

What if we could do this better?

Do we need to release a fully-configurable decision making platform in order to start generating revenue for our organization? Is there something that we could create today and ship tomorrow that would generate more revenue from our customers than the 2 days it cost us to produce? What kind of feedback would we get from customers? Bug reports or feature requests? What would a grand rewrite cost at this stage? A day? How about a spec change? Hours? Could we turn that into minutes?

What can we do to front-load this most critical aspect of any software development project?

This makes me less afraid to swim in the ocean.

A connection attempt failed because the connected party did not (trying to connect via tcp://localhost:3306)

PHP 5.3 on Window Vista

Comment out this line from your hosts file (C:\Windows\System32\drivers\etc\hosts)

::1             localhost
#::1             localhost

Apparently MySQL won’t support IPv6 til MySQL 6.0

Deciduous software

In a startup environment, hypotheses are abundant and useless until they are vetted in reality. Rapid prototyping can be a very valuable tool in determining the potential utility of a new piece of software for less than the sticker price of a full-scale assault.

ButYOU MUST THROW AWAY THE PROTOTYPE.

That’s right, YOU. Fools will see your solution and mistake it for their problem. It is your job to remove your client’s head from the solution and return them to the domain of the problem to explain that your prototype is one solution, and that “you’re almost there, all you need is social networking and ecommerce” is a pipe dream. If your prototype didn’t make more money for your client (ie business) than it cost to produce, then it needs to be culled. Unplug that sucker and sweep it under the rug.

Like the leaves of autumn, let obsolete components of your software fall gently to rest.

Sexy overlaps in CSS (signalong)

Serving lots of images that weigh in at less than a hundred bytes is a great way to bog down your front page. I’ve seen a lot of these sexy overlaps around and most people seem to be using images which is a terrible waste of internets. I present to you a more bananular solution using CSS borders.

Please sing along.

Ring Ring Ring Ring Ring Ring Ring

Banana phone!

Ring Ring Ring Ring Ring Ring Ring

Banana phoooooooone!

I’ve got this

Feeeeeling!

so

Appeeealing!

for us to get together and sing.

Sing!

Ring Ring Ring Ring Ring Ring Ring

Banana phone!

Ding Dong Ding Dong Ding Dong Ding

Donana phone!

It grows in bunches, I’ve got my hunches, It’s the best! Beats the rest!

Cellular

Modular

Interactivodular

Ring Ring Ring Ring Ring Ring Ring

Banana phone!

Ping Pong Ping Pong Ping Pong Ping

Panana phone!

It’s no baloney, it ain’t a phony, My cellular

Bananular phone!

Now get back to work.

<div class="bananular">
<div class="mod0 mod">
    <p>Ring Ring Ring Ring Ring Ring Ring</p>
    <h2>Banana phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod1 mod">
    <p>Ring Ring Ring Ring Ring Ring Ring</p>
    <h2>Banana phoooooooone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod2b mod">
    <p>I've got this </p>
    <h2>Feeeeeling!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod2c mod">
    <p>so</p>
    <h2>Appeeealing!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod2 mod">
    <p>Ive got this feeling, so appealing, for us to get together and sing.</p>
    <h2>Sing!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod3 mod">
    <p>Ring Ring Ring Ring Ring Ring Ring</p>
    <h2>Banana phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod4 mod">
    <p>Ding Dong Ding Dong Ding Dong Ding</p>
    <h2>Donana phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod5 mod">
    <p>It grows in bunches, Ive got my hunches, Its the best! Beats the rest!</p>
    <div class='feature'><h2>Cellular</h2><div class='overlap'><div></div></div></div>
    <div class='feature'><h2>Modular</h2><div class='overlap'><div></div></div></div>
    <div class='feature'><h2>Interactivodular</h2><div class='overlap'><div></div></div></div>
</div>
 
<div class="mod6 mod">
    <p>Ring Ring Ring Ring Ring Ring Ring</p>
    <h2>Banana phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod7 mod">
    <p>Ping Pong Ping Pong Ping Pong Ping</p>
    <h2>Panana phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
<div class="mod8 mod">
    <p>Its no baloney, it aint a phony, My cellular</p>
    <h2>Bananular phone!</h2>
    <div class='overlap'><div></div></div>
</div>
 
</div>
<style>
.bananular .overlap { 
    position: absolute; 
    height: 0; width: 405px; 
    border-top:   10px solid #777;
    border-left:  10px solid transparent; 
    border-right: 10px solid transparent; 
}
.bananular .overlap div { 
    height: 10px; 
    margin-top: -10px; 
    background: #fff; 
}
 
.bananular { width: 425px; margin: 10px auto; background: transparent; }
.bananular h2 { padding: 30px 0; background: #ccc; font-size: 48px; text-align: center; color: #000; font-weight: bold; }
.bananular p, .bananular ul { margin: 0 10px; padding: 10px 20px; background: #fff; font-size: 12px; color: #999; }
.bananular .mod { clear: left; }
.bananular .mod1 .overlap { position: static; font-size: 36px; }
.bananular .mod1 .overlap div { display: none; }
.bananular .mod1 h2 { font-size: 32px; }
.bananular .mod2 h2 { background: #FF007F; font-size:100px; }
.bananular .mod2 .overlap { border-top-color: #78003C; }
.bananular .mod2b h2 { background: #FFAA00; }
.bananular .mod2b .overlap { border-top-color: #6E4900; }
.bananular .mod2c h2 { background: #00AAFF; }
.bananular .mod2c .overlap { border-top-color: #005F8E; }
.bananular .mod3 h2 { background: #FFFF4C; }
.bananular .mod3 .overlap { border-top-color: #929300; }
.bananular .mod3 .overlap div { height: 7px; margin-top: -7px; }
.bananular .mod4 { margin: 0 10px; background: #fff; }
.bananular .mod4 p { margin: 0; }
.bananular .mod4 h2 { padding: 10px 0; font-size: 32px; background: #ddd; margin: 0 20px; }
.bananular .mod4 .overlap { width: 0; border-left-width: 355px; border-right-width: 10px; border-top: 2px solid #333; margin: 0 0 0 20px; }
.bananular .mod5 { background: #fff; margin: 0 10px; float: left; padding-bottom: 10px; width: 405px; }
.bananular .mod5 p { margin: 0; }
.bananular .mod5 .feature { float: left; margin: 0 0 0 19px; }
.bananular .mod5 .feature h2 { width: 110px; font-size: 12px; padding: 10px 0; background: #ddd; }
.bananular .mod5 .feature .overlap { width: 90px; font-size: 12px; border-left-width: 55px; border-right-width: 55px; border-top: 2px solid #333; width: 0; }
.bananular .mod6 h2 { border-top: 2px solid #ddd; border-bottom: 2px solid #bbb }
.bananular .mod7 h2 { border: 4px solid #fff; }
.bananular .mod8 { margin-left: -20px; width: 465px; }
.bananular .mod8 p { margin: 0 30px; }
.bananular .mod8 .overlap { border-width: 30px; border-top-width: 10px; }
.bananular .mod8 .overlap div { height: 10px; margin-top: -10px; }
</style>

Prototype vs jQuery

I chose jQuery over Prototype as my framework of choice a long time ago and have found little reason to look back. Today I started working on a project that uses Prototype. This is my first time in a long time using Prototype. I just spent the last hour translating this 3-liner from jQuery to Prototype. I’ve written procedures very similar to this at least a dozen times for navigation lists on various other projects, so the original 3-liner literally took less than 20 seconds to write. If that.

Here it is in jQuery

$('#twelvesteps ul.nav a').click(function(){
    $(this).addClass('active').siblings().removeClass('active');
});

And here it is in Prototype

$$("#twelvesteps ul.nav a").each(function(el, index){
    el.observe('click',function(e){
        var li = el.up();
        li.addClassName('active');
        li.siblings().each(function(el2, index){
            el2.removeClassName('active');
        });
    });
});

And you know what? It’s slow. It takes like a hundred milliseconds to switch the classes. WTF.