Mike was refactoring an old web application written in Perl. We joke about Perl being a "write only language," but the original developer wanted to take that unreadable attitude to the JavaScript front-end portion of the application.

function setup() {
  position('m1',46,220);
  position('m1g',33,200);
  position('m1c',33,200);
  position('m2',46,330);
  position('m2g',33,310);
  position('m2c',33,310);
// ... snip 50 lines
}

The strings reference the IDs of various elements on the page. The IDs themselves, however, mean nothing. Why m1g? No idea.

function offall() {
  hideitem('m2i1');
  hideitem('m2i1c');
// ... snip 50 lines
}

As you can also see, there's no attempt to use CSS classes or other selectors to make it easy to find all of the UI widgets that need to be hidden- one simply needs to access each one by its meaningless ID value.

Which also means when it comes time to show elements, it gets nasty:

function rollonmenu(item) {
  clearcurrenttimeout();
  offall();
  overmenu=1;
  highlight(item);
  if (item=='m1') {
    // ...
  }
  if (item=='m2') {
    showitem('m2i1');
    showitem('m2i1c');
    // ... snip 20 lines
  }
  if (item=='m3') {
    // ... snip 20 lines
  }
  if (item=='m4') {
    // ...
  }
  if // ... more

}

All this is in the service of hiding or showing sub-options based on which item a user has selected. And it's cryptic, verbose, and ugly. But this isn't the real WTF in this code. TRWTF is how they insert the menu into the web page:

var _targ = document.getElementById('menu');

_targ.innerHTML='<div ... 10441 characters all on one line ';

The HTML describing this UI widget is a single JavaScript string, all on one line.

[Advertisement] Utilize BuildMaster to release your software with confidence, at the pace your business demands. Download today!