Responsive images (#871)

* Remove unused "brie slice", bye bye brie

* Use responsive-loader for responsive images

* Ignore flow errors in sharp's json files

* Optimise pngs & gifs using imagemin-webpack-plugin

* Install libpng in CI docker container

* Also install libpng-dev in CI docker image

* Install zlib in CI docker image

* Use jessie slim as the base for the CI build image

Both flow and imagemin require glibc libraries, but alpine linux uses
musl c to save disk space. Since installing glibc and a load of
libraries kinda defeats the point of using alpine linux (smaller image
size) and is a pain to maintain I've just switched over to debian jessie
slim.

* Increment CI cache version for node modules

Due to switching from alpine linux to debian some of the cached files
depend on muslc not glibc

* Install additional dependencies in CI build image

* Change shebangs in shell scripts to /bin/bash

The command `set -euo pipefail` is bash specifc and errors on other
shells

.circleci/config.yml

@@ -2,70 +2,70 @@ version: 2
 jobs:
   build:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
 
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Install Node modules
           command: yarn install --frozen-lockfile
 
       - save_cache:
-          key: node_modules-v6-{{ checksum "yarn.lock" }}
+          key: node_modules-v7-{{ checksum "yarn.lock" }}
           paths:
             - ./node_modules
 
   validate_formatting:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Validate formatting
           command: make prettier-fail
 
   lint:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Lint code
           command: make lint
 
   validate_types:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Validate types
           command: make flow
 
   test:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Notify Code Climate of build
@@ -87,33 +87,33 @@ jobs:
 
   preview:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Deploy branch
           command: ./bin/ci-deploy.sh create-commit-site
 
   deploy_staging:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
       - restore_cache:
           keys:
-            - node_modules-v6-{{ checksum "yarn.lock" }}
+            - node_modules-v7-{{ checksum "yarn.lock" }}
 
       - run:
           name: Deploy to staging
           command: ./bin/ci-deploy.sh master-to-staging
 
   deploy_production:
     docker:
-      - image: redbadger/website-honestly-deploy:11
+      - image: redbadger/website-honestly-deploy:16
     steps:
       - checkout
 

.eslintrc

@@ -16,6 +16,13 @@
     "System": true,
     "globals": true
   },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "webpack.browser.config.js"
+      }
+    }
+  },
   "parser": "babel-eslint",
   "plugins": ["flowtype"],
   "rules": {

.flowconfig

@@ -1,9 +1,12 @@
 [ignore]
 .*/node_modules/.*/test/.*\.json$
+.*/node_modules/sharp/.*\.json$
 .*/node_modules/fbjs/.*
 .*/node_modules/youtube-player/.*
 
 [options]
+; images with options for responsive loader: https://github.com/herrstucki/responsive-loader
+module.name_mapper='^\(.+\)\.\(jpe?g\|png\)\?.+$' -> '<PROJECT_ROOT>/flow-stubs/responsive-loader-image-stub'
 module.name_mapper.extension='ejs' -> 'empty/function'
 module.name_mapper.extension='md' -> 'empty/function'
 suppress_comment= \\(.\\|\n\\)*\\$FlowIgnore

Makefile

@@ -1,5 +1,6 @@
 #!/bin/sh
 
+SHELL=/bin/bash
 BIN=./bin
 LOAD_ENV=source bin/load-dotenv.sh && source bin/construct-additional-env.sh
 WEBPACK=yarn webpack --bail
@@ -149,24 +150,6 @@ edit-secrets: keyrings update-secrets ## Edit .env file (get latest -> decrypt -
 	mv keyrings/files/.env .env
 	@$(PRINT_OK)
 
-compress-assets: ## Compress assets. What did you expect? :)
-	find site -type f \
-			\( \
-				-name '*.png' \
-				-o -name '*.jpg' \
-				-o -name '*.jpeg' \
-			\) \
-			-exec sh -c '\
-				echo {} \
-				&& cat {} | yarn imagemin > {}.min \
-				&& mv {}.min {}' \;
-	find site -type f \
-		-name '*.svg' \
-		-exec sh -c '\
-			echo {} \
-			&& yarn svgo {} -q --enable=removeTitle' \;
-	@$(PRINT_OK)
-
 dist/services.zip: dist/services
 	cd dist/services \
 	&& zip -r ../services.zip *

README.md

@@ -137,8 +137,24 @@ We use AWS CloudWatch for monitoring our staging and prod lambdas; all alarms sh
 
 ## Assets
 
-Any static assets committed to the repo should be compressed first. There is a
-`make compress-assets` command that will do this for common image formats.
+SVGs can be just inlined as JSX but they should be optimised first, [SVGOMG](https://jakearchibald.github.io/svgomg/) is a really handy tool for this.
+
+[Responsive loader](https://github.com/herrstucki/responsive-loader#responsive-loader) can be used to create an [`srcSet` attribute](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) with multiple sizes of an image (so that appopriately sized images can be served to mobile, tablet and desktop devices for improved performance). See the [plugin’s options](https://github.com/herrstucki/responsive-loader#options) for more details. Example usage:
+
+```js
+import badgers from './badgers.jpeg?min=320&max=1600&steps=6';
+
+const image = (
+  <img
+    src={badgers}
+    srcSet={badgers.srcSet}
+    sizes="(min-width: 1200px) 1200px, 100vw"
+    alt="Badgers working in a team"
+  />
+);
+```
+
+Images are automatically optimised by [imagemin-webpack-plugin](https://www.npmjs.com/package/imagemin-webpack-plugin) in production.
 
 ## Blog
 

bin/ci-deploy.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 set -euo pipefail
 

bin/construct-additional-env.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 set -euo pipefail
 

bin/load-ci-env.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 set -euo pipefail
 

bin/load-dotenv.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 set -euo pipefail
 

bin/pretty-print.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 
 set -euo pipefail
 

docker/circleci-deploy/Dockerfile

@@ -1,33 +1,17 @@
-FROM node:8.15.1-alpine
-
-# Alpine Linux includes musl libc, but Flow is linked against GNU libc, so we need to install it.
-# See https://github.com/sgerrand/alpine-pkg-glibc
-ENV GLIBC_VERSION 2.25-r0
-RUN apk add --no-cache ca-certificates && \
-  apk add --no-cache --virtual .build-deps-glibc \
-  curl \
-  && cd /etc/apk/keys \
-  && curl -fsSLO --compressed https://alpine-pkgs.sgerrand.com/sgerrand.rsa.pub \
-  && cd /tmp \
-  && curl -fsSLO https://github.com/sgerrand/alpine-pkg-glibc/releases/download/$GLIBC_VERSION/glibc-$GLIBC_VERSION.apk \
-  && apk add --no-cache glibc-$GLIBC_VERSION.apk \
-  && rm glibc-$GLIBC_VERSION.apk /etc/apk/keys/sgerrand.rsa.pub \
-  && apk del --no-cache .build-deps-glibc
-
-RUN apk add --no-cache make git openssh zip curl
+FROM node:8.15.1-jessie-slim
 
 # Install aws cli
-RUN apk add --no-cache \
-  python \
-  py-pip \
+RUN apt-get update && apt-get install -y \
+  git \
   groff \
   less \
-  mailcap \
-  && \
-  pip install --upgrade awscli==1.14.5 s3cmd==2.0.1 python-magic
+  make \
+  python-pip \
+  zip \
+  && rm -rf /var/lib/apt/lists/* \
+  && pip install --upgrade pip \
+  && pip install --upgrade awscli==1.14.5 s3cmd==2.0.1 python-magic
 
 # Install code climate reporter
-RUN curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-RUN chmod +x ./cc-test-reporter
-
-RUN apk -v --purge del py-pip
+RUN curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter \
+  && chmod +x ./cc-test-reporter

flow-stubs/responsive-loader-image-stub.js

@@ -0,0 +1,12 @@
+// @flow
+
+// A stub for the objects produced by the responsive-loader for webpack: https://github.com/herrstucki/responsive-loader
+
+declare module.exports: {|
+  src: string,
+  srcSet: string,
+  toString(): string,
+  height: number,
+  width: number,
+  placeholder: ?string,
+|};

package.json

@@ -55,6 +55,7 @@
     "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.1.0",
+    "eslint-import-resolver-webpack": "^0.11.0",
     "eslint-plugin-flowtype": "^3.4.2",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
@@ -66,7 +67,7 @@
     "gradient-string": "^1.2.0",
     "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
-    "imagemin-cli": "^4.0.0",
+    "imagemin-webpack-plugin": "^2.4.2",
     "ini": "^1.3.4",
     "jest-canvas-mock": "^2.0.0-beta.1",
     "json-loader": "^0.5.7",
@@ -112,12 +113,12 @@
     "react-motion": "^0.5.2",
     "react-swipeable-views": "^0.13.1",
     "reset-css": "^4.0.1",
+    "responsive-loader": "^1.2.0",
     "sanitize-html": "^1.16.3",
     "serverless": "^1.35.0",
+    "sharp": "^0.22.0",
     "source-map-support": "^0.5.9",
     "style-loader": "^0.23.1",
-    "svg-inline-loader": "^0.8.0",
-    "svgo": "^1.2.0",
     "twitter": "^1.7.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "underscore-template-loader": "^1.0",
@@ -168,7 +169,8 @@
       "!**/*.stories.{js,jsx}"
     ],
     "moduleNameMapper": {
-      "\\.(css)$": "identity-obj-proxy"
+      "\\.(css)$": "identity-obj-proxy",
+      "^(.+)\\.(jpe?g|png)(\\?.+)$": "$1.$2"
     },
     "setupFiles": [
       "jest-canvas-mock",

site/components/case-study-overview/index.js

@@ -5,8 +5,8 @@ import moment from 'moment';
 import ReactGA from 'react-ga';
 
 import styles from './style.css';
-import fortnumPNG from './PNG/fortnum.png';
-import financialTimesPNG from './PNG/financialtimes.png';
+import fortnumPNG from './PNG/fortnum.png?sizes[]=180&sizes[]=360&sizes[]=540&sizes[]=288&sizes[]=576&sizes[]=864';
+import financialTimesPNG from './PNG/financialtimes.png?sizes[]=169&sizes[]=338&sizes[]=507&sizes[]=270&sizes[]=540&sizes[]=810';
 
 import Link from '../link';
 import CaseStudyCompanyLogos from '../case-study-company-logos';
@@ -59,7 +59,13 @@ const CaseStudyOverview = () => (
             </span>
           </span>
           <span className={styles.logoContainer}>
-            <img alt="The logo of Fortnum & Masons" src={fortnumPNG} className={styles.logo} />
+            <img
+              alt="The logo of Fortnum &amp; Masons"
+              src={fortnumPNG}
+              sizes="(min-width: 980px) 288px, 180px"
+              srcSet={fortnumPNG.srcSet}
+              className={styles.logo}
+            />
           </span>
         </a>
         <a
@@ -126,6 +132,8 @@ const CaseStudyOverview = () => (
             <img
               alt="The logo of the Financial Times"
               src={financialTimesPNG}
+              sizes="(min-width: 980px) 270px, 169px"
+              srcSet={financialTimesPNG.srcSet}
               className={styles.logo}
             />
           </span>

site/components/events-banner/index.js

@@ -40,9 +40,12 @@ export default function EventsBanner({
         rel="noopener noreferrer"
         onClick={trackAnalytics(campaignName)}
       >
-        <img src={desktopURL} alt={altText} className={styles.eventsDesktopBanner} />
-        <img src={tabletURL} alt={altText} className={styles.eventsTabletBanner} />
-        <img src={mobileURL} alt={altText} className={styles.eventsMobileBanner} />
+        <picture>
+          <source srcSet={desktopURL} media="(min-width: 980px)" />
+          <source srcSet={tabletURL} media="(min-width: 690px)" />
+          <source srcSet={mobileURL} />
+          <img src={desktopURL} alt={altText} className={styles.image} />
+        </picture>
       </a>
     </div>
   );