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. 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.
Why not Less, Sass, Webpack, Browserify, Angular, React, Preact, Vue…?
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 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.
2. Lightweight, modular ES6 with Rollup
- Bundles your ES modules and imported CommonJS and UMD modules into a single file;
- 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 Nodemon 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 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.
What’s for dessert?
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 ;)