Make Your Code Delicious - From the Front, Italy 2014

F479fe45ac0f50c0bdbe35c5757986f7?s=47 Stuart Robson
September 18, 2014

Make Your Code Delicious - From the Front, Italy 2014

With so many frameworks, boilerplates and starting points to choose from in front-end development we are selling ourselves short with instant 'cookie cutter’, ‘one size fits all’ development. I’ll go through my idea of rolling your own starting point but taking the code you like from others adapting as you go and documenting for your future self and team ultimately caring about your code and making it #codelicious.

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

September 18, 2014
Tweet

Transcript

  1. twitter.com/sturobson #codelicious

  2. twitter.com/sturobson #codelicious Making Your Code Delicious flickr.com/photos/spaceluge/3016452151/ #codelicious twitter.com/sturobson From

    the Front, Bologna, September 2014.
  3. twitter.com/sturobson #codelicious Stuart Robson flickr.com/photos/rob-young/2809158854 twitter.com/sturobson #codelicious front-end developer @SassNews

    @LDN_Sass @RWDCalc @SitePointdotcom
  4. twitter.com/sturobson #codelicious flickr.com/photos/jdhancock/3731688801/ twitter.com/sturobson #codelicious

  5. twitter.com/sturobson #codelicious commons.wikimedia.org/wiki/File:What_are_you_doing_here%3F_%287046417743%29.jpg twitter.com/sturobson #codelicious

  6. twitter.com/sturobson #codelicious ๏ Helps you care about your work. ๏

    Makes you aware of what you’re doing. ๏ Gives understanding as to what you’re doing. ๏ Helps others comprehend what you’ve done. flickr.com/photos/ginnerobot/2523448766 twitter.com/sturobson #codelicious
  7. twitter.com/sturobson #codelicious Boilerplates flickr.com/photos/tschiae/8417927326/ twitter.com/sturobson #codelicious Frameworks Systems Libraries Starter

    Kits
  8. twitter.com/sturobson #codelicious flickr.com/photos/tschiae/8417927326/ twitter.com/sturobson #codelicious An essential supporting structure of

    a building, vehicle, or object framework:
  9. twitter.com/sturobson #codelicious When I say ‘framework’… I mean… flickr.com/photos/tschiae/8417927326/ twitter.com/sturobson

    #codelicious
  10. twitter.com/sturobson #codelicious JavaScript CSS HTML

  11. twitter.com/sturobson #codelicious Code that makes websites

  12. twitter.com/sturobson #codelicious flickr.com/photos/criminalintent/2250896821 twitter.com/sturobson #codelicious

  13. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious html5boilerplate.com/

  14. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious www.getskeleton.com/

  15. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious getbootstrap.com/

  16. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious foundation.zurb.com/

  17. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious github.com/inuitcss/

  18. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious malarkey.github.io/Rock-Hammer/

  19. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious sass.fffunction.co/

  20. twitter.com/sturobson #codelicious html5blank.com/ twitter.com/sturobson #codelicious

  21. twitter.com/sturobson #codelicious html5bones.com twitter.com/sturobson #codelicious

  22. twitter.com/sturobson #codelicious html5tpl.com/ twitter.com/sturobson #codelicious

  23. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious developers.google.com/web/starter-kit/

  24. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious Framework Explosion

  25. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious Framework Explosion

  26. twitter.com/sturobson #codelicious A funny thing that happens… HTML CSS JavaScript

    twitter.com/sturobson #codelicious flickr.com/photos/evablue/5665974688
  27. twitter.com/sturobson #codelicious codepen.io/chriscoyier/blog/a-weird-thing-that-happens

  28. twitter.com/sturobson #codelicious codepen.io/chriscoyier/blog/a-weird-thing-that-happens

  29. twitter.com/sturobson #codelicious codepen.io/chriscoyier/blog/a-weird-thing-that-happens

  30. twitter.com/sturobson #codelicious The Mola Ram of Web Development

  31. twitter.com/sturobson #codelicious ALL OF THIS HAS HAPPENED BEFORE. twitter.com/sturobson #codelicious

  32. twitter.com/sturobson #codelicious flickr.com/photos/jdhancock/4100030094 twitter.com/sturobson #codelicious

  33. twitter.com/sturobson #codelicious ! The Lessons of CSS Frameworks Eric Meyer

    An Event Apart, San Fransisco, 2008 flickr.com/photos/foltzwerk/2778957157/ twitter.com/sturobson #codelicious
  34. twitter.com/sturobson #codelicious http://960.gs/ twitter.com/sturobson #codelicious

  35. twitter.com/sturobson #codelicious blueprintcss.org twitter.com/sturobson #codelicious

  36. twitter.com/sturobson #codelicious http://yuilibrary.com/ twitter.com/sturobson #codelicious

  37. twitter.com/sturobson #codelicious What are in these ‘frameworks’ flickr.com/photos/joeyparsons/3240169886 twitter.com/sturobson #codelicious

  38. twitter.com/sturobson #codelicious • A CSS reset. • A layout system

    or predefined grid. • Font sizes, weights, styles, families, colours. • Print styles. • Naming conventions. • An HTML page of various complexity. • jQuery & blank JS files flickr.com/photos/gviciano/3124302755 twitter.com/sturobson #codelicious
  39. twitter.com/sturobson #codelicious “…which one is right for you?” Jeremy Keith

    adactio.com/journal/1498/ flickr.com/photos/hellogeri/6154034099 “…none of the above.” twitter.com/sturobson #codelicious
  40. twitter.com/sturobson #codelicious stuffandnonsense.co.uk/blog/about/instant twitter.com/sturobson #codelicious

  41. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious But instant cake mixes do have

    their place, right?
  42. twitter.com/sturobson #codelicious

  43. twitter.com/sturobson #codelicious flickr.com/photos/oatsy40/7631270960/ twitter.com/sturobson #codelicious

  44. twitter.com/sturobson #codelicious flickr.com/photos/rosenfeldmedia/3978305312 twitter.com/sturobson #codelicious

  45. twitter.com/sturobson #codelicious alistapart.com/article/building-twitter-bootstrap twitter.com/sturobson #codelicious Internal … Tools

  46. twitter.com/sturobson #codelicious 2014.fromthefront.it/

  47. twitter.com/sturobson #codelicious flickr.com/photos/johnnytakespictures/8725666649/ twitter.com/sturobson #codelicious

  48. twitter.com/sturobson #codelicious etsy.com/uk/listing/78633231/ twitter.com/sturobson #codelicious

  49. twitter.com/sturobson #codelicious • Speedy set up time. • The work’s

    already been done. • Maintained by someone else. • Good support on issues.
  50. twitter.com/sturobson #codelicious flickr.com/photos/petsadviser-pix/8126557438 twitter.com/sturobson #codelicious

  51. twitter.com/sturobson #codelicious • Maintained by someone else. • Subjective decisions

    have been made. • It might just shrivel up and die. • Bloat.
  52. twitter.com/sturobson #codelicious BLOAT flickr.com/photos/matsuyuki/360442606/ twitter.com/sturobson #codelicious

  53. twitter.com/sturobson #codelicious Gumby Framework 43kb Bootstrap 110kb Foundation 140kb minified

    CSS
  54. twitter.com/sturobson #codelicious ISSUES flickr.com/photos/evergreenkamal/428855445 twitter.com/sturobson #codelicious

  55. twitter.com/sturobson #codelicious

  56. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious html5boilerplate.com/

  57. twitter.com/sturobson #codelicious twitter.com/jbrewer/statuses/168206967867838464 twitter.com/sturobson #codelicious

  58. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious github.com/h5bp/html5-boilerplate/issues/610

  59. twitter.com/sturobson #codelicious 2014.fromthefront.it/

  60. twitter.com/sturobson #codelicious “Sometimes you need to … make your own

    framework, not because nothing else out there is good … but because it’s good to learn” Stephen Hay flickr.com/photos/robertnyman/6596212095/ responsivedesign.is/articles/rwd-podcast-episode-17-stephen-hay twitter.com/sturobson #codelicious
  61. twitter.com/sturobson #codelicious ROLL YOUR OWN flickr.com/photos/garryknight/4876201968 twitter.com/sturobson #codelicious

  62. twitter.com/sturobson #codelicious DON’T RE-INVENT THE WHEEL flickr.com/photos/garryknight/4876201968 twitter.com/sturobson #codelicious

  63. twitter.com/sturobson #codelicious It’s happening exactly like before…

  64. twitter.com/sturobson #codelicious What would I put in a ‘frameworks’? flickr.com/photos/pftqg/8605591528

    twitter.com/sturobson #codelicious
  65. twitter.com/sturobson #codelicious flickr.com/photos/rubyran2626/432078863 twitter.com/sturobson #codelicious • A CSS reset &

    some helpers. • A layout system or predefined grid. • Font sizes, weights, styles, families, colours. • Generic print styles. • Naming conventions. • An HTML blank template page. • jQuery & blank JS files
  66. twitter.com/sturobson #codelicious flickr.com/photos/janitors/13467502635 twitter.com/sturobson #codelicious (beg), borrow, (steal) code

  67. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious

  68. twitter.com/sturobson #codelicious #codelicious twitter.com/sturobson

  69. twitter.com/sturobson #codelicious

  70. twitter.com/sturobson #codelicious

  71. twitter.com/sturobson #codelicious Edit what you need

  72. twitter.com/sturobson #codelicious

  73. twitter.com/sturobson #codelicious

  74. twitter.com/sturobson #codelicious

  75. twitter.com/sturobson #codelicious flickr.com/photos/bengarney/3286964986 twitter.com/sturobson #codelicious Add reusable code you create

  76. twitter.com/sturobson #codelicious

  77. twitter.com/sturobson #codelicious

  78. twitter.com/sturobson #codelicious

  79. twitter.com/sturobson #codelicious flickr.com/photos/d00d/55456750/ twitter.com/sturobson #codelicious Remove the code you don’t

    need… Forgetting to include it.
  80. twitter.com/sturobson #codelicious

  81. twitter.com/sturobson #codelicious twitter.com/teleject/status/455753399011536896

  82. twitter.com/sturobson #codelicious twitter.com/rem/status/452891874836361216

  83. twitter.com/sturobson #codelicious

  84. twitter.com/sturobson #codelicious larahogan.com/donuts/ twitter.com/sturobson #codelicious

  85. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious html5tpl.com/

  86. twitter.com/sturobson #codelicious alwaystwisted.com/cakes twitter.com/sturobson #codelicious

  87. twitter.com/sturobson #codelicious alwaystwisted.com/cakes

  88. twitter.com/sturobson #codelicious

  89. twitter.com/sturobson #codelicious

  90. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious html5tpl.com/

  91. twitter.com/sturobson #codelicious flickr.com/photos/timetrax/376152628/ twitter.com/sturobson #codelicious Documentation

  92. twitter.com/sturobson #codelicious I always say, keep a diary and someday

    it'll keep you. – Mae West flickr.com/photos/nesster/2818819626 twitter.com/sturobson #codelicious
  93. twitter.com/sturobson #codelicious github.com/necolas/idiomatic-css twitter.com/sturobson #codelicious

  94. twitter.com/sturobson #codelicious pointnorth.io/ twitter.com/sturobson #codelicious

  95. twitter.com/sturobson #codelicious cssguidelin.es/ twitter.com/sturobson #codelicious

  96. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious

  97. twitter.com/sturobson #codelicious

  98. twitter.com/sturobson #codelicious

  99. twitter.com/sturobson #codelicious

  100. twitter.com/sturobson #codelicious

  101. twitter.com/sturobson #codelicious

  102. twitter.com/sturobson #codelicious bem.info

  103. twitter.com/sturobson #codelicious

  104. twitter.com/sturobson #codelicious smacss.com twitter.com/sturobson #codelicious

  105. twitter.com/sturobson #codelicious Base Layout Modules State Theme smacss.com twitter.com/sturobson #codelicious

  106. twitter.com/sturobson #codelicious

  107. twitter.com/sturobson #codelicious

  108. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious alwaystwisted.com/post.php?s=2013-12-29-how-i-write-my-sass twitter.com/sturobson #codelicious

  109. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious

  110. twitter.com/sturobson #codelicious Choices flickr.com/photos/pasukaru76/4948494811/ twitter.com/sturobson #codelicious

  111. twitter.com/sturobson #codelicious Sweat the details flickr.com/photos/kullez/5598159209 twitter.com/sturobson #codelicious

  112. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious

  113. twitter.com/sturobson #codelicious Iterate flickr.com/photos/raneko/4203965136/ twitter.com/sturobson #codelicious

  114. twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious

  115. twitter.com/sturobson #codelicious ๏ Helps you care about your work. ๏

    Makes you aware of what you’re doing. ๏ Gives understanding as to what you’re doing. ๏ Helps others comprehend what you’ve done. flickr.com/photos/ginnerobot/2523448766 twitter.com/sturobson #codelicious
  116. twitter.com/sturobson #codelicious #CODELICIOUS flickr.com/photos/ginnerobot/2523448766 twitter.com/sturobson #codelicious

  117. twitter.com/sturobson #codelicious ALL OF THIS HAS HAPPENED BEFORE. AND ALL

    OF THIS WILL HAPPEN AGAIN. twitter.com/sturobson #codelicious
  118. twitter.com/sturobson #codelicious Thank You Stuart Robson t: @sturobson w: alwaystwisted.com

    Ethan, 5
  119. twitter.com/sturobson #codelicious flickr.com/photos/rob-young/2810749797 twitter.com/sturobson #codelicious