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/
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.
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.
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.
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.
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?
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’.
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.”
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.
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’.
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.
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.
• 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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?
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?
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:
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.
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.
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:
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.
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.
• 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.
• 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.
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:
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.
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.
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.
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.
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:
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.
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.
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.
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
pacificspatialsolutions
pamelafox
yasumuusan
uhyo
miyakemito
kongmingstrap
infiniteloop_inc
matsuihidetoshi
maimyyym
daitak
sansantech
osyoyu
mclloyd
jcasabona
akosma
revolveconf
bluesmoon
kneath
quramy
csswizardry
smashingmag
sferik
sachag
holman
