Skip to content

Instantly share code, notes, and snippets.

@scottjehl

scottjehl/notes.md

Last active August 9, 2022 09:31
Show Gist options
  • Save scottjehl/34094c444aa5e798726c to your computer and use it in GitHub Desktop.
Save scottjehl/34094c444aa5e798726c to your computer and use it in GitHub Desktop.
Download ZIP
Notes from Wes Bos's talk on web tooling
Raw
notes.md

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