Site Details

For those interested, this page provides some information on the web technologies, libraries, and techniques that are in use on this site and in its build process. While some details may be excluded, for site security reasons, the information here provides a good, quick rundown on the site's 'behind the scenes' elements.

Web Technologies

Below is the 'quick list' of the technologies and frameworks that go into the development, delivery and consumption of this site. I'm certain that this will never be a complete list, but I try to keep it up-to-date with the most important items in use.

Not sure what something in a list is? Hit the link.

The Basics
Client-side JavaScript
Building and Maintaining

* = jQuery Plugin/Extension

Build & Deployment Process

The build process for the site is managed by the awesome Grunt task management framework running in Node.JS (if you haven't looked into it, I highly recommend checking it out). I used to use Apache Ant, but I've found the flexibility of Grunt much to my liking.

My personal build flow includes several custom-written tasks. These were primarily created to support a deployment flow that allows me to easily identify deliverable files that have changed and only sync those files to the hosting server (rather than constantantly syncing files because their sources were re-compressed during an optimization step).

The main build process goes through the following general steps: pre-process SCSS (SASS) into CSS, validate CSS and JavaScript, compile CSS and JavaScript into reduced deliverable filesets, optimize/compress CSS and JavaScript files, optimize new image assets, and sync changes to a development staging server. These steps are automated via Grunt and run whenever source files are changed.

When everything for a set of changes looks good and tests out on the staging server, another Grunt task is run to sync only the necessary, changed files to a production files mirror (which is stored in Git) and synced to the live hosting server.

It would be true enough to say that this is a rather complicated build flow for a site of this size. But, with so much of it automated, I can really focus on the site's design and let the build processes let me know if something's getting screwy as I work. In addition, it allows me to minimize unnecessary file uploads and extraneous bloat in the Git repo.

Tools

Here is a list of the main tools that I use on a very regular basis when working on this site. Like the technologies and frameworks lists above, this is by no means an exhaustive list of tools that have been used in relation to this site. In fact, I'm sticking to just a current use list. So, while I used to work with Adobe Dreamweaver quite a bit here, I'm not really using it these days. Thus, it's not included.

  • PHPStorm, JetBrains
  • Visual Studio Code
  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe Experience Design
  • Adobe InDesign (for the PDF Resume)
  • Sketch, Bohemian Coding
  • SourceTree (Git GUI)
  • Transmit (FTP Client)
  • TexturePacker (for Sprite Sheets)
  • MAMP Pro (for Local Staging Server Environment)
  • LiveReload

Copyright ©2005-2017 Tom Keen.  All rights reserved.

This site has been tested and optimized for Google Chrome, Mozilla Firefox, Safari, & Internet Explorer