How to be productive with the latest web technologies
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 ;)