v6.7.0 - Webpack

The site has been ported to Webpack, removing the use of Gulp.

This was done to make life with JavaScript easier. We're going to be rebuilding the site from the ground up on React, and Webpack comes highly recommended for use with it. Even if React doesn't work out, Webpack is a commonly accepted standard, and easier to work with than Gulp.

Notable Changes

• Moved over to Webpack.
• Created a deployment script. This is the only thing Webpack can't handle for us, so it's just been abstracted to its own file.
• Removed Gulp. Webpack and our deployment script handle all of our needs.
• Removed jQuery. See "Grayscale Filter" below.
• Use a single class to apply the grayscale filter to images. See "Grayscale Filter" below.
• Moved Pug locals to their own file.

Grayscale Filter

We apply a grayscale filter to all images on the page. When the images are scrolled over we remove the filter to return them to color.

Previously, this effect was achieved using a .grayscale and .colorize class, along with jQuery's toggleClass function to switch between the two.

We're now using .coloring--grayscale for handling color, and applying transitions in .transition. The .transition class stays on the element, and we can use pure JavaScript to toggle .coloring--grayscale. Now we have reusable classes for all of our transitions, and we no longer require jQuery.

That's all very technical, here's a before/after of the markup to give a feel of the difference:

Before:

<!-- Default state -->
<img class="js-color-scroll grayscale" src="/img/sample.png">

<!-- Scrolled over -->
<img class="js-color-scroll colorize" src="/img/sample.png">

After:

<!-- Default state. -->
<img class="js-color-scroll transition coloring--grayscale" src="/img/sample.png">

<!-- Scrolled over. -->
<img class="js-color-scroll transition" src="/img/sample.png">