How HTML5 missed its graduation day

Chris Heilmann, Trondheim Developer Conference ← there, 27/10/2014

DENIED!

@codepo8

Chris Heilmann

•

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

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.

•

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

Libraries, Polyfills, Frameworks!

Libraries, Polyfills, Frameworks!

Website obesity is on the rise…

http://httparchive.org/trends.php#bytesTotal&reqTotal291160 URLs

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.flickr.com/photos/65609660@N00/2432270195/

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.

http://millionmoments.net/2013/10/three-ingredient-silly-putty-5-minute-kid-craft.html

It is not complex…

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 “evergreen web view” • Firefox OS covering almost all of South America

and now available in Bangladesh and India

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

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);!

<a href="' + c.toDataURL('image/jpeg', 0.9) + '" '+ 'download="' + dlname + '">Download clean image</a>

[EXIF]

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

Move fast and break nothing!

Chris Heilmannchristianheilmann.com@codepo8chris.heilmann@gmail.com

Thank you!