McrFRED 15

Site walkthrough

mcrfred-logo

@s10wen

@mcr_fred / #McrFRED

http://s10wen.com/mcrfred

Sponsors

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
  • Working Locally
  • Improving With Each Project

Local Development Environment

work local















Let's step into Terminal

### $ 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 ```bash PS1="\[\e]2;$PWD\[\a\]\[\e]1;\] $(basename "$(dirname "$PWD")")/\W\[\a\]${BOLD}\ $(usernamehost)\[$GREEN\]\w\$(git_info)\[$WHITE\] \n\n༼ つ ◕_◕ ༽つ⚡ \[$RESET\]" ``` ![nodollar](http://173.254.28.140/~simonow1/speaking/mcrfred15/nodollar.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!

One time installs

Node

http://nodejs.org/

Yeoman, Bower and Grunt

$ npm install -g yo

# For npm versions < 1.2.10.

$ npm install -g grunt-cli bower

Yeoman

Ok, but why?

Unicorns and rainbows await. Bear with me.

npm = package.json

bower = bower.json

grunt = Gruntfile.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' ]); }; ```

Git / GitHub / BitBucket

versioncontrol

### Now for the good bit ``` $ npm install && bower install && grunt serve ```

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 .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 .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 ```
### 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](http://173.254.28.140/~simonow1/speaking/mcrfred15/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 time savers

# List all files colorized in long format alias l="ls -l ${colorflag}"

# Open current directory in Sublime Text alias s="subl ."

Cmd+T > Start typing out a filename > Enter

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/

http://report.mind.org.uk/2013/

mind-start

First Idea

first-idea

idea

Prototype

Highlighted potential issues.

  • Fixed dimensions
  • Maintainability
  • Responsive Issues
  • Device Issues

WCAG

Web Content Accessibility Guidelines

wcag

WCAG Checker

Screenreaders

screenreaders

SVGs

Help awesomeness from the people of the Internetz

Jank n Chris

Baron von Archibaldus III / Count Christoph Coyier of Coyerton

ajaxInclude

ajaxInclude (thanks @stucox)

  • Easier to maintain
  • No page blocking
  • Full CSS control
<div id="svg-clock" data-replace="svg/clock.html"></div>

SVG Issue

svg

SVG Issue

svg

SVG Viewbox

svg-viewbox-none-firefox 

<svg viewBox="0 0 358 414">

Grunt Build SVG Tag Issue

grunt-tags

!!! Client Request !!!

map-locations

Illustrator / SVG coordinates

map-locations-code

Finished Result

With random animation on page load

Browser Testing

browserstack-01

Animation Testing Required

bower-stack-no-animation

Getting clicky with pointer events

Font Rendering

Gradient Rendering

gradients

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!

Win7 Chrome Width Issue

win7-chrome-of-bug

!!! IE8 Testing !!!

IE8

ie8

IE8

ie8

IE8

ie8

IE8

ie8

IE8

ie8

IE8

ie8

IE8

ie8

IE8

ie8

Device Testing

device-testing-with-chrome

iOS Testing

CanvasJS

Issue with CanvasJS where you'd get stuck when scrolling.

Disable Touch

Thanks Sunil Urs

Horizontal Scrolling

horizontal-scrollbar

!!! Client Request !!!

Can we make the woman get pregnant?

pregnant

Finished Result

Background Jank Performance

translate vs position / Bye Bye Layer Hacks

bg-perf

FPS Jank Busting

60fps makes me super happy

JS Performance

JS Perf

http://jsperf.com/

PageSpeed Test

pagespeed

PageSpeed Insights

Image Optimisation

Images are huuuuge.

http://addyosmani.com/blog/image-optimization-tools/

https://github.com/gruntjs/grunt-contrib-imagemin

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













AWS S3 Deployment as easy as:

$ s3_website push --site dist

Facebook Social

facebook

Facebook Social

facebook

Crazy Egg

crazy egg

crazy egg

crazy egg

This makes me happy...

To everyone that left a
comment and shared a link.


Thank you!

feedback facebook

feedback twitter

McrFRED 15

So long, and thanks for all the fish

mcrfred-logo

@s10wen

@mcr_fred / #McrFRED

http://s10wen.com/mcrfred

Thanks for coming!

Fancy a chit chat and a pint?

http://portstreetbeerhouse.co.uk/