+ All Categories
Home > Internet > How HTML5 missed its graduation - #TrondheimDC

How HTML5 missed its graduation - #TrondheimDC

Date post: 06-Dec-2014
Category:
Upload: christian-heilmann
View: 4,175 times
Download: 0 times
Share this document with a friend
Description:
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.
43
How HTML5 missed its graduation day Chris Heilmann, Trondheim Developer Conference there, 27/10/2014 DENIED!
Transcript
Page 1: How HTML5 missed its graduation - #TrondheimDC

How HTML5 missed its graduation day

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

DENIED!

Page 2: How HTML5 missed its graduation - #TrondheimDC

@codepo8

Chris Heilmann

Page 3: How HTML5 missed its graduation - #TrondheimDC

Page 4: How HTML5 missed its graduation - #TrondheimDC

From documents to apps.

Page 5: How HTML5 missed its graduation - #TrondheimDC

From “read things” to “do things”

Page 6: How HTML5 missed its graduation - #TrondheimDC

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

Page 7: How HTML5 missed its graduation - #TrondheimDC

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.

Page 8: How HTML5 missed its graduation - #TrondheimDC

Page 9: How HTML5 missed its graduation - #TrondheimDC
Page 10: How HTML5 missed its graduation - #TrondheimDC

“You need a modern browser”

Page 11: How HTML5 missed its graduation - #TrondheimDC

It’s a mobile thing!

Page 12: How HTML5 missed its graduation - #TrondheimDC

Assumptions gone wrong…

Page 13: How HTML5 missed its graduation - #TrondheimDC

Everything is broken when you look at it in detail…

Page 14: How HTML5 missed its graduation - #TrondheimDC

Not official for a long time

Page 15: How HTML5 missed its graduation - #TrondheimDC

♽The “keeping ourselves clever and occupied” cycle.

Page 16: How HTML5 missed its graduation - #TrondheimDC

?

Page 17: How HTML5 missed its graduation - #TrondheimDC

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.

Page 18: How HTML5 missed its graduation - #TrondheimDC

Libraries, Polyfills, Frameworks!

Page 19: How HTML5 missed its graduation - #TrondheimDC

Libraries, Polyfills, Frameworks!

Page 20: How HTML5 missed its graduation - #TrondheimDC

Website obesity is on the rise…

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

Page 21: How HTML5 missed its graduation - #TrondheimDC

So, how do we fix that?

Page 22: How HTML5 missed its graduation - #TrondheimDC

Professional engineers do these things…

Page 23: How HTML5 missed its graduation - #TrondheimDC

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/

Page 24: How HTML5 missed its graduation - #TrondheimDC

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…

Page 25: How HTML5 missed its graduation - #TrondheimDC

Simplicity and an incredible low learning curve.

Page 26: How HTML5 missed its graduation - #TrondheimDC

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

It is not complex…

Page 27: How HTML5 missed its graduation - #TrondheimDC

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

Page 28: How HTML5 missed its graduation - #TrondheimDC
Page 29: How HTML5 missed its graduation - #TrondheimDC
Page 30: How HTML5 missed its graduation - #TrondheimDC
Page 31: How HTML5 missed its graduation - #TrondheimDC

Recommendation ratification in the making

Page 32: How HTML5 missed its graduation - #TrondheimDC

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

Page 33: How HTML5 missed its graduation - #TrondheimDC

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

Page 34: How HTML5 missed its graduation - #TrondheimDC

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

Page 35: How HTML5 missed its graduation - #TrondheimDC

http://removephotodata.com

Page 36: How HTML5 missed its graduation - #TrondheimDC

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

Page 37: How HTML5 missed its graduation - #TrondheimDC

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]

Page 38: How HTML5 missed its graduation - #TrondheimDC

Keep up-to-date with what is supported and use it.

http://caniuse.com/

Page 39: How HTML5 missed its graduation - #TrondheimDC

what if?

Page 40: How HTML5 missed its graduation - #TrondheimDC

if (what) {}

Page 41: How HTML5 missed its graduation - #TrondheimDC

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.

Page 42: How HTML5 missed its graduation - #TrondheimDC

Move fast and break nothing!


Recommended