Make Your Code Delicious - From the Front, Italy 2014

Slide 1

Slide 1 text

twitter.com/sturobson #codelicious

Slide 2

Slide 2 text

twitter.com/sturobson #codelicious Making Your Code Delicious ﬂickr.com/photos/spaceluge/3016452151/ #codelicious twitter.com/sturobson From the Front, Bologna, September 2014.

Slide 3

Slide 3 text

twitter.com/sturobson #codelicious Stuart Robson ﬂickr.com/photos/rob-young/2809158854 twitter.com/sturobson #codelicious front-end developer @SassNews @LDN_Sass @RWDCalc @SitePointdotcom

Slide 4

Slide 4 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/jdhancock/3731688801/ twitter.com/sturobson #codelicious

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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. ﬂickr.com/photos/ginnerobot/2523448766 twitter.com/sturobson #codelicious

Slide 7

Slide 7 text

twitter.com/sturobson #codelicious Boilerplates ﬂickr.com/photos/tschiae/8417927326/ twitter.com/sturobson #codelicious Frameworks Systems Libraries Starter Kits

Slide 8

Slide 8 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/tschiae/8417927326/ twitter.com/sturobson #codelicious An essential supporting structure of a building, vehicle, or object framework:

Slide 9

Slide 9 text

twitter.com/sturobson #codelicious When I say ‘framework’… I mean… ﬂickr.com/photos/tschiae/8417927326/ twitter.com/sturobson #codelicious

Slide 10

Slide 10 text

twitter.com/sturobson #codelicious JavaScript CSS HTML

Slide 11

Slide 11 text

twitter.com/sturobson #codelicious Code that makes websites

Slide 12

Slide 12 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/criminalintent/2250896821 twitter.com/sturobson #codelicious

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

twitter.com/sturobson #codelicious A funny thing that happens… HTML CSS JavaScript twitter.com/sturobson #codelicious ﬂickr.com/photos/evablue/5665974688

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/jdhancock/4100030094 twitter.com/sturobson #codelicious

Slide 33

Slide 33 text

twitter.com/sturobson #codelicious ! The Lessons of CSS Frameworks Eric Meyer An Event Apart, San Fransisco, 2008 ﬂickr.com/photos/foltzwerk/2778957157/ twitter.com/sturobson #codelicious

Slide 34

Slide 34 text

twitter.com/sturobson #codelicious http://960.gs/ twitter.com/sturobson #codelicious

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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 ﬂickr.com/photos/gviciano/3124302755 twitter.com/sturobson #codelicious

Slide 39

Slide 39 text

twitter.com/sturobson #codelicious “…which one is right for you?” Jeremy Keith adactio.com/journal/1498/ ﬂickr.com/photos/hellogeri/6154034099 “…none of the above.” twitter.com/sturobson #codelicious

Slide 40

Slide 40 text

twitter.com/sturobson #codelicious stuffandnonsense.co.uk/blog/about/instant twitter.com/sturobson #codelicious

Slide 41

Slide 41 text

twitter.com/sturobson #codelicious twitter.com/sturobson #codelicious But instant cake mixes do have their place, right?

Slide 42

Slide 42 text

twitter.com/sturobson #codelicious

Slide 43

Slide 43 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/oatsy40/7631270960/ twitter.com/sturobson #codelicious

Slide 44

Slide 44 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/rosenfeldmedia/3978305312 twitter.com/sturobson #codelicious

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/johnnytakespictures/8725666649/ twitter.com/sturobson #codelicious

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

twitter.com/sturobson #codelicious • Speedy set up time. • The work’s already been done. • Maintained by someone else. • Good support on issues.

Slide 50

Slide 50 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/petsadviser-pix/8126557438 twitter.com/sturobson #codelicious

Slide 51

Slide 51 text

twitter.com/sturobson #codelicious • Maintained by someone else. • Subjective decisions have been made. • It might just shrivel up and die. • Bloat.

Slide 52

Slide 52 text

twitter.com/sturobson #codelicious BLOAT ﬂickr.com/photos/matsuyuki/360442606/ twitter.com/sturobson #codelicious

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

twitter.com/sturobson #codelicious ISSUES ﬂickr.com/photos/evergreenkamal/428855445 twitter.com/sturobson #codelicious

Slide 55

Slide 55 text

twitter.com/sturobson #codelicious

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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 ﬂickr.com/photos/robertnyman/6596212095/ responsivedesign.is/articles/rwd-podcast-episode-17-stephen-hay twitter.com/sturobson #codelicious

Slide 61

Slide 61 text

twitter.com/sturobson #codelicious ROLL YOUR OWN ﬂickr.com/photos/garryknight/4876201968 twitter.com/sturobson #codelicious

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

twitter.com/sturobson #codelicious ﬂickr.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

Slide 66

Slide 66 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/janitors/13467502635 twitter.com/sturobson #codelicious (beg), borrow, (steal) code

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

twitter.com/sturobson #codelicious

Slide 70

Slide 70 text

twitter.com/sturobson #codelicious

Slide 71

Slide 71 text

twitter.com/sturobson #codelicious Edit what you need

Slide 72

Slide 72 text

twitter.com/sturobson #codelicious

Slide 73

Slide 73 text

twitter.com/sturobson #codelicious

Slide 74

Slide 74 text

twitter.com/sturobson #codelicious

Slide 75

Slide 75 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/bengarney/3286964986 twitter.com/sturobson #codelicious Add reusable code you create

Slide 76

Slide 76 text

twitter.com/sturobson #codelicious

Slide 77

Slide 77 text

twitter.com/sturobson #codelicious

Slide 78

Slide 78 text

twitter.com/sturobson #codelicious

Slide 79

Slide 79 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/d00d/55456750/ twitter.com/sturobson #codelicious Remove the code you don’t need… Forgetting to include it.

Slide 80

Slide 80 text

twitter.com/sturobson #codelicious

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

twitter.com/sturobson #codelicious

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

twitter.com/sturobson #codelicious

Slide 89

Slide 89 text

twitter.com/sturobson #codelicious

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/timetrax/376152628/ twitter.com/sturobson #codelicious Documentation

Slide 92

Slide 92 text

twitter.com/sturobson #codelicious I always say, keep a diary and someday it'll keep you. – Mae West ﬂickr.com/photos/nesster/2818819626 twitter.com/sturobson #codelicious

Slide 93

Slide 93 text

twitter.com/sturobson #codelicious github.com/necolas/idiomatic-css twitter.com/sturobson #codelicious

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

twitter.com/sturobson #codelicious

Slide 98

Slide 98 text

twitter.com/sturobson #codelicious

Slide 99

Slide 99 text

twitter.com/sturobson #codelicious

Slide 100

Slide 100 text

twitter.com/sturobson #codelicious

Slide 101

Slide 101 text

twitter.com/sturobson #codelicious

Slide 102

Slide 102 text

twitter.com/sturobson #codelicious bem.info

Slide 103

Slide 103 text

twitter.com/sturobson #codelicious

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

twitter.com/sturobson #codelicious

Slide 107

Slide 107 text

twitter.com/sturobson #codelicious

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

twitter.com/sturobson #codelicious Choices ﬂickr.com/photos/pasukaru76/4948494811/ twitter.com/sturobson #codelicious

Slide 111

Slide 111 text

twitter.com/sturobson #codelicious Sweat the details ﬂickr.com/photos/kullez/5598159209 twitter.com/sturobson #codelicious

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

twitter.com/sturobson #codelicious Iterate ﬂickr.com/photos/raneko/4203965136/ twitter.com/sturobson #codelicious

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Slide 116

Slide 116 text

twitter.com/sturobson #codelicious #CODELICIOUS ﬂickr.com/photos/ginnerobot/2523448766 twitter.com/sturobson #codelicious

Slide 117

Slide 117 text

twitter.com/sturobson #codelicious ALL OF THIS HAS HAPPENED BEFORE. AND ALL OF THIS WILL HAPPEN AGAIN. twitter.com/sturobson #codelicious

Slide 118

Slide 118 text

twitter.com/sturobson #codelicious Thank You Stuart Robson t: @sturobson w: alwaystwisted.com Ethan, 5

Slide 119

Slide 119 text

twitter.com/sturobson #codelicious ﬂickr.com/photos/rob-young/2810749797 twitter.com/sturobson #codelicious