Enjoying the full stack.




                                                                              Chris&an Heilma...
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 advantag...
It is not straightforward for HMG
departments to upgrade IE versions
on their systems.  Upgrading these
systems to IE8 can...
To test all the web applications
currently used by HMG departments
can take months at significant
potential cost to the tax...
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'...
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...
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
r...
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
HTTP + PARSER
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-tang...
<style type="text/css">
 .wf-inactive p {
    font-family: serif;
    font-size:12px;
 }
 .wf-active p {
   font-family: '...
WebFontConfig = {
 google: {
   families: [ 'Tangerine', 'Cantarell' ]
 },
 typekit: {
   id: 'myKitId'
 },
 loading: func...
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
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Enjoying the full stack - Frontend 2010
Upcoming SlideShare
Loading in...5
×

Enjoying the full stack - Frontend 2010

4,585

Published on

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.

Published in: Education
0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,585
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
61
Comments
0
Likes
17
Embeds 0
No embeds

No notes for slide

Enjoying the full stack - Frontend 2010

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

    Clipping is a handy way to collect important slides you want to go back to later.

×