anchor.diff:      li Grunt - Configuration may be much easier for designers to jump into.
       li Brunch - Focused on building assets, instead of running tasks.
       li Webpack - Rapid development and hot-reloading of changes.
  +    li DevTools - Edit in the browser, and your code will change as well.
       li And many others
   
   section
  -  h2 What I use
  -  p I typically start out with a Gulp configuration, and can put one together in a few minutes with the abundance of modules that exist for it.
  +  h2 Quick and easy in the browser
  +  p DevTools already makes it easy to tweak your website, and with a <code>Workspace</code> and <code>file mapping</code>, changes are immediately saved back to your codebase. This is a great way of making quick changes to a static site, and it pairs extremely well with tools like Gulp. If you do SASS/SCSS/LESS compilation with Source Maps, it can even modify the original source for you.
  +
  +section
  +  h2 Give it a shot!
  +  p I used the Responsive configuration from <a href="http://www.initializr.com/" target="_blank">Initializr.com</a>, but this works with any stylesheet or Javascript file. To launch this example, start a quick server in the <code>example-devtools-workspace</code> folder.
  +  pre
  +    code(class="bash").
  +      $ npm install -g http-server
  +      $ cd example-devtools-workspace
  +      $ http-server -p 8081
  +  p Now go to <a href="http://localhost:8081/" target="_blank">http://localhost:8081/</a>.
  +
  +section
  +  h2 Link your files and tweak away
  +  ul
  +    li Open DevTools
  +    li Click the settings cog in the top right
  +      ul
  +        li Navigate to <code>Workspace</code>
  +        li Click <code>Add Folder</code>
  +        li Choose the <code>example-devtools-workspace</code> folder
  +        li Grant DevTools access to the folder
  +        li Close the Settings modal
  +    li Click the <code>Sources</code> tab
  +      ul
  +        li Open <code>localhost:8081/css/main.css</code>
  +        li Right click the code and click <code>Map to File System Resource...</code>
  +        li Click <code>main.css</code> and click <code>OK</code> to restart the inspector
  +    li Edit the CSS, and refresh the page.
  +
  +section
  +  h2 What's that? Vim is better than DevTools, you say?
  +  p I completely agree! Your editor is your best friend, and tweaking in there may be more comfortable.
  +  p How do you feel about turning
  +  p
  +    code Code->Save->Alt-Tab->Compile->Alt-Tab->Refresh->Repeat
  +  p into
  +  p
  +    code Code->Save->Look
  +
  +section
  +  h2 Automate your workflow
  +  p With a few dozen lines of code, and a few Gulp modules (there are thousands to do your bidding), it takes just minutes to automate the compilation of code.
     pre
       code(class="javascript").
         var gulp = require('gulp')
  -        , sourcemaps = require('gulp-sourcemaps')
           , uglify = require('gulp-uglify')
  +        , concat = require('gulp-concat')
           , sass = require('gulp-sass');
   
  -      gulp.task('default', ['sass', 'js']);
  -
  +      gulp.task('default', ['sass', 'js'], function () {
  +        gulp.watch('./scss/**/*.scss', 'sass');
  +        gulp.watch('./app/**/*.js', 'js');
  +      });
         gulp.task('sass', function () {
           return gulp.src('./scss/style.scss')
  -          .pipe(sourcemaps.init())
  -          .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
  -          .pipe(sourcemaps.write('.'))
  +          .pipe(sass())
             .pipe(gulp.dest('./public_html/'));
         });
  -
         gulp.task('js', function () {
  -        return gulp.src('./app/index.js')
  -          .pipe(sourcemaps.init())
  +        return gulp.src(['./app/index.js', './app/menu.js', './app/chat.js'])
             .pipe(uglify())
  -          .pipe(sourcemaps.write('.'))
  -          .pipe(gulp.dest('./public_html/app.js'));
  +          .pipe(concat('app.js'))
  +          .pipe(gulp.dest('./public_html/'));
         });
   
   section
     h2 Gulp Hot-Load
  -  p If I'm working on the frontend, live-reloading makes the process much easier, but adds to the complexity.
  +  p Automatically updating the browser when files change simplifies the development flow, but adds to the complexity of your build tools.
     p BrowserSync is my preferred way of quickly adding in CSS hot-reloading, and refreshing the browser when the JS changes.
     pre
       code(class="javascript").
  
positive.code:     li Upload assets to S3
      li Remove development code in production builds
      li Live-reload the browser when you change something
  
  section
    h2 Slide decks too!
  
negative.code:           transition: 'linear',
        });
  
        import hljs from 'highlight.js';
        import 'highlight.js/styles/tomorrow-night.css';
        hljs.initHighlightingOnLoad();
  
  section
    h2 Time to edit some code
    pre
      code(class="bash").
        $ cd example-webpack
        $ npm install
        $ npm run hot-dev-server
  
        # In another terminal:
        $ npm run start-dev
    p Now open up <a href="http://localhost:8080/" target="_blank">http://localhost:8080/</a> and edit some files in <code>app</code>.
  