frontend engineer toolbox

The Front End Developer ToolBox

Code Editing And EnvironmentDesigning In The BrowserYeomanUnit Testing (Mocha)CSS Pre-Compilation (Sass)

Friday, February 15, 13

Setting Up The Environment

IDE TipsShell TipsOther 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

.feature>h4+p

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


http://december.com/html/4/element/div.html


http://december.com/html/4/element/h4.html




http://december.com/html/4/element/p.html






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 files to Dropbox/Public

• Use ssh keys to save typing passwords

• Use localtunnel to share localhosthttp://progrium.com/localtunnel/


http://progrium.com/localtunnel/

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 file and choose local modifications


Use Tincr to autosave

• Auto save JS and CSS files after locally modified 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 Workflows for Modern Webapps


Installation

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

• Unix:

$ curl -L get.yeoman.io | bash


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




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 file (package.json)

• Easily maintain, install and update libraries


Searching For A Component (Package)

• Use yeoman search to find 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>


http://december.com/html/4/element/html.html


http://december.com/html/4/element/head.html


http://december.com/html/4/element/title.html






http://december.com/html/4/element/body.html


http://december.com/html/4/element/script.html












Beyond Default Repository

• Yeoman can install libraries from:

• github repositories

• zip files

• local files 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

• Minification

• Concatenation

• Image Optimization

• r.js


Linting

• Run with:yeoman lint

• All jshint configuration options are found in:https://github.com/gabrielhurley/js-openclient/blob/master/.jshintrc

• Note default configuration ignores jshint. Need to modify your gruntfile

• Demo

lint: { files: [ 'Gruntfile.js', 'app/scripts/*.js', 'spec/**/*.js' ], options: { options: { node: true, ... devel: true, strict: false }, globals: { jQuery: true, define: true, require: true } } },


https://github.com/gabrielhurley/js-openclient/blob/master/.jshintrc




HTML Minification

• Yeoman will minify and concat all your HTML files

• Run withyeoman html

• Part of the build process

• Demo

// HTML minification html: { // files: ['**/*.html'] files: ['app/minify_demo.html'] },


JavaScript Minification and Concatenation

• JavaScript is automatically minified 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 Minification and Concatenation

• Same concept as JS

• Automatically replace groups with minified result

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


http://december.com/html/4/element/link.html

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


Benefits 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


Test Group (suite)


How To Use Mocha


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

assert( 1 === 1 , 'One is the one');


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

• isDefined, isUndefined

• 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

• closeTo( actual, expected, delta )

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

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


Demo

Mocha + Require + Chai


Q & A


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 predefined 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 files

• 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 prefix yourself)

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


http://compass-style.org/

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 { @include inline-block; padding: 4px 10px; background: red; color: white;}

#inline-block { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; 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/file.SASS_REFERENCE.html

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

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


http://sass-lang.com/tutorial.html

http://sass-lang.com/tutorial.html

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://compass-style.org/help/tutorials/

http://compass-style.org/help/tutorials/

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

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

Thanks For Listening

• Ynon Perek

• Contact me at:

• [email protected]

• Slides at:

• http://ynonperek.com

• Photos from:

• http://www.123rf.com/freeimages.php

• http://morguefile.com/archive


mailto:[email protected]

mailto:[email protected]

http://ynonperek.com

http://ynonperek.com

http://www.123rf.com/freeimages.php




http://morguefile.com/archive

http://morguefile.com/archive

frontend engineer toolbox

Documents

use tincr

use spritecow

use ide file templates

new component use yeoman

consistent use ide

file cmd

dropboxpublic use ssh

jquery git