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.
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.
- HTML5
- PHP (Structured as MVC)
- CSS3 (Compiled from SCSS)
- JavaScript
- Zen Grids (Modified to Support Responsive Design)
- Waffle-Grid (Replacing Zen Grids)
- Barba.js
- Bowser.js
- Greensock Animation Platform (JS)
- jQuery (mostly for jQuery plugins these days)
- lightgallery.js
- Modernizr
- RequireJS
- ScrollViews *
- SWFObject (Modified for Current Browser Support Issues)
- Underscore
- Video.JS (Modified to Support Responsive Design)
* = jQuery Plugin/Extension
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 notify me if something's getting screwy as I work. In addition, it allows me to minimize unnecessary file uploads and extraneous bloat in its Git repo.
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)
- BrowserSync
- LiveReload (Backup for BrowserSync)
Briefly going beyond this site, here is a quick list publicly available Git repos, reference and testing CodePen work, and more. Please note, these are not particularly curated and the Git repos include a combination of publicly available personal projects, personally modified opensource projects, and just reference forks of other folks projects.
- CodePen (Design and Code Reference Tests)
- BitBucket (Public Projects and Forks of Other Projects)
- GitHub (Public GitHub Projects and Forks of Other Projects)
- Visual Studio Marketplace (Published Extension Packs)