Naturally, my longest running web-based project is this site. The following is a short history in reverse chronological order charting my slowly evolving expertise.

Versions

Version 16

Version 16 entailed a near-complete rewrite of the program, from the basic XML data files right through to the CSS; it represented a clear break from the lineage that had begun at version 6. The application of the descendants of version 6 to Project Rho, and the addition of new features that that project required, highlighted just how poorly version 6 was designed. While the idea of a major rewrite was already being considered in 2015, it was not until July 2017 that it was actually done; version 16 went live in early August 2017.

Version 16 went live with far fewer features than version 15. Experimental features that were rarely, if ever, used were simply stripped out. Re-implementing the remainder based on current knowledge yielded easy gains in simplification and code clarity; this was particularly true for the XSL transformations, which still bore many of the marks from the time when "I had no idea what I was doing," but could also be seen even in the CSS and generated HTML.

In terms of plugins, the JavaScript slideshow plugin was changed from SlideJS v1.x to slick. I vaguely recall attempting to switch to newer versions of SlideJS, but differences in features made that difficult.

In early 2018, Version 16 was extended to re-implement some features lost from version 15 and some new ones; much of this was inspired by previous work on Project Rho and NavWeaps.

Version 15

Version 15 represented the general state in early 2016.

The changes were mainly backports from a simpler template program (really no more than a collection of PHP functions.) The new program began development in late-2014 as a basis for experimentation. Its first public use was for the redevelopment of the TTC subway transfer section in October 2015. From there the cleaner appearance (brighter background, better use of white space around images,) and layout (changes to section headers and the table of contents) were backported to the PAN website framework. The template program more easily admitted small changes, while the website framework's advantage lay on the opposite side of the scale.

In April 2016, the Colorbox image gallery plugin, used since PAN version 6, was replaced with the lightGallery plugin. Colorbox had trouble displaying multi-line captions, and use of escape characters to embed links in captions. Replacement was driven by work on NavWeaps, where these issues were more noticeable.

Version 14

The major changes changes in Version 14 were concentrated in the website template program. These included the addition of a crude tool for editing pages.

The site's appearance received minor change; these were adopted from a prospective update to Project Rho. The ids for auto-generated anchor links were cleaned up.

Version 14 was released in late-August 2014.

Version 14 received a minor update in late-December 2014. The main changes were some simplification to the generated markup, and use of CDNs for faster loading times.

Version 13

Version 13 started life as "incremental" updates to version 12.

These updates added the site navigation to the footer (August 2013), and reimplemented the collapsible menus to be purely HTML and CSS (late September 2013). In addition, there were various visual changes done up to the end of September 2013, including separating items in the site menu with greater spacing rather than vertical lines, visually merging the site menu into the rest of the header, and using dark grey as the background for page titles.

Version 13 was "released" in late-September 2013 after realizing the cumulative changes made version 12 look obsolescent.

Version 12

Version 12 saw improvements/tinkering with layout and appearance. The cache was reimplemented to use flat files instead of a database table. It was uploaded in mid-January 2013.

The table of contents for each page was moved to be between the banner and main content area, and made collapsible. This experiment was in preparation for further work on Project Rho.

Version 11

Version 11 reimplemented the layout using CSS flexible boxes. It was uploaded in early-November 2012.

Flexible boxes replaced CSS tables. This worked with added CSS media queries to rearrange elements to reduce the width of pages for lower resolution display. This resulted in cleaner code and better handling in browsers on mobile devices.

There were no notable changes to the overall look of the site from version 10.

Version 10

Version 10 was another update focusing mainly on the website template program; the major addition/experiment this time was user authentication. It was uploaded in mid-May 2012.

The site received minor visual improvements. The most prominent change here was removing the flanking vertical columns on wider resolutions, and simply widening existing horizontal sections to achieve a simpler presentation.

Version 9

Version 9 introduced banners, an improved appearance, and upgraded code using a newer PHP database access library. It was uploaded in early-November 2011.

Not surprisingly, for me creating the graphics for the banners was much more difficult than the code to generate the markup for them. (I ended up creating banners for only a few pages.) Behind the scenes, the banners made the obsolete the previous way of making page titles, which in turn required minor changes to the XML data format and the way the XML was processed.

If multiple title banners and images were defined in the XML, a sliding banner was created. This was used on the home page.

The appearance attempted to partially mimic other elegantly simple websites that relied mainly on white space (or in this case, red space) and colour gradients to separate elements. While I was not prepared to abandon explicit separation through differently coloured areas, reducing the layered colours helped to achieve the desired simplification.

Version 8

Version 8 was an update in the same vein as the version 5: the website template program underwent significant refactoring while the site's outward appearance did not change. Version 8 was uploaded in late-April 2011.

The main goal of the upgrade was to improve decoupling through facades and abstract factories. This would make it much easier in the future to implement PHP-based user authentication, and apply different XSL transformations to different pages.

The webpages' XML data files were moved out of the public web directory.

Version 8 were temporarily managed and development by to Eclipse IDE using the PHP Development Tools plugin. This turned out to be more trouble than it was worth.

Version 7

Version 7 went live in March 2011 and was only a modest evolution of version 6.

Version 7 continued the visual evolution started in version 6, augmented by increased use of CSS3 properties and altering the colour scheme to red-white-grey-black. The layout remained nearly the same, but returned to a less-complicated sidebar. While not readily apparent, the content was further divided by adding HTML5 semantic tags.

Behind the scenes all that needed changing was the XSL transformation and the CSS rules.

Version 7's CSS was transplanted to create a very similar looking website built using Java EE; this was for educational purposes.

Version 6

Version 6 replaced the custom data file format and parser first developed for version 4 with XML data files and an XSL transformation to produce the markup. This required very little change to the PHP website template program, aside from replacing the components dealing with data file interpretation. It went live in June 2010.

More obvious was the change to the website's look-and-feel. The visual objective was to achieve a smoother separation of elements by limiting the use of hard CSS borders. The sidebar's position was fixed, could be hidden, and the menus collapsible using jQuery accordion widgets.

The ground work for version 6 was learned while working at Aviya Technologies during the summer of 2010.

Later improvements included using the Colorbox jQuery lightbox plugin, an Atom feed, and collapsible content sections using jQuery. The collapsible sections were not used but the feature remained in the backend.

Version 6 was used as the basis for the upgrade to the Aviya Technologies website and the second upgrade to Atomic Rockets.

Version 5

Version 5 refactored the website template program into an object oriented PHP program. The website's appearance stayed more or less the same from version 4.

Markup was changed to HTML5 in 2010. No HTML5 features were used, so this was a trivial change.

A basic page cache system was implemented with MySQL. Custom template-generated error pages were experimented with and discarded because the use of relative paths in the template program made it difficult to properly redirect to them. This was solved unsubtly in version 6 by hardcoding redirects to the error pages.

Custom error pages were added.

Version 5 was the basis for the first upgrade of Atomic Rockets. Work on Atomic Rockets revealed a number of deficiencies with version 5. The most serious were the difficulty of extending the custom data format to add new features, and the difficulty of improving the accompanying parser. This led to version 6 and, in the short term, further improvements to version 5.

Version 4

Version 4 went online in late-2008 and used a one-function PHP website template program to generate markup. Each webpage had its own data file which included header titles, HTML markup for text areas, and other page-specific information. The program automatically inserted site menus and generated page-specific menus. The data file bore a passing resemblance to MediaWiki markup, especially in the way headers were denoted.

The outward appearance of the website was otherwise unchanged from version 3. The sidebar may have switched to the right side in version 4, and certainly no later than version 5.

Version 4's CSS was transplanted to create a very similar looking website built with C# and ASP.NET; this was for educational purposes.

Version 3

Version 3 featured an improved look-and-feel that lasted to version 5, and which heavily influenced even later versions. The "one colour, one page" scheme was discarded for a uniform red-white-black scheme across all pages. The side navigation menu discarded the images and became text and list based.

Content was divided by headers, subheaders, and areas for text. Page-specific menus, with intrapage links to headers, may also have appeared in version 3 instead of version 4; this was placed above the site menu in the sidebar. In late-2007 or early-2008 with the addition of "back to top" links after each text section.

Experimentally, a horizontal menu at the top for site navigation was added using horizontal lists and CSS popup menus. I was not yet comfortable with the code and it did not become a permanent fixture until version 5. Another experiment was a fixed position sidebar; again, the result was less than comfortable and was removed. The fixed position sidebar would return in version 6 with the help of jQuery JavaScript library accordions.

The markup also underwent notable changes. The table-based layout was replaced by CSS. The markup became XHTML 1.1 for experimental reasons; incidentally the application/xhtml+xml media type prevented Internet Explorer from accessing the site. -moz-border-radius was used in anticipation of CSS3.

Maintaining a growing number of pages manually proved cumbersome and drove the upgrade to version 4.

Version 2

Version 2 featured a new look-and-feel based heavily on the interface for Turbo Trek: Strategic Operations. PAN gained a left sidebar menu for site navigation, and a corner image for "flavour" at the top left. A proper banner containing the page title was added.

The colour scheme from version 1 remained, and the menu links used images.

Version 2 was the base for a fan site for the Night of the Dead custom map for Warcraft III. A fan site for SentryIII's Marine Corps Series of WCIII custom maps was also started but never completed.

Version 1

The original incarnation went up in the early 2000's and was a collection of webpages that had no links to each other. The pages shared a common design. The eye-catcher was a very large label at the top; each of the three pages used a different coloured label. Content was limited to a few paragraphs per page. The background was black.

The layout was controlled by tables and the markup was manually coded. The markup was HTML 4.01 Strict compliment.