Skip to content

Instantly share code, notes, and snippets.

@scottjehl scottjehl/notes.md
Last active Oct 17, 2016

Embed
What would you like to do?
Notes from Wes Bos's talk on web tooling

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!

BrowserSync:

  • 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.