Automate all the things

Automate All the Front-End Development Things!

Text

Kitt Hodsden • http://ki.tt • @kitt

1

Kitt Hodsden • @kitt • http://ki.tt/cfo 2

Hi!

Kitt Hodsden • @kitt • http://ki.tt/cfo

Who are you?

3


And what do have we here?

4


http://ki.tt/cfo

5


http://ki.tt/cfo


http://ki.tt/cfo

http://ki.tt/cfo


Wait... what?

8

What are we talking about?


Wait... what?

9

What are we talking about?


You are invited to participate in group note taking at:

http://ki.tt/cfo14notes

10

Community knowledge!


Prerequisites!

11


node & ruby

12

We need node and ruby to use the tools we’re going to talk about.


Setup node by downloading the installer and running it.

http://nodejs.org


# mac / linux$ which ruby/usr/local/bin/ruby$ ruby --version ruby 2.0.0p195

# windows> where rubyC:\Ruby200\bin\ruby.exe> ruby --versionruby 2.0.0p451

Yay! Sass installed!See if you already have ruby installed


HOMEBREWhttp://mxcl.github.com/homebrew/$ brew install ruby

RVM RUBY VERSION MANAGERhttps://rvm.io/rvm/install

Install ruby in different ways on OSX

OSX

http://mxcl.github.com/homebrew/



https://rvm.io/rvm/install



HOMEBREWhttp://mxcl.github.com/homebrew/$ brew install ruby


Install ruby in different ways on OSX

OSX







https://unfiniti.com/software/mac/jewelrybox

Ruby on OSX, I recommend JewelryBox, too.




APT / YUM$ sudo apt-get install ruby1.9.1$ sudo yum install ruby1.9.1


Install ruby in different ways on Linux

Linux






APT / YUM$ sudo apt-get install ruby1.9.1$ sudo yum install ruby1.9.1


Install ruby in different ways on Linux

Linux






RUBYINSTALLERhttp://rubyinstaller.org/downloads/

PIKhttps://github.com/vertiginous/pik

Install ruby in different ways on Windows

Windows

http://rubyinstaller.org/downloads/





RUBYINSTALLERhttp://rubyinstaller.org/downloads/

PIKhttps://github.com/vertiginous/pik

Install ruby in different ways on Windows

Windows

CYGWINhttp://cygwin.com








http://ki.tt/cfo

22



Automate All the Front-End Development Things!


Make your Front-End Workflow AWESOME

25


1. Embrace the DRY principle

26

Guiding principles of making our workflows AWESOME


1. Embrace the DRY principle2. Make changes easy

27



1. Embrace the DRY principle2. Make changes easy3. Make finding mistakes easy

28



Implement a design or prototype

29

What magic do we do?


Implement a design or prototypeUpdate the designs

30



Implement a design or prototypeUpdate the designsMake sure it works in all browsers

31



Implement a design or prototypeUpdate the designsMake sure it works in all browsersMake it faster

32




33



We’re MAGICAL



35


How often do we have a blank slate, really?



37



38


change.click.

change.click.

39


change.click.

change.click.

40

change.click.

change.click.

change.click.

change.click.change.

click.change.

click.

change.click.

change.click.

change.click.

change.click.

change.click.

change.click. change.

click.change.

click.

change.click.

change.click.

change.click.

change.click.change.

click.change.

click.


Guiding principles!




LiveReload

43

http://livereload.com/



http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

http://ki.tt/LR


http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions-

http://ki.tt/LR


or!


<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

If you don’t use browser plugins, you need this JS for LiveReload


<cfoutput><script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script></cfoutput>

If you don’t use browser plugins, you need this JS for LiveReload



IE options

http://github.com/dvdotsenko/livereload_ie_extension

http://reloadit.codeplex.com/

51

LiveReload IE options



Guiding principles!



browser-sync

54

http://browsersync.io/


http://ki.tt/cfo

55


npm

56

Node Package Manager for installng node packages


Open a new terminal or command window


In OSX, drag and drop the folder into the terminal window for the path.


In Windows, use right click cut and paste


// save this into run-server.jsvar connect = require('connect');connect.createServer( connect.static(__dirname)).listen(8080);

If you don’t have a local development environment, use this run-server.js


$ npm install connect...$ node run-server.js

# open http://localhost:8080/index.html# control-c to stop

If you don’t have a local development environment, install the connect package


> npm install connect...> node run-server.js

# open http://127.0.0.1:8080/index.html# control-c to stop

If you don’t have a local development environment on Windows, install the connect package


You can accept this local JS file running on node, turn it off later!


http://localhost:8080/index.html

http://127.0.0.1:8080/index.html

64

You can see the temporary site running locally!


browser-sync

65

http://browsersync.io/


$ npm install -g browser-sync


$ browser-sync$


$ browser-sync start --server --files "css/*.css"


bs-config.js

69


$ browser-sync init[BS] Config file created (bs-config.js)[BS] To use it, in the same directory run: browser-sync$


module.exports = { files: "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};

https://github.com/shakyShane/browser-sync/wiki/options


module.exports = { files: "css/*.css", proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};

72



module.exports = { files: ["css/*.css", "**.*.html", "js/**/*.js"], proxy: { host: "localhost", port: 8080 }, ghostMode: { clicks: true, links: true, forms: true, scroll: true }, open: true, injectChanges: false, notify: true,};




74


$ browser-sync start


$ browser-sync start[BS] Copy the following snippet into your website, just before the closing </body> tag

<script src='//192.168.5.6:3000/socket.io/socket.io.js'></script><script>var ___socket___ = io.connect('http://192.168.5.6:3000');</script><script src='//192.168.5.6:3001/client/browser-sync-client.0.7.0.js'></script>

[BS] Watching files...



MAGICAL


click.copy.scroll.click.paste.

79



Alfredhttp://alfredapp.com/

Quicksilverhttp://qsapp.com/

Launchbarhttp://www.obdev.at/products/launchbar/

81

http://www.alfredapp.com

http://www.alfredapp.com

http://qsapp.com

http://qsapp.com

http://www.obdev.at/products/launchbar/index.html

http://www.obdev.at/products/launchbar/index.html


Skylighthttp://www.candylabs.com/skylight

Launchyhttp://www.launchy.net/http://pylaunchy.sourceforge.net/docs/

82


Gnome Launch Boxhttps://live.gnome.org/

Gnome Dohttp://do.davebsd.com/

Launchyhttp://www.launchy.net/http://pylaunchy.sourceforge.net/

83

https://live.gnome.org

https://live.gnome.org

http://do.davebsd.com

http://do.davebsd.com

http://www.launchy.net

http://www.launchy.net

http://pylaunchy.sourceforge.net

http://pylaunchy.sourceforge.net







Alfred looking up jQuery.


Dash has a large number of document sets


Naïve way to open all the browsers at once


https://github.com/zenorocha/alfred-workflows/

https://github.com/aiyodk/Alfred-Extensions/tree/master/AlfredApp_2.x

https://github.com/willfarrell/alfred-workflows

Alfred Workflows


Can you feel the awesome?

93

Awwwwwwwww yissssssssssssssssssss!



94



$ npm install -g grunt-cli

Install the grunt package


Windows users, use PowerShell


$ npm install -g grunt-init

$ git clone https://github.com/gruntjs/grunt-init-gruntfile.git ~/.grunt-init/gruntfile

$ grunt-init gruntfile

Download the grunt template files and generate the grunt config files ...


Or just download them.http://ki.tt/fgrf

99


package.jsonGruntfile.js

The two files grunt uses


{ "engines": { "node": ">= 0.10.0" }, "devDependencies": { "grunt": "~0.4.2", "grunt-contrib-jshint": "~0.7.2", "grunt-contrib-watch": "~0.5.3", }}

This is what a package.json file looks like


$ npm install

With a package.json file, you can install the needed packages easily.


1. Watch for file changes2. Refresh the browser on change

103

What we want grunt to do.


module.exports = function(grunt) {

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%="yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });

// Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify');

// Default task(s). grunt.registerTask('default', ['uglify']);

};

A basic Gruntfile.js file






};







};







};



browser-sync

108


1. Find grunt plugin*2. Install with npm install --save-dev3. Add the task to our Gruntfile.js file4. Add the tasks to a command5. Run the command...7. Profit!

*write if you need to

109

How to add a task to grunt


http://npmjs.org

110

Where to find node and grunt packages


“grunt browser-sync”

111

What I searched for on npmjs.org


THIS IS OKAY.

112


Check for current state before downloading.


$ npm install grunt-browser-sync --save-dev

Installing the browser-sync grunt package


$ lsGemfile!! README.txt fonts node_modules template.phpGemfile.lock bs-config.js images package.json templatesGruntfile.js config.rb js screenshot.png theme.infoGuardfile! css logo.png scss widgets


"grunt-browser-sync": "~0.7.0"


browserSync: { bsFiles: { src: [ 'css/*.css', 'img/*', 'js/*.js', '*.html' ] }, options: { watchTask: true, proxy: { host: "localhost", port: 8082 }, server: false, } },






watch: { gruntfile: { files: '<%= jshint.gruntfile.src %>', tasks: ['jshint:gruntfile'] }, scss: { files: ['scss/*.scss'], tasks: ['sass:dev'] }, js: { // watch for js changes except for script.min.js files: ['js/*.js', '!js/script.min.js'], tasks: ['uglify:dev'] } }


grunt.loadNpmTasks('grunt-browser-sync');

...

grunt.registerTask('default', ['browserSync', ‘watch’]);


grunt.registerTask('gogogo', ['browserSync', 'watch']);


$ grunt gogogo

Running the newly defined “gogogo” command



modern.ie




127


Javascript?

128


1. Find grunt plugin*2. Install with npm install --save-dev3. Add the task to our Gruntfile.js file4. Add the tasks to a command5. Run the command...7. Profit!

*write if you need to



130



$ npm install matchdep --save-dev

Installing the browser-sync grunt package


...

// load all the grunt modules instead of one each linerequire("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

grunt.registerTask('checkjs', ['jshint']);grunt.registerTask('watchjs', ['jshint', 'watch']);grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);



133



jshint

134


npm install grunt-contrib-jshint --save-dev

135

Use jshint when editing your Gruntfile.js

https://github.com/gruntjs/grunt-contrib-jshint


jshint: { options: { ... }, gruntfile: { src: ‘Gruntfile.js’ }}

...

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.registerTask('checkjs', ['jshint']);grunt.registerTask('watchjs', ['jshint', 'watch']);grunt.registerTask('gruntjs', ['jshint:gruntfile', 'watch']);



npm install grunt-contrib-qunit --save-dev

138

Javascript unit tests

https://github.com/gruntjs/grunt-contrib-qunit


npm install grunt-contrib-jasmine --save-dev

139


https://github.com/gruntjs/grunt-contrib-jasmine


npm install grunt-simple-mocha --save-dev

140


https://github.com/yaymukund/grunt-simple-mocha



141



142


1. Reduce file sizes2. Reduce the number of files3. Reduce content rendering time

143




Images

145


npm install grunt-contrib-imagemin --save-dev

146

Make pages load faster by reducing image sizes


imagemin: { prod: { files: [{ expand: true, cwd: 'imgs-src/', src: ['**/*.{png,jpg,gif}'], dest: 'imgs/' }] }}


npm install grunt-svgmin --save-dev

148

Reduce SVG sizes, too


grunt.initConfig({ svgmin: { // Task options: { // Configuration that will be passed directly to SVGO plugins: [ { removeViewBox: false }, { removeUselessStrokeAndFill: false } ] }, dist: { // Target files: [{ // Dictionary of files expand: true, // Enable dynamic expansion. cwd: 'img/src', // Src matches are relative to this path. src: ['**/*.svg'], // Actual pattern(s) to match. dest: 'img/', // Destination path prefix. ext: '.min.svg' // Dest filepaths will have this extension. // ie: optimise img/src/branding/logo.svg and store it in img/branding/logo.min.svg }] }});

grunt.loadNpmTasks('grunt-svgmin');grunt.registerTask('default', ['svgmin']);

Sample grunt-svgmin configuration


npm install grunt-responsive-images --save-dev

150

Responsive images by resizing

https://github.com/andismith/grunt-responsive-images


grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'resize/{%= width %}/' }] } },});

Sample grunt-responsive-images configuration


npm install grunt-grunticon --save-dev

152

SVG with PNG fallbacks

https://github.com/filamentgroup/grunticon


Non-images

153


npm install grunt-contrib-cssmin --save-dev

154

Minimize CSS files


npm install grunt-csscss --save-dev

155

Minimize CSS files


npm install grunt-contrib-uglify --save-dev

156

Minimize javascript files




Sprites!

158

Making things easier with sprites!


WHOO!159


Creating them is EASY!

160


npm install grunt-montage --save-dev

161

Sprite your images







164



Change the font BLUE

165

Easiest change ever!


#6c869d ⇒ #212939

166

Easiest change ever!


Well, phooey. The ticket was reopened.


Soon, EVERYTHING is important!




Guiding principles!



Guiding principles!



Use a CSS preprocessor.

173

Saw that coming, didn’t you?


Sass / LESS / Stylus

174

Saw that coming, didn’t you?


Quick Check!

Did you go to Andy Matthews Sass session?

175


Are we passing GO?Are we collecting $200?

176


Sass ⟳ CSS

177


Getting started with Sass

178


Install it.

179


$ gem update --system$ gem install sass

$ sudo gem update --system$ sudo gem install sass

Yay! Sass installed!


COMPASS

181

Install Compass, too

http://compass-style.org/install/




$ gem update --system$ gem install compass

$ sudo gem update --system$ sudo gem install compass

Setting up tools. In this case, Compass.


CSS ⇒ Sass

183


Let us count the (3) ways.

184

How we get started with Sass in an existing project.


Move and rename files.

185



$ mkdir scss$ mv css/styles.css scss/styles.scss



Use sass-convert

187



$ sass-convert --helpUsage: sass-convert [options] [INPUT] [OUTPUT] $$ cd theme-dir$ sass-convert --recursive --from=css --to=scss css scss



Use http://css2sass.heroku.com

189




$variables

191

Quick! Sass in 5 slides!


$variable: value;

Before variables...


dev[405]% grep background-color * style.css: background-color: #edf5fa;style.css: background-color: #ddecf5;style.css: background-color: #e6f1f7;style.css: background-color: #d4e7f3;style.css: background-color: #edf5fa;style.css: background-color: #fcfce8;style.css: background-color: #fcf9e5;style.css: background-color: #fbf5cf;style.css: background-color: #fefefe;style.css: background-color: #f5f5f5;style.css: background-color: #fdf5e6;style.css: background-color: #fdf2de;style.css: background-color: #fbe4e4;style.css: background-color: #fbdbdb;style.css: background-color: #ffcccc;style.css: background-color: #ffffdd;style.css: background-color: #ddffdd;

Before variables...


$color-main: rgb(255,251,114);$color-second: rgb(70,87,204);$color-hilite: rgb(189,177,255);

...

.button { background-color: $color-main; ...}

See? Easy!


$font-times: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

$font-garamond: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

Uses of variables: fonts

http://css-tricks.com/snippets/css/font-stacks/




$color-main: #ff0000;$border-main: 2px solid $color-main;.multivalue-example { border-top: $border-main;}

# compiles to.multivalue-example { border-top: 2px solid red;}

See? Easy!


Variable name best practice.

197


$ourBlue : #1f4363;$ourBlueLight : #355673;$ourBlueLighter : #6c869d;$ourBlueDark : #0e2c47;$ourBlueDarker : #212939;$ourBlueHover : #7e99b3;

...

$color_border $ourBlue;$color_link: $ourBlue;$table_header: $ourBlueLighter;

Use descriptive AND functional variable names

http://sachagreif.com/sass-color-variables




Nested syntax

199



.navigation {

a {

display: block; padding: .5em; color: $color-link; border: none; } b {

font-size: .9em; } span { display: block; font-size: .8em; }

}

.navigation a {

display: block;

padding: .5em;

color: #444040;

border: none;

}

.navigation b {

font-size: .9em;

}

.navigation span {

display: block;

font-size: .8em;

}

Sass syntax, talking nesting


.navigation {

a {

display: block; padding: .5em; &:hover {

color: $color-link; border: none; } } &>.first { padding-left: 0; }}

Sass syntax, talking nesting


@extend

202



Sass syntax, talking @extend

.box { padding: 2em; color: $color-text; background-color: $color-bg;}

.box-warning { @extend .box; border: 2px dotted $color-yikes;}

.box-success { @extend .box; border: 2px dotted $color-success;}

.box-info { @extend .box; border: 2px dotted $color-info;}



.box, .box-warning, .box-success, .box-info { padding: 2em; color: #333333; background-color: white;}

.box-warning { border: 2px dotted #cc0000;}

.box-success{ border: 2px dotted #33cc00;}

.box-info { border: 2px dotted #996633;}


<div class=”box box-info”>...</div>

205




<div class=”box-info”>...</div>


@mixin@include

207



Sass syntax, @mixin

@mixin module($parent-color) { color: darken($parent-color, 50%); }

.main_module { @include module(#ccc); min-height: 3em;}

.sidebar_module { @include module(#444); min-height: 2em;}


When you can, use a Compass mixin.

209


Sass syntax, @mixin

@import "compass/css3/box-sizing";* { @include box-sizing(border-box); }

http://compass-style.org/reference/compass/css3/box_sizing/




@mixin vs @extend

211

Sass Overview


You’re awesome.

212


_partials.scss

213



Sass syntax, @mixin

@import "vars";@import "mixins";@import "layouts/*";



@if/@else

@for

@each

@functions (return a single value)


Media Queriesmade EASY

216


@mixin bp($point) { $bp-mobile: "(max-width: 600px)"; $bp-notso: "(max-width: 1250px)"; $bp-fullon: "(max-width: 1600px)";

@if $point == mq-fullon { @media #{$bp-fullon} { @content; } } @else if $point == mq-notso { @media #{$bp-notso} { @content; } } @else if $point == mq-mobile { @media #{$bp-mobile} { @content; } }}


h1 { font-size: 20px; font-family: $font-main; @include bp(mq-notso) { font-size: 30px; } @include bp(mq-fullon) { font-size: 60px; }}


h1 { font-size: 20px;}@media (max-width: 1250px) { h1 { font-size: 30px; }}@media (max-width: 1600px) { h1 { font-size: 60px; }}


Guiding principles!



More Information.

221

Sass for DesignersPragmatic Guide To Sass

Sass and Compass in Action


sass --watch --line-numbers --style expanded scss:css


Compass has its config.rb

223



compass config config.rb --sass-dir=scss \--css-dir=css --javascripts-dir=js \--output-style=expanded

How to create a compass conifig.rb file


$ compass watch


GUI

227


https://incident57.com/codekit/


http://compass.kkbox.com/


http://koala-app.com/


https://github.com/vladikoff/grunt-devtools


1. Watch for file changes2. Compile our Sass to CSS3. Refresh the browser on change

232

What we want grunt to do.


npm install grunt-contrib-compass --save-dev

233

Installing the compass compiling node package


grunt.initConfig({ compass: { dist: { options: { config: 'config.rb' } } }});


grunt.initConfig({ watch: { scss: { files: ['**/*.scss'], tasks: ['compass'] } }, compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, }});






compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded' } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }


grunt.loadNpmTasks('grunt-contrib-compass');

...

grunt.registerTask('default', ['compass:dev', ‘watch’]);





@import "compass/utilities/sprites";

...

$sprites-spacing: 20px;@import “../img/sprites/*png”;

Creating sprite images with Compass



...

$orange-spacing: 20px;@import “../img/orange/*png”;

Sprite names are dependent on your directory name



...

$awesome-spacing: 20px;@import “../img/awesome/*png”;

Sprite names are dependent on your directory name


Using generated sprites

.footer-follow-us{ .twitter { @include awesome-sprite(follow-us-twitter); } .facebook { @include awesome-sprite(follow-us-fb); } .google { @include awesome-sprite(follow-us-google); } .pinterest { @include awesome-sprite(follow-us-pins); }}

.awesome-sprite,

.footer-follow-us .twitter,

.footer-follow-us .facebook,

.footer-follow-us .google,

.footer-follow-us .pinterest { background: url('../images/awesome-s34fe0604ab.png') no-repeat; }

.footer-follow-us .twitter { background-position: 0 -96px; }

.footer-follow-us .facebook { background-position: 0 0; }

.footer-follow-us .google { background-position: 0 -32px; }

.footer-follow-us .pinterest { background-position: 0 -64px; }


Uh...

246

How do we check these?



247





Source Maps

249



c

http://code.tutsplus.com/tutorials/developing-with-sass-and-chrome-devtools--net-32805


Generating


sass --compass --sourcemap --watch scss:css


compass: { dev: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'expanded', sourcemap: true } }, prod: { options: { sassDir: 'scss', cssDir: 'css', outputStyle: 'compressed' } }, }


Don’t deploy to production!


Using


This works in > Firefox 29, right click to show CSS




Don’t nest more than 3 deep

258

http://css-tricks.com/sass-style-guide/


Avoid using tag selectorsUse class selectors if you can.

259

https://developers.google.com/speed/docs/best-practices/rendering



260



Regression testing

261


PhantomCSS

262


npm install grunt-phantomcss --save-dev

install details at

https://www.npmjs.org/package/grunt-phantomcss

263


phantomcss: { desktop: { options: { screenshots: 'test/visual/desktop/', results: 'results/visual/desktop', viewportSize: [1024, 768] }, src: [ 'test/visual/**.js' ] }, mobile: { options: { screenshots: 'test/visual/mobile/', results: 'results/visual/mobile', viewportSize: [320, 480] }, src: [ 'test/visual/**.js' ] } }

phantomcss grunt task


casper.start('http://cfobj.localhost:8082/').then(function() { phantomcss.screenshot('#region-branding', 'region-branding');}).then( function now_check_the_screenshots(){ phantomCSS.compareAll();});

phantomcss website flow


Seeing failures

266

http://tldr.huddle.com/blog/css-testing/


Phew!

267


Triggering tests

268


git pre-commit hook

269

svn works, too!


Vagrant

270


Say Goodbye to “It works on my machine” with Chef

and Vagrant.Curt Gratz, 3pm this room

271





From the beginning!

273


Faster HTML

274


http://docs.emmet.io/

275

http://docs.emmet.io

http://docs.emmet.io


div#banner>div.logo+ul#navigation>li*4>a

276


<div id="banner"> <div class="logo"></div> <ul id="navigation"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul></div>

277


http://www.thoughtdelimited.org/thoughts/post.cfm/zen-coding-a-faster-way-to-write-html-and-tag-based-cfml-in-cfbuilder-cfeclipse

278

http://ki.tt/cfoem


http://ki.tt/cfoem

http://www.thoughtdelimited.org/thoughts/post.cfm/zen-coding-a-faster-way-to-write-html-and-tag-based-cfml-in-cfbuilder-cfeclipse


http://yeoman.io

Yeoman


yo

281


npm install -g yo

282

Installing yeoman globally


# use a generator $ yo webapp

# start the server$ grunt server

# run tests$ grunt test

# run default$ grunt


# download new generator$ npm install generator-gruntplugin

# run the generator$ yo gruntplugin


# download new generator$ npm install generator-gruntfile

# run the generator$ yo gruntfile


Lots of generators available

http://yeoman.io/official-generators.html


# download new generator$ npm install generator-generator

# create the directory$ mkdir generator-bigred && cd $_

# run the generator$ yo generator


http://yeoman.io/generators.html#writing-your-first-generator

288

http://ki.tt/yog


Wow, that was fast.

289


I skipped over

BundlerManaging what ruby gems you have installed

http://bundler.io/

Creating your own Grunt tasks http://gruntjs.com/creating-tasks

Bowerhttp://bower.io/

290


Questions?

291

Thanks!

292

You’re awesome!

Software

Automate all the things