Automate Front-End Development Workflow

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 ruby
C:Ruby200binruby.exe
> ruby --version
ruby 2.0.0p451
Yay! Sass installed!See if you already have ruby installed

HOMEBREW
http://mxcl.github.com/homebrew/
$ brew install ruby
RVM RUBY VERSION MANAGER
https://rvm.io/rvm/install
Install ruby in different ways on OSX
OSX

HOMEBREW
http://mxcl.github.com/homebrew/
$ brew install ruby
Install ruby in different ways on OSX
OSX

https://unﬁniti.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

RUBYINSTALLER
http://rubyinstaller.org/downloads/
PIK
https://github.com/vertiginous/pik
Install ruby in different ways on Windows
Windows

RUBYINSTALLER
http://rubyinstaller.org/downloads/
PIK
https://github.com/vertiginous/pik
Install ruby in different ways on Windows
Windows
CYGWIN
http://cygwin.com

http://ki.tt/cfo
22

Automate All the Front-End
Development Things!

Make your Front-End
Workﬂow AWESOME
25

1. Embrace the DRY principle
26
Guiding principles of making our workﬂows AWESOME

2. Make changes easy
27

3. Make ﬁnding mistakes easy
28

Implement a design or prototype
29
What magic do we do?

Update the designs
30

Update the designs
Make sure it works in all browsers
31

Update the designs
Make it faster
32

Update the designs
Make it faster
33

We’re MAGICAL

Update the designs
Make it faster
35

How often do we have a blank slate, really?

Update the designs
Make it faster
37

Update the designs
Make it faster
38

change.
click.
change.
click.
39

change.
click.
change.
click.
40
change.
click.
change.
click.
change
click.change.
click.
change.
click.
hange.
click.
hange.
click.
hange.
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

or!

<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.js
var 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 ﬁle 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-conﬁg.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,
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,
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

Alfred
http://alfredapp.com/
Quicksilver
http://qsapp.com/
Launchbar
http://www.obdev.at/products/launchbar/
81

Skylight
http://www.candylabs.com/skylight
Launchy
http://www.launchy.net/
http://pylaunchy.sourceforge.net/docs/
82

Gnome Launch Box
https://live.gnome.org/
Gnome Do
http://do.davebsd.com/
Launchy
http://www.launchy.net/
http://pylaunchy.sourceforge.net/
83

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!

Update the designs
Make it faster
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.json
Gruntfile.js
The two ﬁles 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 ﬁle looks like

$ npm install
With a package.json ﬁle, you can install the needed packages easily.

1. Watch for ﬁle changes
2. 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 Gruntﬁle.js ﬁle

grunt.initConfig({
uglify: {
options: {
},
build: {
}
}
});
// Default task(s).
};

browser-sync
108

1. Find grunt plugin*
2. Install with npm install --save-dev
3. Add the task to our Gruntfile.js file
4. Add the tasks to a command
5. Run the command
...
7. Profit!
*write if you need to
109
How to add a task to grunt

http://npmjs.org
110
Where to ﬁnd 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

$ ls
Gemfile!! README.txt fonts node_modules template.php
Gemfile.lock bs-config.js images package.json templates
Gruntfile.js config.rb js screenshot.png theme.info
Guardfile! 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 deﬁned “gogogo” command

modern.ie

Update the designs
Make it faster
127

Javascript?
128

1. Find grunt plugin*
2. Install with npm install --save-dev
3. Add the task to our Gruntfile.js file
4. Add the tasks to a command
5. 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 line
require("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 Gruntﬁle.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

Update the designs
Make it faster
141

Update the designs
Make it faster
142

1. Reduce ﬁle sizes
2. Reduce the number of ﬁles
3. 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 conﬁguration

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 conﬁguration

npm install grunt-grunticon --save-dev
152
SVG with PNG fallbacks
https://github.com/ﬁlamentgroup/grunticon

Non-images
153

npm install grunt-contrib-cssmin --save-dev
154
Minimize CSS ﬁles

npm install grunt-csscss --save-dev
155
Minimize CSS ﬁles

npm install grunt-contrib-uglify --save-dev
156
Minimize javascript ﬁles

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!

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 ﬁles.
185

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

Use sass-convert
187

$ sass-convert --help
Usage: 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

@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 Queries
made 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 Designers
Pragmatic Guide To Sass
Sass and Compass in Action

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

Compass has
its conﬁg.rb
223

compass config config.rb --sass-dir=scss
--css-dir=css --javascripts-dir=js
--output-style=expanded
How to create a compass coniﬁg.rb ﬁle

$ 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 ﬁle changes
2. Compile our Sass to CSS
3. 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'
}
},
}
});

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

compass: {
dev: {
options: {
sassDir: 'scss',
cssDir: 'css',
}
},
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 selectors
Use 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 ﬂow

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

Update the designs
Make it faster

From the beginning!
273

Faster HTML
274

http://docs.emmet.io/
275

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>
</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

$ npm install generator-gruntfile
# run the generator
$ yo gruntfile

Lots of generators available
http://yeoman.io/ofﬁcial-generators.html

$ npm install generator-generator
# create the directory
$ mkdir generator-bigred && cd $_
# run the generator
$ yo generator

http://yeoman.io/generators.html#writing-your-ﬁrst-generator
288
http://ki.tt/yog

Wow, that was fast.
289

I skipped over
Bundler
Managing what ruby gems you have installed
http://bundler.io/
Creating your own Grunt tasks
http://gruntjs.com/creating-tasks
Bower
http://bower.io/
290

Questions?
291

Automate Front-End Development Workflow

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Automate Front-End Development Workflow

Ähnlich wie Automate Front-End Development Workflow (20)

Mehr von ColdFusionConference

Mehr von ColdFusionConference (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Automate Front-End Development Workflow