27 -- A Room with a VueJS

[al-the-x]

Rituals (~1h 15m)

• Standup Meeting (~15m)
• Three Little Things (~30m)
• Homework Review (~30m)

  Tools on Tues

• Check out that VueJS
  • A little setup: bower install --save vue
  • DOM-based templating in 3 easy steps:
  • Let's get some data... profile data, anyone?
  • Create a Vue instance tied to .profile-details...
  • Inject the profile data...
  • Watch those mustaches vanish!
  • One more time?
  • How about that repo data?
  • Create a Vue instance tied to #repo-list-popular...
  • Inject the repo data for just one repo to start...
  • No problem! But there's more than one repo...
  • v-repeat to the rescue!
  • Could we use that with other APIs?

• Time for a Big GulpJS!

  • Installed globally? Try gulp --help... :(
  • Slightly more setup: npm install --link --save-dev gulp
  • So now what? gulp --help again?
  • You want a gulpfile?
  • What is this "gulpfile"...!?

  • Minimally:

    var gulp = require('gulp');
    
    gulp.task('do-something', function(){
    console.log('so do something already!');
    }); // END gulp.task(default)

  • Now try gulp do-something...
  • Maybe we should make it, y'know... do something?
  • What do you do in gulpfile.js?

  • Maybe you could make a dist/ bundle?

    gulp.task('build', function(){
    gulp.src('src/index.html')
      .pipe(gulp.dest('dist/'));
    }); // END gulp.task(build)

  • What about building your Sass files?

    gulp.task('sass', function(){
    var sass = require('gulp-sass');
    
    gulp.src('src/scss/**/*.scss')
      .pipe(sass({/* options go here */}))
      .pipe(gulp.dest('src/css/'));
      // Careful! ^^^^
    }); // END gulp.task(sass)

  • And watching those files for changes?

    gulp.task('watch', function(){
    gulp.watch('src/scss/**/*.scss', [ 'sass' ]);
    }); // END gulp.task(watch)

  • They're like recipes...

[al-the-x]

Three Little Things

1. Grids, gutters and offsets
2. Unauthenticated vs authenticated requests to Etsy?
3. Sass @mixin...?