JCB 3CX Backhoe loader

In the mid-2000s, Amani was contracted to refactor a legacy codebase. He enjoyed breathing new life into old garbage, until the fateful day he came upon something completely unexpected.

One of the webpages he tended to was making calls to a database. Amani couldn't figure out why at first, especially since there were no Ajax scripts on the page. But then he paid careful attention to the CSS details in the webpage's header:

<link rel="stylesheet" href="/style/pictures.css.php"/>

The stylesheet was a PHP file?

Agape, Amani hunted down the file in question and unearthed the horror below:

/* snip */

.popup-yellow .popup-innerHtml {
    background-color: #FFCC00;

.top-down {
    font-size: 12px;
    cursor: pointer;
    text-align: left;

.grid-a {
    cursor: pointer;
    text-decoration: none;
    color: #00C;

while($row = $db->fetchNextObject($result)){
    $id = $row->id;
     $name = "shape".$id;
     $image = "../images/layouts/".$row->image;
    $img = createfrompng($image);
    $width = imageX($img);
    $height = imageY($img);
    echo "#".$name."{ position: relative; width: ".$width."px;  height: ".$height."px; background-color: #ccc; border: 2px solid #FFFFFF; visibility: visible; background-image: url('/images/layouts/".$row->image."'); cursor: pointer; margin: 0; padding: 0; } ";}

The progenitor of this hell-born abomination had written PHP to query a database, load the retrieved images in memory, assign them unique IDs, generate unique CSS style classes for each one, then throw them out—every single time the webpage was requested.

Amani replaced this with a single class of style attributes for all images to share, setting widths and heights to auto. He also removed the unnecessary position: relative; attribute, as nothing on the page was being anchored on the elements.

[Advertisement] BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!