diff --git a/src/site/content/1-process-html.md b/src/site/content/1-process-html.md index e30346c..115904a 100644 --- a/src/site/content/1-process-html.md +++ b/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 diff --git a/src/site/content/10-sitemap.md b/src/site/content/10-sitemap.md index 70011e9..d78efc1 100644 --- a/src/site/content/10-sitemap.md +++ b/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 diff --git a/src/site/content/2-process-css.md b/src/site/content/2-process-css.md index 820f4a8..ce34b0a 100644 --- a/src/site/content/2-process-css.md +++ b/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) diff --git a/src/site/content/3-process.js.md b/src/site/content/3-process.js.md index ddd9dcb..3f62945 100644 --- a/src/site/content/3-process.js.md +++ b/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/). diff --git a/src/site/content/4-optimize-images.md b/src/site/content/4-optimize-images.md index e2a1efd..114f175 100644 --- a/src/site/content/4-optimize-images.md +++ b/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 `