Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Front end anno 2014

928 views

Published on

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

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Front end anno 2014

  1. 1. Front end anno 2014
  2. 2. @davidpaulsson david@davidpaulsson.se davidpaulsson.se
  3. 3. The meat & potatoes • HTML • CSS • JS
  4. 4. The meat & potatoes • HTML • HAML • CSS • LESS/SASS • JS • CoffeeScript
  5. 5. The meat & potatoes • HTML • Emmet • CSS • LESS/SASS • JS • Yeoman
  6. 6. The meat & potatoes • HTML • Emmet • CSS • LESS/SASS • JS • Yeoman • Vi bygger något!
  7. 7. “Frontend development these days has a lot of fancy tools available to complicate things.” @mikaellundin
  8. 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. 9. Skriv kod, snabbt
  10. 10. emmet.io
  11. 11. Samma syntax för HTML som CSS
  12. 12. DEMO
  13. 13. CSS preprocessors
  14. 14. Variabler
  15. 15. $font-stack: Helvetica, sansserif; $primary-color: #333; ! body { font: 100% $font-stack; color: $primary-color; }
  16. 16. $font-stack: serif; $primary-color: #333; ! body { font: 100% $font-stack; color: $primary-color; } body { font: 100% Helvetica, sansserif; color: #333; }
  17. 17. Nesting
  18. 18. nav { ul { margin: 0; padding: 0; list-style: none; } ! li { display: inline-block; } ! a{ display: block; padding: 6px 12px; text-decoration: none; } }
  19. 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. 20. nav { ul { li { a{ span { &:last-item { strong { margin: 0; } } } } } } } nav ul li a span:last-item strong { margin: 0; }
  21. 21. nav { ul { li { a{ span { &:last-item { strong { margin: 0; } } } } } } } nav ul li a span:last-item strong { margin: 0; }
  22. 22. Mixins
  23. 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. 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. 25. Extends
  26. 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. 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. 28. Operators
  29. 29. .container { width: 100%; } ! article[role="main"] { float: left; width: 600px / 960px * 100%; } ! aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
  30. 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. 31. CSS preprocessors • LESS (js) • Switch (python) • SASS (ruby) • Cacheer (php) • Turbine (php) • Stylus (js/nodejs)
  32. 32. CSS preprocessors • LESS (js) • Switch (python) • SASS (ruby) • Cacheer (php) • Turbine (php) • Stylus (js/nodejs)
  33. 33. LESSHat
  34. 34. Bootstrap
  35. 35. Compass
  36. 36. Susy
  37. 37. Bourbon
  38. 38. Bourbon NEAT
  39. 39. Singularity
  40. 40. Inuit.css
  41. 41. Foundation
  42. 42. GUI style.scss → style.css style.less → style.css
  43. 43. command-line interface (CLI)
  44. 44. node.js
  45. 45. npm
  46. 46. $ brew install node (Widows: http://nodejs.org/)
  47. 47. $ npm install -g less
  48. 48. $ lessc style.less
  49. 49. (sass kräver ruby)
  50. 50. libsass C/C++ port av Sass
  51. 51. $ gem install sass
  52. 52. $ sass style.scss
  53. 53. Addy Osmani Sindre Sorhus Brian Ford Eric Bidelman Paul Irish Mickael Daniel Pascal Hartig Stephen Swchuk Frederick Ros
  54. 54. $ npm install -g yo
  55. 55. yo (the scaffolding tool)
  56. 56. bower (for package management)
  57. 57. grunt (the build tool)
  58. 58. $ yo
  59. 59. $ bower install
  60. 60. $ bower install jquery
  61. 61. $ bower list
  62. 62. $ grunt
  63. 63. $ grunt sass
  64. 64. $ grunt compass
  65. 65. $ grunt less
  66. 66. $ grunt jshint
  67. 67. $ grunt uglify
  68. 68. $ grunt imagemin
  69. 69. $ grunt modernizr
  70. 70. such code much tool wow very demo

×