Get excited and build things!

Today I want to quickly talk about attitude and what it means to our success as people of technology. Part of the success of the web is that it is very easy to take part in it. A lot of people make good money on it, some make ridiculous money and it seems we are slipping from bubble to bubble without really taking in what we could be achieving.

Build > Make

Get excited and make things

Shirtoid

You might have seen the cool shirts that said "get excited and make things" and I agree. There is nothing cooler than creating something and when you are untethered as an innovator, it really gets fun to do. I have attended my share of hack days and always enjoyed myself.

The thing though is that building something is much better than just making something. You can make friends but you build lifelong relationships. You can make yourself heard but you build a reputation for being consistently interesting.

Before the web

Floppies

Photo by "moppet65535"

Before there was the web we programmed on computers and saved things on floppy disks. If we wanted to collaborate we picked up the phone and had talks or met at someone's place. We also sent floppy disks and later CDs and DVDs around in the mail to hand over code to others.

Hello world (wide web)

My first modem

When I started on the world wide web I was instantly hooked. I sat at work on a Windows 3.11 box and looked at web sites in the States, Sweden and contacted people I had sent letters and floppy disks to before that. It was pure magic. I wanted to be part of that.

Becoming a builder

under construction

I wanted to build a web site. I had ideas that I already talked in length and breadth about about on mailing lists and IRC and I wanted to note them down somewhere so I can re-visit them and other people can see them. So I asked what I need to become a web developer.

Frontpage is what you need!

Microsoft Frontpage

A friend then told me that I need Microsoft Frontpage to build web sites. So I asked him if he can get me a pirated copy - of course. Try before you buy. He never found one. I was lucky.

Netscape Composer to the rescue

Netscape Composer

I then found Netscape Composer which looked good but I found it limiting.

Using the web

I then asked around a bit more and people told me that it is not that hard to start and editors are not the way to go. I read up on HTML and looked where I can find info on it. I stumbled across HTMLHelp.com and subsequently the W3C. The references and guides there were downloadable, so I got them at work and started my site at home.

The rest is history…

My first web site

The rest is history, I build some stuff for myself, put it on the web, talked to people about my new profession and got companies to ask me to build them stuff. I got found by a headhunter and worked for a large company and from there on went to several large companies and worked on massive products that are used by people day by day to get information.

I am not a rich man

Eating Pot Noodles

Now I am here talking to you about the future of web apps. I am not a net millionaire. I am not someone who started dozens of companies and got featured on TechCrunch.

I am a happy man

Hell is bored girlfriends...

But I make a living on the web with the stuff I do. I don't get up in the morning with a sense of dread and worries. I get up and open my RSS reader and see what happened. I read my emails, I tweet and people ask me questions and I help them. That makes me happy. My hobby and my passion is my job.

Seeing passion lead to success is win

Lanyrd and Cloud9ide

A few people I know made it big - of sorts. Check out Lanyrd.com by friends of mine, Simon Willison and Natalie Downe. They just got funded with $1.4m. Other friends of mine built cloud 9 IDE and bagged $5.5m funding. Other people I met at the same time are now in Facebook, Twitter and at Google.

Their secrets: none at all

All these people have done a few things right: they were passionate about they wanted to do, they found a problem that needed solving and they are using the web infrastructure to build their product and make people find them.

Re-use and remix

Aphex Twin music sheet

And this i the great thing about the web - you don't need to do everything yourself. You can mesh with an existing framework of services and interfaces and you can find talent and partner with people by keeping an open eye.

APIs - show us what you can do

Twitter birds

Twitter would not have been the success it is now if it hadn't released the API. Twitter clients like Twhirl, Tweetdeck and others made it possible for people to follow tweets while doing other things in the browser. Existing chat clients started supporting Twitter and boom - everybody was invited.

Sometimes you can be lucky…

Angry Birds family tree

Angry birds is probably the poster child of the successful overnight sensation. It wasn't but it doesn't matter - Cinderella stories sell much better than stories of long hard labour.

Clever resourcing

Angry birds formula

The cool thing about Angry birds is not that it is an amazing game. It is that it could have been done very cheaply. The main thing about the game is that it is based on the ideas of the box2d a physics engine. Add fluffy animals and a funny back story and you are done.

Success is not necessarily repeatable

That doesn't mean though that this always works. In most cases it won't. That doesn't mean though that people don't try. The amount of copycats is amazing.

Let's stay inside, it is safer

Maru in box

The thing that fascinates me about the whole app world right now is that people really think that being in an app store will make their product a success. In closed stores you have the issue of getting allowed to play and then you have the problem of being found. The name of your product is very important and there is already a massive market of fake review writing to boost apps.

Outside can be messy, but fun

Dog jumping in the woods

I think it is ridiculous to limit ourselves to target app stores and closed systems. Remember Myspace? Remember when everyone told you a Facebook app is all you ever need?

Outside is huge!

World Connection Density

World Connection Density map by Chris Harrison

The web is huge. You can reach people world-wide, 24-7 and they can find your product and solve their problems with it.

Being flexible

Flexible phone by Samsung

Galaxy Skin smartphone

Using open web technology means you can be flexible. Upgrades are easy, and your app can easily adapt to the needs of the user.

Making flexible rigid is easy…

Phonegap.com

phonegap.com

Nothing for example stops you from building something with HTML5 and JS and then use a tool like phonegap to turn it into an iPhone and Android app. The other way around is harder. Ask Google about Angry Birds for Chrome.

Native vs. web - Playmobil vs. Lego

Playmobil and Lego car

Photos by "kruemel2010" and "Buck"

The whole native vs web debate always reminds me of Playmobil vs. Lego. As a kid this was a big thing. Some kids had cool cars from Playmobil that would survive a fall and ships that really swam. My Lego cars lost parts and the ships always took in water. However, when I wanted to turn my ship into a plane, I could do that whilst the Playmobil kids had to pester their parents to get a plane. I guess this was partly what made me a developer, not a buyer.

Building vs. Using

YouTube editor

The other thing the web can offer you different interfaces to the same app. Say you have Angry Birds on the web. The mobile version could be the game. If you open the same app on a tablet, laptop or a desktop machine you could have the videos from YouTube next to the level or include a chat to ask your friends. Even cooler? How about a level editor to build levels and send them to your friends?

Canvas Angry Birds level editor

Angry Birds level editor

Of course someone reverse engineered Angry Birds and build a level editor using HTML5 canvas and a LUA decompiler. What did he get for it? A cease and desist of course.

What about syncing?

My different Android devices

I own four Android devices. I played Angry Birds and Cut the Rope on all of them. Guess what? I always needed to start from scratch. Not fun. On the web it is much easier to sync things. Years of version controlling helped us with that.

The future of web apps?

HTML5 logo

We are here at the future of web apps. So let's talk a bit about the stuff we need to have before we can truly call things web apps.

Use cool stuff HTML5/CSS3 gives you - now

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.

CSS Animation

This example shows how simple it is to create an animation with CSS. Notice that the main annoyance really is that there is a lot of repetition to support different browser prefixes.

Generating CSS animation on the fly

As CSS animations are hardware accelerated, it makes sense to use them when they are supported. You can do that in JS.

Canvas

etch-a-sketch

photo by Kevin Simpson

The canvas element allows you to paint in the browser. On a first glance it looks like an etch-a-sketch. You can paint lines, you can move the pen without painting and you can wipe the canvas to delete it.

Inspired by my last slide, Gregory Koberger wrote an etch-a-sketch in canvas.

Canvas features

Digging deeper into canvas you find that the API - though simple - is very clever. You can paint lines, rectangles, arches and bezier curves and you can define the fill modes and line styles. Furthermore you can do gradients and drop-shadows. But the coolest feature is that the coordinate system on canvas is not fixed bug flexible. You can have a different coordinate system for each thing you paint onto the canvas.

Cutout animation

Terry Gilliam animation

Canvas is more like creating cut-out animation than an etch-a-sketch. You can create lots of independent things and size and rotate them dynamically.

Browser fountain

The Browser Fountain is a demo that shows how simple it is to create a particle system in canvas by using the dynamic changes in the coordinate system.

WebGL

WebGL is the big new thing for a lot of people. It brings 3D gaming to the web.

three.js by Mr. Doob

Screenshot of Three.js

Three.js is a JavaScript library that makes it much easier for not-3D developers to start with WebGL. Check out the demos on the page - there are many cool examples.

WebGL Water

This is one of the winners of the Mozilla Demo Scene competition. It is fully featured simulation of water - complete with reflections, ripples and proper gravity simulation.

WebGL Skin

This is an impressive demo of simulating skin in WebGL - check the different discolourations and hair stubbles.

Local Storage

Local Storage (persistent) and Session Storage (deleted when the tab is closed) are a very simple way to store content on the user's machine without having to go through the pains of cookies.

Offline

Offline storage makes sure that our apps give a real native app feeling. If a user gets disconnected it shouldn't be the end of the world.

File APIs

The new file APIs allow us to read and create files from the system easier than by going via a server. You can for example convert files before uploading them and allowing people to get their offline documents easier into an online system than with old-school file upload forms.

Motivational poster

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.

HTML5 video

Video is one of the big break-through technologies for HTML5. As video elements are just like any other element in the page it makes it very easy to deliver engaging and interesting video solutions. The native browser controls makes it also much easier to make video more accessible for example to keyboard users.

Syncing HTML5 video with page content

This demo shows how easy it is to sync page content with video in HTML5. Notice that the JavaScript is very simple and by using data- attributes on the HTML I can maintain the syncing without any JS knowledge.

Using existing infrastructure

Folding at home

Folding at home is an initiative by Stanford university to crowdsource analysis of protein folding - one of the causes of Alzheimer. By using people's computers it is now the biggest supercomputer on earth.

We can do the same with the web. People have powerful mobiles, tables and laptops. We should use them when we can.

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

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.

What to build?

Khan academy

Khan academy

The last thing I want to stress out is that the web is for people and a wonderful opportunity to make the world a better place. Traditional education is failing to excite people. Maybe it is time to use our skills to build a more educated and intelligent society?

Communication and collaboration

Brooms aloft - #riotcleanup

#riotcleanup

We saw it during the riots in London, a lot of the up-to-date information happened on the social web and with mobile devices. Twitter being the big one. The cleanup after the riots was organised by and through tech people on the internet and could be a great example of tackling all kind of other social issues.

We're in a crisis - let's pop the bubble

Spent the game

Play spent

There are a lot of things going wrong right now in the world and we have an amazing media at our fingertips and we are the people who know how to build things for it. Let's break out of our comfort zone, and not build another Angry Birds, but something that really helps people.

Avoid the patent trap

Pat on the back machine

Pat on the back machine, United States Patent 4608967 by Piro, Ralph R, published 09/02/1986

Patents are right now the big thing - especially lawsuits about them. Do not play that game, you can't afford it.

Disrupt what is complacent

Klingon Disruptor

Klingon / Romulan disruptor pistol

What about easier banking services? Booking services? Flight booking? Public transport? Healthcare? The obesity issue? Anything that right now is a mess of numbers and tables could be a better, engaging app.

The web has only done me good. I stay!

Young red ponda

Zooborns

I love the web and I will keep working for it. I've seen lots of closed awesome technology come and go and I'd rather spend my time making the web and apps mesh than try to replace one with the other.

Thanks!