heyfletch
7/30/2014 - 7:34 PM

Website Build Ingredients

Website Build Ingredients

  • matchmedia: testing whether or not a media query applies with Javascript
  • picturefill: switch image sizes / hidpi / retina (includes matchmedia?)
  • Gulp or Grunt: build system / task runner
  • NPM: node package manager
  • composer: PHP package manager
  • bower: JS package manager
  • autoprefixer: add browser prefixes
  • cssmin: minify and concatenate CSS
  • imagemin: lossless image compression
  • spritesmith: create sprites
  • svgGui: optimize SVGs
  • lean modernizer grunt: remove unused modernizer
  • uncss: remove unused CSS
  • critical or penthouse: Extract & Inline Critical-path CSS
  • loadcss: load sitewide css after above the fold css
  • uglify: minify & concatenate javascript
  • requirejs?: async / onload js
  • libsass: convert sass to css
  • compass: do compass stuff
  • livereload (or that new one, browsersync.io?): reload web page while building

#Testing

  • pagespeed: best practices
  • pingdom: speed and grade
  • webpagetest: speed and grade
  • Facebook debugger: social media sharing