Enjoying the full stack - Frontend 2010
Upcoming SlideShare
Loading in...5

Enjoying the full stack - Frontend 2010



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



Total Views
Views on SlideShare
Embed Views



12 Embeds 265

http://www.wait-till-i.com 188
http://developer.yahoo.net 45
http://christianheilmann.com 10
http://icant.co.uk 6
http://www.ditii.com 5
http://static.slidesharecdn.com 4
http://webcache.googleusercontent.com 2
http://www.onlydoo.com 1 1
http://busk.com 1
http://jonathandchr.com 1
http://searchlogger.net 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Enjoying the full stack - Frontend 2010 Enjoying the full stack - Frontend 2010 Presentation Transcript

  • Enjoying the full stack. Chris&an Heilmann http://www.flickr.com/photos/andrewrennie/4608617962 Frontend 2010, Oslo, Norway, October 2010
  • We now had two days of awesome web technologies.
  • We do live in exciting times!
  • The technologies we’ve been advocating for years are more powerful than ever.
  • CSS = rocking the interface and taking over tasks that only JavaScript could do.
  • HTML = application language with reach into predefined widgets and OS data.
  • JavaScript = the de-facto language for new environments and interfaces.
  • JS + Node.js = kick-ass server side solutions for today’s problems.
  • So what keeps us from having a really easy life creating the coolest apps ever?
  • That’s us, my friends.
  • Government FAIL http://www.hmg.gov.uk/epetition-responses/petition- view.aspx?epref=ie6upgrade
  • 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.
  • 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.
  • 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.
  • Who watches the watchmen?
  • Not us - we are too busy writing effect examples.
  • HTML5 Showcases
  • 2000 / Windows
  • 1992 / Amiga 500
  • 1994 / C64
  • Progress is a debt we all must pay.
  • HTML5 is not about dicking around in a canvas and plotting shiny things.
  • HTML5 is about moving from documents to applications.
  • HTML5 is about moving from hacks to solutions.
  • Real input types, real app state retention, real back button and history support...
  • ...real collaboration of apps over a network...
  • ...real marking up of what things are.
  • This is all the *really* exciting stuff.
  • Not rotating a video or simulating some Flash effect in Canvas.
  • Innovation should not be at the cost of quality.
  • It's convenience we all cherish.
  • This is a valid HTML5 document: <!doctype html> <html lang=en> <meta charset=utf-8> <title>blah</title> <body> <p>I'm the content
  • HTML5 + CSS3 should be a reboot of awesome.
  • <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>blah</title> </head> <body> <p>I'm the content</p> </body> </html>
  • Less code does not mean a better solution...
  • Less redundancy in code is a better solution.
  • I do not want to trust a browser to right the things I did wrong.
  • We’ve done that over and over in the past...
  • ...and now we bitch that people do not upgrade...
  • ...and their reason is the solutions they bought for a lot of money...
  • ...that were built with the same attitude for a “cool and simple” environment at that time.
  • Rotating HTML content?
  • Matrix filter anyone? http://msdn.microsoft.com/en-us/library/ ms533014%28VS.85%29.aspx
  • File system access?
  • .hta anyone? http://msdn.microsoft.com/en-us/library/ ms536496%28VS.85%29.aspx
  • It's pollution we disdain.
  • Forking and repeating code for different browsers is not fun.
  • CSS2 CSS3
  • 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);
  • Let’s take a look at the players.
  • Opera http://www.flickr.com/photos/dalbera/4824517154
  • Firefox http://www.flickr.com/photos/harlequeen/887663462
  • Chrome http://www.flickr.com/photos/jillclardy/2637251419/
  • Safari http://www.flickr.com/photos/library_of_congress/2809104638
  • Explorer http://www.flickr.com/photos/statelibraryofnsw/3422714392
  • Explorer = http://www.flickr.com/photos/statelibraryofnsw/3422714392
  • Let’s make upgrading a logical step. IE6
  • Let’s not concentrate on adding new players and random additions. W TF
  • Making CSS3 easier to apply.
  • Give browsers what they can do and use what they do better!
  • Easing the use of web fonts for better typography.
  • http://code.google.com/webfonts/preview#font-family=Lobster
  • Simply adding a link doesn’t give you feedback though...
  • Using JS to load the fonts on the other hand does.
  • 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 - italic n7 - bold i7 - bold italic 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> http://code.google.com/apis/webfonts/docs/webfont_loader.html
  • 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() {} };
  • Feedback and handles are needed to deliver working solutions.
  • Web development is not about what technology you love.
  • It is about using a full stack of technologies and let each do what it is great at.
  • Each part needing experts and enthusiasts.
  • And all working together on the goal to make our job easier and more professional.
  • We should work for the web and for people - not for browsers.
  • Browsers can be handled by a build process.
  • View-source is important but should happen on GitHub, not in the browser.
  • Performance optimisation can be done by machines.
  • Human optimisation can not be done by machines.
  • We have a very cool future ahead.
  • If we build for the humans and use the machines for what they are good at.
  • Christian Heilmann http://wait-till-i.com Thanks! http://developer-evangelism.com http://twitter.com/codepo8