Pin Cing Do – The way of pragmatic coding

Slide 1

Slide 1 text

Pin Cing Do The way of pragmatic coding ฤఔಓ

Slide 2

Slide 2 text

ฤఔಓ http://benfrain.com Where I’m coming from • I don’t think websites should last for long. • If something lasts a year it was probably OK, longer than that it was good. If everyone dreads working on it – it’s time to rebuild. • Even if preference doesn’t necessitate a change, technology can (e.g. Flash). • I think we build the equivalent of sand castles/ice sculptures. • This is OK. I'm ﬁne with that.

Slide 3

Slide 3 text

ฤఔಓ http://benfrain.com How I feel about front-end dev • Our code just allows somebody/something to be expressed on the web (commerce, news, social interaction). • Our code isn’t poetry: it’s purposeful – a solution to a problem. • We should write the best code we possibly can. But write it that way because it helps us build faster, build smarter and build more maintainable projects. • Websites and applications change: they always will. That’s not bad, it’s our reality. We should build solutions expecting this, not dreading it.

Slide 4

Slide 4 text

Our role requires pragmatism

Slide 5

Slide 5 text

ฤఔಓ http://benfrain.com pragmatic |pragˈmatɪk|   dealing with things sensibly and realistically in a way that is based on practical rather than theoretical considerations We need pragmatism

Slide 6

Slide 6 text

http://benfrain.com ฤఔಓ • We need to be pragmatic about the way we learn. • Pragmatic about the way we build. • Pragmatic about the way we work with others. ! Front-end developers face unique challenges.

Slide 7

Slide 7 text

– Douglas Crockford “The browser is the most hostile software development environment ever imagined”

Slide 8

Slide 8 text

http://benfrain.com ฤఔಓ • Things aren’t getting any easier; device and platform fragmentation, multiple input contexts, widely differing bandwidth speeds. • Unless you’re superhuman, the traditional approach of learning all the necessary skills for our job inside and out is an impossible task: there aren’t enough hours in the day. • Front-end development isn’t merely the mastery of one or two languages. It isn’t even a clearly deﬁnable set of skills.

Slide 9

Slide 9 text

ฤఔಓ http://benfrain.com Our needs • To be successful as front-end developers we need to refine our capabilities constantly. • We need to judge and appraise new techniques with speed, analyse their usefulness and incorporate any benefits into what we do. • Before we can evaluate new tools and techniques we need the confidence to know what we should pay attention to and what is expendable.

Slide 10

Slide 10 text

The crux of the problem

Slide 11

Slide 11 text

http://benfrain.com ฤఔಓ • The web, its nature, capabilities and the very tools we build it with are constantly mutating. • Meanwhile, we’re all trying our best to understand and implement the latest and greatest techniques and languages. • Sometimes that feels impossible. • Feeling this way has bothered me for a long time. What’s the answer?

Slide 12

Slide 12 text

Bruce Lee Little Dragon

Slide 13

Slide 13 text

ฤఔಓ http://benfrain.com Jeet Kune Do • Bruce Lee was an incredible martial artist. • Towards the end of his tragically short life, he moved away from the mastery of distinct, dogmatic styles and disciplines. • Instead he promoted a philosophy he called ‘Jeet Kune Do’, which translates from Cantonese to ‘The way of the intercepting ﬁst’.

Slide 14

Slide 14 text

– Bruce Lee “I have not invented a ‘new style’, composite, modiﬁed or otherwise that is set within distinct form as apart from this method or that method. On the contrary, I hope to free my followers from clinging to styles, patterns, or moulds. Remember that Jeet Kune Do is merely a name used, a mirror in which to see ourselves… Jeet Kune Do is not an organised institution that one can be a member of. Either you understand or you don’t, and that is that.”

Slide 15

Slide 15 text

http://benfrain.com ฤఔಓ He looked at what the other forms had to offer. He analysed their benefits to him, and where appropriate, took component parts and plugged them into his own fighting style. It was a fluid system. Never stable, never finished, constantly evolving.

Slide 16

Slide 16 text

http://benfrain.com ฤఔಓ • I think the very same philosophy can be used in our quest to be better front-end developers. • I think we can feel more positive if we embrace a mindset I’m calling ‘The way of pragmatic coding’.

Slide 17

Slide 17 text

ฤఔಓ Pin Cing Do The way of pragmatic coding

Slide 18

Slide 18 text

http://benfrain.com ฤఔಓ • ‘Pin Cing Do’ is nothing new. • It’s probably what most of us do without even thinking about it. • It’s just a name. A label to pin on something. • I think it can be applied to both the learning of new skills and the manner in which we build things. • Perhaps even in the way we work with others.

Slide 19

Slide 19 text

Learning

Slide 20

Slide 20 text

–Chinese proverb “Be not afraid of growing slowly, be afraid only of standing still.”

Slide 21

Slide 21 text

ฤఔಓ http://benfrain.com • I believe we can be more effective by mastering a couple of core skills/languages and then seek out only component parts of others. • We should make no effort to consume all that other languages/skills have to offer because it doesn’t serve our purpose. • Take only what we need and dispose of it when surplus to requirements. • What is needed and what is not is a purely personal thing.

Slide 22

Slide 22 text

ฤఔಓ http://benfrain.com Core disciplines • I’m getting ahead of myself. • To get to that ﬁrst point, we need to intimately know some ‘core’ disciplines. • They will become a base, a foundation. • After all, our model here is Jeet Kune Do and Bruce Lee couldn’t have adapted things into Jeet Kune Do without the mastery of the Kung Fu style of Wing Chun to begin with.

Slide 23

Slide 23 text

http://benfrain.com ฤఔಓ • I don’t believe that each of us can adopt our own personal style of Pin Cing Do without some base to mutate from. • I’m not the sharpest tool in the box so I opted for the easiest: HTML and CSS. • For you it might be JavaScript or interactive graphics like Flash, SVG and Canvas. • It’s your foundation, start with whatever you gravitate to. • Ensure your core skill(s) are solid before attempting to build your own unique repertoire.

Slide 24

Slide 24 text

Limiting Scope

Slide 25

Slide 25 text

http://benfrain.com ฤఔಓ • I used to feel incredibly inadequate for not knowing a raft of computing languages. • But the reality is there’s probably only a handful of people on the planet that really understand more than ﬁve or six languages. They are the savants of our industry. • For the rest of us, aiming to know even three languages to an exceptional standard is a unsurmountable challenge.

Slide 26

Slide 26 text

http://benfrain.com ฤఔಓ If you ever feel like you’re drowning when trying to learn new things, it’s perhaps less about your ability to learn and more about the breadth of the scope you’re attempting to cover and master.

Slide 27

Slide 27 text

–Chinese Proverb “The man who removes a mountain begins by carrying away small stones.”

Slide 28

Slide 28 text

http://benfrain.com ฤఔಓ • In that situation I’d suggest scaling back your aspirations. • Indulge me in a huge tangent of why I believe this approach can be the most the most effective in the long run.

Slide 29

Slide 29 text

Victory 21st October, 1805

Slide 30

Slide 30 text

http://benfrain.com ฤఔಓ • Vice Admiral Horatio Nelson led the outnumbered British navy against the joint Spanish-Franco ﬂeet in the battle of Trafalgar, just off the coast of Spain. • It was a key moment in our great Nation’s history. • Failure at this point for the British would have meant certain invasion by Napoleon’s amassed invasion force.

Slide 31

Slide 31 text

http://benfrain.com ฤఔಓ Some key strategic points to understand. In those days, naval combat between warships largely consisted of one of two blows: • The ‘broadside’ – when ships drew alongside one another and basically just ‘slugged away’. • Perhaps worse still was the strategy of ‘raking’. Here, if one ship could bring it’s guns to bear against an opponent down it’s length, the canon shot could tear through the entire length of the opponent’s vessel whilst they themselves were largely incapable of returning ﬁre.

Slide 32

Slide 32 text

ฤఔಓ http://benfrain.com The reality of naval warfare • Canon shot would literally tear people apart. • If the shot itself didn’t get you there was a very real possibility that one of the hundreds of pieces of wooden smithereens would provide for you. • It’s both hard and sickening to imagine the insanity and carnage that must have ensued.

Slide 33

Slide 33 text

And we moan about cross- browser testing!

Slide 34

Slide 34 text

http://benfrain.com ฤఔಓ • In battles of the time, it was usual for boats to run parallel to one another and slug each other back and forth with broadsides. • It was often a drawn-out affair and inconclusive for both parties. • The genius of Nelson in the battle of Trafalgar was his audacity. • He rejected that accepted notion of battle and made his ﬂeet approach the amassed French and Spanish ﬂeet at a right angle in two columns.

Slide 35

Slide 35 text

Image from Wikipedia: http://en.wikipedia.org/wiki/Battle_of_Trafalgar

Slide 36

Slide 36 text

http://benfrain.com ฤఔಓ • For their entire approach the British were drawing fire and largely incapable of reciprocating. • The British columns cut through the enemy line, effectively splitting the enemy fleet in two. • As they passed through they were able to ‘rake’ across the enemy flagships, effectively ‘cutting the head of the snake off’. • Even though they were outnumbered, it wasn’t then necessary to engage every enemy warship. • Many other enemy ships ‘struck their colours’; surrendering themselves and no longer presenting any danger.

Slide 37

Slide 37 text

ฤఔಓ http://benfrain.com Respect for a hero • Whilst Nelson’s tactics were incredibly decisive and successful, Nelson himself was shot by a musket ball from the rigging of an enemy ship and died at around 4:30pm that day. • He lived only long enough to ensure that victory had been secured and invasion averted.

Slide 38

Slide 38 text

ฤఔಓ http://benfrain.com Ben, WTF? • You are probably wondering why on earth I am telling you this? Given the seriousness of what we’ve just covered it seems a little poor taste to bring this back to code. Forgive me. • Let’s scrub back. Remember Nelson approaching the amassed enemy ﬂeet? • When faced with the enormity of things I need to do, I like to do this:

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

http://benfrain.com ฤఔಓ • What are the equivalent of ﬂagships? Where can the line be cut through? How can we cut the head off the snake? • By dividing and conquering key objectives, others become less important or unnecessary. • To be pragmatic: if the Lion’s share of your coding work is in manipulating DOM elements, concentrate on getting really good at jQuery. If it’s building WordPress sites, go and master PHP. • Be pragmatic: divide and conquer.

Slide 41

Slide 41 text

Knowing when you are ready to practice Pin Cing Do

Slide 42

Slide 42 text

http://benfrain.com ฤఔಓ • Let’s assume we’re happy about how we will go about learning our core skills. • We still need some measure by which to gauge our proﬁciency. • How can we do that with so many different permutations of skills? • How do we know if the code we write is actually good, maintainable, and something to show to your Mum?

Slide 43

Slide 43 text

http://benfrain.com ฤఔಓ • I’ve decided there’s actually an easy metric we can use to gauge whether or not we are masters of our code. • Before I hit you with the soundbite, I’d like to offer an analogy for this. • Are you familiar with the game Jenga?

Slide 44

Slide 44 text

Jenga • In case you’re not, here’s an image to jog your memory. • The game begins with the blocks stacked. • Players must then take turns to remove blocks, aiming to retain the tower’s structural integrity. • OK, here’s the soundbite:

Slide 45

Slide 45 text

–Me “Competency with code is attained when the author can explain the purpose of each line.”

Slide 46

Slide 46 text

http://benfrain.com ฤఔಓ • Imagine that the Jenga structure is a code base. • When you see it in front of you, it’s easy to make a fairly sound judgement of how a block affects the overall stability of the whole. • We can safely reduce the code base a block at a time because we understand the part each block is playing in keeping things stable.

Slide 47

Slide 47 text

http://benfrain.com ฤఔಓ • Now imagine playing Jenga blindfolded. • That’s what we’re doing when we try and optimise, adapt or improve code we don’t fully understand.

Slide 48

Slide 48 text

http://benfrain.com ฤఔಓ Let’s take this analogy further: • Try building the tower up from nothing — blindfolded — with one hand. That’s the situation we’re in when we try and build something with languages or techniques we are not familiar with. • The takeaway here is simple, don’t play Jenga blindfolded. • When you understand code you are its master. When you don’t, you’re at its mercy.

Slide 49

Slide 49 text

Pin Cing Do applied to new tools and techniques

Slide 50

Slide 50 text

http://benfrain.com ฤఔಓ • To practice Pin Cing Do, we must never grow attached to our existing tools, techniques and products. • They exist purely to serve our needs. There will always be something better in the future. Be ready to embrace it. • The technology choices you make shouldn’t feel like picking sides in a Holy war. Let me exemplify:

Slide 51

Slide 51 text

http://benfrain.com ฤఔಓ • I’ve found enormous utility in Compass in the past (I spent 9 months of my life writing about using it alongside the Sass). • However, my principle needs at the moment are making SVG image sprites, fast Sass compiles and intelligent preﬁxing of experimental CSS properties. • All of these needs are better serviced at present by Grunt or Gulp and associated plugins. • Cutting Compass out of my workﬂow, for me, has been progress, not something negative.

Slide 52

Slide 52 text

http://benfrain.com ฤఔಓ • Chrome is another example. It’s been my go to browser for a couple of years but I’m ﬁnding it pretty ropey at present. • I won’t suffer any crisis internally about ditching it. • If another browser offers a more stable or powerful platform I’ll think nothing of switching: that’s as it should be. • We should appraise and adopt new tools and techniques wherever beneﬁts present themselves; to do otherwise is folly.

Slide 53

Slide 53 text

http://benfrain.com ฤఔಓ • These are my choices and mine alone. • When others evangelise their products or personal choices by all means consider them but ensure you analyse them for your own context. • When tools in your armoury fail or get superseded, be ruthless about abandoning them for something better.

Slide 54

Slide 54 text

–Me (again) “Be monogamous in your personal relationships and a philandering whore in your choice of tools and techniques.”

Slide 55

Slide 55 text

Pin Cing Do and the way we relate to others

Slide 56

Slide 56 text

http://benfrain.com ฤఔಓ • In eastern martial arts, bowing is common. • On entering and leaving the Kwoon/Dojo, during training, to other practitioners, to Sensei/Sifu. • It’s not about subservience – it’s about respect: admiration for a fellow practitioner.

Slide 57

Slide 57 text

http://benfrain.com ฤఔಓ • If I’m to indulge myself in the notion that Pin Cing Do has its roots in the philosophies of martial arts training, I think we should embrace all its positive aspects. • I think that includes the idea of showing respect to others. An example:

Slide 58

Slide 58 text

http://benfrain.com ฤఔಓ • Ever opened someone else’s code or design and cursed it? I have, frequently. • I did this, in most cases, because I was an idiot. • If you are working with a fellow professional, they should be able to explain every decision made in their work in the same manner you can explain every decision in yours. • Often the features or implementations you may initially believe are ﬂawed, extraneous or pointless are essential, ingenious and necessary.

Slide 59

Slide 59 text

ฤఔಓ http://benfrain.com Back-end developers • Don’t assume the worst. • If you hand your code off to others at the back of the stack, and months later wonder why so much has been changed by the backend folks, don’t assume the worst. • Others may have their own reasons for not implementing the code in the manner you had hoped.

Slide 60

Slide 60 text

– Nicholas C. Zakas “Instead of assuming that people are dumb, ignorant, and making mistakes, assume they are smart, doing their best, and that you lack context.”

Slide 61

Slide 61 text

Helping fellow practitioners

Slide 62

Slide 62 text

ฤఔಓ http://benfrain.com Comments • Comment your code as much as possible. • This is how we can communicate our Pin Cing Do to a fellow developer. • Don’t ever worry about writing too much. • Even if no-one else does read it — you will the next time you come back to it.

Slide 63

Slide 63 text

–Chinese proverb “Tell me and I’ll forget; show me and I may remember; involve me and I’ll understand.”

Slide 64

Slide 64 text

ฤఔಓ http://benfrain.com Offer a handover • Always offer other developers the opportunity for a hand-over of your work. • They may not be interested and that’s ﬁne too but if nothing else they will likely appreciate the offer. • Those same developers may never reciprocate the offer. Don’t expect them to. • Do it because it’s the right thing to do; regardless of what others do.

Slide 65

Slide 65 text

Can you do this?

Slide 66

Slide 66 text

ฤఔಓ http://benfrain.com Impostor syndrome • I always feel, for the most part, like I don’t really know what I’m doing. • A phoney when it comes to coding things – an impostor in my role. • I think I’ll always feel that way but I’m beginning to care less about it. • If you ever feel like that, here are a few points I’d like to make:

Slide 67

Slide 67 text

http://benfrain.com ฤఔಓ • Don’t assume others are doing it ‘better’ than you. • Big-shot ‘web celeb’ developers make the same mistakes we do. • That’s not a dig at anyone, it’s just something you should recognise. • We’ve all written z-index: 9999!important; at some point.

Slide 68

Slide 68 text

Who built Lego?

Slide 69

Slide 69 text

http://benfrain.com ฤఔಓ • I loved Lego as a child. • When I got a new kit, the ﬁrst time I built it from the instructions. • Then I’d take it apart and I’d build it again. Perhaps different, perhaps bigger or with new features.

Slide 70

Slide 70 text

Who here played with Lego? Now keep your hands up if you really played with it – asked for it at Christmas/ Birthdays?

Slide 71

Slide 71 text

What percentage is that?

Slide 72

Slide 72 text

80%

Slide 73

Slide 73 text

http://benfrain.com ฤఔಓ • You think you make choices in life but you really don’t. • You’re here because your genetic make-up disposes you to this line of work. • You’re here because you want to build stuff. • You get a kick out of solving problems, just like you did when you played with Lego; trying to create something greater than the sum of its parts.

Slide 74

Slide 74 text

http://benfrain.com ฤఔಓ • Don’t compare yourself to others. It’s not important what you can build now compared to this person or that. • The fact is, because of who you are, you’ll be able to build bigger, better and faster in the future. • It’s my hope you’ll practice you’re own Pin Cing Do, whatever that is to you. • I’ll leave the ﬁnal words on the matter to Bruce:

Slide 75

Slide 75 text

–Bruce Lee “Jeet Kune Do is just a name used, a boat to get one across, and once across it is to be discarded and not to be carried on one’s back.”

Slide 76

Slide 76 text

Thank you for your attention @benfrain   http://benfrain.com

Slide 77

Slide 77 text

Me, me me! Responsive web design with HTML5 and CSS3 Sass and Compass for Designers @benfrain http://benfrain.com/feed (Padawans) (Jedi Knights)