McrFRED 25

Front-End Innovation

mcrfred-logo

@s10wen

@mcr_fred / #McrFRED

http://s10wen.com/McrFRED

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

WOW!!!

http://s1.gq.nu

10 years later...

A lot has changed

Writing actual code! instead of using a gui.

Some things haven't

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?

Communicate :)

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

Where to start?

http://learn.shayhowe.com/html-css/ http://developer.mozilla.org/

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

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.

Doesn't necessarily have to be about code.

Imposter Syndrome

http://99u.com/workbook/17864/overcoming-impostor-syndrome

Listen to Yoda

You

Will

Never

Learn

Everything

But it's OK!

---

Know When to

Chillax!

---

Don't Burn Out

http://s10wen.com/blog/categories/unplugged/

Learn things, be smart

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

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