1.
Front end anno 2014

2.
@davidpaulsson
david@davidpaulsson.se
davidpaulsson.se

3.
The meat & potatoes
•
HTML
•
CSS
•
JS

4.
The meat & potatoes
•
HTML
•
HAML
•
CSS
•
LESS/SASS
•
JS
•
CoffeeScript

5.
The meat & potatoes
•
HTML
•
Emmet
•
CSS
•
LESS/SASS
•
JS
•
Yeoman

6.
The meat & potatoes
•
HTML
•
Emmet
•
CSS
•
LESS/SASS
•
JS
•
Yeoman
•
Vi bygger något!

7.
“Frontend development these
days has a lot of fancy tools
available to complicate things.”
@mikaellundin

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

9.
Skriv kod, snabbt

10.
emmet.io

11.
Samma syntax för
HTML som CSS

12.
DEMO

13.
CSS preprocessors

14.
Variabler

15.
$font-stack: Helvetica, sansserif;
$primary-color: #333;
!
body {
font: 100% $font-stack;
color: $primary-color;
}

16.
$font-stack:
serif;
$primary-color: #333;
!
body {
font: 100% $font-stack;
color: $primary-color;
}
body {
font: 100% Helvetica, sansserif;
color: #333;
}

17.
Nesting

18.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
!
li {
display: inline-block;
}
!
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

19.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
!
!
li {
display: inline-block;
!
!
a{
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

20.
nav {
ul {
li {
a{
span {
&:last-item {
strong {
margin: 0;
}
}
}
}
}
}
}
nav ul li a span:last-item strong {
margin: 0;
}

21.
nav {
ul {
li {
a{
span {
&:last-item {
strong {
margin: 0;
}
}
}
}
}
}
}
nav ul li a span:last-item strong {
margin: 0;
}

22.
Mixins

23.
@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);
}

24.
@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;
}

25.
Extends

26.
.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;
}

27.
.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;
}

28.
Operators

29.
.container {
width: 100%;
}
!
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
!
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}

30.
.container {
width: 100%;
}
.container {
width: 100%;
}
!
!
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
!
!
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}

31.
CSS preprocessors
•
LESS (js)
•
Switch (python)
•
SASS (ruby)
•
Cacheer (php)
•
Turbine (php)
•
Stylus (js/nodejs)

32.
CSS preprocessors
•
LESS (js)
•
Switch (python)
•
SASS (ruby)
•
Cacheer (php)
•
Turbine (php)
•
Stylus (js/nodejs)

33.
LESSHat

34.
Bootstrap

35.
Compass

36.
Susy

37.
Bourbon

38.
Bourbon NEAT

39.
Singularity

40.
Inuit.css

41.
Foundation

42.
GUI
style.scss → style.css
style.less → style.css

43.
command-line interface (CLI)

44.
node.js

45.
npm

46.
$ brew install node
(Widows: http://nodejs.org/)

47.
$ npm install -g less

48.
$ lessc style.less

49.
(sass kräver ruby)

50.
libsass
C/C++ port av Sass

51.
$ gem install sass

52.
$ sass style.scss

53.
Addy Osmani
Sindre Sorhus
Brian Ford
Eric Bidelman
Paul Irish
Mickael Daniel
Pascal Hartig
Stephen Swchuk
Frederick Ros

54.
$ npm install -g yo

55.
yo (the scaffolding tool)

56.
bower (for package management)

57.
grunt (the build tool)

58.
$ yo

59.
$ bower install

60.
$ bower install jquery

61.
$ bower list

62.
$ grunt

63.
$ grunt sass

64.
$ grunt compass

65.
$ grunt less

66.
$ grunt jshint

67.
$ grunt uglify

68.
$ grunt imagemin

69.
$ grunt modernizr

70.
such code
much tool
wow
very demo