Arabesque Coding

The first technique is what I call arabesque coding. “Arabesque” is an oriental artful painting style which uses ornaments to beautify the main theme of the painting. Consequently, arabesque coding is the activity of styling, formatting, documenting or in some other form enhancing the code you are currently working on.

It’s important to notice at this point that arabesque coding mode is not intended to be applied all the time or on all your working items. The real beauty and joy of arabesque code is that it’s embedded in an environment – a frame – of “normal, everyday” code. It’s like a little gimmick in your code-base.

Performing arabesque coding is fun and can add some joy to tasks you normally do by routine. Interestingly, arabesque coding fits quite well on even more complex coding or design scenarios because it stimulates your creativity. I prefer arabesque coding in pair programming sessions but equally do it on my own as well. Most often I start to pick a little theme I’m interested in.

Here’s a little example of arabesque coding. A few months ago @lennybacon came over to Munich to visit me. We had quite a lot of things we wanted to achieve within just a weekend. Discussing architecture, designing solutions and of course coding them into what makes all this effort worth: executable software solving the domain problem.

One of our tasks was to develop a prototypical tagging solution for communityblendr, a project @lennybacon is very enthusiastic in. The “tagger” should be able to tag “any” object with keywords. So we did a quick design session (using just code) and went over to implement it after verifying that our approach is doable.

It was a sunny afternoon and we just returned back from a short lunch. At lunch, we were talking about the “bavarian” style of living. While we were coding some tests for tagger, we decided to switch the syntax of our testing class to “boarisch” (which means bavarian, by the way).

Holy cow, that was fun! We laughed and joked all the way while we were developing the tagging library.

The morale here is not to make fun of engineering, but keep engineering enjoyable. Apart of the fact that every piece of software which actually solves a problem is enjoyable to us passionate developers, we can bring joy on the path towards the solution as well.

Easter Egg

Another recreational, enjoyable and very productive recipe is to build an easter egg into software. I’m quite sure that (almost) every developer knows what an easter egg is and might have seen an easter egg as well. The more I’m quite surprised how rarely easter eggs are being developed in our professional life.

Let me get one thing very straight: I’m not talking about spending valuable time and money to create useless, yet funny but hidden functionality. I’m talking about easter eggs. Easter eggs are little programs inside programs – at least in enterprise / consumer software. Very few developers actually know that the primary intent of an easter egg is to make development a little more enjoyable.

I frequently write easter eggs. I’m not writing them with every project I’m working on, yet I’m quite used to write them, to be honest. My easter eggs range from “very tiny” things up to “considerable work”: ascii art banner, puzzle, calculator, wheel of fortune, clock and “weird translations”.

Interestingly, I often find people having a very wrong sense of what easter eggs are. Mostly, they’re undervalued as “just for fun” or plain “waste of time”. That’s simply wrong. Writing an easter egg is a recreational and relaxing task for developers. Just to recharge batteries. To shortly swift away from the big project to a very small and easy task.

Especially senior developers recognize the great power of easter eggs. Easter eggs help developers to gain a little distance from the daily challenges. Not as a door to escape from trouble or stress, but rather as a tool in order to refocus for the big project and big challenges. It’s like having a break and a little walk in the park. Hence, it’s not very important to have an easter egg done or published. The important thing with easter eggs is that you just have an easter egg to chew on.

That’s why I certainly won’t tell you in what (partly even publicly available) software you can find my easter eggs :-). Nonetheless, I want to conclude my post with a little “real life example”.

Not very long ago, I worked on a web project with heavy javascript usage. We had to implement quite complex UI logic in order to create a compelling user experience. While I was coding the javascript bits with another (senior) engineer, we fiddled around with Firebug and did some JS-debugging.

At that time, we both were talking about the “good ol’ times” where we both used to hang around on Quake Servers and performing some DMs in Q3DM17 and Q3DM6 maps. It was funny to see that we both had the “same habits”: Using rocket launcher for the tricky moves and the famous rail for precise frags. We literally heard the dark dry-witted comments in out heads again: “Excellent!”.

An easter egg was born. We decided to write a little “shell” into our javascript UI code which actually looks like the famous Q3 shell. Alongside, we agreed to enrich our logging with some bold comments by Hunter, Major and co. Here’s the very first code bits of “q3sh” (Quake 3 Shell), which we integrated into the project (and never took out up until today):

var jLog = (function($){
  var log = {
    info: function(s){
      s = s || "";
      this.isReady && this.write(s);
      this.isReady || this.messageQueue.push(s);
      return true;
    },

    log: function(s){
      s = s || "";
      this.isReady && this.write(s);
      this.isReady || this.messageQueue.push(s);
      return true;
    },

    addFilter: function(id, condition){
      this.filters = this.filters || {};
      this.filters[id] = condition;
    },

    removeFilter: function(id){
      this.filters = this.filters || {};
      delete this.filters[id];
    },

    toggleConsole: function(){
      $("#_j_").slideToggle('fast');
    },

    boot: function(){
      this.isReady = true;
      for(var index in this.messageQueue)
        this.log(this.messageQueue[index]);

      this.messageQueue = [];
    },

    write: function(s){
      this.filters = this.filters || {};

      var doWrite = true;
      for (var id in this.filters){
        doWrite = doWrite && this.filters[id](s);
      }

      doWrite && $("#_j_ ._sh_").prepend('> ' + s + '<br/>');
    },

    isReady:false,
    messageQueue:[],
    filters:[]

    /*
    handler:null,
    sin:[],
    cos:[],
    rx:0,
    ry:0,
    */
  };

  $(function(){
    $("body").append("<canvas id='ca' width='80' height='80' style='display:none;'></canvas>");

    var o=$('#ca')[0];
    var c=o.getContext('2d');
    var x,y,mp=2*Math.PI,m=[
    // 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //01
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //02
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //03
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //04
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //05
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //06
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //07
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //08
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //09
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //10
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //11
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //12
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //13
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //14
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //15
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //16
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //17
      [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0],  //18
      [0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],  //19
      [0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],  //20
      [0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],  //21
      [0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0],  //22
      [0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0],  //23
      [0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,1,1,1,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0],  //24
      [0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,1,1,1,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0],  //25
      [0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,1,1,1,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0],  //26
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //27
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //28
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //29
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //30
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //31
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //32
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //33
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //34
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //35
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //36
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //37
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //38
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //39
      [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],  //40
    ];

    var dp=function(x,y,r,co,a,rx,ry) {
      if(m[ry][rx]==1) {
        c.beginPath();
        c.arc(x,y,r,0,mp,true);
        c.globalAlpha=a;
        c.lineWidth=1;
        c.fillStyle=co;
        c.fill();
        c.closePath();
      }
    };

    for(y=0;y<40;y++) {
      for(x=0;x<40;x++) {
        if(x<39) dp(x,y,0.7,'#a0a0ff',0.1,x+1,y);
        dp(x,y,1,'#707080',0.1,x,y);
        if(x>0) dp(x-1,y,1,'#101020',0.1,x-1,y);
      }
    }

    $("body").append("<div id='_j_'><div class='_sh_'></div></div>");

    $("#_j_").css({
      'position': 'absolute',
      'display': 'none',
      'width': '100%',
      'height': '300px',
      'left': '0px',
      'top': '0px',
      'margin': '0px',
      'padding': '0px',
      'border-bottom': '1px solid #777',
      'font-family': 'monospace',
      'font-size': '10pt',
      'color': '#ccc',
      'background-color': '#333',
      'opacity': '0.9',
      'z-index': '1000',
      'overflow': 'auto',
      'overflow-x': 'hidden',
      'overflow-y': 'scroll',
      'background-image': 'url(' + o.toDataURL() + ')'
    });

    $("#_j_ ._sh_").css({
      'margin': '2px 2px 2px 10px'
    });

    log.boot();
  });

  return log;
})(jQuery);

Please note that this is just a code fragment of the first bits of the shell. Obviously, I won’t publish the entire code here. We had a great time working together on the shell. Mostly, we worked on the shell at evening hours to cool down after a day working on heavy issues or features. The shell literally was a little “hideout” for both of us to relax and “reboot our minds”. Apart of that, it helped us equally good on improving our “production” javascript codebase.

Enjoy Engineering

I love to develop software. I love to design it, I love to code it, I love to document it. I even love to use it. However, as a professional, I’m developing software all the time. Whether it is planning, estimating, designing, testing, coding, documenting, administering or using it. A professional job is not always love, peace and harmony. There’s tough times as well. That’s very normal, by the way.

As a professional developer, you need to face this fact. It’s up to you to keep your job enjoyable. It’s your responsibility to take care of this. The good news is: yes, you actually can take care of it. I’m not saying that you can mitigate every sort of evilness which might come along your professional life. I’m just saying that you can contribute to experience enjoyable engineering.