Presentation: Fail, Meh or Win? How do you want the web to be?

When you see this talk, you are at a web conference.

On these we show cool new stuff and teach people about using our technologies in different ways. We find inspiration, we discuss details and we get to know each other. When we go back to our day-to-day grind things look different though and the inspiration we got can turn into frustration.

Chris Heilmann will show some tricks and ideas how we can break that cycle. You should not have to be on stage to produce bleeding-edge awesome. And guess what? With the right attitude, you don’t have to.

Fail, Meh or Win?

How do you want the web to be?

Christian Heilmann, Mozilla, Frontrow, Krakow, Poland, October 2011

Today I want to talk about attitude and how you can do your part to make the web a great place to develop for.

Thanks for being here!

Calvin and Susie talking about Krakow

Thank you for coming to this conference here in Krakow. It is good to see that there are meetings and conferences and a movement in places that are not the commonly known spaces for web development and innovation.

Lots of conferences…

Chris Heilmann holding up lanyards

I am spending the larger part of my life going from conference to conference right now speaking about new technologies and how they can make our lives as developers easier.

It is a good life

Chris Heilmann holding up lanyards

I love my job and I love working in a company that drives the web and brings great new products to it. I am also constantly confused how I ended up where I am now and I found it boils down to a few things.

How I got here… (1 of 3)

  • Be on the lookout for cool new technology
  • Play with technology, document for yourself what worked
  • Find ways to explain and demonstrate complex matters in a simple fashion
  • Fix issues and give them back to the original makers

How I got here… (2 of 3)

  • Take part in discussions (forums, mailing lists, reddit, hackernews, google+, twitter)
  • Share your findings (twitter, blog, pinboard, delicious)
  • Give real examples and bring issues back to the makers
  • Give feedback and ask for improvements

How I got here… (3 of 3)

  • Be positive about change
  • Question everything (in a constructive manner)
  • Always question the current state of affairs

Getting inspired

inspiration point
Photo by Adam Bartlett

A lot of people go to conferences to get inspired. You see the coolest, newest stuff and learn where our job can go in the future.

Frustration kicking in…

change

The issue is once you are inspired and you know what cool stuff you could be playing with, your day to day job can appear bland and boring. And this is frustrating. I am sure all of you think you can do the same speakers on stage are doing.

Blockers in your head

change
Photo by Olle Svensson

And you know what? You can! All here have quite an important role to play in our market and the field we work in. The people you listen to actually need you to help them with moving the market forward.

The only constant is change

change
Photo by Adam Bartlett

Over the years I learned one thing as a web developer: nothing is set in stone. Our market moves so fast, there is no way to ever say that you are done as a web developer and you can stop caring about innovation. Not if you want to be a success.

Reasons to be cheerful…

  • No official accreditation in web development
  • Learning materials are free
  • Experts are easy to find and answer questions
  • You can start writing your first code with textpad or
    vi index.html
  • We're a market where companies struggle to find people!

If you think about it, we are in an incredibly good position as web developers.

But, they want rockstars!

change
Photo by Adam Bartlett

Of course the initial answer to me stating that the market is looking for talent is that people are looking for awesome rockstar developers and not you. That is true if you look at the job specs, but the fact is that job specs are never written by the people who hire. There is a lot of padding going on.

Who says you can't rock?

Wheelchair crowd surfer

There is nothing to hold you back to become a rock star. All you need to do is to free your mind and think differently about a few things.

A few things to consider…...

Spaghetti bowl
Photo by Steven Depolo

The first step to getting to do cool stuff is to free yourself from thinking that you are doing a normal job. You are not. You are working in a pretty crazy environment and being flexible is very important.

Craving stability…

Locks on the bridge

It is very understandable that as humans we crave stability. Working in an environment that constantly shifts is tricky and not everybody's cup of tea.

Commitment to a single cause…

Locks on the bridge

Therefore it is very tempting to concentrate on one thing and defend it against everything else. That's how experts are born. Most of the time those who vehemently defend their field of expertise as the only valid one.

Change can be tough…

Locks on the bridge

The problem then is that it becomes harder and harder to change. Being an expert is great, but you always need to be aware that what you do is part of a larger development environment.

Many solutions for the same issue

Standard

I found over the years that different people with various technical backgrounds have different ways to approach a problem and find a solution for it. There is no one size fits all standard. The trick is to try to understand where they are coming from.

Lacking context leads to confusion

Marsian product about something

A lot of what we don't understand on the web is about context. It is easy to misunderstand something and call FAIL because you don't know what lead to the decision in the first place. This is frustrating for everyone involved.

Partnering with others

Boba Fett and Chewbacca fixing a car

Therefore I think it is very important to start working together with people outside your remit. If you are a JS developer, you might want to talk to CSS fans. If you love markup and consider it a crime when people don't use the right semantic elements, ask why that happened and learn that there are issues.

Giving the job to those who want it

Once you learn about the issues other people have, it is a good plan to bring your expert knowledge in to solve them. It is amazing how many times that leads to wonderful solutions.

Can I use?

Can I use?

"Can I use" is a great resource to check if it is safe to use a certain technology. It is a resource full of great research, but also of not too pretty design.

HTML5 readiness

HTML5 readiness

HTML5 readiness then took this data and made it an interactive visualisation that allows you to show how much support browsers got over the years.

When can you use new technology?

A flying car
Photo by Thomas Duchnicki

A question I always get is when we can use all these cool new technologies people speak about on conferences.

You can use it now!

Stopwatch
Photo by William Warby

Fact is that nothing should hold you back to use them now. And we need you to do that. Only by using the things we talk about in real environments can we test their worth.

But they aren't ready yet!

Scones in the oven
Photo by Mark Skipper

One big concern people have is that a lot of what we talk about in HTML5 and CSS3 is not ready for production yet. The standards are still being defined and implementations differ from browser to browser.

And what is new about that?

#wrapper { overflow: auto; zoom: 1; } #column1 { width: 300px; float: left; } #column2 { width: 300px; float: left; }

Fact is that has always been the case. We have now a chance to make things much easier for us. If we embrace HTML5 and the interest browser makers have in it and feed back our concerns we can make quite a difference. So far we've patched the web tricking browsers. This should not be our job.

The web needs your feedback!

feedback

Browsers are only as good as the feedback the makers get. Of course there is a lot of cool stuff being developed but most of the people working on browsers and sitting in standards bodies are not web developers. As Lea Verou put it in her Smashing Mag article: Help The Community - Report Browser Bugs.

How to find bugs?

Duct taped computer casing

Now, you can only find bugs when you use the things browser makers put into their products.

Don't repeat old mistakes

  • Don't build for one browser
  • Don't do everything in one technology
  • Document what is a hack
  • Start from a solid base

There are worrying signs that we repeat mistakes in the past. This is dangerous.

Best viewed with…

Best viewed with

Even more scary, we seem to be steering towards a world where it is needed to have a modern browser to see a certain site. That, to me is unacceptable.

It's a trainwreckcar

Yaris it's a car ad

One of the more annoying examples of that was the Toyota "It's a car" web site where a car salesman explained to you that it uses WebGL and HTML5 and that is why you need to download Chrome. Fact is that the site didn't do anything better in Chrome than in Firefox it seems. It was just a strange way of telling the audience that the agency didn't care much about cross-browser support.

HTML5 bells and whistles

HTML5 2.0

A lot of what we gets the label HTML5 these days is shiny bells and whistles. And that is not the idea of it.

!Flash

Skip intro

HTML5 is not a replacement for Flash - we shouldn't fall into the same trap we did with that technology. When you look at the uses for modern new technologies though you'll find first and foremost brochureware sites and tech demos. And HTML5 is not that new any longer.

Use the source, Luke?

The ability to view source to me was probably the biggest part of the success of web standards. Instead of having to get the source files we just had to look and see how things were done.

Therefore I think it is important to take a look at how we treat the source of our products. Right now I feel there is a big divide in the market.

Keep it <semantic>, <stupid>

Periodic table of elements
Periodic table of elements by Josh Duck

On the one hand we have markup enthusiasts who love to use the correct elements and preach that they need to be used no matter what. This is a sensible thing but we should also question the need.

Chicken and egg!

It is a classic chicken and egg problem - if browsers don't do anything with new elements developers don't use it. If developers don't use the new or even the correct semantic elements browser vendors put them far down the list of need to have fixes.

Performance is the only goal!

On the other hand we have those who see markup as a necessary evil and want to build extremely flexible and high performance applications. Pointing out that their code is semantically bad is pretty pointless as the code was not written by hand but converted from another language and optimised to be read by a browser, not a human.

Happy middle ground

  • Use the correct semantic HTML for the task (duh!)
  • Use new HTML5 elements when they make sense and are stable.
  • Write for humans, convert for computers.
  • Clearly mark generated code - this stops accusations
  • Avoid unnecessary dependencies

Using new capabilities

When it comes to using new browser capabilities, there is really no need to tell the end user to upgrade their browsers. Yes, we all want old browsers to die, but our users should not be the ones to bear the burden.

This Mozilla demo shows how you can drop an image into the browser, annotate it and upload the solution as an image to different social sharing sites.

Progressive Enhancement

I feel like sounding like a broken record, but I yet have to hear a single valid argument against progressive enhancement. Yes, there are concerns that it can not always be applied, what I am talking about is the concept and the mindset of progressive enhancement.

Be safe out there…

don't walk on ice
Photo by "Alpha"

As web developers we always had to be paranoid about writing code. We detect support, then we apply it. We check if the ice can hold us before skating on it. We jump into the river after checking that it is deep enough. Simple, really.

Awesome opportunities…

  • Replace technology alien to the browser with native one
  • Improve existing interactions
  • Add interactivity to previously static things
  • Replace simulated interfaces with real ones

'revolution'.replace('r','')

Baby Platypus

A lot of people talking about HTML5 throw everything out we've done before. No need for semantic markup, our job is to give the same experiences native applications give us.

This is limiting the impact and usefulness of HTML5. The web has become the success it is not by being limiting but by being inclusive and adapting.

Stop imitating and start inventing.

iphone interface on android

It is pretty much pointless to try to make an HTML5 app look and feel like a native app. First of all this only works on iPhone anyways as there is no "Android" look and feel. Instead, let's push HTML5 at what it is good at - being a web development stack.

Financial Times - web > native

Financial Times App
FT web app - more successful than iPhone app

The FT lately showed that doing a web app can be more successful than a native iPad app.

Mediaqueries for flexibility

Boston Globe
The new Boston Globe page

Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user. The Boston Globe is a great example of that. By cleverly employing mediaqueries the same site can be seen across a lot of devices.

Go and build an amazing web!

  • Build with sensible markup
  • Check for support, then apply
  • Raise the bar for day to day web sites
  • Use what improves the experience, not what is cool
  • File bugs and report successes
  • Don't limit yourself by what failed in the past

A big annoyance to me is that not many web products really use the technology we have - there are awesome things possible in modern browsers. You can use those when and if they are available.

The next big things…

Powered by fairy dust

There are a lot of cool challenges coming our way, and it will be interesting to see what we can do.

Breaking the browser mould

Firefox with native toolbars
Firefox with native toolbars

In order to keep the open web the alternative of choice for app development we need to free the browser as the platform to allow us to access hardware and do the same cool things we can do with native apps. There are a few things brewing there and we would love to get your feedback. One of them is allowing the site to change the browser toolbars.

Using the web to break the lock

Some things are not available to web applications on hardware like phones and tablets. That is not fair and we are working hard on making this possible.

Web APIs

  • Defining access for web services to:
    • Dialer, SMS
    • Address Book
    • Clock, Calculator
    • Camera
    • Gallery
    • Settings
    • Games
    • Maps

Web APIs are something Mozilla and a few others are working on - a standard to allow JavaScript access to things that we need to have if we want to have a standards based mobile web.

An open framework of apps

Another thing we are working on is a framework for apps that would allow you to tell people about your app from your web site, have full-screen applications that could be launched in the browser and from the desktop or on mobiles, and a synced experience across these devices.

Let's play!

Dog wants to play
Photo by Mike McCune