Presentation: Style and distance

Style and Distance

Moving ahead in web development as a community

Christian Heilmann, Mozilla, Smashing Meetup, December 2011

Good to be back

German car having fun in the mud

Good thing I am sensible…

My driving here

Winter of discontent

Orange Ogre in Bard's tale III on Commodore 64

There is a lot of discontent in our ranks lately. Almost every week there is something people get overly excited about and blame others for doing wrong.

Being a web developer rocks!

Christian Heilmann and his 'Reasons to be cheerful' talk

And that pains me. It annoys me as I have spent almost my whole career as a web developer.

Stop soiling what we have

  • We do what we like to do as a job - this is rare
  • We get away with much more than in any other job I ever had
  • We learn from another and with lots and lots of free resources
  • Our market has not enough people to fill the demand
  • Companies apply to us for hiring us
  • so why this craving to be unhappy and start arguments?

I also annoys me as we are ungrateful to a job that is unique, incredibly liberating and creative. Instead of being happy and amazed about the things we can get away with as web developers it seems to me that there is a constant craving for things to be unhappy about and complain.


Change shirt by last exit to nowhere

A lot of this has to do with change. Change is good, but change that repeats mistakes of the past is dangerous.

Out with the old!

Old computer sitting in the snow

Sometimes it is change for the sake of change. It is the prerogative of a new generation of makers to question the ways of old and move the craft ahead. But it is also a fact that to learn a craft, you should learn from good teachers, who have experience and can prevent you from repeating their follies.

"That's the duty of the old," said the Librarian, "to be anxious on behalf of the young. And the duty of the young is to scorn the anxiety of the old."

They sat for a while longer, and then parted, for it was late, and they were old and anxious.

Philip Pullman, Northern Lights

Hey, I am right, ok?

Charlie sheen obama parody 'winning'

It seems that instead of trying to find a consensus, the speed and rules of internet conversations are much more likely to make people concentrate on "winning an argument". This is where "expert panels" with added controversy at conferences come in. We stoke the fire of discontent for entertainment purposes and wonder when we don't get anywhere when people repeat the truisms uttered there for the sake of a quick laugh or to one-up one another.

Actually, web design is like…

Ski Jumping

In order to understand better what is going on I wanted to find a comparison for the situation and naturally I ended up at the only logical solution: Ski Jumping.

Ski jumping is awesome!

  • Matti Nykänen
  • Tommy Ingebrigtsen
  • Roar Ljøkelsøy
  • Matti Hautamäki
  • Bjørn Einar Romøren
  • Jens Weißflog

Ski Jumping is a great sport. I know nothing about it and I don't care much about it, I just find it absolutely hilarious to hear TV presenters stumble over Norwegian and Finnish names. The potential for humour is high in that one. There is also something mesmerising about an athlete trying to fight gravity but in the end realise that gravity is a law and you have to come down sooner or later.

Daredevil beginnings…

Ski Jumping old school

If you go way back in Ski Jumping you find that it first started as a dare - a trial of skill if you will. We just started standing on skis going down hills without falling over and breaking our bones so it is probably a good idea to make it more dangerous by trying to leave earth for a while to be reunited with it later.

The methods were crude, more or less it involved skiing onto a ramp and waving your arms to show excitement and cover the feeling of "dear god what I am doing here?"

Web design beginnings

Gravity - just a theory

This is how web design started. We were the joke of the design industry

It was a bumpy start…

  • Web design was not "real" design
  • It was not development either
  • Actually awesome software like Frontpage can do all you need
  • It is about moving print designs to a new medium
  • …of course without changing them
  • There were no guidelines - trial and error is all we had

The market saw the web as something that can be generated by software, Frontpage and the likes. The battles we fought were not only of technical nature but mostly that the approach was broken. People tried to control every pixel and make things look and behave exactly like print. We had no guidelines or ideas to follow - it was pure trial and error.

One, Two, One, Two…

Ski Jumping

One main difference to industries like interactive CD-ROMs or the likes is that when we found out how to achieve something we shared it with others. This is how the web design community started - people sharing ideas and discussing solutions.

Advancements in equipment and safety

Ski Jumper in tight suit and helmet

When Ski Jumping became more advanced they started measuring the distances. Big trousers flopping in the wind and waving arms made people try to fight for inches which looked hilarious but didn't get us far. The other problem was that it was dangerous and many a person died trying to get further.

So they started to look at the materials used, making it safer (by adding helmets) and allowed athletes to reach further by wearing tight suits and holding their arms in front of them - superman style.

Structuring our approach

  • Separation of concerns
    • HTML for structure
    • CSS for look and feel
    • JavaScript and Flash for extra bling

In the web development world this is when browsers got better and we started separating concerns of development. CSS is where the look and feel goes, HTML is there to structure the document and JavaScript and Flash brings the extra bling that can't be added server-side.

Professional web developer

  • Defining our roles in the project
  • Front-end specialists
  • Web Development != "Designers" || "HTML monkeys"

We thought we are on a good track there. Our jobs were much more defined, we got more respect in the market and were recognised as a profession. Before we started showing a structured approach and measurable successes with web technologies we were just "designers" or "HTML monkeys".

A new threat to the web

Internet Explorer 6

The new big thing to fight was to stop people from writing IE6 only code. And we still suffer from that.

No more heroes anymore…

  • Ski jumpers jumped with their arms in front - Superman style - called the Kongsberger technique invented by Jacob Tullin Thams and Sigmund Ruud following World War I.
  • In the 1950s Andreas Daescher and Erich Windisch modified the technique by placing his arms backwards
  • The Daescher/Windisch technique was the standard until the 70s
  • Jochen Danneberg then also moved the arms back on the ramp to achieve even more distance jumps

In Ski Jumping not much changed except for Andreas Daescher (SWI) and Erich Windisch (GER) coming up with the idea to hold the hands on the back of the body instead of Superman style, thus reaching further than others. Fair enough, this became a standard to follow, as it yielded good results. This was the standard in the 50ies. In the mid 70ies Jochen Danneberg (GDR) also kept his hands behind him on the ramp, yielding even better results.

Riveting, isn't it?

Woman riveting a bomber plane

Did you not give a hoot about the facts on the last slide? Good, because then you know how young new developers feel who quickly want to build something when we give them lots and lots of best practices and ideas from the past that don't apply to them.

Lack of differentiation

Measuring tape

The issue then was that almost all jumpers reached similar distances. The materials and techniques were analysed quite well so there was not much advantage to be gained there. You just can't cheat physics.

Enter the style note

Ski jumper in flight

So in order to make Ski Jumping more interesting and maybe even fairer the scoring started to include a style note. The style meant how straight the jump was, not much flutter of the skis and most excitingly a good looking landing, using a style borrowed from Telemark skiing.

Hardliners in web design

  • We proved that web standards worked
  • Now we wanted to make our work:
    • predictable
    • teachable
    • understandable
  • For this, you need to enforce guidelines and standards

This is the time where the hardliners on one side of the web development battle come from. We proved we can build amazing things on the web and now we wanted to add style.

We wanted to make what we do predictable, teachable and understandable. For this, you need standards and style guides and they've served us well.

Great opportunities

  • Developing to a standard means less documentation needs
  • Handovers are much easier
  • It makes errors predictable and repeatable
  • This speeds up debugging

Many a man hour was not wasted by trying to understand what other developers have done. As their work applied to a standard, we knew what was supposed to happen and debugging got much easier.

V for distance - Jan Boklöv 1985

v style jumper

In the world of Ski jumping we then had a Swedish chap by the name of Jan Boklöv who brought the next big change in 1985. Instead of doing a nice parallel ski in the air - which was necessary to get a good style note - he started jumping with his skis in the shape of a V. This much amused the commentators and the judges but they had to eat their words quite quickly. Jan managed to go way past the earlier records and showed that while the V had the grace of a landing Albatros, it yielded much better results.

Change of scoring

Calvin ball rules

So the style note criteria got changed - obviously this was a superior technique to reach the overall distance, and they had to re-think their ways how to score the style of a jump.

And this is what we fail to do on the web these days. Instead of understanding that there is a change in what we are doing on the web we still talk about the old techniques we needed to fight the WYSIWYG editors and browser specific code out there.

Not crimes…

  • It is totally OK not to close your tags
  • Some apps need JavaScript
  • Generated markup follows other rules

So yes, at times it is totally OK not to close your tags. Some applications are fine to rely on JavaScript. And it is very much pointless to complain about the markup quality of an application that was built using GWT.

Apply where sensible

Sumo wrestler jumping ski

On the other hand jumping in V style on a small ramp on a hill will mean you very much land on your face. You can not take rules and techniques for building Formula One cars and forcefully apply them to cars meant to be used in the city.

Build to maintain

  • If you don't follow a standard, maintenance is harder
  • Projects are more likely to be re-built than changed

All in all this is about maintainability. You are totally welcome to violate any best practices and ideas from the past but you should not be surprised when people maintaining your code are slow in doing so. You should also not be surprised when your projects get totally scrapped and re-build from scratch when changes need to be done.

Is longevity but a dream?

Locks broken

Maybe this is a dream we have to give up. Maybe there is no such thing as longevity in web design. Maybe our job is to start from scratch every single time and maybe that is what keeps us fresh and fun to work in our environment.

Craft vs. commodity

Towel Origami

The old standards for "best practices" do not apply to today's world any longer. We wanted web development to be a craft, but it actually is becoming a commodity. The people who laughed at web developers for "not being engineers" are the ones trying to do our jobs now as we are one of the few markets that are booming.

Realigning education and market

Graduation ceremony

And this is where a lot of the "forget the old ways, here, write less and achieve more" mentality comes from. Companies are hard pushed to hire as many engineers as we need so they want to make web development interesting for people who just came out of university. Now, in university we learn nothing that is of much use in web development. Re-educating people is a long and arduous process so let's bring the things we learn in university into the market deliveries.

Mass production for use

Billy book case

This is a good idea to hire people and to stop them from building native code instead (Android, iOS) instead of thinking about becoming web developers. It washes out the craft though, which is always the case when things become mainstream and need lots of people. Where we think we build Chippendale furniture, the market needs more IKEA Billys and it makes sense to teach new people to build those.

Change needs consent

Boxing robots

All in all our market is changing and there is no point in taking sides and trying to torpedo each other. It is fun and damn easy to do, but it is a waste of our time.

Avoid repeating mistakes

  • There is no 'one browser to support'
  • Sloppy code that expects the browser to fix things for us is dangerous
  • Don't be inflexible and let go - IE6 does not need animation when you can't do it in CSS

To me, our energies should be spent on preventing repeating mistakes of the past.

Let's not limit ourselves

  • Let's fix the cause - we teach web development far too late
  • What works in a certain fixed environment is not a "best practice"
  • Web development is as much a semantically valuable blog, as it is Facebook, as it is Google Docs as it is Wilderness Downtown
  • All of these need different approaches and rules

Furthermore we should stop thinking as limited as we do right now

Fans and supporters - not hooligans

  • Ask for the reason why something was done the way it was instead of flat out shooting it down in flames
  • Fix things for people instead of telling them off for not doing it.

Eddie "The Eagle" Edwards

Eddie 'The Eagle' Edwards

I want to leave you today with the story of Eddie "The Eagle Edwards" in Calgary 1988

Eddie "The Eagle" Edwards

  • Skier who wanted to be in the 1988 olympics
  • Failed to qualify as a skier and went to ski jumping - no competition
  • Scored 73.5m - which made him place 56 of 57
    • (contestant no. 57 got disqualified)
  • Caused the IOC to enforce the "eagle rule"
  • Became a media success (£10k/hour for speaking engagements)

Eddie the Eagle shows that by determination and creative switching you can become a success - even when you are really bad at something!

There is no split in the community

  • We want the same things
  • We fail to ask for reasons
  • We might be unaware of pressures
  • We need to understand the goal in order to critique an approach

I don't think that we are split in two as a community. I think we all want the same things, we just fail to be aware of the reasons, pressures and end goals that drive certain people to do things in a certain way.

Working together, we can reach amazing distances and do it in style.

Let's all work together!

Dog wants to help