The construction metaphor is widespread in software and IT, and there are several reasons why:

• It sounds like you are creating a thing which can be assessed on its’ own in absolute terms – detached from the social reality of its’ inhabitants or users.
• It sounds like you are doing something, which will eventually be finished.
• It makes software engineers and architects seem more like “real” engineers and architects.

All of this sounds very serious and reassuring to clients.

But the worst threat to problem solving is misunderstanding the nature of the problem.
And software is nothing like buildings!

• Software is social. Content and data is created by people. Business rules are described and used by people and reflect (and change with) the organization in which they are embedded.
• Software is never finished. There’s always a next version, a “phase two”, a redesign, etc. somewhere on the horizon. And if you’re lucky enough to work on agile projects, this flow of re-alignments is even more accellerated.
• Job titles in the software industry sometimes seem like they’re meant solely to describe our work in terms our grandmothers can understand. In reality, the titles don’t say much about the nature of the jobs.

Software gardener

Today I stumbled on this great collection of some of the many, many software development laws.
The author of the post notes that: “some of the laws come from the world of biology — they also appear in some lists of software laws, and I think they still apply.”
This observation brilliantly emphasizes why the gardening metaphor (suggested by Andrew Hunt and David Thomas ) suits the art of software development much better than the construction metaphor.

Gardening is about thinking ahead, planning, then waiting patiently and reacting to the ways of nature, nursing, killing bugs and weeds – and season after season learning from your experience.

Good software is created in the same way: Pre-planning using as many skills as possible, then trying out concepts and ideas in real life, nursing and improving what works and getting rid of what doesn’t – then going back and doing it again and again.
Good programmers – like good gardeners – know when to immerse themselves in little things and when to take a step back and assess the grand perspective. They understand the intimate connection between the singular detail and the ecosystem.

We already talk about “growing businesses”, so the concept of growing software shouldn’t be hard to explain to clients or investors.

Btw.: As with any interesting topic, Jeff Atwood has written a quality piece about this over at codinghorror.com.

Both of us agreed that extensive use of this statement represents a sort of code-smell – that it’s probably a sign that your Javascript needs better structure – and that this, in turn, will probably lead to bad performance in one way or another.

But that set aside, how about the statement itself?
Does it incur a performance hit?

Here’s the code I used for testing:

var no_of_bindings = 100;
 
function bind(){
    for (var i = no_of_bindings - 1; i >= 0; i--){
        $(document).ready(function(){ });
    };
};
 
console.time("bindings");
bind();
console.timeEnd("bindings");

For IE, I used Firebug Lite, which supports the console.time method.
All times are measured in milliseconds.

And here are the results:

As it turns out, you need to do an absurd amount of bindings before the performance overhead is worth caring about – even for IE.
It might be different for older browsers, of course, but I didn’t feel like bothering with measuring those, since the pattern is probably equal + you have loads of other things dragging you down.

So in conclusion: DOM ready bindings are almost free to do, but you should of course still be conscious about why you are using them.

<li data-bind="css: {'active': visible()}"></li>

But if you use XSLT to render your HTML, it may fail because the curly-braces may not be supported in attributes.

To make this work, you need to do two things:

1. Convert the attribute:

   data-bind="..."

   into an

   <xsl:attribute name="data-bind">

   Like this:

   <li>
    <xsl:attribute name="data-bind">
     css: {'active': visible()}
    </xsl:attribute>
   </li>

2. Do a search and replace exchanging the curly braces with XML-safe entities:

   	"{" to "{"
   	"}" to "&#125"

   So the final XSLT should look like this:

   <li>
    <xsl:attribute name="data-bind">
     css: &#125'active': visible()&#125
    </xsl:attribute>
   </li>

    

Ugly, I know! But now it will work.

I do it all the time! That’s why I created DropCheck.

DropCheck is a web app that turns lines in a .txt file into checkable lines in a nice web app interface.

It’s tailored specifically for grocery shopping, as this is a common use case for me.
You have the ability to tick off each item as it goes in your shopping cart (“Yes”).
Or you can mark it as sold out (“No”).

At the bottom you can move the checked items to the bottom of the list, so you have them out of sight.
The web app also remembers the state of the list even though you close it.
To re-connect to the Dropbox .txt-file you just click the “Reset to Dropbox file” link.

Installation:

To install, unzip the DropCheck folder into your Dropbox public folder, then get the public link of the file called dropcheck.htm:

Visit the public URL in Safari on your iPhone and save it to your homescreen:

Now, when you visit the DropCheck app, you’ll see the contents of the dropcheck-list.txt file turned into a checkable list.

Enjoy!

UPDATE for Windows users:

Kasper Hyllested pointed out to me, that there was an issue with international characters when saving the .txt-file from Notepad on Windows.

To fix this, you must force notepad to save using UTF-8 encoding of characters (instead of ANSI):

MyArray.length = 0;

(Just a reminder to myself, since I’ve forgotten about this a few times …)

Countless hours have been lost creating rounded corners, dropshadows and gradient backgrounds for the web.
With Internet Explorer still lacking support for CSS3, until recently it seemed like we would have to keep doing tiny graphic sprites (or implementing dirty javascripts) in order to accomodate the demand for such UI niceness.

Enter: http://css3pie.com/
PIE is a .htc CSS behaviour script that enables support for dropshadows, rounded corners and background gradient CSS3 properties in Internet Explorer – all the way back to IE6!

Of course, I couldn’t wait to try it out.
And it didn’t work.
Bummer …

Fortunately, I found out why:
It only works on positioned elements.

You must specify “position: relative;” or “position: absolute;” on the element that calls the .htc behaviour, and then it works!

Amazing script!
CSS3 future is here now.
Thank you so much, Jason Johnston of 327 Creative LLC, for sharing this little goodie with the world!

The good people at Microsoft have introduced the Browser Choice splash screen on new Windows installations.
I thought I’d try it out by re-installing the Windows XP that runs in VMWare on my Macbook.

After running the install and the massive pile of updates following it, I rebootet and was greeted by the Browser Choice introduction.
I then clicked OK to confirm that I was connected to the Internet and ready to make my choice …

This is what happened:

Time to pick a browser. Which one should I choose ... hmmmm ...

What a funny coincidence!
It appears that the freshly updated IE has opened it’s configuration wizard right on top of the Browser Choice window …

(-:

Variables, nested selectors, abstractions from vendor-specific properties etc. etc. etc. Good stuff!

Installation and usage couldn’t be simpler! (Really. I don’t see how it could!)
You place the library folder in whatever folder holds you CSS-files. Then you copy-paste the .htaccess-file that redirects every request for your CSS-files to the library. Scaffold then reads through your CSS and interprets whatever tricks you’ve written and serves up nicely formatted (or minifed, if you prefer) W3C-compliant CSS.

”What’s this good for?”, you say?

Well. Consider this piece of regular CSS:

form#searchbox #arrival_date,
form#searchbox #departure_date,
form#searchbox #persons,
form#searchbox #location
{
font-size: 18px;
color: white;
margin-bottom: 20px;
}
form#searchbox #arrival_date label,
form#searchbox #departure_date label,
form#searchbox #persons label,
form#searchbox #location label
{
width: 100px;
display: inline-block;
}
form#searchbox #arrival_date input,
form#searchbox #departure_date input,
form#searchbox #persons input,
form#searchbox #location input
{
font-size: 18px;
width: 180px;
height: 40px;
padding-left: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
behavior: url("boxsizing.htc");
}
form#searchbox #arrival_date .popupcalendar_icon,
form#searchbox  #departure_date .popupcalendar_icon,
form#searchbox  #persons .popupcalendar_icon,
form#searchbox  #location .popupcalendar_icon
{
background: url(./graphics/images/sprites.png) no-repeat 0 0;
height: 295px;
width: 314px;
display: block;
text-indent: -9999px;
overflow: hidden;
background-position: -271px -20px;
height: 39px;
width: 31px;
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
margin: 3px 0px 0px 10px;
}

Even though it’s nicely ordered and very readable, this code is still quite hard to understand at first look. You can’t just read what’s going on. What’s related to what? You need to look back and forth a few times to see this.
This makes it bad code!
Good code is always easy to read and understand.

Now look at the same code in Scaffold syntax:

@constants {
   labelTextColor: white;
   gutter: 10px;
}
 
form#searchbox {
 
   #arrival_date, #departure_date, #persons, #location  {
      font-size: 18px;
      color: !labelTextColor;
      margin-bottom: #[2 * !gutter]px;
 
      label {
         width: #[10 * !gutter]px;
         +inline-block();
      }
 
      input {
         font-size: 18px;
         width: 180px;
         height: #[4 * !gutter]px;
         padding-left: #[1 * !gutter]px;
         +border-box();
      }
 
      .popupcalendar_icon {
         image-replace: url('./graphics/images/sprites.png');
         background-position: -271px -20px;
         height:39px;
         width: 31px;
         +inline-block();
         margin: 3px 0px 0px 10px;
      }
   }
}

The nesting immedietaly makes the code easy to read!
The selectors come in a logical order. The code is scannable, and in my opinion this is quite a revolution as far as CSS goes!

And it gets even better!

As you may have noticed, my second code example is full of non-CSS properties.
These are Scaffold-specific functions, constants and ”mixins”.

For example: A standard gutter width of 10px is defined as a constant, then used throughout the style declarations by reference.
No more search-and-replace for simple color changes!
This feature alone will save me countless hours.

Then there’s stuff like ”+inline-block();” or ”+border-box();”. These are ”mixins” that basically call a set of CSS properties that take care of crossbrowser compatibility. Scaffold serves up vendor-specific properties and even a selection of IE-behaviors, filters and expressions to get the desired effect working all around. Now we have a one line trick that’ll fix box model-quirks or get inline-blocks behave like expected. (Or rotation, shadows and other CSS3-goodies for that matter). This means more time for coffee, which is nice!

Finally we have functions like ”image-replace: url(‘./graphics/images/sprites.png’);”
This line takes care of everything regarding CSS image replacement. It even automatically sets the correct height and width fitting the specified image file.

The library has tons of useful features and some pretty advanced ones too. Everything is cached, so it’s just as fast as regular CSS.

So if you’re lucky enough to have your CSS-files served from an Apache server with PHP enabled, then by all means, do not miss out on Scaffold CSS!

Today’s library is:
SLIR

SLIR – or ”Smart Lencioni Image Resizer” – was developed by Joe Lencioni.
It does on-the-fly scaling and cropping of images.

The benefit is that you can change your image sizes dynamically on request-time.
If your page layout changes, you can just request images with new sizes that fit.

Under the hood it’s a clever PHP script that returns the content of an image file. Requests are handled by a .htaccess-file that disguises the underlying PHP and presents it to the public as an actual image file.

This means you activate the resizer just by requesting a url with some resize parameters plus the path to the original image file.

Example:

Original image:

<img src="http://www.jakobloekkemadsen.com/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

Scaled to fit 100px width:

<img src="http://www.jakobloekkemadsen.com/slir/w100/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

Scaled to fit 25px width and cropped to square:

<img src="http://www.jakobloekkemadsen.com/slir/w25-c1:1/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" alt="" />

”What about performance?”, I hear you ask. “Won’t the server choke on having to process all image requests?”

No, it won’t. (-:
SLIR caches the image the first time it’s requested, so all subsequent requests are served just as fast as any other image file on the server. The redirect is handled by an alias to the cachefile. Only if no matching cache file exists, or if it’s too old, or if the original has changed, then SLIR is invoked and a new image is generated and cached.

”Ok. But what about security, then?”

In theory this script enables a hacker to flood your server with files just by changing the url and requesting all imaginable combinations of width and height. This issue has been discussed in the comments on http://shiftingpixel.com/2008/03/03/smart-image-resizer/ and the current version of the script can be made to restrict access to any other combinations than the ones you specify.

Personally I haven’t found an easier, more futureproof and flexible solution for handling image scaling.
And it’s free!

Simply put: I love this script!

Stay tuned for part two of “Useful PHP libraries”. Coming soon …