Website Redesign Part 2

The new website code has become unwieldy. With my Old PC now set-up as a development web server, it is time to start on the refactoring.

What Is Web Design?

Web design is an art and a science. That is the typical definition used by web designers, right?

Web design is a science. It has rules, and not following those rules may result in something close (or miles from) the original vision.

Web design is an art. There are many ways of doing something to get the same "message" across, but as with music there are different styles of coding.

Sticking with music, my coding style is typically a juxtaposition of cacophonies, resulting in something that miraculously looks somewhat like what I intended despite the stuff in the background looking like a complete mess.

Refactoring, Recoding, Starting From Scratch

Code refactoring
the process of restructuring existing computer code – changing the factoring – without changing its external behavior.
Code refactoring, Wikipedia

Going by that Wikipedia article, I think I am going to employ Extract Method, Move Method, and Rename Method. Unit testing is not something I am going to use, and I do intend on changing external behaviour in that my overall aim is to reduce PHP processing time to less than 1 millisecond, so it is technically refactoring and hopefully something else.

1 millisecond may be a huge goal, but thejc.me.uk (albeit a much less complex site) had a processing time of 0.000952 seconds the last time it was processed. I am unsure of the processing time of my "last modified" function that creates Last-Modified and ETag headers on that site, but as long as nothing on the page changes (i.e. I remove the part of the footer that reports page processing time) then APC treats the page/file as static content and each pageview is a 100% cache hit.

Starting from scratch or refactoring? In a way I am doing a bit of both. While some of my code will be a direct copy and paste from the live site (Move Method), some of it will also be Extracted to their own functions. Time for an example.

My Current Home Page (New Sites)

<?php $file_is_included = (isset($script_name));?>
<?php include_once $_SERVER['DOCUMENT_ROOT'].'/inc/htmlheader.php';?>
<?php
	$article_name = "";
	$article_name_extended = $article_name . "";
	$article_description = <<<EOF
<p>Welcome to the new look, and new home, of my websites: $my_sites < /p>
EOF;
	$shortTitle = $site_name;
	$description200 = <<<EOF
The new home on the Web for $my_name.
EOF;
	$twitterCreator = "@watfordjc";
	$contentPosted = "2014-03-08";
	$contentModified = "";
//	$image = "https://www.johncook.co.uk/img/straight-razor-shave.jpg";
//	$imageWidth = "100";
//	$imageHeight = "177";
	$description155 = $description200;
	$NSFW = "NULL";
	if (($NSFW == "NSFW") && ($site_name == "John Cook UK")) { if ($file_is_included) { return ""; } else { exit(); } }
?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/header.php';?>
<?php $breadcrumbs_content = breadcrumbs_home(TRUE);?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/headertail.php'?>
<section itemscope itemtype="http://schema.org/Article">
<?php panelheader($page_name,$article_description,TRUE);?>
<?php echo $breadcrumbs_content;?>
<?php panelfooter();?>
<div itemprop="articleBody">
<img class="img-right" width="100" height="177" src="/img/straight-razor-shave.jpg" alt="<?php echo $my_name;?> shaving with a straight razor." title="<?php echo $my_name;?> shaving with a straight razor." />
<p>This is the home page of my new site, and where all content will be aggregated.</p>
<p>It is still a work in progress.</p>
</div>
<?php posted("John Cook",$contentPosted,$contentModified)?>
</div>
</div>
<?php include $_SERVER['DOCUMENT_ROOT']."/blogs/website/refactoring.php";?>
<?php include $_SERVER['DOCUMENT_ROOT']."/articles/computing/new-development-webserver.php";?>
<?php include $_SERVER['DOCUMENT_ROOT']."/blogs/gaming/resident-evil-mercenaries.php";?>
<?php include $_SERVER['DOCUMENT_ROOT']."/blogs/website/redesign.php";?>
<?php include $_SERVER['DOCUMENT_ROOT']."/blogs/vaping/efvi.php";?>
</section>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/copyright.php';?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/nav.php';?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/footer.php';?>
<?php include $_SERVER['DOCUMENT_ROOT'].'/inc/htmlfooter.php';?>

As you can imagine, there is quite a lot of code duplication on every page, and I want to minimise that as much as possible.

Basically, I want to offload all of the PHP commands on the page to their own functions where possible (Move Method). That is the reason I started looking at the various types of arrays.

Arrays, Arrays, and More Arrays

One of the issues with the New-Live Site's code is that whenever I modify a function I invariably have to modify all pages. Whether that be trying to determine whether a page has been included, or changing the way breadcrumbs are created, it became bothersome and would have got even more so once I started incorporating all the content from my older sites.

Therefore, after watching that video on Youtube, I decided that would be the way to go. All my functions will accept an optional array. The problem then became "flattening" and extracting the arrays so no matter which PHP file I was working from, the variable could simply be called by name.

"Flattening" and extracting multiple arrays means variables can be overwritten. Some variables have therefore been renamed to avoid overwriting.

This is how the top of the development home page currently looks:

<?php
require_once($_SERVER['DOCUMENT_ROOT'] . '../includes/header.php');
$pageVariables = siteArray();
$pageVariables["page"] = [
"script_name"=>__FILE__,
"title"=>"Coming Soon",
"type"=>"Article",
];
extract(renderPage($pageVariables));
?>
</head>

header.php (final name not yet determined) includes the siteArray and renderPage functions (may still be renamed).

The $pageVariables array is initialised, and comes with $pageVariables["site"].

After setting $pageVariables["page"], renderPage() is called which then extracts the variables from $pageVariables (site and page arrays) and pageRequest()["initialise"].

As well as doing some other stuff that should probably be moved out of the renderPage() function, preoutput.php (i.e. sending headers including cookies) and head.php (currently stuff before </head>) are run.

The pageRequest() function returns an array containing all the the stuff that is specific to the request rather than the site (e.g. it sets $my_names to either John Cook (WatfordJC) or WatfordJC (John Cook) depending on the domain) although I should probably move that and other stuff out so that function only deals with splitting up the component parts of the URI.

Anyway, all of that (minus a few variables) are returned back as an array, which is then extracted so I can, for example, say <p>The new websites <?= $my_sites; ?> are in development.</p>.

Also, rather than setting and unsetting a $file_is_included variable depending on whether $script_name has been set (a rather messy way of coding things and needing global $file_is_included everywhere), I now add __FILE__ to the array passed to the renderPage() function (although $script_name is probably not the best variable name), and I can now add a function that will determine whether the page requested has been included in another page or not (i.e. the old $file_is_included boolean).

I still have a lot of work to do, including deciding on the best way to deal with the meta tags (probably a similar way to how I'm dealing with link tags), and what to do about the header/breadcrumbs area. I still have the included file detection to work on, but at least I am getting closer to code that I can use on every page that doesn't have to change when I modify the included file.

A final thought before posting: although I am using Zurb Foundation at the moment, I am apparently not using 85% of the CSS and probably just as much of the JavaScript. I will deal with the PHP first, then my CSS and JavaScript, and then I'll look at whether I want to rely on Foundation or not for the base css.

Average Processing Time

I am using the following to determine average processing time:

  1. wc -l index_processing_time.log
  2. Old version of Opera's "Reload every..." option.
  3. wc -l index_processing_time.log
  4. tail -n 100 index_processing_time.log | awk '{sum+=$0}END{printf "%.8f\n", sum/NR}' -

At present, the average processing time for 100 requests at 1 second intervals is 0.63642025 milliseconds.