A presentation at From The Front and the Temple of DOM in in Bologna, Metropolitan City of Bologna, Italy by Stuart Robson
twitter.com/sturobson #codelicious
twitter.com/sturobson Making Your Code Delicious From the Front, Bologna, September 2014. flickr.com/photos/spaceluge/3016452151/ #codelicious
twitter.com/sturobson Stuart Robson front-end developer @SassNews @LDN_Sass @RWDCalc @SitePointdotcom flickr.com/photos/rob-young/2809158854 #codelicious
twitter.com/sturobson flickr.com/photos/jdhancock/3731688801/ #codelicious
twitter.com/sturobson commons.wikimedia.org/wiki/File:What_are_you_doing_here%3F_%287046417743%29.jpg #codelicious
twitter.com/sturobson ๏ 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 #codelicious
twitter.com/sturobson Boilerplates Frameworks Systems Libraries Starter Kits flickr.com/photos/tschiae/8417927326/ #codelicious
twitter.com/sturobson framework: An essential supporting structure of a building, vehicle, or object flickr.com/photos/tschiae/8417927326/ #codelicious
twitter.com/sturobson When I say ‘framework’… I mean… flickr.com/photos/tschiae/8417927326/ #codelicious
twitter.com/sturobson JavaScript CSS HTML #codelicious
twitter.com/sturobson Code that makes websites #codelicious
twitter.com/sturobson flickr.com/photos/criminalintent/2250896821 #codelicious
twitter.com/sturobson html5boilerplate.com/ #codelicious
twitter.com/sturobson www.getskeleton.com/ #codelicious
twitter.com/sturobson getbootstrap.com/ #codelicious
twitter.com/sturobson foundation.zurb.com/ #codelicious
twitter.com/sturobson github.com/inuitcss/ #codelicious
twitter.com/sturobson malarkey.github.io/Rock-Hammer/ #codelicious
twitter.com/sturobson sass.fffunction.co/ #codelicious
twitter.com/sturobson html5blank.com/ #codelicious
twitter.com/sturobson html5bones.com #codelicious
twitter.com/sturobson html5tpl.com/ #codelicious
twitter.com/sturobson developers.google.com/web/starter-kit/ #codelicious
twitter.com/sturobson Framework Explosion #codelicious
twitter.com/sturobson Framework Explosion #codelicious
twitter.com/sturobson A funny thing that happens… CSS flickr.com/photos/evablue/5665974688 HTML JavaScript #codelicious
twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious
twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious
twitter.com/sturobson codepen.io/chriscoyier/blog/a-weird-thing-that-happens #codelicious
twitter.com/sturobson The Mola Ram of Web Development #codelicious
twitter.com/sturobson ALL OF THIS HAS HAPPENED BEFORE. #codelicious
twitter.com/sturobson flickr.com/photos/jdhancock/4100030094 #codelicious
twitter.com/sturobson ! The Lessons of CSS Frameworks Eric Meyer An Event Apart, San Fransisco, 2008 flickr.com/photos/foltzwerk/2778957157/ #codelicious
twitter.com/sturobson http://960.gs/ #codelicious
twitter.com/sturobson blueprintcss.org #codelicious
twitter.com/sturobson http://yuilibrary.com/ #codelicious
twitter.com/sturobson What are in these ‘frameworks’ flickr.com/photos/joeyparsons/3240169886 #codelicious
twitter.com/sturobson • 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 #codelicious
twitter.com/sturobson “…which one is right for you?” “…none of the above.” Jeremy Keith adactio.com/journal/1498/ flickr.com/photos/hellogeri/6154034099 #codelicious
twitter.com/sturobson stuffandnonsense.co.uk/blog/about/instant #codelicious
twitter.com/sturobson But instant cake mixes do have their place, right? #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson flickr.com/photos/oatsy40/7631270960/ #codelicious
twitter.com/sturobson flickr.com/photos/rosenfeldmedia/3978305312 #codelicious
twitter.com/sturobson Internal … Tools alistapart.com/article/building-twitter-bootstrap #codelicious
twitter.com/sturobson 2014.fromthefront.it/ #codelicious
twitter.com/sturobson flickr.com/photos/johnnytakespictures/8725666649/ #codelicious
twitter.com/sturobson etsy.com/uk/listing/78633231/ #codelicious
twitter.com/sturobson • Speedy set up time. • The work’s already been done. • Maintained by someone else. • Good support on issues. #codelicious
twitter.com/sturobson flickr.com/photos/petsadviser-pix/8126557438 #codelicious
twitter.com/sturobson • Maintained by someone else. • Subjective decisions have been made. • It might just shrivel up and die. • Bloat. #codelicious
twitter.com/sturobson BLOAT flickr.com/photos/matsuyuki/360442606/ #codelicious
twitter.com/sturobson minified CSS Gumby Framework 43kb Bootstrap 110kb Foundation 140kb #codelicious
twitter.com/sturobson ISSUES flickr.com/photos/evergreenkamal/428855445 #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson html5boilerplate.com/ #codelicious
twitter.com/sturobson twitter.com/jbrewer/statuses/168206967867838464 #codelicious
twitter.com/sturobson github.com/h5bp/html5-boilerplate/issues/610 #codelicious
twitter.com/sturobson 2014.fromthefront.it/ #codelicious
twitter.com/sturobson “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 responsivedesign.is/articles/rwd-podcast-episode-17-stephen-hay flickr.com/photos/robertnyman/6596212095/ #codelicious
twitter.com/sturobson ROLL YOUR OWN flickr.com/photos/garryknight/4876201968 #codelicious
twitter.com/sturobson DON’T RE-INVENT THE WHEEL flickr.com/photos/garryknight/4876201968 #codelicious
twitter.com/sturobson It’s happening exactly like before… #codelicious
twitter.com/sturobson What would I put in a ‘frameworks’? flickr.com/photos/pftqg/8605591528 #codelicious
twitter.com/sturobson • 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 flickr.com/photos/rubyran2626/432078863 #codelicious
twitter.com/sturobson (beg), borrow, (steal) code flickr.com/photos/janitors/13467502635 #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson Edit what you need #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson Add reusable code you create flickr.com/photos/bengarney/3286964986 #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson Remove the code you don’t need… Forgetting to include it. flickr.com/photos/d00d/55456750/ #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson twitter.com/teleject/status/455753399011536896 #codelicious
twitter.com/sturobson twitter.com/rem/status/452891874836361216 #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson larahogan.com/donuts/ #codelicious
twitter.com/sturobson html5tpl.com/ #codelicious
twitter.com/sturobson alwaystwisted.com/cakes #codelicious
twitter.com/sturobson alwaystwisted.com/cakes #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson html5tpl.com/ #codelicious
twitter.com/sturobson Documentation flickr.com/photos/timetrax/376152628/ #codelicious
twitter.com/sturobson I always say, keep a diary and someday it’ll keep you. – Mae West flickr.com/photos/nesster/2818819626 #codelicious
twitter.com/sturobson github.com/necolas/idiomatic-css #codelicious
twitter.com/sturobson pointnorth.io/ #codelicious
twitter.com/sturobson cssguidelin.es/ #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson bem.info #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson smacss.com #codelicious
twitter.com/sturobson Base Layout Modules State Theme smacss.com #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson alwaystwisted.com/post.php?s=2013-12-29-how-i-write-my-sass #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson Choices flickr.com/photos/pasukaru76/4948494811/ #codelicious
twitter.com/sturobson Sweat the details flickr.com/photos/kullez/5598159209 #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson Iterate flickr.com/photos/raneko/4203965136/ #codelicious
twitter.com/sturobson #codelicious
twitter.com/sturobson ๏ 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 #codelicious
twitter.com/sturobson #CODELICIOUS flickr.com/photos/ginnerobot/2523448766 #codelicious
twitter.com/sturobson ALL OF THIS HAS HAPPENED BEFORE. AND ALL OF THIS WILL HAPPEN AGAIN. #codelicious
Thank You twitter.com/sturobson Stuart Robson t: @sturobson w: alwaystwisted.com Ethan, 5 #codelicious
twitter.com/sturobson flickr.com/photos/rob-young/2810749797 #codelicious
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.
Here’s what was said about this presentation on social media.
