--- title: Fighting front-end fatigue with tooling recipes description: >- To fight front-end fatigue, we started a repository of tooling recipes to help you use modern technology in any project language: English url: 'https://voorhoe.de/en/blog/fighting-front-end-fatigue-with-tooling-recipes/' --- Blog # Fighting front-end fatigue with tooling recipes By [Jasper](/en/team/jasper.md) 17 March 2017 * [Why not Less, Sass, Webpack, Browserify, Angular, React, Preact, Vue…?](#-why-not-less-sass-webpack-browserify-angular-react-preact-vue-) * [1. Next-gen CSS with PostCSS](#-next-gen-css-with-postcss) * [Ingredients](#ingredients) * [2. Lightweight, modular ES6 with Rollup](#-lightweight-modular-es-with-rollup) * [Ingredients](#ingredients) * [3. Express with Node­mon and Browsersync](#-express-with-node-mon-and-browsersync) * [Ingredients](#ingredients) * [What’s for dessert?](#what-s-for-dessert-) How to be productive with the latest web technologies As a generally hyper-enthusiastic person I don't seem to exhibit any symptoms, but[front-end fatigue appears widely spread](https://www.smashingmagazine.com/2016/11/not-an-imposter-fighting-front-end-fatigue/). 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](https://github.com/voorhoede/front-end-tooling-recipes#readme). 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. [Our tooling recipes on GitHub](https://github.com/voorhoede/front-end-tooling-recipes#readme) ## Why not Less, Sass, Webpack, Browserify, Angular, React, Preact, Vue…? 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. ## 1. Next-gen CSS with PostCSS 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](https://voorhoede.github.io/front-end-tooling-recipes/postcss-process-and-watch/) comes in. ## Ingredients * 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. ## 2. Lightweight, modular ES6 with Rollup 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](https://voorhoede.github.io/front-end-tooling-recipes/rollup-bundle-and-watch/)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. [PostCSS process and watch](https://voorhoede.github.io/front-end-tooling-recipes/postcss-process-and-watch/) ## Ingredients * 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. ## 3. Express with Node­mon and Browsersync 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](https://voorhoede.github.io/front-end-tooling-recipes/express-with-nodemon-browsersync/) solves both cases. ## Ingredients * 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. [Express with Nodemon & Browsersync](https://voorhoede.github.io/front-end-tooling-recipes/express-with-nodemon-browsersync/) ## What’s for dessert? We are steadily cooking up more recipes and already have a few more available: * [Nightwatch server and browsers](https://voorhoede.github.io/front-end-tooling-recipes/nightwatch-server-and-browsers/)- Run your project's end-to-end (e2e) tests in Chrome and Firefox using Nightwatch. * [Compress with Brotli and Gzip](https://voorhoede.github.io/front-end-tooling-recipes/compress-with-brotli-and-gzip/)- Compress static files with Brotli and Gzip using maximum compression. * [Travis CI: deploy to GitHub Pages](https://voorhoede.github.io/front-end-tooling-recipes/travis-deploy-to-gh-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 ;) [← All blog posts](/en/blog.md) ## Also in love with the web? For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you? [Join our team](/en/jobs.md) [Return to top](#top)