content

src/site/content/1-process-html.md

@@ -6,8 +6,8 @@ It's likely you'll need some kind of HTML processing to turn templates, layouts,
 
 ### Principles
 
-- Commit only authored files in the repo
-- Minify production HTML
+- Commit only authored files to the repo
+- Minify production code
 
 ### Relevant Tools
 

src/site/content/10-sitemap.md

@@ -6,9 +6,8 @@ If your site is large/complex (over 500 pages), search engines like Google [sugg
 
 ### Principals
 
-- Produce site map files only for production
-- Aren't there different kinds like video site maps?
-- Is this a good time to look for broken links? Probably takes a while? Run on a CRON or async against master?
+- Produce sitemap files only for production
+- Check for broken links
 
 ### Relevant Tools
 

src/site/content/2-process-css.md

@@ -4,22 +4,20 @@ title: Process CSS
 
 It's likely you'll use some kind of CSS processing on a site.
 
-You likely need to process your CSS as you develop. This site will assume a Sass setup, but it could be all PostCSS, or Stylus and Autoprefixer, Tailwind and PurgeCSS and cssnano, etc.
-
-The main point is to not commit the processed/minified files to the repo. They are useless there, creating noisy commits.
+This site will assume a Sass setup, but it could be all PostCSS, or Stylus and Autoprefixer, Tailwind and PurgeCSS and cssnano, etc.
 
 ### Principles
 
 - Lint & Prettify authored files
 - Commit only authored files to repo
-- Concatenate & minify production CSS
+- Concatenate & minify production code
 - Create sourcemaps
 
 ### Relevant Tools
 
-- Lint with Stylelint
-- Prettify with Prettier
-- Preprocessors like Sass, Less, and Stylus.
-- Preprocessors meant to run last, like PostCSS/Autoprefixer
-- Minifiers like [cssnano](https://cssnano.co/), [clean-css](https://www.npmjs.com/package/clean-css), [uglifycss](https://www.npmjs.com/package/uglifycss), [csso](https://github.com/css/csso), or [node-minify](https://www.npmjs.com/package/node-minify).
-- [Unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) tools like [PurgeCSS](https://purgecss.com/), [PurifyCSS](https://github.com/purifycss/purifycss)
+- Linting: [Stylelint](https://stylelint.io/)
+- Code Formatting: [Prettier](https://prettier.io/)
+- Preprocessors: [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), and [Stylus](http://stylus-lang.com/).
+- Preprocessors meant to run last like [PostCSS](https://github.com/postcss/postcss)/[Autoprefixer](https://github.com/postcss/autoprefixer)
+- Minifiers: [cssnano](https://cssnano.co/), [clean-css](https://www.npmjs.com/package/clean-css), [uglifycss](https://www.npmjs.com/package/uglifycss), [csso](https://github.com/css/csso), or [node-minify](https://www.npmjs.com/package/node-minify).
+- [Unused CSS](https://css-tricks.com/how-do-you-remove-unused-css-from-a-site/) removers: [PurgeCSS](https://purgecss.com/), [PurifyCSS](https://github.com/purifycss/purifycss)

src/site/content/3-process.js.md

@@ -6,13 +6,16 @@ You may want to preprocess your JavaScript, allowing for use of modern features
 
 ### Principals
 
-- Only commit authored files to Repo
-- Sourcemaps
-- Concatenate & minify production JavaScript
-- Code splitting & tree shaking
+- Only commit authored files to repo
+- Concatenate & minify production code
+- Create sourcemaps
+- Code splitting (only load what is needed at the time)
+- Tree shaking (remove unused code)
 
 ### Relevant Tools
 
-- Babel
+- Linting: [ESLint](https://eslint.org/)
+- Code Formatting: [Prettier](https://prettier.io/)
+- Preprocessor: [Babel](https://babeljs.io/)
 - Bundlers like [Rollup](https://github.com/rollup/rollup), [Parcel](https://parceljs.org/), and [webpack](https://webpack.js.org/).
-- Post-install one-time package usage with [Snowpack](https://www.snowpack.dev/).
+- Post-install [Snowpack](https://www.snowpack.dev/).

src/site/content/4-optimize-images.md

@@ -2,17 +2,20 @@
 title: Optimize Images
 ---
 
+Images are often the heaviest assets on any website, and are notoriously served under optimized, despite the fact that optimizing images isn't particularly difficult. Beyond optimization, serving the correct size and format image for the circumstance can go a long way.
+
 ### Principals
 
-- Keep highest quality images around (but probably not in repo itself)
+- Keep the highest quality images around (but not in repo itself)
 - Optimize every single production image
-- Use responsive image and lazy load syntax in production HTML
-- Serve the best image formats that are supported (e.g. create and serve .webp when possible)
+- Use responsive image syntax in the HTML
+- Lazy loading
+- Serve the best image formats that are supported (e.g. create and serve `.webp` when possible)
 - Use muted, autoplaying, looping `<video>` instead of GIFs
 
 ### Relevant Tools
 
-- [sharp](https://github.com/lovell/sharp) or [imagemin](https://github.com/imagemin/imagemin) for raster images
-- [svgo](https://github.com/svg/svgo) for .svg
-- APIs like [Imgix](https://docs.imgix.com/apis/url), or [ImageOptim](https://imageoptim.com/api)
-- [Cloudinary](https://cloudinary.com/) to host and serve optimized images
+- Optimizing raster images: [sharp](https://github.com/lovell/sharp) or [imagemin](https://github.com/imagemin/imagemin)
+- Optimizing SVG images: [svgo](https://github.com/svg/svgo) for .svg
+- APIs: [Imgix](https://docs.imgix.com/apis/url) [ImageOptim](https://imageoptim.com/api)
+- Image hosting + API: [Cloudinary](https://cloudinary.com/)

src/site/content/5-unit-tests.md

@@ -7,7 +7,10 @@ Make sure your JavaScript is doing what you wrote it to do, by writing unit test
 ### Principals
 
 - Run your unit tests on every commit
+- Don't deploy Pull/Merge requests if the tests fail
+- Notifications for failures
 
 ### Relevant Tools
 
-- Jest
+- Testing frameworks: [Jest](https://jestjs.io/), [Mocha](https://mochajs.org/), [Karma](https://karma-runner.github.io/2.0/index.html), [AVA](https://github.com/avajs/ava), [Jasmine](https://jasmine.github.io/), [Tape](https://jasmine.github.io/)
+- Assertion libraries: [Chai](https://www.chaijs.com/)

src/site/content/6-end-to-end.md

@@ -7,8 +7,9 @@ Make sure your website is doing all the important things it should be doing. End
 ### Principals
 
 - Run your end-to-end tests on every commit
+- Notifications for failures
 
 ### Relevant Tools
 
-- Cypress
-- jest-puppeteer
+- Testing frameworks: [Cypress](https://www.cypress.io/), [jest-puppeteer](https://github.com/smooth-code/jest-puppeteer), [WebdriverIO](https://webdriver.io/), [TestCafe](https://github.com/DevExpress/testcafe), [Nightwatch.js](https://nightwatchjs.org/)
+- Browser automation: [Puppeteer](https://github.com/puppeteer/puppeteer), [Selenium](https://selenium.dev/), [Playwright](https://github.com/microsoft/playwright), [SlimerJS](https://slimerjs.org/)

src/site/content/7-a11y-tests.md

@@ -7,8 +7,8 @@ You should prevent yourself from shipping any easily preventable and detectable
 ### Principals
 
 - Run your accessibility tests on every commit
+- Notifications for failures
 
 ### Relevant Tools
 
-- [pA11y](https://github.com/pa11y/pa11y)
-- [Axe](https://github.com/dequelabs/axe-cli)
+- [Accessibility Testing Tools](https://css-tricks.com/accessibility-testing-tools/): [Axe](https://github.com/dequelabs/axe-cli), [pA11y](https://github.com/pa11y/pa11y), [accessibilityjs](https://github.com/github/accessibilityjs), [Tenon.io](https://tenon.io/getcode.php)

src/site/content/8-visual-regression.md

@@ -7,7 +7,9 @@ Prevent yourself from making unwanted visual changes to a site by comparing scre
 ### Principals
 
 - Run your visual regression tests on pull requests coming into Master.
+- Notifications for failures
 
 ### Relevant Tools
 
-- [Percy](https://percy.io/)
+- Visual Regression Testing Services: [Percy](https://percy.io/), [Chromatic](https://www.chromaticqa.com/), [diff.io](https://diff.io/), [Axcept](https://axcept.io/), [Applitools](https://applitools.com/)
+- Visual Regression Frameworks: [BackstopJS](https://github.com/garris/BackstopJS), [Wraith](https://github.com/BBC-News/wraith) (Pair with [Spectre](https://github.com/wearefriday/spectre))

src/site/content/9-perf-budget.md

@@ -6,8 +6,10 @@ Make sure your website doesn't regress in performance by testing all changes aga
 
 ### Principals
 
-- Run your performance tests on every commit.
+- Run your performance tests on every commit
+- Notifications for exceeding budget
 
 ### Relevant Tools
 
-- Hosted services like [SpeedCurve](https://speedcurve.com/) ([CLI](https://github.com/SpeedCurve-Metrics/speedcurve-cli)) and [Calibre](https://calibreapp.com/) ([CLI](https://calibreapp.com/cli))
+- Hosted services: [SpeedCurve](https://speedcurve.com/) ([CLI](https://github.com/SpeedCurve-Metrics/speedcurve-cli)) and [Calibre](https://calibreapp.com/) ([CLI](https://calibreapp.com/cli))
+- Frameworks: [Build Tracker](https://buildtracker.dev/)