McrFRED 25

Front-End Innovation

mcrfred-logo

@s10wen

@mcr_fred / #McrFRED

http://s10wen.com/McrFRED

Sponsors

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.

In the beginning

Sometime around 2004...

s1gqnu

OMGZ!! I built a website! http://s1.gq.nu

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

different

Find what works best for you.

Have a play

Learning

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"

Blog

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

s10wen-blog

Doesn't necessarily have to be about code.

Listen to Yoda

yoda-fear

You

Will

Never

Learn

Everything

But it's OK!

---

Know When to

Chillax!

---

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

complicated

Do we actually need it?

content?

Evaluate and Prioritise

20mb retina hero image

vs

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

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

jump

Have a taste first

play

Sometimes when you commit to something

It's hard to get back

Things I find helpful

dotfiles

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

One More Thing...

Here's a secret!

New to Front-End?

normalize

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

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

Thanks!

mcrfred-logo digihike-logo upfrontconf-logo

@Mcr_FRED, @digiHike, @UpFrontConf


Simon Owen

@s10wen

McrFRED 25

By Simon Owen

McrFRED 25

  • 2,932