Chris Heilmann discusses the challenges and misconceptions surrounding HTML5, highlighting its advanced features like native media support, offline functionality, and richer form controls. He emphasizes the ongoing issues with browser compatibility and the reliance on abstractions that complicate the web's original simplicity. The talk encourages developers to focus on real-world problems and embrace the improvements in mobile browser support while being vigilant about outdated practices.

1. How HTML5 missed its graduation day
DENIED!
Chris Heilmann, Trondheim Developer Conference ← there, 27/10/2014

2. Chris Heilmann
@codepo8

3. •

4. From documents to apps.

5. From “read things” to “do things”

6. 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…)

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

8. •

10. “You need a modern browser”

11. It’s a mobile thing!

12. Assumptions gone wrong…

13. Everything is broken
when you look at it in
detail…

14. Not official for a long time

15. The “keeping ourselves clever and
♽
occupied” cycle.

16. ?

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

18. Libraries, Polyfills, Frameworks!

19. Libraries, Polyfills, Frameworks!

20. Website obesity is on the rise…
291160 URLs
http://httparchive.org/trends.php#bytesTotal&reqTotal

21. So, how do we fix that?

22. Professional engineers do these things…

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

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

25. Simplicity and an incredible low
learning curve.

26. It is not complex…
http://millionmoments.net/2013/10/three-ingredient-silly-putty-5-minute-kid-craft.html

27. When is the time to think in HTML5
and not abstractions?

31. Recommendation ratification in the making

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

33. Go and try to solve real issues with
technologies in browsers.
Stop worrying.

34. https://www.youtube.com/watch?v=gnbLLQwZxeA

35. http://removephotodata.com

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

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

38. Keep up-to-date with what is
supported and use it.
http://caniuse.com/

39. what if?

40. if (what) {}

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

42. Move fast and break nothing!

43. Chris Heilmann
christianheilmann.com
@codepo8
chris.heilmann@gmail.com
Thank you!