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.
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 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 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 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 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 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 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 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 jQuery-based Lightbox image galleries, Atom feed, and collapsible content sections using jQuery. The collapsible sections were not used but the feature remained in the backend.
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 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 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.
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 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.
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.