Much has been spoken and written recently about the virtues of craftsmanship in the context of web design and development. It seems that we as fabricators of the web are finally tiring of seeking out parallels between ourselves and architects, and are turning instead to the fabled specialist artisans.
Identifying oneself as a craftsman or craftswoman (let’s just say craftsperson from here onward) will likely be a trend of early 2012. In this pre-emptive strike, I’d like to expound on this movement as I feel it pertains to front-end development, and encourage care and understanding of the true qualities of craftsmanship (craftspersonship).
The core values
I’ll begin by defining craftspersonship. What distinguishes a craftsperson from a technician? Dictionaries tend to define a craftsperson as one who possesses great skill in a chosen field. The badge of a craftsperson for me, though, is a very special label that should be revered and used sparingly, only where it is truly deserved. A genuine craftsperson encompasses a few other key traits, far beyond raw skill, each of which must be learned and mastered.
A craftsperson has:
- An appreciation of good work, in both the work of others and their own. And not just good as in ‘hey, that’s pretty neat’, I mean a goodness like a shining purity – the kind of good that feels right when you see it.
- A belief in quality at every level: every facet of the craftsperson’s product is as crucial as any other, without exception, even those normally hidden from view.
- Vision: an ability to visualize their path ahead, pre-empting the obstacles that may be encountered to plan a route around them.
- A preference for simplicity: an almost Bauhausesque devotion to undecorated functionality, with no unjustifiable parts included.
- Sincerity: producing work that speaks directly to its purpose with flawless clarity.
Only when you become a custodian of such values in your work can you consider calling yourself a craftsperson. Now let’s take a look at some steps we front-end developers can take on our journey of enlightenment toward craftspersonhood.
Speaking of the craftsman’s journey, be sure to watch out for the video of The Standardistas’ stellar talk at the Build 2011 conference titled The Journey, which should be online sometime soon.Building your own toolbox
My grandfather was a carpenter and trained as a young apprentice under a master. After observing and practising the many foundation theories, principles and techniques of carpentry, he was tasked with creating his own set of woodworking tools, which he would use and maintain throughout his career. By going through the process of having to create his own tools, he would be connected at the most direct level with every piece of wood he touched, his tools being his own creations and extensions of his own skilled hands. The depth of his knowledge of these tools must have surpassed the intricate as he fathered, used, cleaned and repaired them, day in and day out over many years.
And so it should be, ideally, with all crafts. We must understand our tools right down to the most fundamental level. I firmly believe that a level of true craftsmanship cannot be reached while there exists a layer that remains not wholly understood between a creator and his canvas. Of course, our tools as front-end developers are somewhat more complex than those of other crafts – it may seem reasonable to require that a carpenter create his or her own set of chisels, but somewhat less so to ask a front-end developer to code their own CSS preprocessor, or design their own computer.
However, it is still vitally important that you understand how your tools work. This is particularly critical when it comes to things like preprocessors, libraries and frameworks which aim to save you time by automating common processes and functions. For the most part, anything that saves you time is a Good Thing™ but it cannot be stressed enough that using tools like these in earnest should be avoided until you understand exactly what they are doing for you (and, to an extent, how they are doing it).
In particular, you must understand any drawbacks to using your tools, and any shortcuts they may be taking on your behalf. I’m not suggesting that you steer clear of paid work until you’ve studied each of jQuery’s 9,266 lines of JavaScript source code but, all levity aside, it will further you on your journey to look at interesting or relevant bits of jQuery, and any other libraries you might want to use. Such libraries often directly link to corresponding sections of their source code on sites like GitHub from their official documentation. Better yet, they’re almost always written in high level languages (easy to read), so there’s no excuse not to don your pith helmet and go on something of an exploration. Any kind of tangential learning like this will drive you further toward becoming a true craftsperson, so keep an open mind and always be ready to step out of your comfort zone.
Downtime and tool honing
With any craft, it is essential to keep your tools in good condition, and a good idea to stay up-to-date with the latest equipment. This is especially true on the web, which, as we like to tell anyone who is still awake more than a minute after asking what it is that we do, advances at a phenomenal pace. A tool or technique that could be considered best practice this week might be the subject of haughty derision in a comment thread within six months.
I have little doubt that you already spend a chunk of time each day keeping up with the latest material from our industry’s finest Interblogs and Twittertubes, but do you honestly put aside time to collect bookmarks and code snippets from things you read into a slowly evolving toolbox? At @media in 2009, Simon Collison delivered a candid talk on his ‘Ultimate Package’. Those of us who didn’t flee the room anticipating a newfound and unwelcome intimacy with the contents of his trousers were shown how he maintained his own toolkit – a collection of files and folders all set up and ready to go for a new project. By maintaining a toolkit in this way, he has consistency across projects and a dependable base upon which to learn and improve.
The assembly and maintenance of such a personalized and familiar toolkit is probably as close as we will get to emulating the tool making stage of more traditional craft trades. Keep a master copy of your toolkit somewhere safe, making copies of it for new projects. When you learn of a way in which part of it can be improved, make changes to the master copy.
Simplicity through modularity
I believe that the user interfaces of all web applications should be thought of as being made up primarily of modular components. Modules in this context are patterns in design that appear repeatedly throughout the app. These can be small collections of elements, like a user profile summary box (profile picture, username, meta data), as well as atomic elements such as headings and list items.
Well-crafted front-end architectures have the ability to support this kind of repeating pattern as modules, with as close to no repetition of CSS (or JavaScript) as possible, and as close to no variations in HTML between instances as possible.
One of the most fundamental and well known tenets of software engineering is the DRY rule – don’t repeat yourself. It requires that “every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”
As craftspeople, we must hold this rule dear and apply it to the modules we have identified in our site designs. The moment you commit a second style definition for a module, the quality of your output (the front-end code) takes a huge hit. There should only ever be one base style definition for each distinct module or component. Keep these in a separate, sacred place in your CSS. I use a _modules.scss Sass include file, imported near the top of my main CSS files.
Be sure, of course, to avoid making changes to this file lightly, as the smallest adjustment can affect multiple pages (hint: keep a structure list of which modules are used on which pages). Avoid the inevitable temptation to duplicate code late in the project. Sticking to this rule becomes more important the more complex the codebase becomes.
If you can stick to this rule, using sensible class names and consistent HTML, you can reach a joyous, self-fulfilling plateau stage in each project where you are assembling each interface from your own set of carefully crafted building blocks.
Old school markup
Let’s take a step back. Before we fret about creating a divinely pure modular CSS framework, we need to know the site’s design and what it is made of. The best way to gain this knowledge is to go old school. Print out every comp, mockup, wireframe, sketch or whatever you have. If there are sections of pages that are hidden until some user action takes place, or if the page has multiple states, be sure that you have everything that could become visible to the user on paper.
Once you have your wedge of paper designs, lay out all the pages on the floor, or stick them to the wall if you can, arranging them logically according to the site hierarchy, by user journey, or whatever guidelines make most sense to you. Once you have the site laid out before you, study it for a while, familiarizing yourself with every part of every interface. This will eliminate nasty surprises late in the project when you realize you’ve duplicated something, or left an interface on the drawing board altogether.
Now that you know the site like it’s your best friend, get out your pens or pencils of choice and attack it. Mark it up like there’s no tomorrow. Pretend you’re a spy trying to identify communications from an enemy network hiding their messages in newspapers. Look for patterns and similarities, drawing circles around them. These are your modules. Start also highlighting the differences between each instance of these modules, working out which is the most basic or common type that will become the base definition from which all other representations are extended.
This simple but empowering exercise will equip you for your task of actually crafting, instead of just building, the front-end. Without the knowledge gained from this kind of research phase, you will be blundering forward, improvising as best you can, but ultimately making quality-compromising mistakes that could have been avoided.
For more on this theme, read Anna Debenham’s Front-end Style Guides which recommends a similar process, and the sublime idea of extending this into a guide to refer to during development and beyond.
Design homogeneity
Moving forward again, you now have your modules defined and things are looking good. I mentioned that many instances of these modules will carry minor differences. These differences must be given significant thinking time, and discussion time with your designer(s).
It should be common knowledge by now that successful software projects are not the product of distinct design and build phases with little or no bidirectional feedback. The crucial nature of the designer-developer relationship has been covered in depth this year by Paul Robert Lloyd, and a joint effort from both teams throughout the project lifecycle is pivotal to your ability to craft and ship successful products.
This relationship comes into play when you’re well into the development of the site, and you start noticing these differences between instances of modules (they’ll start to stand out very clearly to you and your carefully regimented modular CSS system). Before you start overriding your base styles, question the differences with the designer to work out why they exist. Perhaps they are required and are important to their context, but perhaps they were oversights from earlier design revisions, or simple mistakes.
The craftsperson’s gland
As you grow towards the levels of expertise and experience where you can proudly and honestly consider yourself a craftsperson, you will find that you steadily develop what initially feels like a kind of sixth sense. I think of it more as a new hormonal gland, secreting into your bloodstream a powerful messenger chemical that can either reward or punish your brain. This gland is connected directly to your core understanding of what good quality work looks and feels like, an understanding that itself improves with experience.
This gland will make itself known to you in two ways. First, when you solve a problem in a beautifully elegant way with clean and unobtrusive code that looks good and just feels right, your craftsperson’s gland will ooze something delicious that makes your brain and soul glow from the inside out. You will beam triumphantly at the succinct lines of code on your computer display before bounding outside with a spring in your step to swim up glittering rainbows and kiss soft fluffy puppies.
The second way that you may become aware of your craftsperson’s gland, though, is somewhat less pleasurable. In an alternate reality, your parallel self is faced with the same problem, but decides to take a shortcut and get around it by some dubious means – the kind of technical method that the words hack, kludge and bodge are reserved for. As soon as you have done this, or even as you are doing it, your craftsperson’s gland will damn well let you know that you took the wrong fork in the road. As your craftsperson’s gland begins to secrete a toxic pus, you will at first become entranced into a vacant stare at the monstrous mess you are considering unleashing upon your site’s visitors, before writhing in the horrible agony of an itch that can never be scratched, and a feeling of being coated with the devil’s own deep and penetrating filth that no shower will ever cleanse.
Perhaps I exaggerate slightly, but it is no overstatement to suggest that you will find yourself being guided by proverbial angels and demons perched on opposite shoulders, or a whispering voice inside your head. If you harness this sense, sharpening it as if it were another tool in your kit and letting it guide or at least advise your decision making, you will transcend the rocky realm of random trial and error when faced with problems, and tend toward the right answers instinctively.
This gland can also empower your ability to assess your own work, becoming a judge before whom all your work is cross-examined. A good craftsperson regularly takes a step back from their work, and questions every facet of their product for its precise alignment with their core values of quality and sincerity, and even the very necessity of each component.
The wrapping
By now, you may be thinking that I take this kind of thing far too seriously, but to terrify you further, I haven’t even shared the half of it. Hopefully, though, this gives you an idea of the kind of levels of professionalism and dedication that it should take to get you on your way to becoming a craftsperson. It’s a level of accomplishment and ability toward which we all should strive, both for our personal fulfilment and the betterment of the products we use daily. I look forward to seeing your finely crafted work throughout 2012.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
24/12/2011
Thanks everyone for your comments and thoughts!
@Lupalz I take your point, and certainly sometimes well crafted objects and products can be embellished beyond what is strictly necessary for their function. It would probably be quite a boring world if that were not the case.
I’ve never been close enough to such a Cadillac unfortunately, but I would hesitate to classify it as crafted work purely from the form of the tail fins, as classic and beautiful as they are.
I would suggest that good craftsmanship sits significantly closer to engineering than art. After all, craftspeople were typically producers of commissioned, tailored items that had a specific function, rather than creators of pure art. Any perceived artistic qualities of a crafted product would therefore generally be a surface level bi-product of the “engineering” within.
@Stuart I was the same for a very long time, starting each project from scratch. Having a common baseline really helps you improve and develop a deeper understanding of the plugins and libraries you rely on.
Vote Helpful or Unhelpful
24/12/2011
Thatta boy, Sir. Got the link from a Nathan Smith tweet. Preach on, brother. This game truly is quite a beautiful craft. Happy Holidays.
Vote Helpful or Unhelpful
24/12/2011
Great article. I am just puzzled by one of the key traits you list:
I accept this as a trait of good engineering. I am just uneasy about accepting this as a defining trait of craftsmanship has this has historically been recognised even when the resulting product has qualities that go beyond functionality.
If we were to stick to this definition then this 1959 Cadillac would be pointed at as an example of bad craftsmanship:
Massive tailfins
As much as I would love to be called a web craftsman, I am not sold to its use in web development and I am more comfortable with the words engineering as a more appropriate definition.
Vote Helpful or Unhelpful
24/12/2011
I find it increasingly hard to keep up at libraries and frameworks: for example with Mootools has changed quite a bit the structure of the library several times. And when using plugins using Mootools, it becomes a real headache!
Vote Helpful or Unhelpful
24/12/2011
I’ve been thinking about my ‘toolbox’ ever since coming across @colly’s ‘ultimate package’ about a year ago.
Every design thus far though has been a complete restart in my framework codebase etc etc.
With this post now resonating clearly I will endeavor to sort my tools out over the Christmas holidays.
Thanks for a great article Ben!
And 24ways, you’ve surpassed yourselves this year, great work!!!
Vote Helpful or Unhelpful
24/12/2011
Your point about printing things off has only just been discovered by myself a couple of days ago.
I’ve been building a site which is in the midst of being designed, and considering what classnames and conventions to use, I thought it would be helpful to print out the comps and do exactly what you said – write all over them.
I’ve never thought about planning my markup before, but it makes total sense.
Have a great Christmas Ben!
Vote Helpful or Unhelpful
24/12/2011
From everything you’ve described Ben, it sounds like your outlook is similar to mine, in that frontend development will take on many of the well established principles of backend development.
We’ve long held this outlook and won’t generally look for a frontend developer who’s not additionally well versed in object oriented programming principles.
The current patterns emerging around Javascript are really hitting this home, moving towards MVC implementations, proper class implementations etc. It’s definitely going to be an interesting year!
Vote Helpful or Unhelpful
24/12/2011
Love the article! I recognize the feeling when I’m hacking around something and it actually physically hurts. However, using the word “craftsman” goes back to Romanticism, which, in the current (at least Dutch) revival of romantic nationalism leaves me with a bit of a bad taste. That might be a personal thing, though.
When you make a list of what something is in your opinion, like a craftsman, you can be sure some people want to add or remove items from it. For me, the thing you’re trying to describe can be summed up in one sentence: the man and the work he produces are one. That’s why hacking around something hurts, your work is an extension of yourself. Like trying to bend your knees backwards.
Vote Helpful or Unhelpful
24/12/2011
Great great article. Just a note, my father is also a carpenter & I worked on & off with him all through my childhood through to my twenties. The main thing carried across to my design career was ‘look after your tools’. Man did I learn that.
Vote Helpful or Unhelpful
24/12/2011
@Thijs That’s a great way of defining craftsmanship. The list was meant to be more of a starting point than anything definitive. I’m sure I’ll think of things to add and remove as well.
As for the political connotations, I’d say we should do our utmost to keep our crafts agnostic of any such influences, and remain true to our work which in turn is true to its purpose. Think again of the Bauhaus and their ill fated struggle against rising national socialism in the 1930s. The ideologies are thankfully worlds apart and there need be no blurring of boundaries there.
@Suleiman thanks for sharing! I’d be interested to hear how you apply that lesson learned from your father to your day to day work. Tweet at me or something :)
Vote Helpful or Unhelpful
25/12/2011
Like lupalz I was unsure that minimalism was a necessary trait. I thought of a piece of furniture with detailed decorative carvings. Those details are unnecessary for its function to be sat on, eaten at, or hold socks, but add a lot to the value of the object. Some would say that beauty and pleasure are functions, and for that reasons the decorations are not superfluous.
Perhaps no unnecessary irrelevant bits would be more appropriate? No junk class names spat out by a CMS for styling that never comes, no obscure social sharing buttons that never get clicked, no excess descriptions and instructions that never get read.
On a side note ‘craftspersonship’ and ‘craftpersonhood’ have got to be the clunkiest and inelegant words I’ve ever read. It’d be great if some women could give permission for craftsmanship to be the cover all.
Good article.
Vote Helpful or Unhelpful
29/12/2011
I have for years marketed myself as a craftsperson, holding to all the values and traits you have so beautifully communicated Ben.
I think it is important to point out though, to any self employed ‘craftspeople’ that aspiring to this level of artisanship will not always be your ally in the ‘real world’ of trying to make ends meet.
Clients on the whole do not ‘get’ this attention to detail this passion and therefore are unwilling to pay a premium for it, so unless you can do all this and still bring it competitively and remember you have to be competitive against the ‘blodgers’ who don’t give a monkeys about quality it may be better reserved for personal projects.
Having said that i still continue to adopt the approach of a craftsperson but loose a lot of potential clients who don’t understand why my prices are higher. I think my main issue is dealing with local market and would perhaps have more success with a pre educated market who understood the difference between cutting edge, best practices versus pre 2003 DW table design!! help!! aghhh!
Vote Helpful or Unhelpful
01/01/2012
@Dave That is a fantastic point, thank you so much for raising it. The answer could probably fill out another entire article, and I might go ahead and write one. In the meantime here are my thoughts:
I would say that clients largely fall into two groups. Firstly there are those who appreciate quality and craftsmanship, and care enough about their product that they want the best for it and are willing to pay the price in money and time.
Then there are people that just want a website built, and see what we do as a commodity industry – they’ll write a brief and get estimates from several people, and will likely go with the cheaper end.
If you consider yourself a craftsman, then obviously the second type of client is of no value to you whatsoever (I’d say they’d even do you more harm than good). Learn to judge based on early interactions, including their brief, their budget (always insist on being given a number), and their answers to your questions which category a prospective client falls into, and respond accordingly.
As for how you get more of the right type of client, you will almost certainly need to look beyond local businesses for your client base. There is, in my experience, little actual benefit to having clients located close to you. There are far more important criteria to satisfy (budget, timeframe and appreciation of good work are probably my top three).
Based on simple probability given the size of the two categories (in my experience very few of the right type, very many of the wrong type), the chances of you finding the right type of client who is also nearby are slim.
Don’t worry about competing with the ‘blodgers’ – they are not operating in the same market segment as you, and you don’t want their sort of client anyway.
On the subject of money, there’s something to be said for being “reassuringly expensive”. Nobody expects to go to a tailor and have a suit made for the same price as an off-the-peg suit. The right type of client will be reassured that they will be getting the quality of work they are looking for from someone who charges a rate that is at the higher end of the market. If they have an appropriate budget for good work, and they receive a quote from someone at £75/hr and someone at £20/hr, wouldn’t they feel safer with the £75/hr option?
Also, avoid thinking about your (above market average rate) as being “expensive”. Your rate should always represent good value to your clients. As you raise it with experience, you aren’t getting more expensive, you’re simply providing good value to a higher calibre market.
Vote Helpful or Unhelpful
12/01/2012
Great article, thank you Ben :) The craftperson’s gland cracks me up, that is so true.
After watching that excellent CSS as lego’s (http://www.slideshare.net/stubbornella/object-oriented-css) presentation a few years ago I’ve had my own html/css framework which I use for every project and continually improve, however I like the idea of adding more modules to it and I’m going to do that.
Thanks too for the idea about printing out wireframes and scribbling on them to identify common modules, I’m going to try that as well.
Harmony
Vote Helpful or Unhelpful
22/11/2012
I would say that clients largely fall into two groups. Firstly there are those who appreciate quality and craftsmanship, and care enough about their product that they want the best for it and are willing to pay the price in money and time.
Then there are people that just want a website built, and see what we do as a commodity industry – they’ll write a brief and get estimates from several people, and will likely go with the cheaper end.
If you consider yourself a craftsman, then obviously the second type of client is of no value to you whatsoever (I’d say they’d even do you more harm than good). Learn to judge based on early interactions, including their brief, their budget (always insist on being given a number), and their answers to your questions which category a prospective client falls into, and respond accordingly. As you raise it with experience, you aren’t getting more expensive, you’re simply providing good value to a higher calibre market.
Vote Helpful or Unhelpful
24/12/2011
Thank you.
Vote Helpful or Unhelpful
Impress us