Slides from a talk given by Ben Frain at Manchester FRED (#McrFRED) event on the 27th February 2014. It covers my philosophy on Front-end web development. 'Text' version available here: http://benfrain.com/pin-cing-way-pragmatic-coding/
ฤఔಓ 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 fine with that.
ฤఔಓ 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.
ฤఔಓ 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
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.
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 definable set of skills.
ฤఔಓ 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.
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?
ฤఔಓ 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 fist’.
– Bruce Lee “I have not invented a ‘new style’, composite, modified 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.”
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.
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’.
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.
ฤఔಓ 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.
ฤఔಓ http://benfrain.com Core disciplines • I’m getting ahead of myself. • To get to that first 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.
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.
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 five 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.
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.
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.
http://benfrain.com ฤఔಓ • Vice Admiral Horatio Nelson led the outnumbered British navy against the joint Spanish-Franco fleet 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.
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 fire.
ฤఔಓ 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.
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 fleet approach the amassed French and Spanish fleet at a right angle in two columns.
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.
ฤఔಓ 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.
ฤఔಓ 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 fleet? • When faced with the enormity of things I need to do, I like to do this:
http://benfrain.com ฤఔಓ • What are the equivalent of flagships? 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.
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 proficiency. • 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?
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?
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:
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.
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.
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.
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:
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 prefixing 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 workflow, for me, has been progress, not something negative.
http://benfrain.com ฤఔಓ • Chrome is another example. It’s been my go to browser for a couple of years but I’m finding 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 benefits present themselves; to do otherwise is folly.
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.
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.
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:
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 flawed, extraneous or pointless are essential, ingenious and necessary.
ฤఔಓ 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.
– 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.”
ฤఔಓ 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.
ฤఔಓ 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 fine 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.
ฤఔಓ 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:
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.
http://benfrain.com ฤఔಓ • I loved Lego as a child. • When I got a new kit, the first 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.
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.
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 final words on the matter to Bruce:
benfrain
colinfay
okunokentaro
akiomik
jacopen
mapbox_jp
sbtechnight
kthrtty
kako351
kenichirokimura
megabitsenmzq
masashi_sutou
lmi
jmmastey
paulrobertlloyd
malarkey
smashingmag
aarron
sachag
chriscoyier
skipperchong
ammeep
addyosmani
myddelton
pauljervisheath