enjoying the full stack - frontend 2010
DESCRIPTION
The final talk of the Frontend2010 conference in Oslo, Norway talking about the need to make technical advancements interesting for people outside our comfort zone and about the benefits of using all the web technologies at our disposal to built bullet-proof solutions rather than flimsy showcases of what technologies could be used for.TRANSCRIPT
![Page 1: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/1.jpg)
Enjoying the full stack.
Chris&an HeilmannFrontend 2010, Oslo, Norway, October 2010
http://www.flickr.com/photos/andrewrennie/4608617962
![Page 2: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/2.jpg)
We now had two days of awesome web technologies.
![Page 3: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/3.jpg)
We do live in exciting times!
![Page 4: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/4.jpg)
The technologies we’ve been advocating for years are more powerful than ever.
![Page 5: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/5.jpg)
CSS = rocking the interface and taking over tasks that only JavaScript could do.
![Page 6: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/6.jpg)
HTML = application language with reach into predefined widgets and OS data.
![Page 7: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/7.jpg)
JavaScript = the de-facto language for new environments and interfaces.
![Page 8: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/8.jpg)
JS + Node.js = kick-ass server side solutions for today’s problems.
![Page 9: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/9.jpg)
![Page 10: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/10.jpg)
So what keeps us from having a really easy life creating the coolest apps ever?
![Page 11: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/11.jpg)
That’s us, my friends.
![Page 12: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/12.jpg)
Government FAIL
http://www.hmg.gov.uk/epetition-responses/petition-view.aspx?epref=ie6upgrade
![Page 13: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/13.jpg)
Complex software will always have vulnerabilities and motivated adversaries will always work to discover and take advantage of them. There is no evidence that upgrading away from the latest fully patched versions of Internet Explorer to other browsers will make users more secure.
![Page 14: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/14.jpg)
It is not straightforward for HMG departments to upgrade IE versions on their systems. Upgrading these systems to IE8 can be a very large operation, taking weeks to test and roll out to all users.
![Page 15: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/15.jpg)
To test all the web applications currently used by HMG departments can take months at significant potential cost to the taxpayer. It is therefore more cost effective in many cases to continue to use IE6 and rely on other measures, such as firewalls and malware scanning software, to further protect public sector internet users.
![Page 16: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/16.jpg)
Who watches the watchmen?
![Page 17: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/17.jpg)
Not us - we are too busy writing effect examples.
![Page 18: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/18.jpg)
HTML5 Showcases
![Page 19: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/19.jpg)
2000 / Windows
![Page 20: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/20.jpg)
1992 / Amiga 500
![Page 21: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/21.jpg)
1994 / C64
![Page 22: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/22.jpg)
Progress is a debt we all must pay.
![Page 23: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/23.jpg)
HTML5 is not about dicking around in a canvas and plotting shiny things.
![Page 24: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/24.jpg)
HTML5 is about moving from documents to applications.
![Page 25: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/25.jpg)
HTML5 is about moving from hacks to solutions.
![Page 26: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/26.jpg)
Real input types, real app state retention, real back button and history support...
![Page 27: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/27.jpg)
...real collaboration of apps over a network...
![Page 28: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/28.jpg)
...real marking up of what things are.
![Page 29: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/29.jpg)
This is all the *really* exciting stuff.
![Page 30: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/30.jpg)
Not rotating a video or simulating some Flash effect in Canvas.
![Page 31: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/31.jpg)
Innovation should not be at the cost of quality.
![Page 32: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/32.jpg)
It's convenience we all cherish.
![Page 33: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/33.jpg)
This is a valid HTML5 document:
<!doctype html><html lang=en><meta charset=utf-8><title>blah</title><body><p>I'm the content
![Page 34: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/34.jpg)
![Page 35: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/35.jpg)
HTML5 + CSS3 should be a reboot of awesome.
![Page 36: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/36.jpg)
![Page 37: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/37.jpg)
<!doctype html><html lang="en"> <head> <meta charset="utf-8"> <title>blah</title> </head><body> <p>I'm the content</p></body></html>
![Page 38: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/38.jpg)
Less code does not mean a better solution...
![Page 39: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/39.jpg)
Less redundancy in code is a better solution.
![Page 40: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/40.jpg)
I do not want to trust a browser to right the things I did wrong.
![Page 41: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/41.jpg)
We’ve done that over and over in the past...
![Page 42: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/42.jpg)
...and now we bitch that people do not upgrade...
![Page 43: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/43.jpg)
...and their reason is the solutions they bought for a lot of money...
![Page 44: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/44.jpg)
...that were built with the same attitude for a “cool and simple” environment at that time.
![Page 45: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/45.jpg)
Rotating HTML content?
![Page 46: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/46.jpg)
Matrix filter anyone?
http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx
![Page 47: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/47.jpg)
File system access?
![Page 48: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/48.jpg)
.hta anyone?
http://msdn.microsoft.com/en-us/library/ms536496%28VS.85%29.aspx
![Page 49: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/49.jpg)
It's pollution we disdain.
![Page 50: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/50.jpg)
Forking and repeating code for different browsers is not fun.
![Page 51: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/51.jpg)
CSS2 CSS3
![Page 52: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/52.jpg)
box-shadow:10px 10px 7px rgba(0,0,0,.7);-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);-webkit-transform: scale(1.25);-moz-transform: scale(1.25);-o-transform: scale(1.25);
![Page 53: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/53.jpg)
Let’s take a look at the players.
![Page 54: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/54.jpg)
http://www.flickr.com/photos/dalbera/4824517154
Opera
![Page 55: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/55.jpg)
http://www.flickr.com/photos/harlequeen/887663462
Firefox
![Page 56: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/56.jpg)
http://www.flickr.com/photos/jillclardy/2637251419/
Chrome
![Page 57: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/57.jpg)
http://www.flickr.com/photos/library_of_congress/2809104638
Safari
![Page 58: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/58.jpg)
http://www.flickr.com/photos/statelibraryofnsw/3422714392
Explorer
![Page 59: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/59.jpg)
http://www.flickr.com/photos/statelibraryofnsw/3422714392
Explorer
=
![Page 60: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/60.jpg)
Let’s make upgrading a logical step.
IE6
![Page 61: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/61.jpg)
WTF
Let’s not concentrate on adding new players and random additions.
![Page 62: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/62.jpg)
HTTP + PARSER
![Page 63: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/63.jpg)
Making CSS3 easier to apply.
![Page 64: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/64.jpg)
![Page 65: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/65.jpg)
![Page 66: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/66.jpg)
Give browsers what they can do and use what they do better!
![Page 67: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/67.jpg)
![Page 68: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/68.jpg)
Easing the use of web fonts for better typography.
![Page 69: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/69.jpg)
http://code.google.com/webfonts/preview#font-family=Lobster
![Page 70: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/70.jpg)
Simply adding a link doesn’t give you feedback though...
![Page 71: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/71.jpg)
Using JS to load the fonts on the other hand does.
![Page 72: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/72.jpg)
http://code.google.com/apis/webfonts/docs/webfont_loader.html
Classes added to the root element by the Google WebFont loader
.wf-inactive
.wf-active
.wf-tangerine-n4-inactive
.wf-tangerine-n7-active
.wf-droidsans-n4-inactive[...]
n4 - normal i4 - italicn7 - bold i7 - bold italic
![Page 73: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/73.jpg)
http://code.google.com/apis/webfonts/docs/webfont_loader.html
<style type="text/css"> .wf-inactive p { font-family: serif; font-size:12px; } .wf-active p { font-family: 'Tangerine', serif; font-size:20px; } .wf-inactive h1 { font-family: serif; font-size: 16px } .wf-active h1 { font-family: 'Cantarell', serif; font-size: 35px }</style>
![Page 74: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/74.jpg)
WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] }, typekit: { id: 'myKitId' }, loading: function() { }, fontloading: function(family, info) {}, fontactive: function(family, info) {}, fontinactive: function(family, info) {}, active: function() {}, inactive: function() {}};
![Page 75: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/75.jpg)
Feedback and handles are needed to deliver working solutions.
![Page 76: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/76.jpg)
Web development is not about what technology you love.
![Page 77: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/77.jpg)
It is about using a full stack of technologies and let each do what it is great at.
![Page 78: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/78.jpg)
Each part needing experts and enthusiasts.
![Page 79: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/79.jpg)
And all working together on the goal to make our job easier and more professional.
![Page 80: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/80.jpg)
We should work for the web and for people - not for browsers.
![Page 81: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/81.jpg)
![Page 82: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/82.jpg)
Browsers can be handled by a build process.
![Page 83: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/83.jpg)
View-source is important but should happen on GitHub, not in the browser.
![Page 84: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/84.jpg)
Performance optimisation can be done by machines.
![Page 85: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/85.jpg)
Human optimisation can not be done by machines.
![Page 86: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/86.jpg)
We have a very cool future ahead.
![Page 87: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/87.jpg)
If we build for the humans and use the machines for what they are good at.
![Page 88: Enjoying the full stack - Frontend 2010](https://reader033.vdocuments.net/reader033/viewer/2022060107/554a0361b4c905507a8b50fd/html5/thumbnails/88.jpg)
Christian Heilmann http://wait-till-i.com http://developer-evangelism.com http://twitter.com/codepo8
Thanks!