Workflow & Tooling for Frontend Developers

Poll time

  • Who uses JSHint?
  • Who has automation for testing or deployment?
  • Who uses Yeoman, LiveReload, CodeKit?

We're seeing the emphasis shift from valuing trivia to valuing tools ~ Rebecca Murphey

As an engineer, there is a short list of tools that you must be rabid about. Rabid. Foaming at the mouth crazy. ~ Michael Lopp, aka Rands

  • Your shell
  • SSH
  • Project configuration
  • Yeoman
  • Testing
  • Style iteration
  • DevTools tricks
  • Rainbows!

Your shell

Don't let it suck

Your shell, sexy.

Dotfiles: favorite aliases

  • z for directory jumping
  • server for instant webserver
  • c for colorized cat
  • gz for gzipped size
  • extract because I'll never remember the tar options

Pictures improve everything

Gitshots!

SSH

  • Silky Smooth Hopping
  • cat ~/.ssh/id_rsa.pub | pbcopy
  • paste into server's ~/.ssh/authorized_keys

SSH config!

[Simplify Your Life With an SSH Config File ](http://nerderati.com/2011/03/simplify-your-life-with-an-ssh-config-file/)

SSH public keys, better than password passing

SCP, so hot

  • From local file to server to clipboard
  • From my dotfiles:

# lets toss an image onto my server and pbcopy those sweetcheeks.
function scpp() {
    scp "$1" paul@paulirish.com:~/paulirish.com/i;
    echo "http://paulirish.com/i/$1" | pbcopy;
    echo "Copied to clipboard: http://paulirish.com/i/$1"
}

$ cd ~/Download
$ scpp omghilarious.png

omghilarious.png           100% 4316     4.2KB/s   00:00

Copied to clipboard: http://paulirish.com/i/omghilarious.png

Deploy on push

Your editor

Your editor

  • Pick one with power
  • Find the community
  • Augment and accessorize
  • Solid choices: Sublime Text 2, WebStorm, vim/emacs

Project Configuration

Whitespace line endings

Consistent whitespace rules

.jshintrc

  • .jshintrc example
  • style nits on every code review = :(
  • standardize your style guide
  • toolify your style guide

Yeoman

 

Yeoman is an open source set of frameworks and tools to accellerate building compelling webapps.

  • Authoring abstractions, linting, testing, build tools
  • Seamless integration of successful open source projects
  • Smooth developer ergonomics

Built on top of great tools like Grunt.js

Included in Yeoman

  • Compass. Sass. Coffeescript.
  • AMD Module support. RequireJS. ES6 Module experiment.
  • Bootstrap. Stripped HTML5 Boilerplate. Modernizr.
  • Twitter Bower.
  • Mocha. PhantomJS.
  • Build: r.js OptiPNG, jpegtran, confess.js

Yeoman Demo

  1. init
  2. HTML5 Boilerplate, Bootstrap for free
  3. Seamless Sass, Compass, Coffeescript - all automatic and live
  4. Emmet in ST2
  5. Build process incl best in class image optimization.

Continuous improvement

  • Insight: A chance to improve the tool based on real world use
  • Anonymous metrics reported to Google Analytics
  • Activity results
  • Auto-update
  • Defaults represent developer community consensus on best app dev practices
  • UglifyJS gaining sourcemaps

Package management

  • Clientside dependencies are a chore
  • Common code duplicated
  • Library fragmentation and disjoint communities
  • Jealousy: node's & ruby's package ecosystem
  • Let's fix this!
  • Demo

Generators

  • Generators scaffold out entire projects, or augment existing ones
  • Flexible:
    • Remotely pulling and filtering dependencies
    • Wiring, so boilerplate minimization++
    • Sub-generators for creating new models, views etc.
  • Default generators: Ember, Backbone, Angular, Mocha, Jasmine...
  • Demo

Yeoman: In Summary

  • Scaffold in a snap
  • Live-recompile, Live-refresh
  • Sass, Coffeescript, AMD & ES6 Modules
  • Run unit tests in headless WebKit via PhantomJS
  • Robust build script

Yeoman 0.9.4

Testing

Tunnel your localhost out

Testem

Device Testing

Make testing more fun

Style Iteration & DevTools

Style Iteration

  • Sass + LiveReload
  • Chrome DevTools' support for Sass
  • WebStorm LiveEdit
  • wing it w/ guard

Chrome DevTools

Multi-line console:

Mobile:

  • touch events
  • search all files
  • filter file, filter definition
  • device emulation

Chrome DevTools

In closing...

Find your toolchain, be proud of it

Workflow resources

Your job as a developer isn't to just develop, but to continually learn how to develop better

In Summary...

  • If you're repeating yourself

  • chances are someone's written software to automate it

  • and if they haven't, you're about to.

UPDATE: late breaking feature!

Styled. Console. Messages


console.log('trés boring');
console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

Thank you!