McrFRED 25

Front-End Innovation



@mcr_fred / #McrFRED


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


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

In the beginning

Sometime around 2004...


OMGZ!! I built a website!

10 years later...

A lot has changed

actual code

Writing actual code! instead of using a gui.

Some things haven't

fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire

The web is moving fast.

There's a bazillion things to learn.

We can't learn everything.

Don't Panic.

We have help.

Where to start?

Zeldman Clarke

Everyone is different


Find what works best for you.

Have a play


JS Bin / CodePen / JSFiddle

Dive in the deep-end and have a go at making something.

Have a play

Chrome Dev Tools

Use my Chrome Dev Tool Theme ;)

+10 Code Skill Points, "Paul Irish Certified"


Get a blog up and running, share what you find out.


Doesn't necessarily have to be about code.

Listen to Yoda







But it's OK!


Know When to



Steve Jobs Crazy Quote
you're awesome

Learn things, be smart

smart quote

But, don't try to be too smart

Things can get complicated


Do we actually need it?


Evaluate and Prioritise

20mb retina hero image


Getting content quick and viewing offline?

Service Worker anyone?

Wait for it...

Wait for it...

Wait for it...

Add sugar as required

If you can't do something yourself

It's ok to get help


Be a team player

Help make team members feel smart and awesome.

Not stupid and discouraged.

Don't go solo in a team repo


Have a taste first


Sometimes when you commit to something

It's hard to get back

Things I find helpful


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

Photoshop Shortcuts

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)
### Create a new site folder ``` $ mkd ``` 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


### 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 ```

# 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; } });, ['styles']);, function(file){ gulp.src(file.path) .pipe(notify({ message: 'File ' + file.path + ' changed' })) .pipe(livereload(server)); }); }); gulp.task('build', ['styles']); ```


Let's Install Something

Say we want html5shiv...

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



Back to the terminal!


$ bower search html5


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


### 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 --> ```


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

Git / GitHub / BitBucket


### 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 `Cmd+Shift+P` > ip > Package Control: Install Package Some of my favourite

Sublime Superpowers

### Sublime Text - Config Project ``` httpd.conf, httpd-vhosts.conf, hosts ``` Project > Save Project As... Quick Switch project = `Ctrl+Cmd+P`
### hosts ``` # S ```
### httpd-vhosts.conf ``` # S # <VirtualHost *:80> ServerName ServerAlias * DocumentRoot "/Users/simonowen/Sites/" <Directory "/Users/simonowen/Sites/"> 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

  • Variables
  • Nesting
  • Mixins

Styling with 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


Viewport Sizes











Chrome Dev Tools

Responsive testing.

Chrome dev tools theme

Thanks to Paul Irish for the tweet!

Live Reload Styling

Power Tools


Quickly get to the app you're after.

Power Tools


Quickly view apps side by side.

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

Browser Testing

Virtual Box - The place to go to get old IE browsers.

Automated installation of IE VMs.


Update VB hosts file to point VB to local.

Device Testing

GhostLab + DeviceLab


Coming next year!

There's a lot to cover...

In the meantime, go follow:

Browser Testing


Gradient Rendering - CodePen / JS Bin / JSFiddle


Browser bugs - Safari

CSS animation bug

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

Reduction ftw!

Device Testing


iOS Testing

Horizontal Scrolling

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


Background Jank Performance

translate vs position / Bye Bye Layer Hacks


FPS Jank Busting

60fps makes me super happy

JS Performance

JS Perf

PageSpeed Test


PageSpeed Insights

Server Performance

staging vs aws

Build Tool Performance - App - 6.282s


Build Tool Performance - Dist - 4.726s


1.5 seconds saving

Closing Thoughts


Thanks for all the replies!

Closing Thoughts

Thanks @stephenmelrose

One More Thing...

Here's a secret!

New to Front-End?


And that's coming from a guy that wrote normalize.css

(which is fairly popular, even though it's spelt wrong :p)


mcrfred-logo digihike-logo upfrontconf-logo

@Mcr_FRED, @digiHike, @UpFrontConf

Simon Owen


McrFRED 25

By Simon Owen

McrFRED 25

  • 3,027