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/
Pin Cing Do
The way of pragmatic coding
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
• I think we build the equivalent of sand castles/ice sculptures.
• This is OK. I'm ﬁne with that.
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
• Websites and applications change: they always will. That’s not bad,
it’s our reality. We should build solutions expecting this, not dreading
Our role requires pragmatism
dealing with things sensibly and realistically in a
way that is based on practical rather than
We need pragmatism
• 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.
– Douglas Crockford
“The browser is the most hostile software development
environment ever imagined”
• 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.
• To be successful as front-end developers we need to reﬁne our
• We need to judge and appraise new techniques with speed, analyse
their usefulness and incorporate any beneﬁts into what we do.
• Before we can evaluate new tools and techniques we need the
conﬁdence to know what we should pay attention to and what is
The crux of the problem
• 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
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’.
– 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.”
He looked at what the other forms had to offer. He analysed their
beneﬁts to him, and where appropriate, took component parts and
plugged them into his own ﬁghting style.
It was a ﬂuid system. Never stable, never ﬁnished, constantly evolving.
• 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’.
ฤఔಓ Pin Cing Do
The way of pragmatic coding
• ‘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.
“Be not afraid of growing slowly, be afraid only of standing still.”
• 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
• What is needed and what is not is a purely personal thing.
• I’m getting ahead of myself.
• To get to that ﬁrst point, we need to intimately know some ‘core’
• 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.
• 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
• It’s your foundation, start with whatever you gravitate to.
• Ensure your core skill(s) are solid before attempting to build your own
• I used to feel incredibly inadequate for not knowing a raft of
• 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.
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.
“The man who removes a mountain begins by carrying away
• 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.
21st October, 1805
• 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.
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
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
• It’s both hard and sickening to imagine the insanity and carnage that
must have ensued.
And we moan about cross-
• 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
Image from Wikipedia: http://en.wikipedia.org/wiki/Battle_of_Trafalgar
• For their entire approach the British were drawing ﬁre and largely incapable
• The British columns cut through the enemy line, effectively splitting the
enemy ﬂeet in two.
• As they passed through they were able to ‘rake’ across the enemy
ﬂagships, 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.
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.
• 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
• When faced with the enormity of things I need to do, I like to do this:
• 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.
Knowing when you are ready to
practice Pin Cing Do
• Let’s assume we’re happy about how we will go about learning our
• 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?
• 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
• Are you familiar with the game Jenga?
• In case you’re not, here’s an image to jog
• The game begins with the blocks stacked.
• Players must then take turns to remove
blocks, aiming to retain the tower’s
• OK, here’s the soundbite:
“Competency with code is attained when the author can explain
the purpose of each line.”
• 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.
• 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.
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.
Pin Cing Do applied to new
tools and techniques
• 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:
• 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
• 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
• 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.
• 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
• When tools in your armoury fail or get superseded, be ruthless about
abandoning them for something better.
“Be monogamous in your personal relationships and a
philandering whore in your choice of tools and techniques.”
Pin Cing Do and the way we
relate to others
• 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
• 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.
• Ever opened someone else’s code or design and cursed it? I have,
• 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
• 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
Helping fellow practitioners
• Comment your code as much as possible.
• This is how we can communicate our Pin Cing Do to a fellow
• 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.
“Tell me and I’ll forget; show me and I may remember; involve me
and I’ll understand.”
Offer a handover
• Always offer other developers the opportunity for a hand-over of
• 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.
Can you do this?
• I always feel, for the most part, like I don’t really know what I’m
• 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:
• 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.
Who built Lego?
• 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.
Who here played with Lego?
Now keep your hands up if you really played with it – asked for it at Christmas/
What percentage is that?
• 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
• 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
• 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
• I’ll leave the ﬁnal words on the matter to Bruce:
“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.”
Thank you for your attention
Me, me me!
design with HTML5
Sass and Compass