Front End North

Optimising Your Front-End Workflow

Sat 15th November 2014

Simon Owen

@s10wen

( slides will be available online at http://s10wen.com )

A bit about me

I'm Simon Owen, a Front-End Developer.

mcrfred-logo

@mcr_fred, @digihike, @upfrontconf

A bit about me

Let's just get this out of the way...

I'm not 12.

Yes, I know I look young.

Yes, I do have my ID.

Before we begin...

Is anyone epileptic?

gifs incoming...

Disclaimer!

This is only one approach, there's many others.

The web is moving fast.

There's a bazillion things to learn.

We can't learn everything.

Don't Panic.

We have help.

Things I find helpful

Dotfiles - Tutsplus tutorial
Version Control
Tooling
Shortcuts, Shortcuts, Shortcuts
Working Locally
Improving With Each Project

Let's step into Terminal

Feeling all like...

### $ in Terminal $ is the default character you'll see, in the examples going forward you don't need to paste this in. It's also possible to customise the $, for example. .bash_prompt ![terminal](img/terminal.png) https://github.com/s10wen/dotfiles/blob/master/.bash_prompt#L57

### Create a new site folder ``` $ mkd sitename.dev ``` Custom .functions code ```bash # Create a new directory and enter it function mkd() { mkdir -p "$@" && cd "$@" } ```

I just created a new directory

&&

I'm in it!

Local Development Environment

work local

Huh?

### Brew dotfile awesomeness ``` brew install git brew install imagemagick --with-webp brew install lua brew install lynx brew install p7zip brew install pigz brew install pv brew install rename brew install rhino brew install tree brew install webkit2png brew install zopfli ``` https://github.com/mathiasbynens/dotfiles/blob/master/brew.sh

# Yeoman, Bower and Grunt

$ npm install -g yo

# For gulp

$ npm install --global gulp

Files for each

npm = package.json

bower = bower.json

grunt = Gruntfile.js

gulp = gulpfile.js

### npm = package.json ``` { "name": "mind-co-uk", "version": "0.0.0", "dependencies": {}, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-copy": "~0.4.1", ... "grunt-contrib-compress": "~0.7.0" }, "engines": { "node": ">=0.8.0" } } ```

### bower = bower.json ``` { "name": "mind-co-uk", "version": "0.0.0", "dependencies": { "sass-bootstrap": "~3.0.0", ... "respond": "~1.4.2" }, "devDependencies": {} } ```

### grunt = Gruntfile.js ``` // Generated on 2014-01-13 using generator-webapp 0.4.4 'use strict'; module.exports = function (grunt) { // show elapsed time at the end require('time-grunt')(grunt); // load all grunt tasks require('load-grunt-tasks')(grunt); grunt.initConfig({ // configurable paths yeoman: { app: 'app', dist: 'dist/2013' }, ... 'cssmin', 'uglify', 'copy:dist', 'imagemin:svgDir', 'usemin', 'copy:redirect', 'copy:robots', 'copy:sitemap' ]); grunt.registerTask('default', [ 'test', 'build' ]); }; ```

### gulp = gulpfile.js ``` var gulp = require('gulp'); var args = require('yargs').argv; var gulpif = require('gulp-if'); var sass = require('gulp-ruby-sass'); var nodesass = require('gulp-sass'); ... gulp.task('watch', ['styles'], function() { server.listen(35729, function (err) { if (err) { throw err; } }); gulp.watch(scssFiles, ['styles']); gulp.watch(webAssetFiles, function(file){ gulp.src(file.path) .pipe(notify({ message: 'File ' + file.path + ' changed' })) .pipe(livereload(server)); }); }); gulp.task('build', ['styles']); ```

Yeoman

Let's Install Something

Say we want html5shiv...

Search Google
Find it
Download it
Move to our project
Include a link to it

Right?

Nope

Back to the terminal!

$ bower search html5

Install

$ bower install html5shiv --save

What did that do then?

Not only has that now pulled in html5shiv to our project.

It's also saved it into the `bower.json` file.

bower install

So next time when we do `$ bower install` it automatically installs.

Yayayaya

### Add to a grunt comment ```bash  <script src="bower_components/all/the.js"/> <script src="bower_components/awesome/bower.js"/> <script src="bower_components/scripts/that.js"/> <script src="bower_components/you/want.js"/>  ```

Yayayaya

### 2 other important files No. 1 = .editorconfig Ensure consistency throughout your team. ``` root = true [*] indent_style = space indent_size = 4 end_of_line = LF trim_trailing_whitespace = true [{package.json,bower.json}] indent_style = space indent_size = 2 ```

### 2 other important files No.2 = .gitignore Don't add files to your theme repo you don't need to. ``` ### Package Managed ### /node_modules /bower_components ### CSS ### .sass-cache /css/screen.css /css/screen.css.map ```

Git / GitHub / BitBucket

versioncontrol

### Easy set up for collaboration ``` $ npm install && bower install && grunt serve ```

### Sublime Superpowers Preferences > Settings - User ``` { "color_scheme": "Packages/Color Scheme - Default/Monokai-Phoenix.tmTheme", "default_encoding": "UTF-8", "detect_indentation": false, "draw_white_space": "all", "file_exclude_patterns": [ ".DS_Store", "Desktop.ini", "*.pyc", "._*", "Thumbs.db", ".Spotlight-V100", ".Trashes", "*.scssc" ], "folder_exclude_patterns": [ ".git", "node_modules" ], "font_size": 12, "highlight_modified_tabs": true, "ignored_packages": [ "Vintage" ], "match_brackets": true, "match_brackets_angle": true, "show_encoding": true, "show_line_endings": true, "ensure_newline_at_eof_on_save": true, "tab_completion": false, "tab_size": 4, "theme": "Phoenix Dark.sublime-theme", "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true, "word_wrap": true } ```

### Sublime Superpowers Preferences > Key Bindings - User ``` [ { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }, { "keys": ["super+b"], "command": "toggle_side_bar" }, { "keys": ["super+l"], "command": "show_overlay", "args": {"overlay": "goto", "text": ":"} } ] ``` ![trailing-whitespace](img/trailing-whitespace.png)

### Sublime Superpowers Packages https://sublime.wbond.net/installation `Cmd+Shift+P` > ip > Package Control: Install Package Some of my favourite http://sow.so/st

Sublime Superpowers

http://docs.emmet.io/cheat-sheet/

### Sublime Text - Config Project ``` httpd.conf, httpd-vhosts.conf, hosts ``` Project > Save Project As... Quick Switch project = `Ctrl+Cmd+P` http://sow.so/paths

### hosts ``` # S 127.0.0.1 sitename.dev ```

### httpd-vhosts.conf ``` # S # sitename.com <VirtualHost *:80> ServerName sitename.dev ServerAlias *.sitename.dev DocumentRoot "/Users/simonowen/Sites/sitename.dev/" <Directory "/Users/simonowen/Sites/sitename.dev/"> Options Indexes FollowSymLinks Includes ExecCGI AllowOverride All Order Allow,Deny Allow From All </Directory> ErrorLog "/var/log/apache2/mysite.local-error_log" </VirtualHost> ```

### More dotfiles time savers with .aliases ``` # List all files colorized in long format alias l="ls -l ${colorflag}" ``` *** ``` # Open current directory in Sublime Text alias s="subl ." ``` *** ``` # Easier navigation alias ..="cd .." alias ...="cd ../.." alias ....="cd ../../.." ```