Appendix A. Tools reference

Many tools are used throughout this book, and this appendix collects them all in one handy spot. Use this reference when you’ve completed this book but still need a reference for the tools you’ve used.

Note

Browser-based developer tools aren’t listed in this appendix. You can invoke these tools in most browsers by pressing F12 on Windows systems, or Cmd-Alt-I on Mac systems. Tools are listed in the order they appear in this book.

A.1. Web-based tools

This section collects all of the web-based tools used throughout the book:

• TinyPNG (http://tinypng.com) An image optimizer on the web. Shrinks PNGs and JPEGs via a user-friendly interface.
• PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights) Analyzes a URL and gives advice on how to improve page performance.
• Google Analytics (https://www.google.com/analytics) Provides data on your site visitors.
• Jank Invaders (http://jakearchibald.github.io/jank-invaders) Not so much a tool per se, but rather a game that helps you identify what jank looks like. Great for training the eye to catch sluggish animations.
• Mobile-Friendly Test (https://www.google.com/webmasters/tools/mobile-friendly) Analyzes a URL and reports whether its design is mobile-friendly.
• mydevice.io (http://mydevice.io) A comprehensive listing of devices, their screen resolutions, and pixel densities.
• VisualFold! (http://jlwagner.net/visualfold) A bookmarklet (by me!) that places guides on the page at locations you specify.
• Grumpicon (http://grumpicon.com) Generates PNG from SVG sprites (and a whole lot more).
• Can I Use (http://caniuse.com) A comprehensive listing of browser features and their level of support.

A.2. Node.js-based tools

This section collects all the packages that require Node.js. You can install any of these tools by using the npm install <package-name> syntax. You can also get info on any of these tools by searching for its name at https://www.npmjs.com.

A.2.1. Web servers and related middleware

• express (http://expressjs.com)
  • A small web server framework. Used throughout the book to spin up servers on localhost for example code.
  • compression (http://expressjs.com)
  • Provides gzip compression for Express-based web servers.
  • shrink-ray (https://www.npmjs.com/package/shrink-ray)
  • A fork of the compression Express middleware that supports Brotli compression.
  • mime (https://github.com/broofa/node-mime)
  • A module for detecting content types of files on the local filesystem.
  • spdy (https://github.com/indutny/node-spdy)
  • An HTTP/2-enabled web server module.

A.2.2. Image processors and optimizers

• svg-sprite (https://github.com/jkphl/svg-sprite) Generates SVG sprites on the command line.
• imagemin (https://github.com/imagemin/imagemin) An image-optimization library.
• imagemin-jpeg-recompress (https://github.com/imagemin/imagemin-jpeg-recompress) An imagemin plugin for reducing the size of JPEGs.
• imagemin-optipng (https://github.com/imagemin/imagemin-optipng) An imagemin plugin for reducing the size of PNGs.
• svgo (https://github.com/svg/svgo) A command-line utility for reducing the size of SVGs.
• imagemin-webp (https://github.com/imagemin/imagemin-webp) An imagemin plugin for converting images to WebP format.
• imagemin-svgo (https://github.com/imagemin/imagemin-svgo) imagemin wrapper for svgo.
• imagemin-pngquant (https://github.com/imagemin/imagemin-pngquant) Yet another imagemin plugin for reducing the size of PNGs.
• imagemin-gifsicle (https://github.com/imagemin/imagemin-gifsicle) An imagemin plugin for reducing the size of GIFs.

A.2.3. Minifiers/reducers

• html-minify (https://github.com/yize/html-minify) Minifies HTML files on the command line.
• minifier (https://github.com/fizker/minifier) Minifies CSS and JavaScript files on the command line.
• uncss (https://github.com/giakki/uncss) Removes unused rules from a CSS file by analyzing a website.

A.2.4. Font conversion tools

• tt2eot (https://github.com/fontello/ttf2eot) Converts TrueType fonts to Embedded OpenType.
• tt2woff (https://github.com/fontello/ttf2woff) Converts TrueType fonts to WOFF.
• tt2woff2 (https://github.com/nfroidure/ttf2woff2) Converts TrueType fonts to WOFF2.

A.2.5. gulp and gulp plugins

• gulp (http://gulpjs.com) A streaming JavaScript task runner.
• gulp-cli (https://github.com/gulpjs/gulp-cli) The command-line interface for gulp.
• gulp-util (https://github.com/gulpjs/gulp-util) Utilities for gulp plugins.
• gulp-changed (https://github.com/sindresorhus/gulp-changed) A gulp plugin that checks for changed files.
• del (https://github.com/sindresorhus/del) Deletes files and folders.
• gulp-livereload (https://github.com/vohof/gulp-livereload) Automatically reloads the browser when files change on the disk.
• gulp-ext-replace (https://github.com/tjeastmond/gulp-ext-replace) Changes a files extension.
• gulp-htmlmin (https://github.com/jonschlinkert/gulp-htmlmin) Minifies HTML files.
• gulp-less (https://github.com/plus3network/gulp-less) A gulp plugin for compiling LESS files.
• gulp-postcss (https://github.com/postcss/gulp-postcss) A gulp plugin wrapper for PostCSS functionality.
• gulp-uglify (https://github.com/terinjokes/gulp-uglify) Uglifies JavaScript files. Uglification not only minifies JavaScript, but also reduces variable and function names to save the greatest amount of space possible.
• gulp-concat (https://github.com/contra/gulp-concat) Bundles multiple files into a single file.
• gulp-imagemin (https://github.com/sindresorhus/gulp-imagemin) A gulp plugin wrapper for imagemin.

A.2.6. PostCSS and PostCSS plugins

• PostCSS (https://github.com/postcss/postcss) A Node program that transforms CSS.
• Autoprefixer (https://github.com/postcss/autoprefixer) Automatically adds vendor prefixes for CSS properties.
• cssnano (http://cssnano.co) A CSS optimizer. It doesn’t just minify; it reduces CSS via many focused optimizations.
• autorem (https://github.com/malchata/node-autorem) A PostCSS plugin (by me!) that changes px units in CSS to rem units.

A.3. Other tools

These tools don’t belong under any other classification, but bear mentioning here:

• csscss (https://zmoazeni.github.io/csscss) A Ruby-based command-line tool that identifies redundancies in CSS.
• loadCSS (https://github.com/filamentgroup/loadcss) A library by the Filament Group for loading CSS without blocking rendering.
• Picturefill (https://scottjehl.github.io/picturefill) A polyfill for the <picture> element and the srcset and sizes attributes by Scott Jehl of the Filament Group.
• Modernizr (https://modernizr.com) A JavaScript feature-detection library. Can be customized to detect as many (or as few) features as necessary.
• fontTools (https://github.com/behdad/fonttools) A Python-based library of font utilities. Contains the font subsetting tool pyftsubset.
• Font Face Observer (https://github.com/bramstein/fontfaceobserver) A library by Bram Stein that controls the loading and display of fonts, similar in functionality to the browser-based Font Loading API.
• Alameda (https://github.com/requirejs/alameda) A compact AMD module/script loader built to use JavaScript promises.
• RequireJS (http://requirejs.org) An older (albeit more compatible) version of Alameda.
• Zepto (http://zeptojs.com) A lightweight jQuery-compatible alternative. This library is the most feature rich of all jQuery alternatives.
• Shoestring (https://github.com/filamentgroup/shoestring) An even lighter jQuery-compatible alternative by the Filament Group.
• Sprint (https://github.com/bendc/sprint) Yet another lightweight jQuery-compatible alternative that’s very fast.
• $.ajax Standalone Implementation (https://github.com/ForbesLindesay/ajax) A standalone implementation of jQuery’s $.ajax method.
• Fetch API (https://github.com/github/fetch) A polyfill for the Fetch API.
• Velocity.js (http://velocityjs.org) A requestAnimationFrame-driven implementation of jQuery’s animate method. Provides fast animation in a familiar API.