This post offers a bit of insight into how the new DOSGames.com v2.0 website was developed and how it runs from a technical sense. If you're looking for the non-technical site launch post which describes the new features, read the launch post here!
The old website
The old website was almost entirely hard-coded HTML; the game listings were pure HTML with no database. There was a little PHP used, but mainly for including different site parts. Tables were used for the layout, as was common back in the early 2000's! Some CSS was used, but there were also places where there were still antiquated elements like tags. Naturally due to the table layout and lack of media queries, the site was not responsive for different screen sizes. See how the site used to look at archive.org!
New website
DOSGames.com v2.0 is based on a fully custom-coded PHP backend and a jQuery frontend. I considered used a more "modern" stack (ex, React, or Vue) but in the end I went with what I'm most familiar with. I've worked on many projects using WordPress, but I decided against using it in this case. Although it would offer a bunch of great features (in particular useful plugins) it would add a lot of bloat and also I wanted to retain control over how exactly everything works. I wasn't convinced the extra work and overhead involved to make WordPress work like I wanted would be worth it.
The site is running on PHP5.6 right now, which is at least a step up from 5.2 which it was running until last year! In the future that will change to PHP7, but mainly due to the forum (still running PHPBB2 after all these years!) I haven't upgraded yet. The database is, unsurprisingly, MySQL. And speaking of MySQL, every game on the site (over 600 of them) needed to be converted from hard-coded html into database entries. In order to help me do this faster, I created a form into which I would paste the html, and it would automatically grab as many fields as it could find and auto-fill them into a form. Then I would manually fix up the listings, adding more links and info wherever appropriate, testing games in DOSBox, etc. I don't know exactly how long it took since I wasn't timing it, but I imagine the process took over 100 hours in total including DOSBox testing/tweaking.
Site design
I made several attempts to redesign the website over the years. At the end of this post you can see some of the other designs I worked on over the years. I actually like some aspects of those designs, but ultimately they didn't work out. Mostly because I never had the time and/or patience to follow through with the design in the past.
My goal with the v2.0 design was to incorporate aspects of the old website (such as the background, header, and disk download icon), along with new DOS-themed elements (such as the DOS font and ASCII text box menus), while also presenting a clean and modern design. I don't know how well I kept that balance, but that was the intent!
The new logo likewise aims to combine aspects of the old and the new; an old version of Photoshop was used for all graphics work.
Front end tools
I used SASS and Gulp to pre-process the CSS. This made working with Bootstrap v4 easier. Unfortunately using v4 of Bootstrap means that the site won't work properly on really old versions of IE (9 and less) but thankfully few people need to run those versions anymore. Even on a retro-focused site like this one, the number of people coming from browsers older than IE10 is less than half a percent.
Although with ES6, vanilla JS is quite capable of working well without jQuery, I used it here as a convenience, and in case I wanted to use any jQuery libraries. The site does use several libraries such as jQuery Form Validator, jQuery Autocomplete, and screenfull.js. See the Thanks page for more libraries/resources used and other thank-yous. Of course some parts were coded from scratch, like the game rating system and the "Guess the Game" page.
Wrapping up
That's the basics of how things were put together. If you have other questions, you're welcome to comment here, or contact me and I'll reply if I can!
