theNewDynamic / Thenewdynamic.org
Projects that are alternatives of or similar to Thenewdynamic.org
The New Dynamic
Build Better Faster Websites
We use a Changelog on all of our projects. Please see that file for updates.
tools
- Hugo - A general-purpose website framework—written in Go—that generates static webpages.
- Parcel - A "blazing" fast, zero configuration web application bundler.
- PostCSS | TailwindsCSS (library of JS-based CSS classes ) | PurgeCSS (removes unused CSS)
-
KyleAMathews/typefaces (load OS fonts locally with one little
require
)
Hugo Asset Pipline
This set up utilizes Parcel for Javascript and open source font processing, Hugo Pipes + PostCSS for CSS processing, and npm-run-all
to run Parcel and Hugo in parallel (see note below). We use the Yarn package manager, but you can use NPM if you like.
This asset pipeline is a shift for us from using Webpack to process JS/Fonts/CSS. Parcel is a bundler like Webpack, yet as a tradeoff for slightly less flexibility it has a smaller configuration and file footprint and builds faster; in fact, there is no Parcel configuration file. The shift to using Hugo to build CSS allows Hugo sites to be developed outside of an external build process. There are drawbacks to this approach, as outlined below.
Notes:
- This configuration is built around the assumption that JS/Fonts are processed in development, not production, though it would take minimal effort to do so.
- The scripts in
package.json
include loading of environment variables withcross-env
which is optional for some systems (not windows) and can safely be removed. Just replacecross-env NODE_ENV=development
withNODE_ENV=development
JS
- Uses Parcel Bundler.
- Parcel outputs to
assets/output/index.js
. - Hugo is used to fingerprint and make a secure hash for Subresource Integrity.
- If
fileExists "./assets/output/index.js
Hugo creates a hash of that file fromlayouts/_head/scripts.html
.
- If
- Hugo outputs the processed JS file to
public/output/index.min.[hash].js
.
CSS
Uses Hugo Pipes, utlizing PostCSS. NOTE: we use this method because we use utility-class CSS. I otherwise recommend you use Parcel to process your CSS. See "How to Switch to running JS-based PostCSS" below.- Uses Parcel/PostCSS as default. See "How to Switch to Hugo-based PostCSS" below.
CSS via Hugo
- Hugo processes
assets/css/styles.css
withassets/postcss.config.js
, utilizing Imports, TailwindCSS, Autoprefixer, and PurgeCSS. - If
NODE_ENV=development
is present in the build command, PostCSS will NOT process the file through PurgeCSS. - Hugo outputs the processed CSS file to
public/css/styles.min.[hash].css
.
CSS via Parcel
- Parcel processes
assets/css/styles.css
withassets/postcss.config.js
, utilizing Imports, TailwindCSS, Autoprefixer, and PurgeCSS. - If
NODE_ENV=development
is present in the build command, PostCSS will NOT process the file through PurgeCSS. - Hugo outputs the processed CSS file to
assets/output/index.[hash].css
.
Fonts
- Open source fonts via Typefaces uses Parcel Bundler.
- Parcel outputs CSS to
assets/output/index.css
and also puts the font files, hashed, in the same directory. - Hugo Pipes processes files into public directory and create Prefetch links.
- If
fileExists "./assets/output/index.css
Hugo creates the prefetch links fromlayouts/_head/stylesheets.html
.
- If
- Hugo outputs the processed fonts and CSS file to
public/output/index.min.[hash].css
andpublic/output/font-name.[hash].woff[2]
.
Images
- Assets stored in an S3 bucket or local to the repo, transformed via Imgix.