Notes from @wesbos's talk:
Our frontend workflow is changing quickly and for good reasons. Tooling for tooling sake is a waste, but don't overlook the utility of modern dev tooling workflows - these are great, useful tools that are letting us improve our workflows in standards-based, forward-looking ways.
Trend: Frontend developers are moving to using package managers (npm) for client-side code (CSS and JS), much like we have been for managing our build tooling itself. I can attest to this being hugely helpful at Filament Group on client-side code, especially now that so many of our projects are on npm (https://www.npmjs.com/~filamentgroup ).
Yay, another talk that recommends loadCSS for performance. Nice to hear :)
Gulp tasks to use:
- Critical (a critical css task for Gulp (similar to our: criticalcss )
- Purify (analyze css and remove unused styles)
- Imagemin (optimizing all images: gif, jpeg, png, svg, mozjpeg, more)
- Uglify (minify js - commonly used in grunt already)
- Browserify or webpack or JSPM to manage JS dependencies (pulling together JS builds through ES6 modules).
- Note: Eventually http/2 will make this last step irrelevant as we can package JS on the client side on-demand
JS features to pay attn to:
- template strings (better than concatenating strings and vars)
- let and const for block-level scoping, rather than just function level scoping
- Babel: write es6 code, transpile back to es5 for compat
- require('babel/polyfill’) brings js feature polyfills in as needed
CSS tools to get excited about:
- CSSNext: write css4 syntax and compile back to css3 that works already. Like Babel for CSS
- PostCSS: sits on top of css itself, as opposed to writing Sass. Lots of great plugins
- Autoprefixer for adding vendor prefixes
- quantityQueries plugin for postCSS makes quanty query css manageable to write - cool!
- like Live Reload “except it actually works”
- Gives you a local SSL cert for local https
- Exposes local server IPs for testing sites a lot more easily than vhosts
- Also has local tunneling to preview local urls on the web
- Syncs clicks, submits, scrolls across device labs