progressing and enhancing
DESCRIPTION
My talk at the Scandinavian Developer Conference 2010 about following the wrong principles and getting too excited about shiny demos rather than building things that work and proving our technologies as professional tools.TRANSCRIPT
![Page 1: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/1.jpg)
Progressing and enhancing.
Chris&an HeilmannSWDC, Stockholm, Sweden, June 2010
![Page 2: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/2.jpg)
Our job as web developers is to create working solutions.
![Page 3: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/3.jpg)
End users should not have to care what technology we used.
![Page 4: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/4.jpg)
All they should get is an interface that works and helps them reach their goal.
![Page 5: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/5.jpg)
They need and want to fulfil a task - not marvel at our craftsmanship.
![Page 6: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/6.jpg)
![Page 7: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/7.jpg)
The main problem is that we love marvelling at our craftsmanship.
The main problem is that we love marvelling at our craftsmanship.
![Page 8: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/8.jpg)
We tend to get terribly excited about things in our little world.
![Page 9: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/9.jpg)
And play with them to push the envelope.
![Page 10: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/10.jpg)
![Page 11: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/11.jpg)
We measure our successes by how much we achieve in our own world...
![Page 12: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/12.jpg)
...rather than how many end users we made happy.
![Page 13: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/13.jpg)
This also leads to an amazing amount of truisms floating around.
![Page 14: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/14.jpg)
“Everybody has
JavaScript - only
freaks turn it off.”
![Page 15: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/15.jpg)
“People e
xpect drag and
drop in
terfaces
these d
ays!”
![Page 16: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/16.jpg)
“The iPad means the
end of web design as we
know it.”
![Page 17: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/17.jpg)
“This can be done
easily with jQuery”
![Page 18: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/18.jpg)
And also totally wrong statements.
![Page 19: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/19.jpg)
“My favourite part of HTML5 is geo location!”
![Page 20: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/20.jpg)
“The most powerful part
of CSS3 is transitions
and animations.”
![Page 21: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/21.jpg)
To console ourselves to see that we are right, we have statistics.
![Page 22: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/22.jpg)
But three out of five people know that 76.3% of statistics are made up on the spot.
![Page 23: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/23.jpg)
Let me tell you what happens when you give out truisms like that.
![Page 24: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/24.jpg)
Every time you say things like that...
This dog will disapprove... ...and these will not get fed.
![Page 25: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/25.jpg)
The biggest fallacy in our ways is to pick a pet technology...
![Page 26: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/26.jpg)
...and then do frigging everything in it!
![Page 27: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/27.jpg)
Lightbox in pure CSS!
![Page 28: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/28.jpg)
Things that look like
bad Windows 95
screensavers in Canvas
and Javascript!
Now with free 100% memory use!
![Page 29: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/29.jpg)
Even if we don’t use the technology - we call it a CSS3 or HTML5 solution.
![Page 30: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/30.jpg)
We arrived at:
DHTML5
With thanks to Scott Schiller
![Page 31: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/31.jpg)
It is ironic that we don’t plan for non-JS environments but for IE6 fallbacks!
![Page 32: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/32.jpg)
With the fallback being expression() and IE filters.
![Page 33: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/33.jpg)
Which did almost everything WebKit extensions do now.
![Page 34: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/34.jpg)
But without style and on much slower hardware.
![Page 35: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/35.jpg)
expression() and filters are evil and have to die!
![Page 36: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/36.jpg)
The main problem is our approach.
![Page 37: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/37.jpg)
We have to emancipate ourselves from the idea of the interface as the starting point.
![Page 38: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/38.jpg)
If we build the simplest solution first we can enhance it to whatever we want.
![Page 39: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/39.jpg)
Including mobile!
![Page 40: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/40.jpg)
A lot of “using newest technology” is a lame excuse for not architecting our solutions.
![Page 41: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/41.jpg)
There are real issues HTML5 and CSS3 need to solve:★ Security★ Hardware Access (Camera, Location, 3D
accelleration)★ Native rich controls★ Layout★ Internationalisation★ Accessibility★ Rich Media (video, audio)
![Page 42: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/42.jpg)
For now, your only chance to build good web apps is progressive enhancement.
![Page 43: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/43.jpg)
Demo time!
http://github.com/codepo8/warwickshire
http://isithackday.com/demos/warwickshire/
http://www.youtube.com/watch?v=_uAOyzw50PY
![Page 44: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/44.jpg)
![Page 45: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/45.jpg)
Demo time!
http://github.com/codepo8/flickrcollector
http://isithackday.com/hacks/flickrcollector/http://www.youtube.com/watch?v=i_1sVnNkN2M
![Page 46: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/46.jpg)
http://github.com/codepo8/flickrcollectorhttp://isithackday.com/hacks/flickrcollector/
![Page 47: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/47.jpg)
Both these solutions started the same way.
![Page 48: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/48.jpg)
![Page 49: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/49.jpg)
![Page 50: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/50.jpg)
Getting data from a web service on the server and rendering out HTML for CSS and JS to access.
![Page 51: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/51.jpg)
If you want to build things for the web you will need to use all these technologies.
![Page 52: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/52.jpg)
Otherwise you are reliant on software vendors - and that is a bad idea.
![Page 53: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/53.jpg)
We did this for IE6 and that is why there are so many bad web applications out there.
![Page 54: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/54.jpg)
It seems to be impossible to get rid of IE6 because of that - but I have a solution!
![Page 55: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/55.jpg)
The Amelie approach to the IE6 problem.
![Page 56: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/56.jpg)
Despite of what I said earlier, there is one filter we can use to solve one of our problems.
![Page 57: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/57.jpg)
One of the most pointless IE filters ever created is blur().
http://msdn.microsoft.com/en-us/library/ms532979%28VS.85%29.aspx
![Page 58: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/58.jpg)
No filter
Slight filter
![Page 59: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/59.jpg)
Applied randomly every few seconds with a slight blur this can be effective.
![Page 60: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/60.jpg)
If we build the simplest solution first we can enhance it to whatever we want.
![Page 61: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/61.jpg)
http://www.youtube.com/watch?v=pLVuRX-iZbQ
![Page 62: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/62.jpg)
We leave this in our code for a few months.
![Page 63: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/63.jpg)
Maybe persuade Google to add it to AdSense!
![Page 64: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/64.jpg)
When people complain, we say that our code is bug free - it is a mystery.
![Page 65: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/65.jpg)
Then we get some “experts” to tell the press that it might be software fatigue.
![Page 66: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/66.jpg)
=
![Page 67: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/67.jpg)
That way we turn IE6 from a technical problem to a health and safety issue!
![Page 68: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/68.jpg)
And corporate HR carries more clout than corporate IT!
![Page 69: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/69.jpg)
If we all work together, we can win this!http://icant.co.uk/ie6-amelie/
![Page 70: Progressing and enhancing](https://reader033.vdocuments.site/reader033/viewer/2022052410/554954c3b4c905f74e8b4dd0/html5/thumbnails/70.jpg)
Christian Heilmann http://wait-till-i.com http://developer-evangelism.com http://twitter.com/codepo8
Thanks!