Front End North

Optimising Your Front-End Workflow

Sat 15th November 2014

fen-logo

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 digihike-logo upfrontconf-logo

@mcr_fred, @digihike, @upfrontconf

s10wen work

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

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

Search

$ 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 <!-- build:js scripts/vendor.js --> <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"/> <!-- endbuild --> ```

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 ../../.." ```

Sass - CSS with superpowers

http://sass-lang.com/guide

  • Variables
  • Nesting
  • Mixins

Styling with Sass

sass

With grunt watch, grunt will watch for changes and livereload will update the browser.

With Sass it's possible to split code up into separate files called partials.

Viewport Sizes

Partials


Viewport Sizes


_jawa

partial

_tauntaun

partial

_wampa

partial

_bantha

partial

_rancor

partial

Chrome Dev Tools

Responsive testing.

Chrome dev tools theme

Thanks to Paul Irish for the tweet!

Live Reload Styling

Power Tools

Alfred

Quickly get to the app you're after.

Power Tools

Spectacle

Quickly view apps side by side.

@eczarny is ace and helped me out with my dotfiles.

https://github.com/s10wen/dotfiles/blob/master/.osx#L728

Browser Testing

Virtual Box

Modern.ie - The place to go to get old IE browsers.

Automated installation of IE VMs.

virtualbox-windows7

Update VB hosts file to point VB to local.

Device Testing

GhostLab + DeviceLab

http://devicelab.vanamco.com/

http://vanamco.com/ghostlab/

SVGs

Coming next year!

There's a lot to cover...


In the meantime, go follow:

https://twitter.com/SaraSoueidan

Browser Testing

browserstack-01

Gradient Rendering - CodePen / JS Bin / JSFiddle

gradients

Browser bugs - Safari

CSS animation bug

http://codepen.io/s10wen/pen/czDbu

This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em.

Reduction ftw!

Device Testing

device-testing-with-chrome

iOS Testing

Horizontal Scrolling

*{border: 1px solid red !important;}

horizontal-scrollbar

Background Jank Performance

translate vs position / Bye Bye Layer Hacks

bg-perf

FPS Jank Busting

60fps makes me super happy

JS Performance

http://jsperf.com/

JS Perf

PageSpeed Test

pagespeed

PageSpeed Insights

Server Performance

staging vs aws

http://www.webpagetest.org/

Build Tool Performance - App - 6.282s

wpt-01-app

Build Tool Performance - Dist - 4.726s

wpt-02-dist

1.5 seconds saving

Closing Thoughts

twitter

Thanks for all the replies!

https://twitter.com/s10wen/status/531914456029487105

Closing Thoughts

Thanks @stephenmelrose

Thanks!

mcrfred-logo digihike-logo upfrontconf-logo

@mcr_fred, @digihike, @upfrontconf


Simon Owen

@s10wen

Front End North 2015

By Simon Owen

Front End North 2015

Slides from my talk at Front End North 2015

  • 2,697