content updates

Author: chriscoyier

src/site/_includes/css/main.scss

@@ -35,6 +35,15 @@ h1 {
   line-height: 0.9;
   margin: 0 0 3rem 0;
 }
+p {
+  margin: 0 0 1rem 0;
+}
+a {
+  color: #f79a44;
+  &:hover {
+    color: #ffc793;
+  }
+}
 
 .button {
   background: white;

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

@@ -2,4 +2,14 @@
 title: Process HTML
 ---
 
-By processing HTML, I mean turning templates, layouts, partials, and data into flat (probably minified) HTML. You’ll need to do this processing in development to work on your site, but you don’t need to commit the processed HTML to your repo. The build process can produce it there with different options, like you could minifiy HTML in production but not in development.
+It's likely you'll need some kind of HTML processing to turn templates, layouts, partials, and data into full HTML documents you can use.
+
+### Principles
+
+- Commit only authored files in the repo
+- Minify production HTML
+
+### Relevant Tools
+
+- With [Static Site Generators](https://serverless.css-tricks.com/services/ssgs) like [Eleventy](https://www.11ty.dev/), [Jekyll](https://jekyllrb.com/), and [Hugo](https://gohugo.io/) you handle this rather directly.
+- With JavaScript Framework Site Generators like [Gatsby](https://www.gatsbyjs.org/), [Next](https://nextjs.org/), [Nuxt](https://nuxtjs.org/), [VuePress](https://vuepress.vuejs.org/), and [Gridsome](https://gridsome.org/), the HTML is created as part of piecing together components.

src/site/content/10-sitemap.md

@@ -2,4 +2,15 @@
 title: Build a sitemap
 ---
 
-Check for broken links too?
+If your site is large/complex (over 500 pages), search engines like Google [suggest](https://support.google.com/webmasters/answer/156184?hl=en) a sitemap so they can more intelligently crawl your site.
+
+### 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?
+
+### Relevant Tools
+
+- Something that makes site maps
+- [broken-link-checker](https://www.npmjs.com/package/broken-link-checker)

src/site/content/11-notify.md

@@ -2,4 +2,12 @@
 title: Send Notifications
 ---
 
-Slack, SMS, Email, etc.
+### Principals
+
+- When important things happen in a build process, notify the right people.
+
+### Relevant Tools
+
+- Slack, Discord
+- Email sending APIs like Sparkpost, Mailgun, etc.
+- SMS sending APIs like Twilio

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

@@ -2,6 +2,24 @@
 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.
+
+### Principles
+
+- Lint & Prettify authored files
+- Commit only authored files to repo
+- Concatenate & minify production CSS
+- 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)

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

@@ -2,4 +2,17 @@
 title: Process JavaScript
 ---
 
-Babel. webpack?
+You may want to preprocess your JavaScript, allowing for use of modern features that may not be supported in as many browsers as you'd like to support. But you may also want to split up your authored JavaScript for readability.
+
+### Principals
+
+- Only commit authored files to Repo
+- Sourcemaps
+- Concatenate & minify production JavaScript
+- Code splitting & tree shaking
+
+### Relevant Tools
+
+- Babel
+- 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/).

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

@@ -2,10 +2,17 @@
 title: Optimize Images
 ---
 
-PNG, JPEG, GIF
+### Principals
 
-SVG
+- Keep highest quality images around (but probably 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 muted, autoplaying, looping `<video>` instead of GIFs
 
-Make Webps?
+### Relevant Tools
 
-Help with responsive images?
+- [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

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

@@ -1,3 +1,13 @@
 ---
 title: Run Unit Tests
 ---
+
+Make sure your JavaScript is doing what you wrote it to do, by writing unit tests and making sure those tests pass.
+
+### Principals
+
+- Run your unit tests on every commit
+
+### Relevant Tools
+
+- Jest

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

@@ -2,4 +2,13 @@
 title: Run End-to-End Tests
 ---
 
-Cypress
+Make sure your website is doing all the important things it should be doing. End-to-end tests are great for testing whole usage flows like visiting a URL, clicking a button, and making sure a certain modal is open with the correct text in it. Or going through a sign up process.
+
+### Principals
+
+- Run your end-to-end tests on every commit
+
+### Relevant Tools
+
+- Cypress
+- jest-puppeteer

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

@@ -1,3 +1,14 @@
 ---
 title: Run Accessibility Tests
 ---
+
+You should prevent yourself from shipping any easily preventable and detectable accessibility problems by running automated accessibility testing tools.
+
+### Principals
+
+- Run your accessibility tests on every commit
+
+### Relevant Tools
+
+- [pA11y](https://github.com/pa11y/pa11y)
+- [Axe](https://github.com/dequelabs/axe-cli)

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

@@ -2,4 +2,12 @@
 title: Run Visual Regression Tests
 ---
 
-Percy?
+Prevent yourself from making unwanted visual changes to a site by comparing screenshots and ensuring that the changes you made are the changes you want.
+
+### Principals
+
+- Run your visual regression tests on pull requests coming into Master.
+
+### Relevant Tools
+
+- [Percy](https://percy.io/)

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

@@ -1,3 +1,13 @@
 ---
 title: Test Against Performance Budget
 ---
+
+Make sure your website doesn't regress in performance by testing all changes against your established performance budget.
+
+### Principals
+
+- Run your performance tests on every commit.
+
+### 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))

src/site/css/.gitignore

@@ -1,4 +1,3 @@
-# Ignore everything in this directory
-*
-# Except this file
+# Ignore everything in this directory, except this file
+# It's here because the folder needs to exist for Netlify
 !.gitignore

src/site/index.njk

@@ -11,7 +11,7 @@ layout: default
     <span>could & should do.</span>
   </h1>
 
-  <p class="intro-p">This site is about all the things you can and often should do with a build process on a site. That is, your local build process, but more importantly the build process that runs after you commit your code. They need to work in unison so that your repo is clear of files that don’t need to be there and you’re making computers help you do rote tasks for you and protect you from yourself.</p>
+  <p class="intro-p">This site is about all the things you can and often should do with a build process on a site. To some degree, your <em>local</em> build process, but this is more about the build process that runs <em>as you commit code and deploy</em>. They need to work in unison so that your repo is clear of files that don't need to be there, you're being protected from mistakes, and you're making computers do things they are best at.</p>
 
   <a class="button repo-button" href="https://github.com/CSS-Tricks/build-process">Repo on GitHub</a>
 </header>