front end anno 2014
DESCRIPTION
Min presentation from #GeekMeetVST 070314. (En del slides har blivit lite konstiga i konverteringen från Keynote till .PDF, och tyvärr så kom inte de slides med videos med heller.)TRANSCRIPT
![Page 1: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/1.jpg)
Front end anno 2014
![Page 3: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/3.jpg)
![Page 4: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/4.jpg)
The meat & potatoes
• HTML
• CSS
• JS
![Page 5: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/5.jpg)
The meat & potatoes
• HTML
• CSS
• JS
• HAML
• LESS/SASS
• CoffeeScript
![Page 6: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/6.jpg)
The meat & potatoes
• HTML
• CSS
• JS
• Emmet
• LESS/SASS
• Yeoman
![Page 7: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/7.jpg)
The meat & potatoes
• HTML
• CSS
• JS
• Emmet
• LESS/SASS
• Yeoman
• Vi bygger något!
![Page 8: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/8.jpg)
“Frontend development these days has a lot of fancy tools
available to complicate things.”@mikaellundin
![Page 9: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/9.jpg)
sass compass less stylus markdown haml jade susy coffeescript jquery yeoman ant make rake cake
bash jshint jslint codekit livereload grunt web-build handlebars mustache emmet selenium bower browserstack mogotest require
sprockets jquery mobile sencha ui sproutcore selenium bootstrap qunit yo jasmine jstestdriver phantomjs bourbon neat singularity och så vidare…
![Page 10: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/10.jpg)
![Page 11: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/11.jpg)
Skriv kod, snabbt
![Page 12: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/12.jpg)
![Page 13: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/13.jpg)
![Page 14: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/14.jpg)
emmet.io
![Page 15: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/15.jpg)
Samma syntax för HTML som CSS
![Page 16: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/16.jpg)
DEMO
![Page 17: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/17.jpg)
![Page 18: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/18.jpg)
CSS preprocessors
![Page 19: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/19.jpg)
Variabler
![Page 20: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/20.jpg)
$font-stack: Helvetica, sans-serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; }
![Page 21: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/21.jpg)
$font-stack: serif; $primary-color: #333; !body { font: 100% $font-stack; color: $primary-color; }
body { font: 100% Helvetica, sans-serif; color: #333; }
![Page 22: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/22.jpg)
Nesting
![Page 23: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/23.jpg)
nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a { display: block; padding: 6px 12px; text-decoration: none; } }
![Page 24: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/24.jpg)
nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; ! a { display: block; padding: 6px 12px; text-decoration: none; } }
nav ul { margin: 0; padding: 0; list-style: none; } !nav li { display: inline-block; } !nav a { display: block; padding: 6px 12px; text-decoration: none; }
![Page 25: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/25.jpg)
nav { ul { li { a { span { &:last-item { strong { margin: 0; } } } } } } }
nav ul li a span:last-item strong { margin: 0; }
![Page 26: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/26.jpg)
nav { ul { li { a { span { &:last-item { strong { margin: 0; } } } } } } }
nav ul li a span:last-item strong { margin: 0; }
![Page 27: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/27.jpg)
Mixins
![Page 28: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/28.jpg)
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } !.box { @include border-radius(10px); }
![Page 29: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/29.jpg)
@mixin border-radius($radius) { } !.box { }
.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
![Page 30: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/30.jpg)
Extends
![Page 31: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/31.jpg)
.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }
![Page 32: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/32.jpg)
.message { border: 1px solid #ccc; padding: 10px; color: #333; } !.success { @extend .message; border-color: green; } !.error { @extend .message; border-color: red; } !.warning { @extend .message; border-color: yellow; }
.message,
.success,
.error,
.warning { border: 1px solid #cccccc; padding: 10px; color: #333; } !.success { border-color: green; } !.error { border-color: red; } !.warning { border-color: yellow; }
![Page 33: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/33.jpg)
Operators
![Page 34: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/34.jpg)
.container { width: 100%; } !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
![Page 35: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/35.jpg)
.container { width: 100%;} !article[role="main"] { float: left; width: 600px / 960px * 100%; } !aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
.container { width: 100%; } !article[role="main"] { float: left; width: 62.5%; } !aside[role="complimentary"] { float: right; width: 31.25%; }
![Page 36: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/36.jpg)
CSS preprocessors• LESS (js)
• SASS (ruby)
• Turbine (php)
• Switch (python)
• Cacheer (php)
• Stylus (js/nodejs)
![Page 37: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/37.jpg)
CSS preprocessors• LESS (js)
• SASS (ruby)
• Turbine (php)
• Switch (python)
• Cacheer (php)
• Stylus (js/nodejs)
![Page 38: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/38.jpg)
![Page 39: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/39.jpg)
LESSHat
![Page 40: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/40.jpg)
Bootstrap
![Page 41: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/41.jpg)
![Page 42: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/42.jpg)
Compass
![Page 43: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/43.jpg)
Susy
![Page 44: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/44.jpg)
Bourbon
![Page 45: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/45.jpg)
Bourbon NEAT
![Page 46: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/46.jpg)
Singularity
![Page 47: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/47.jpg)
Inuit.css
![Page 48: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/48.jpg)
Foundation
![Page 49: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/49.jpg)
GUIstyle.scss → style.css style.less → style.css
![Page 50: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/50.jpg)
![Page 51: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/51.jpg)
![Page 52: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/52.jpg)
![Page 53: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/53.jpg)
command-line interface (CLI)
![Page 54: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/54.jpg)
node.js
![Page 55: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/55.jpg)
npm
![Page 57: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/57.jpg)
$ npm install -g less
![Page 58: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/58.jpg)
$ lessc style.less
![Page 59: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/59.jpg)
(sass kräver ruby)
![Page 60: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/60.jpg)
libsassC/C++ port av Sass
![Page 61: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/61.jpg)
$ gem install sass
![Page 62: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/62.jpg)
$ sass style.scss
![Page 63: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/63.jpg)
![Page 64: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/64.jpg)
![Page 65: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/65.jpg)
Addy Osmani Sindre Sorhus
Brian Ford Eric Bidelman
Paul Irish Mickael Daniel Pascal Hartig
Stephen Swchuk Frederick Ros
![Page 66: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/66.jpg)
$ npm install -g yo
![Page 67: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/67.jpg)
![Page 68: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/68.jpg)
yo (the scaffolding tool)
![Page 69: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/69.jpg)
bower (for package management)
![Page 70: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/70.jpg)
grunt (the build tool)
![Page 71: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/71.jpg)
![Page 72: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/72.jpg)
$ yo
![Page 73: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/73.jpg)
![Page 74: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/74.jpg)
$ bower install
![Page 75: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/75.jpg)
$ bower install jquery
![Page 76: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/76.jpg)
$ bower list
![Page 77: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/77.jpg)
![Page 78: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/78.jpg)
$ grunt
![Page 79: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/79.jpg)
$ grunt sass
![Page 80: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/80.jpg)
$ grunt compass
![Page 81: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/81.jpg)
$ grunt less
![Page 82: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/82.jpg)
$ grunt jshint
![Page 83: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/83.jpg)
$ grunt uglify
![Page 84: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/84.jpg)
$ grunt imagemin
![Page 85: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/85.jpg)
$ grunt modernizr
![Page 86: Front end anno 2014](https://reader033.vdocuments.site/reader033/viewer/2022051515/5582eb56d8b42a21168b4652/html5/thumbnails/86.jpg)
such code
very demo
much tool
wow