Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pin Cing Do – The way of pragmatic coding

Ben Frain
February 27, 2014

Pin Cing Do – The way of pragmatic coding

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/

Ben Frain

February 27, 2014
Tweet

More Decks by Ben Frain

Other Decks in Technology

Transcript

  1. Pin Cing Do
    The way of pragmatic coding
    ฤఔಓ

    View full-size slide

  2. ฤఔಓ
    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.

    View full-size slide

  3. ฤఔಓ
    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.

    View full-size slide

  4. Our role requires pragmatism

    View full-size slide

  5. ฤఔಓ
    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

    View full-size slide

  6. 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.

    View full-size slide

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

    View full-size slide

  8. 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.

    View full-size slide

  9. ฤఔಓ
    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.

    View full-size slide

  10. The crux of the problem

    View full-size slide

  11. 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?

    View full-size slide

  12. Bruce Lee
    Little Dragon

    View full-size slide

  13. ฤఔಓ
    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’.

    View full-size slide

  14. – 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.”

    View full-size slide

  15. 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.

    View full-size slide

  16. 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’.

    View full-size slide

  17. ฤఔಓ Pin Cing Do
    The way of pragmatic coding

    View full-size slide

  18. 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.

    View full-size slide

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

    View full-size slide

  20. ฤఔಓ
    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.

    View full-size slide

  21. ฤఔಓ
    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.

    View full-size slide

  22. 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.

    View full-size slide

  23. Limiting Scope

    View full-size slide

  24. 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.

    View full-size slide

  25. 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.

    View full-size slide

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

    View full-size slide

  27. 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.

    View full-size slide

  28. Victory
    21st October, 1805

    View full-size slide

  29. 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.

    View full-size slide

  30. 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.

    View full-size slide

  31. ฤఔಓ
    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.

    View full-size slide

  32. And we moan about cross-
    browser testing!

    View full-size slide

  33. 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.

    View full-size slide

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

    View full-size slide

  35. 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.

    View full-size slide

  36. ฤఔಓ
    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.

    View full-size slide

  37. ฤఔಓ
    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:

    View full-size slide

  38. 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.

    View full-size slide

  39. Knowing when you are ready to
    practice Pin Cing Do

    View full-size slide

  40. 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?

    View full-size slide

  41. 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?

    View full-size slide

  42. 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:

    View full-size slide

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

    View full-size slide

  44. 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.

    View full-size slide

  45. 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.

    View full-size slide

  46. 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.

    View full-size slide

  47. Pin Cing Do applied to new
    tools and techniques

    View full-size slide

  48. 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:

    View full-size slide

  49. 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.

    View full-size slide

  50. 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.

    View full-size slide

  51. 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.

    View full-size slide

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

    View full-size slide

  53. Pin Cing Do and the way we
    relate to others

    View full-size slide

  54. 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.

    View full-size slide

  55. 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:

    View full-size slide

  56. 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.

    View full-size slide

  57. ฤఔಓ
    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.

    View full-size slide

  58. – 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.”

    View full-size slide

  59. Helping fellow practitioners

    View full-size slide

  60. ฤఔಓ
    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.

    View full-size slide

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

    View full-size slide

  62. ฤఔಓ
    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.

    View full-size slide

  63. Can you do this?

    View full-size slide

  64. ฤఔಓ
    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:

    View full-size slide

  65. 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.

    View full-size slide

  66. Who built Lego?

    View full-size slide

  67. 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.

    View full-size slide

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

    View full-size slide

  69. What percentage is that?

    View full-size slide

  70. 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.

    View full-size slide

  71. 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:

    View full-size slide

  72. –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.”

    View full-size slide

  73. Thank you for your attention
    @benfrain 

    http://benfrain.com

    View full-size slide

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

    View full-size slide