Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How HTML5 missed its graduation day 
DENIED! 
Chris Heilmann, Trondheim Developer Conference ← there, 27/10/2014
Chris Heilmann 
@codepo8
•
From documents to apps.
From “read things” to “do things”
New, exciting and necessary features 
• Natively supported video and audio 
• Painting and image manipulation with canvas ...
The basics stayed the same: 
• Interoperable and independent of hardware and 
browser. 
• Open standards based. 
• Backwar...
•
“You need a modern browser”
It’s a mobile thing!
Assumptions gone wrong…
Everything is broken 
when you look at it in 
detail…
Not official for a long time
The “keeping ourselves clever and 
♽ 
occupied” cycle.
?
Things we took issue with… 
• OMG, there are old browsers out there that can 
not to all of that. 
• Mobile operating syst...
Libraries, Polyfills, Frameworks!
Libraries, Polyfills, Frameworks!
Website obesity is on the rise… 
291160 URLs 
http://httparchive.org/trends.php#bytesTotal&reqTotal
So, how do we fix that?
Professional engineers do these things…
We use abstractions to 
fix issues in the plumbing 
of the web and then add 
more abstractions to 
undo them. 
https://www...
This is how we lose 
touch with the core 
ideas of the web and 
its main feature that 
made it the success it 
is now…
Simplicity and an incredible low 
learning curve.
It is not complex… 
http://millionmoments.net/2013/10/three-ingredient-silly-putty-5-minute-kid-craft.html
When is the time to think in HTML5 
and not abstractions?
Recommendation ratification in the making
Exciting things happening in mobile 
• Safari for IOS8 now with massively improved 
HTML5 support 
• Android announced “ev...
Go and try to solve real issues with 
technologies in browsers. 
Stop worrying.
https://www.youtube.com/watch?v=gnbLLQwZxeA
http://removephotodata.com
https://github.com/jseidelin/exif-js/ 
Make: LGE! 
Model: Nexus 5! 
XResolution: 72! 
YResolution: 72! 
ResolutionUnit: 2!...
c = document.querySelector('canvas'); 
cx = c.getContext('2d'); 
c.width = w = img.naturalHeight; 
c.height = h = img.natu...
Keep up-to-date with what is 
supported and use it. 
http://caniuse.com/
what if?
if (what) {}
HTML5 is not… 
• Experimental features of browsers becoming our 
maintenance problem. -enough-already! 
• Flash - there is...
Move fast and break nothing!
Chris Heilmann 
christianheilmann.com 
@codepo8 
chris.heilmann@gmail.com 
Thank you!
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
How HTML5 missed its graduation - #TrondheimDC
Upcoming SlideShare
Loading in …5
×

How HTML5 missed its graduation - #TrondheimDC

7,848 views

Published on

HTML5 seems to stuck in a rut: we got people very excited about it but at the same time we told them it doesn't work and needs a special environment and all kind of other quick shots. Now is the time to look at HTML5 closer again and take a look at where we stand. We're in good shape, we just need to look at the mirror again.

Published in: Internet, Engineering, Education
  • Be the first to comment

How HTML5 missed its graduation - #TrondheimDC

  1. How HTML5 missed its graduation day DENIED! Chris Heilmann, Trondheim Developer Conference ← there, 27/10/2014
  2. Chris Heilmann @codepo8
  3. From documents to apps.
  4. From “read things” to “do things”
  5. New, exciting and necessary features • Natively supported video and audio • Painting and image manipulation with canvas and WebGL • Offline functionality with appCache, localStorage and indexedDB • Browser history handling with the history API • Richer form controls (ranges, colour pickers, autocomplete, list boxes…) • Simpler DOM access (querySelector, classList, datasets…)
  6. The basics stayed the same: • Interoperable and independent of hardware and browser. • Open standards based. • Backwards compatible with the opportunity to re-use proven best practices. • Simple and forgiving - the parser fixes slight markup issues for you.
  7. “You need a modern browser”
  8. It’s a mobile thing!
  9. Assumptions gone wrong…
  10. Everything is broken when you look at it in detail…
  11. Not official for a long time
  12. The “keeping ourselves clever and ♽ occupied” cycle.
  13. ?
  14. Things we took issue with… • OMG, there are old browsers out there that can not to all of that. • Mobile operating systems are not good at upgrading their browsers. • And don’t get me started on web views! • Experimental implementations differ from browser to browser and environment to environment.
  15. Libraries, Polyfills, Frameworks!
  16. Libraries, Polyfills, Frameworks!
  17. Website obesity is on the rise… 291160 URLs http://httparchive.org/trends.php#bytesTotal&reqTotal
  18. So, how do we fix that?
  19. Professional engineers do these things…
  20. We use abstractions to fix issues in the plumbing of the web and then add more abstractions to undo them. https://www.flickr.com/photos/65609660@N00/2432270195/
  21. This is how we lose touch with the core ideas of the web and its main feature that made it the success it is now…
  22. Simplicity and an incredible low learning curve.
  23. It is not complex… http://millionmoments.net/2013/10/three-ingredient-silly-putty-5-minute-kid-craft.html
  24. When is the time to think in HTML5 and not abstractions?
  25. Recommendation ratification in the making
  26. Exciting things happening in mobile • Safari for IOS8 now with massively improved HTML5 support • Android announced “evergreen web view” • Firefox OS covering almost all of South America and now available in Bangladesh and India
  27. Go and try to solve real issues with technologies in browsers. Stop worrying.
  28. https://www.youtube.com/watch?v=gnbLLQwZxeA
  29. http://removephotodata.com
  30. https://github.com/jseidelin/exif-js/ Make: LGE! Model: Nexus 5! XResolution: 72! YResolution: 72! ResolutionUnit: 2! YCbCrPositioning: 1! ExifIFDPointer: 134! GPSInfoIFDPointer: 462! ExposureTime: 0.009523809523809525! FNumber: 2.4! ISOSpeedRatings: 104! ExifVersion: 0220! DateTimeOriginal: 2014:10:19 17:28:22! DateTimeDigitized: 2014:10:19 17:28:22! ComponentsConfiguration: YCbCr! ShutterSpeedValue: 6.713! ApertureValue: 2.52! ExposureBias: 0! Flash: Flash did not fire! FocalLength: 3.97! FlashpixVersion: 0100! ColorSpace: 1! PixelXDimension: 1944! PixelYDimension: 2592! InteroperabilityIFDPointer: 432
  31. c = document.querySelector('canvas'); cx = c.getContext('2d'); c.width = w = img.naturalHeight; c.height = h = img.naturalWidth; cx.drawImage(img, 0, 0, w, h); ! [EXIF] <a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a>
  32. Keep up-to-date with what is supported and use it. http://caniuse.com/
  33. what if?
  34. if (what) {}
  35. HTML5 is not… • Experimental features of browsers becoming our maintenance problem. -enough-already! • Flash - there is no need to wait for one company to give you an update. • Limited by buggy implementations of browsers. If we encounter them, let’s report them.
  36. Move fast and break nothing!
  37. Chris Heilmann christianheilmann.com @codepo8 chris.heilmann@gmail.com Thank you!

×