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.

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