Frontend Engineer Toolbox

The Front End
Developer ToolBox
Code Editing And Environment
Designing In The Browser
Yeoman
Unit Testing (Mocha)
CSS Pre-Compilation (Sass)

Friday, February 15, 13

Setting Up The
Environment
IDE Tips
Shell Tips
Other Tools


Use IDE File Templates

• Use templates often

• Set up your own


Use IDE Live Templates

• Live templates or snippets help you to type less


Get To Know In-File Shortcuts

• Jump to start/end tag
(Cmd+Alt+[ and Cmd + Alt ] in Webstorm)

• Go To Line (Cmd + L In Webstorm)

• Join Lines
(Shift + Ctrl + J In Webstorm)

• Select word or sentend
(alt + up / down In Webstorm)

• Toggle Case
(Cmd + Shift + U in Webstorm)


Get To Know Cross File Shortcuts

• Jump To Last Edit Location (Cmd + Shift + Backspace)

• Jump Between Tabs

• Jump To File (Cmd+Shift+O)

• Tip: Use partial dir names

• Tip: Exclude folders from search


Zen Coding

• Many editors support this

• Can save typing, but requires getting used to

<div class="feature">
<h4></h4>
.feature>h4+p
<p></p>
</div>


Tabs Or Spaces

• Your choice, but be consistent

• Use IDE to enforce code style


Code Quality Tool

• Integrate JSHint into your browser


Share IDE Settings


Other Environment Candies

• Use http-server to start a local http server

• Or, just drop the ﬁles to Dropbox/Public

• Use ssh keys to save typing passwords

• Use localtunnel to share localhost
http://progrium.com/localtunnel/


Testing

• BrowserStack maintain a stack
of virtual browsers

• Use them for testing instead of
installing all OS yourself


In Browser Design
Using Chrome Developer Tools
as a mini IDE


Edit Styles On Page (AND Save Back)

• After changing the style, go to Sources

• Right click on a ﬁle and choose local modiﬁcations


Use Tincr to autosave

• Auto save JS and CSS ﬁles after locally modiﬁed in browser


Use SpriteCow to create sprite sheets

http://www.spritecow.com/


Know Thy Cog

• Chrome developer tools has a “hidden” options panel

• Use the cog


Debugging In The Browser

• Use chrome JavaScript debugger

• DOM change breakpoints

• XHR Breakpoints

• Event Handler Breakpoints

• Demo


Meet Yeoman
Modern Workﬂows for Modern
Webapps


Installation

• Windows:
http://decodize.com/css/installing-yeoman-front-end-development-stack-
windows/

• Unix:

$ curl -L get.yeoman.io | bash


Create A New Project

• Create a new directory, enter it and type

$ yeoman init


What’s In The Box

• Starter files from HTML5Boilerplate

• Default .htaccess file

• Package management with bower

• Build script with grunt.js

• Unit testing with Mocha

• .editorconfig and .jshintrc


Package Management

• Yeoman keeps track of
JavaScript and CSS libraries
you use

• Each is installed under
components directory with its
own spec ﬁle (package.json)

• Easily maintain, install and
update libraries


Searching For A Component (Package)

• Use yeoman search to ﬁnd a
package

yeoman search jquery

# outputs

Search results:

- jquery git://github.com/maccman/package-jquery.git
- jquery-ui git://github.com/maccman/package-jquery-ui.git
- jquery-infinite-scroll git://github.com/paulirish/infinite-
scroll.git


Installing A New Component

• Use yeoman install to install the new component

yeoman install backbone

# or if you wish to install multiple packages at once..
yeoman install jquery spine


Listing installed components

• Use yeoman list to show what’s installed

yeoman list

# the output will be

/myapp/
!"# backbone#0.9.2
$ !"" jquery#1.7.2
$ %"" underscore#1.3.3
!"" jquery#1.7.2
%"" underscore#1.3.3


Now use the components in your HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script src="components/jquery/jquery.min.js"></script>
<script src="components/underscore/underscore-min.js"></script>
</body>
</html>


Beyond Default Repository

• Yeoman can install libraries from:

• github repositories

• zip ﬁles

• local ﬁles or paths

yeoman install git://github.com/tkrotoff/jquery-
simplecolorpicker.git


Lab: Install Yeoman And Dependencies

• Install yeoman

• Start a new project

• Install jQuery

• Install jQuery-UI

• Show a Dialog using jQuery UI


Build Script With
Grunt.JS
A task based command line build
tool for javascript


Hello Gruntfile.js

• Yeoman’s grunt config is kept in Gruntfile.js

• What you’ll find:

• Lint Options

• Minification Options

• Compass/Sass/CoffeeScript precompilation

• Mocha tests


Grunt Tasks

• Linting

• Miniﬁcation

• Concatenation

• Image Optimization

• r.js


Linting

• Run with:
lint: {
yeoman lint files: [
'Gruntfile.js',
'app/scripts/*.js',
• All jshint configuration options are found in: 'spec/**/*.js'
],
https://github.com/gabrielhurley/js- options: {
openclient/blob/master/.jshintrc options: {
node: true,
...
devel: true,
• Note default configuration ignores jshint. strict: false
Need to modify your gruntfile },
globals: {
jQuery: true,
define: true,
• Demo require: true
}
}
},


HTML Miniﬁcation

• Yeoman will minify and concat all
your HTML ﬁles

• Run with
yeoman html
// HTML minification
html: {
• Part of the build process // files: ['**/*.html']
files: ['app/minify_demo.html']
},
• Demo


JavaScript Miniﬁcation and Concatenation

• JavaScript is automatically miniﬁed and concatenated

• New script is injected to the HTML


<script src="scripts/one.js"></script>
<script src="scripts/two.js"></script>
<script src="scripts/three.js"></script>

CSS Miniﬁcation and Concatenation

• Same concept as JS

• Automatically replace groups with miniﬁed result


<link rel="stylesheet" href="styles/one.css">
<link rel="stylesheet" href="styles/two.css">
<link rel="stylesheet" href="styles/three.css">

Image Optimization

• Yeoman will optimize your images

• Done automatically as part of the build process

• Can add image folders

// Optimizes JPGs and PNGs (with jpegtran & optipng)
img: {
dist: '<config:rev.img>',
my: [ 'app/images/*.jpg', 'app/images/*.png' ]
},


Require.JS Optimization

• Yeoman will automatically use r.js to concat and minify require.js modules

• Use usemin to minify


<script data-main="scripts/main"
src="scripts/vendor/require.js"></script>

Yeoman During Development

• Use yeoman server to start a test server

• Get automatic browser reload when ﬁles change

• Automatically recompiles sass


Yeoman Disadvantages

• Doesn’t work well with existing projects

• Still buggy

• 1.0 Is around the corner


Q&A


Unit Testing With
Mocha


Beneﬁts of testing

• Discover bugs before they happen

• Write cleaner code

• Don’t fear regression


How To Use Mocha

// replace this by your own specs
(function () {
describe('Give it some context', function () {
describe('maybe a bit more context here', function () {

it('should run here few assertions', function () {
assert( 1 === 1 , 'One is the one');
});

});
});
})();


How To Use Mocha

(function () {

});

});
});
})();

Test Group (suite)


How To Use Mocha

(function () {

});

});
});
})();

Single test


Assertion Libraries


• Mocha isn’t an assertion library

• We’ll use Chai for the assertions

• Alternatives: should.js, expect.js, better-assert.js


Mocha with Chai

• Mocha provides:

• describe

• it

• Chai provides:

• assert


Sync Test

describe('Array', function () {

describe('#indexOf()', function() {

it('should return -1 when value not found', function() {
assert.equal( [1,2,3].indexOf(5), -1 );
assert.equal( [1,2,3].indexOf(0), -1 );
});

it('should return the index when value found', function() {
assert.equal( [1,2,3].indexOf(2), 1 );
});

});

});


Async Test

describe('Image Loading', function() {
it( 'should load images async', function(done) {
var img = new Image();

img.onload = function() {
done();
};

img.src = 'http://www.oklahomafood.coop/shop/members/
getimage.php?image_id=4610';
});
});


Tests Setup / Teardown

• Mocha has hooks:

• before - before the suite

• after - after the suite

• beforeEach - before each case

• afterEach - after each case


Tests Setup / Teardown

describe('Image Loading', function() {

beforeEach(function() {
console.log('<<< Starting Test');
});

afterEach(function() {
console.log('>>>> End Test');
});
});


Chai’s Assertions

• Rich assertions library

• Has both TDD and BDD syntax. We’ll use TDD.

• Entry point: assert


Chai’s Assertions

• Basic Assertions

assert('foo' !== 'bar', 'foo is not bar');

assert(Array.isArray([]), 'empty arrays are arrays');


Chai’s Assertions

• Use assert.equal for == checks

assert.equal(
3,
'3',
'== coerces values to strings');


Chai’s Assertions

• Use assert.strictEqual for === checks

assert.strictEqual(
3,
'3',
'=== fails to coerce');


Chai’s Assertions

• Use deepEqual to check object’s equality

assert.deepEqual(
{ tea: 'green' },
{ tea: 'green' }
);


Chai’s Assertions

• Use isTrue / isFalse for truthy / falsy values

var teaServed = true;
assert.isTrue(
teaServed, 'the tea has been served');

var teaServed = false;
assert.isFalse(
teaServed, 'no tea yet? hmm...');


Chai’s Assertions

• Basic Assertions

• isNull, isNotNull

• isDeﬁned, isUndeﬁned

• isFunction, isNotFunction, isObject, isNotObject

• isArray, isNotArray,

• isString, isNotString, isNumber, isNotNumber, isBoolean, isNotBoolean


Chai’s Assertions

• Cool Assertions

• include( haystack, needle ):
search for needle in a haystack. Supports strings AND arrays

• deepProperty( object, prop ):
object has a property named prop, which can be a dotted string

assert.deepProperty({ tea: { green: 'matcha' }}, 'tea.green');

• closeTo( actual, expected, delta )

assert.closeTo(1.5, 1, 0.5, 'numbers are close');


Demo
Mocha + Require + Chai


Sass & Compass
Styling with attitude


Welcome To Sassy Compass

• Sass adds tons of features to CSS by precompiling:

• variables

• mixins

• Flow Control

• Compass is a framework of predeﬁned sass declarations


Meet Sass: variables

$main-color: #ce4dd6;
$style: solid;

#navbar {
border-bottom: {
color: $main-color;
style: $style;
}
}


Meet Sass: Nested Rules

#navbar {
width: 80%;
height: 23px;

ul { list-style-type: none; }

li {
float: left;
a { font-weight: bold; }
}
}


Meet Sass: Math

#navbar {
$navbar-width: 800px;
$items: 5;
$navbar-color: #ce4dd6;

width: $navbar-width;

li {
float: left;
width: $navbar-width/$items - 10px;
list-style: none;
}
}

Meet Sass: Parent Reference

a {
color: #ce4dd6;
&:hover { color: #ffb3ff; }
&:visited { color: #c458cb; }
}


Using Sass With Yeoman

• Add sass commands to main.scss

• Even better - create a _base.scss partial

• Demo


Bigger Sass

• Use partials to build your scss ﬁles

• Use mixins for reusable snippets

@mixin my-small-rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.rounded {
@include my-small-rounded-corners;
}

Mixin Parameters

@mixin my-small-rounded-corners($r:5px) {
-moz-border-radius: $r;
-webkit-border-radius: $r;
border-radius: $r;
}

.rounded {
@include my-small-rounded-corners(8px);
}


Meet Compass

• A (huge) collection of mixins
and classes built with sass

• Includes new functions

• Mainly used for CSS3 related
features (instead of typing
browser preﬁx yourself)

• Docs:
http://compass-style.org/


How To Use

• Use compass by including their partials

• Automatically used by yeoman

@import "compass/css3";
@import "compass/typography";


What You Get

• Border Radius

.simple {
@include border-radius(4px, 4px);
}

.compound {
@include border-radius(2px 5px, 3px 6px);
}

.crazy {
@include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)
}


What You Get

• Background Size


What You Get

• Box Shadow

.box-shadow-example div {
width: 40px;
height: 40px;
background: #eeeeee;
margin: 20px;
float: left;
}

// Default single box shadow
#box-shadow-default {
@include single-box-shadow; }
}

#box-shadow-custom {
@include box-shadow(red 2px 2px 10px); }
}


What You Get

• CSS Column Count

#two-column {
@include column-count(2);
width: 300px;
margin-bottom: 20px;
}

#three-column {
@include column-count(3);
width: 300px;
margin-bottom: 20px;
}


What You Get

• Inline-block can be tricky

#inline-block {
display: -moz-inline-stack;
display: inline-block;
#inline-block {
vertical-align: middle;
@include inline-block;
*vertical-align: auto;
padding: 4px 10px;
zoom: 1;
background: red;
*display: inline;
color: white;
padding: 4px 10px;
}
background: red;
color: white;
}


Sass & Compass Resources

• Sass Tutorial:
http://sass-lang.com/tutorial.html

• Sass Full Reference:
http://sass-lang.com/docs/yardoc/ﬁle.SASS_REFERENCE.html

• Compass Tutorials:
http://compass-style.org/help/tutorials/

• Compass Reference:
http://compass-style.org/reference/compass/


Thanks For Listening

• Ynon Perek • Photos from:

• Contact me at: • http://www.123rf.com/
freeimages.php
• ynon@ynonperek.com
• http://morgueﬁle.com/archive
• Slides at:

• http://ynonperek.com


Frontend Engineer Toolbox

More Related Content

What's hot

Viewers also liked

Similar to Frontend Engineer Toolbox

More from Ynon Perek

Frontend Engineer Toolbox