Automate All the Front-End Development Things!

Automate All the Front-End
Development Things!
Text
Kitt Hodsden • http://ki.tt • @kitt
1

View Slide

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

View Slide

Kitt Hodsden • @kitt • http://ki.tt/cfo
Who are you?
3

View Slide

And what do have we here?
4

View Slide

http://ki.tt/cfo
5

View Slide

http://ki.tt/cfo

View Slide

http://ki.tt/cfo
http://ki.tt/cfo

View Slide

Wait... what?
8
What are we talking about?

View Slide

Wait... what?
9
What are we talking about?

View Slide

You are invited to participate in group note taking at:
http://ki.tt/cfo14notes
10
Community knowledge!

View Slide

Prerequisites!
11

View Slide

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

View Slide

Setup node by downloading the installer and running it.
http://nodejs.org

View Slide

# mac / linux
$ which ruby
/usr/local/bin/ruby
$ ruby --version
ruby 2.0.0p195
# windows
> where ruby
C:\Ruby200\bin\ruby.exe
> ruby --version
ruby 2.0.0p451
Yay! Sass installed!
See if you already have ruby installed

View Slide

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

View Slide

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

View Slide

https://unﬁniti.com/software/mac/jewelrybox
Ruby on OSX, I recommend JewelryBox, too.

View Slide

APT / YUM
$ sudo apt-get install ruby1.9.1
$ sudo yum install ruby1.9.1
Install ruby in different ways on Linux
Linux

View Slide

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

View Slide

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

View Slide

http://ki.tt/cfo
22

View Slide


View Slide

Automate All the Front-End
Development Things!

View Slide

Make your Front-End
Workﬂow AWESOME
25

View Slide

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

View Slide

2. Make changes easy
27

View Slide

3. Make ﬁnding mistakes easy
28

View Slide

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

View Slide

Update the designs
30

View Slide

Update the designs
Make sure it works in all browsers
31

View Slide

Update the designs
Make it faster
32

View Slide

Update the designs
Make it faster
33

View Slide

We’re MAGICAL

View Slide

Update the designs
Make it faster
35

View Slide

How often do we have a blank slate, really?

View Slide

Update the designs
Make it faster
37

View Slide

Update the designs
Make it faster
38

View Slide

change.
click.
change.
click.
39

View Slide

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.

View Slide

Guiding principles!

View Slide


View Slide

LiveReload
43
http://livereload.com/

View Slide


View Slide

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

View Slide

or!

View Slide

document.write('<script src="http://'<br/>+ (location.host || 'localhost').split(':')<br/>[0] + ':35729/livereload.js?snipver=1"></' +<br/>'script>')
If you don’t use browser plugins, you need this JS for LiveReload

View Slide


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

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

View Slide


View Slide

IE options
http://github.com/dvdotsenko/livereload_ie_extension
http://reloadit.codeplex.com/
51
LiveReload IE options

View Slide


View Slide

Guiding principles!

View Slide

browser-sync
54
http://browsersync.io/

View Slide

http://ki.tt/cfo
55

View Slide

npm
56
Node Package Manager for installng node packages

View Slide

Open a new terminal or command window

View Slide

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

View Slide

In Windows, use right click cut and paste

View Slide

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

View Slide

$ 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

View Slide

> 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

View Slide

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

View Slide

http://localhost:8080/index.html
http://127.0.0.1:8080/index.html
64
You can see the temporary site running locally!

View Slide

browser-sync
65
http://browsersync.io/

View Slide

$ npm install -g browser-sync

View Slide

$ browser-sync
$

View Slide

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

View Slide

bs-conﬁg.js
69

View Slide

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

View Slide

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

View Slide

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

View Slide

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,
};

View Slide

74

View Slide

$ browser-sync start

View Slide

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

var ___socket___ = io.connect('http://192.168.5.6:3000');

[BS] Watching files...

View Slide


View Slide

MAGICAL

View Slide

click.
copy.
scroll.
click.
paste.
79

View Slide


View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

Alfred looking up jQuery.

View Slide

Dash has a large number of document sets

View Slide

Naïve way to open all the browsers at once

View Slide

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

View Slide

Can you feel the awesome?
93
Awwwwwwwww yissssssssssssssssssss!

View Slide

Update the designs
Make it faster
94

View Slide


View Slide

$ npm install -g grunt-cli
Install the grunt package

View Slide

Windows users, use PowerShell

View Slide

$ 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 ...

View Slide

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

View Slide

package.json
Gruntfile.js
The two ﬁles grunt uses

View Slide

{
"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

View Slide

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

View Slide

1. Watch for ﬁle changes
2. Refresh the browser on change
103
What we want grunt to do.

View Slide

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

View Slide

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

View Slide

browser-sync
108

View Slide

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

View Slide

http://npmjs.org
110
Where to ﬁnd node and grunt packages

View Slide

“grunt browser-sync”
111
What I searched for on npmjs.org

View Slide

THIS IS OKAY.
112

View Slide

Check for current state before downloading.

View Slide

$ npm install grunt-browser-sync --save-dev
Installing the browser-sync grunt package

View Slide

$ 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

View Slide

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

View Slide

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

View Slide

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']
}
}

View Slide

grunt.loadNpmTasks('grunt-browser-sync');
...
grunt.registerTask('default', ['browserSync', ‘watch’]);

View Slide

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

View Slide

$ grunt gogogo
Running the newly deﬁned “gogogo” command

View Slide


View Slide

modern.ie

View Slide


View Slide

Update the designs
Make it faster
127

View Slide

Javascript?
128

View Slide

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

View Slide

130

View Slide

$ npm install matchdep --save-dev
Installing the browser-sync grunt package

View Slide

...
// 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']);

View Slide

133

View Slide

jshint
134

View Slide

npm install grunt-contrib-jshint --save-dev
135
Use jshint when editing your Gruntﬁle.js
https://github.com/gruntjs/grunt-contrib-jshint

View Slide

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']);

View Slide


View Slide

npm install grunt-contrib-qunit --save-dev
138
Javascript unit tests
https://github.com/gruntjs/grunt-contrib-qunit

View Slide

npm install grunt-contrib-jasmine --save-dev
139
https://github.com/gruntjs/grunt-contrib-jasmine

View Slide

npm install grunt-simple-mocha --save-dev
140
https://github.com/yaymukund/grunt-simple-mocha

View Slide

Update the designs
Make it faster
141

View Slide

Update the designs
Make it faster
142

View Slide

1. Reduce ﬁle sizes
2. Reduce the number of ﬁles
3. Reduce content rendering time
143

View Slide


View Slide

Images
145

View Slide

npm install grunt-contrib-imagemin --save-dev
146
Make pages load faster by reducing image sizes

View Slide

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

View Slide

npm install grunt-svgmin --save-dev
148
Reduce SVG sizes, too

View Slide

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

View Slide

npm install grunt-responsive-images --save-dev
150
Responsive images by resizing
https://github.com/andismith/grunt-responsive-images

View Slide

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

View Slide

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

View Slide

Non-images
153

View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

Sprites!
158
Making things easier with sprites!

View Slide

WHOO!
159

View Slide

Creating them is EASY!
160

View Slide

npm install grunt-montage --save-dev
161
Sprite your images

View Slide


View Slide

164

View Slide

Change the font BLUE
165
Easiest change ever!

View Slide

#6c869d 㱺 #212939
166
Easiest change ever!

View Slide

Well, phooey. The ticket was reopened.

View Slide

Soon, EVERYTHING is important!

View Slide


View Slide

Guiding principles!

View Slide

Use a CSS preprocessor.
173
Saw that coming, didn’t you?

View Slide

Sass / LESS / Stylus
174
Saw that coming, didn’t you?

View Slide

Quick Check!
Did you go to Andy Matthews Sass session?
175

View Slide

Are we passing GO?
Are we collecting $200?
176

View Slide

Sass ⟳ CSS
177

View Slide

Getting started with Sass
178

View Slide

Install it.
179

View Slide

$ gem update --system
$ gem install sass
$ sudo gem update --system
$ sudo gem install sass
Yay! Sass installed!

View Slide

COMPASS
181
Install Compass, too
http://compass-style.org/install/

View Slide

$ gem update --system
$ gem install compass
$ sudo gem update --system
$ sudo gem install compass
Setting up tools. In this case, Compass.

View Slide

CSS 㱺 Sass
183

View Slide

Let us count the (3) ways.
184
How we get started with Sass in an existing project.

View Slide

Move and rename ﬁles.
185

View Slide

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

View Slide

Use sass-convert
187

View Slide

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

View Slide

Use http://css2sass.heroku.com
189

View Slide


View Slide

$variables
191
Quick! Sass in 5 slides!

View Slide

$variable: value;
Before variables...

View Slide

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

View Slide

$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!

View Slide

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

View Slide

$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!

View Slide

Variable name best practice.
197

View Slide

$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

View Slide

Nested syntax
199

View Slide

.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

View Slide

.navigation {
a {
display: block;
padding: .5em;
&:hover {
color: $color-link;
border: none;
}
}
&>.first {
padding-left: 0;
}
}
Sass syntax, talking nesting

View Slide

@extend
202

View Slide

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;
}

View Slide

.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;
}

View Slide


...

205

View Slide


...

View Slide

@mixin
@include
207

View Slide

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;
}

View Slide

When you can, use a
Compass mixin.
209

View Slide

Sass syntax, @mixin
@import "compass/css3/box-sizing";
* {
@include box-sizing(border-box);
}
http://compass-style.org/reference/compass/css3/box_sizing/

View Slide

@mixin vs @extend
211
Sass Overview

View Slide

You’re awesome.
212

View Slide

_partials.scss
213

View Slide

Sass syntax, @mixin
@import "vars";
@import "mixins";
@import "layouts/*";

View Slide

@if/@else
@for
@each
@functions
(return a single value)

View Slide

Media Queries
made EASY
216

View Slide

@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; }
}
}

View Slide

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

View Slide

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

View Slide

Guiding principles!

View Slide

More Information.
221
Sass for Designers
Pragmatic Guide To Sass
Sass and Compass in Action

View Slide

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

View Slide

Compass has
its conﬁg.rb
223

View Slide


View Slide

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

View Slide

$ compass watch

View Slide

GUI
227

View Slide

https://incident57.com/codekit/

View Slide

http://compass.kkbox.com/

View Slide

http://koala-app.com/

View Slide

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

View Slide

1. Watch for ﬁle changes
2. Compile our Sass to CSS
3. Refresh the browser on change
232
What we want grunt to do.

View Slide

npm install grunt-contrib-compass --save-dev
233
Installing the compass compiling node package

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

@import "compass/utilities/sprites";
...
$sprites-spacing: 20px;
@import “../img/sprites/*png”;
Creating sprite images with Compass

View Slide

...
$orange-spacing: 20px;
@import “../img/orange/*png”;
Sprite names are dependent on your directory name

View Slide

...
$awesome-spacing: 20px;
@import “../img/awesome/*png”;
Sprite names are dependent on your directory name

View Slide

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; }

View Slide

Uh...
246
How do we check these?

View Slide

247

View Slide


View Slide

Source Maps
249

View Slide

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

View Slide

Generating

View Slide

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

View Slide

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

View Slide

Don’t deploy to production!

View Slide

Using

View Slide

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

View Slide


View Slide

Don’t nest more than 3 deep
258
http://css-tricks.com/sass-style-guide/

View Slide

Avoid using tag selectors
Use class selectors if you can.
259
https://developers.google.com/speed/docs/best-practices/rendering

View Slide

260

View Slide

Regression testing
261

View Slide

PhantomCSS
262

View Slide

npm install grunt-phantomcss --save-dev
install details at
https://www.npmjs.org/package/grunt-phantomcss
263

View Slide

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

View Slide

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

View Slide

Seeing failures
266
http://tldr.huddle.com/blog/css-testing/

View Slide

Phew!
267

View Slide

Triggering tests
268

View Slide

git pre-commit hook
269
svn works, too!

View Slide

Vagrant
270

View Slide

Say Goodbye to “It works
on my machine” with Chef
and Vagrant.
Curt Gratz, 3pm this room
271

View Slide

Update the designs
Make it faster

View Slide

From the beginning!
273

View Slide

Faster HTML
274

View Slide

http://docs.emmet.io/
275

View Slide

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

View Slide


277

View Slide

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

View Slide

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

View Slide

http://yeoman.io
Yeoman

View Slide

yo
281

View Slide

npm install -g yo
282
Installing yeoman globally

View Slide

# use a generator
$ yo webapp
# start the server
$ grunt server
# run tests
$ grunt test
# run default
$ grunt

View Slide

# download new generator
$ npm install generator-gruntplugin
# run the generator
$ yo gruntplugin

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Wow, that was fast.
289

View Slide

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

View Slide

Questions?
291

View Slide

Thanks!
292
You’re awesome!

View Slide

Automate All the Front-End Development Things!

Automate All the Front-End Development Things!

Kitt Hodsden

More Decks by Kitt Hodsden

Other Decks in Programming

Featured

Transcript