Fighting front-end fatigue with tooling recipes

As a generally hyper-enthusiastic person I don't seem to exhibit any symptoms, but front-end fatigue appears widely spread. Maybe I’m lucky: there are 20 of us here, helping me filter through the daily onslaught of new web frameworks, libraries and tools. We love all of it, because this new technology enables us to do more on the web. At the same time, figuring out what to use when, or why, can be a daunting task.

To help fight this front-end fatigue, we at De Voorhoede started a repository of tooling recipes. These pre-configured setups make it easier for us to use modern technology in any project. Each recipe works out of the box and is accompanied by an extensive readme to get you up and running.

We chose these technologies for a reason. It’s unavoidable that browser software lags behind the specifications and recommendations for HTML, CSS and JavaScript. So, many developers choose to ignore the spec and develop all kinds of compelling tech — so that others can build impressive stuff on top — but we prefer to use technology that only bridges the gap between the specifications and the browser’s adoption rate. As soon as browsers catch up, we take out the middleware. This keeps our tech stack clean and simple and our technical debt at a minimum.

The latest additions to the CSS spec enable us to write more effective stylesheets. We can use CSS variables (or custom properties as they’re officially called), color functions and advanced calculations. Using @import lets us write modular CSS — but unless you use Server Push, it comes with a performance penalty: the page is blocked from rendering while downloading of all those CSS files. Also, older browsers don’t know what to do with all these new CSS features. That’s where the PostCSS process and watch recipe comes in.

• Bundles your CSS (meaning, you can use @import freely);
• Substitutes variables with their values, pre-calculates colors and dimensions;
• Adds sourcemaps for debugging;
• Adds fallbacks and vendor prefixes for cross browser compatibility;
• Has a watcher for development;
• Minifies your CSS for production.

With the ES2015/2016 additions to the JavaScript language, we can write more powerful and expressive scripts. ES modules finally gave us a standardised way to write modular JavaScript. Sadly, browsers don’t quite know how to load ES modules. And when a browser doesn’t know an ES feature, it will throw and error and break your website.

With the Rollup bundle and watch recipe we can bundle our ES modules for the browser and transpile new ES2015/2016 features to ES5 code. This way we can write modern JavaScript and turn it into something all browsers understand.

• Bundles your ES modules and imported CommonJS and UMD modules into a single file;
• Transpiles ES2015/16 JavaScript into ‘old’ ES5 JavaScript;
• Creates lightweight output;
• Watches and lints your changes during development, with sourcemaps for debugging;
• A build task that minifies your scripts for production.

Node.js with Express is our server technology of choice. While we’re developing we want to see the changes we make as quickly as possible — regardless of changes to server or browser code. At the same time, we want the site to be highly performant in production. Our recipe for Express with Nodemon and Browsersync solves both cases.

• Nodemon ensures the server restarts on every change during development;
• Browsersync provides a proxy of the Express server with auto reloading on browser file changes;
• Allows access to the site from other devices on the network;
• In production mode, caching and compression are enabled for fast page loads.

We are steadily cooking up more recipes and already have a few more available:

• Nightwatch server and browsers - Run your project's end-to-end (e2e) tests in Chrome and Firefox using Nightwatch.
• Compress with Brotli and Gzip - Compress static files with Brotli and Gzip using maximum compression.
• Travis CI: deploy to GitHub Pages - Automatically create distributions and deploy them to GitHub Pages using Travis CI.

Go ahead and give them a taste. I hope they cure your fatigue and help you enjoy the latest the web has on the menu ;)