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

1. Front end anno 2014

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

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

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

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

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

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

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

11. Skriv kod, snabbt

14. emmet.io

15. Samma syntax för
HTML som CSS

16. DEMO

18. CSS preprocessors

19. Variabler

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

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

22. Nesting

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

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

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

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

27. Mixins

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

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

30. Extends

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

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

33. Operators

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

35. .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%;
}

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

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

39. LESSHat

40. Bootstrap

42. Compass

43. Susy

44. Bourbon

45. Bourbon NEAT

46. Singularity

47. Inuit.css

48. Foundation

49. GUI
style.scss → style.css
style.less → style.css

53. command-line interface (CLI)

54. node.js

55. npm

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

57. $ npm install -g less

58. $ lessc style.less

59. (sass kräver ruby)

60. libsass
C/C++ port av Sass

61. $ gem install sass

62. $ sass style.scss

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

66. $ npm install -g yo

68. yo (the scaffolding tool)

69. bower (for package management)

70. grunt (the build tool)

72. $ yo

74. $ bower install

75. $ bower install jquery

76. $ bower list

78. $ grunt

79. $ grunt sass

80. $ grunt compass

81. $ grunt less

82. $ grunt jshint

83. $ grunt uglify

84. $ grunt imagemin

85. $ grunt modernizr

86. such code
much tool
wow
very demo