Trophy Winning Teams - Web Dev Conf 2015

Slide 1

Slide 1 text

@onishiweb Trophy winning teams Adam Onishi Web Dev Conf October 2015

Slide 2

Slide 2 text

@onishiweb Sports!

Slide 3

Slide 3 text

@onishiweb Teams?

Slide 4

Slide 4 text

@onishiweb Teams?

Slide 5

Slide 5 text

@onishiweb – Jose Mourinho “Players don't win you trophies, teams win trophies.” Teams

Slide 6

Slide 6 text

@onishiweb My teams…

Slide 7

Slide 7 text

@onishiweb dxw Teams @onishiweb

Slide 8

Slide 8 text

@onishiweb Great Sporting teams

Slide 9

Slide 9 text

@onishiweb Planning Sports

Slide 10

Slide 10 text

@onishiweb The “play” Sports

Slide 11

Slide 11 text

@onishiweb Sports @onishiweb

Slide 12

Slide 12 text

@onishiweb Teamwork Sports

Slide 13

Slide 13 text

@onishiweb Maul! @onishiweb

Slide 14

Slide 14 text

@onishiweb Everyone is equal Sports

Slide 15

Slide 15 text

@onishiweb Sports @onishiweb

Slide 16

Slide 16 text

@onishiweb Adaptability Sports

Slide 17

Slide 17 text

@onishiweb Sports @onishiweb

Slide 18

Slide 18 text

@onishiweb Communication Sports

Slide 19

Slide 19 text

@onishiweb Sports @onishiweb

Slide 20

Slide 20 text

@onishiweb @onishiweb Sports

Slide 21

Slide 21 text

@onishiweb Great teams Sports

Slide 22

Slide 22 text

@onishiweb Sports @onishiweb

Slide 23

Slide 23 text

@onishiweb Baseline

Slide 24

Slide 24 text

@onishiweb Boilerplate Planning

Slide 25

Slide 25 text

@onishiweb https://github.com/wearearchitect/Frontend-Boilerplate Planning

Slide 26

Slide 26 text

Slide 27

Slide 27 text

@onishiweb Gulp! Planning

Slide 28

Slide 28 text

@onishiweb Pattern library Planning

Slide 29

Slide 29 text

@onishiweb Planning @onishiweb

Slide 30

Slide 30 text

@onishiweb https://github.com/madebymany/css-patterns Planning

Slide 31

Slide 31 text

@onishiweb Coding Consistently

Slide 32

Slide 32 text

@onishiweb – Mark Otto (@mdo) “Code should look as if it's been written by one person, no matter how many people have worked on it” Consistency

Slide 33

Slide 33 text

@onishiweb Consistency

Slide 34

Slide 34 text

@onishiweb • Reasonable length projects • Varying abilities & specialisms • Different developers on projects • Various codebases Consistency http://cssguidelin.es/

Slide 35

Slide 35 text

@onishiweb http://codeguide.co/ Consistency

Slide 36

Slide 36 text

@onishiweb http://sass-guidelin.es/ Consistency

Slide 37

Slide 37 text

@onishiweb https://github.com/onishiweb/code-style Consistency

Slide 38

Slide 38 text

@onishiweb “Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect.” Consistency – Mark Otto (@mdo)

Slide 39

Slide 39 text

@onishiweb Consistency @onishiweb

Slide 40

Slide 40 text

@onishiweb @onishiweb Consistency

Slide 41

Slide 41 text

@onishiweb The Rules https://github.com/wearearchitect/Frontend-Rules Consistency

Slide 42

Slide 42 text

@onishiweb Where possible all of these rules should be followed to the letter. But, all rules are open to discussion and review. Obviously there are also times where a rule must be broken, but you should be able to explain why it was necessary and what beneﬁt it gave you. Rule 1: Obey the rules Consistency

Slide 43

Slide 43 text

@onishiweb Rule 4: It's all about the bike code. None of these rules are personal, there is no agenda in the rules; it's all about the code. The rules are here to help us write good code and work together as a team. It's about learning as well, front end development is continually evolving with new techniques and new tools becoming available all the time, the rules will keep evolving with these best practices and be updated over time. Consistency

Slide 44

Slide 44 text

@onishiweb Most front end developers are familiar with JavaScript and jQuery, but there are now more frameworks than you can shake a stick at! Whether it's Angular, Meteor, Backbone, Ember, Coﬀeescript, or Node.js there's always something new to learn. Rule 12: The correct number of JavaScript libraries to know is n+1 Consistency

Slide 45

Slide 45 text

@onishiweb Consistency

Slide 46

Slide 46 text

@onishiweb Consistency @onishiweb

Slide 47

Slide 47 text

@onishiweb ”The Rules” Consistency

Slide 48

Slide 48 text

@onishiweb • Be consistent. • Don't rewrite existing code to follow this guide. • Don't violate a guideline without a good reason. • A reason is good when you can convince a teammate. https://playbook.thoughtbot.com/#style-guide Thoughtbot’s Playbook Consistency

Slide 49

Slide 49 text

@onishiweb Enforcing Consistency

Slide 50

Slide 50 text

@onishiweb Linting Consistency

Slide 51

Slide 51 text

@onishiweb Code reviews Consistency

Slide 52

Slide 52 text

@onishiweb Consistency @onishiweb

Slide 53

Slide 53 text

@onishiweb C0de reviews Consistency

Slide 54

Slide 54 text

@onishiweb Reading good code https://www.youtube.com/watch?v=mW_xKGUKLpk Consistency

Slide 55

Slide 55 text

@onishiweb Pull Requests Consistency

Slide 56

Slide 56 text

@onishiweb Consistency

Slide 57

Slide 57 text

@onishiweb Consistency

Slide 58

Slide 58 text

@onishiweb Nothing Personal Consistency

Slide 59

Slide 59 text

@onishiweb Consistency @onishiweb

Slide 60

Slide 60 text

@onishiweb Code review etiquette Consistency

Slide 61

Slide 61 text

@onishiweb Keeping consistency Consistency

Slide 62

Slide 62 text

@onishiweb Documentation

Slide 63

Slide 63 text

@onishiweb General Documentation

Slide 64

Slide 64 text

@onishiweb Contextual Documentation

Slide 65

Slide 65 text

@onishiweb For Reference Documentation

Slide 66

Slide 66 text

@onishiweb Onboarding Documentation

Slide 67

Slide 67 text

@onishiweb Documentation @onishiweb

Slide 68

Slide 68 text

@onishiweb Onboarding Documentation

Slide 69

Slide 69 text

@onishiweb Documentation @onishiweb

Slide 70

Slide 70 text

@onishiweb Teamwork

Slide 71

Slide 71 text

@onishiweb Smaller teams Teamwork

Slide 72

Slide 72 text

@onishiweb Mentorship Teamwork

Slide 73

Slide 73 text

@onishiweb Responsibility Teamwork

Slide 74

Slide 74 text

@onishiweb Buddy System Teamwork

Slide 75

Slide 75 text

@onishiweb Learning Teamwork

Slide 76

Slide 76 text

@onishiweb Sharing knowledge Teamwork

Slide 77

Slide 77 text

@onishiweb Developer déjeuner Teamwork

Slide 78

Slide 78 text

@onishiweb Group code reviews Teamwork

Slide 79

Slide 79 text

@onishiweb Teamwork @onishiweb

Slide 80

Slide 80 text

@onishiweb Conferences & Meet ups Teamwork

Slide 81

Slide 81 text

@onishiweb Share the experiences with the team Teamwork

Slide 82

Slide 82 text

@onishiweb Development teams

Slide 83

Slide 83 text

@onishiweb The Architect dev team, my team! Or funny gif! Justice League? Teams @onishiweb

Slide 84

Slide 84 text

@onishiweb Tools specialist Teams

Slide 85

Slide 85 text

@onishiweb Lightning- fast coder Teams

Slide 86

Slide 86 text

@onishiweb … Teams

Slide 87

Slide 87 text

@onishiweb The Architect dev team, my team! Or funny gif! Justice League? @onishiweb Teams @onishiweb

Slide 88

Slide 88 text

@onishiweb Great dev teams Teams

Slide 89

Slide 89 text

@onishiweb • Planning • Teamwork • Equality • Adaptability • Communication Teams