The Shell

your foundation

@thanpolas

#FrontMASS

mathiasbynens/dotfiles

cowboy/dotfiles

necolas/dotfiles

The Dotfiles

Track your shell preferences on git

@thanpolas

#FrontMASS

rupa/z

The Z

Traverse seamlessly through your projects

@thanpolas

#FrontMASS

Scaffolding

@thanpolas

#FrontMASS

Scaffolding :: Yeoman

The Web's scaffolding tool for modern webapps

@thanpolas

#FrontMASS

Scaffolding :: Yeoman

@thanpolas

#FrontMASS

http://yeoman.io

• It's a CLI tool
• Very cool interface
• 1200+ Generators
• You can create your own

• Guide for Best Practises

Your Editor

The app you spend most of your time with

by far

@thanpolas

#FrontMASS

Your Editor

@thanpolas

#FrontMASS

• Doesn't matter which one you use
• Know it really really well
  • All ​Keyboard shortcuts
  • Packages / Plugins
  • Snippets
  • A soothing theme

Your Editor

@thanpolas

#FrontMASS

BUT WHATEVER YOU DO...

• Editor Config
• A live linter

Development Workflow

@thanpolas

#FrontMASS

Your super best friends

Development Workflow

@thanpolas

#FrontMASS

Makefile

Rakefile

Development Workflow

Your super best friends

@thanpolas

#FrontMASS

JUST PICK ONE!

Watch tasks

Development Workflow

@thanpolas

#FrontMASS

• Watch multiple folders
• Perform multiple tasks
• Trigger with just a save
• Trigger Live Reload

Testing Automation

@thanpolas

#FrontMASS

Tools of the trade

Testing Automation

@thanpolas

#FrontMASS

• PhantomJS (headless WebKit)
• Karma (Angular test runner)
• Protractor (Wraps selenium)
• Browserling  (VMs 360)
• Sauce Labs (VMs 360)

Dependency Management

@thanpolas

#FrontMASS

Dependency Management

@thanpolas

#FrontMASS

CommonJS

Asynchronous Model Definition

RequireJS

Dependency Management

@thanpolas

#FrontMASS

• Load modules asynchronously (XHR)
• Does not require build step (F5 works)
• Has a runtime
• Has a build tool
• Was all the rage couple years ago
• Testing issues
• Edgy, requires too much attention

Browserify

Dependency Management

@thanpolas

#FrontMASS

• [CJS] Node.js Style
• Reduces context switching (when on node)
• Allows usage of the 100k npm modules
• Ok not all of them...
• Requires a build step (no F5)
• Transpiles ES5 to ES3
• Perfect for testing
• Setup and forget

Build Flows

remember our friends?

Makefile

Rakefile

@thanpolas

#FrontMASS

Build Flows

@thanpolas

#FrontMASS

• ES6 to ES5 / ES3 Transpiling
• Source Maps
• Minification
• Cache Busting