what if everything is awesome? codemotion madrid 2014

64
WHAT IF EVERYTHING *IS* AWESOME? Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014

Upload: christian-heilmann

Post on 01-Jul-2015

4.049 views

Category:

Education


1 download

DESCRIPTION

As developers, we always have to battle people and media overselling what we do. Just because we use things other people don't understand doesn't mean we use magic. Yet if you look at any "near future" video of cool technology everything is incredibly smooth. We, on the other hand, seem to be far too excited about things breaking and trying to find solutions for any problem - no matter how unlikely it is to happen. In this keynote Chris Heilmann wants to remind us about what we have, what we can do and just how amazing our work really is. And what we can do to keep it like that.

TRANSCRIPT

Page 1: What if everything is awesome? Codemotion Madrid 2014

WHAT IF EVERYTHING *IS* AWESOME?

Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014

Page 2: What if everything is awesome? Codemotion Madrid 2014
Page 3: What if everything is awesome? Codemotion Madrid 2014
Page 4: What if everything is awesome? Codemotion Madrid 2014
Page 5: What if everything is awesome? Codemotion Madrid 2014
Page 6: What if everything is awesome? Codemotion Madrid 2014
Page 7: What if everything is awesome? Codemotion Madrid 2014
Page 8: What if everything is awesome? Codemotion Madrid 2014
Page 9: What if everything is awesome? Codemotion Madrid 2014
Page 10: What if everything is awesome? Codemotion Madrid 2014
Page 11: What if everything is awesome? Codemotion Madrid 2014
Page 12: What if everything is awesome? Codemotion Madrid 2014
Page 13: What if everything is awesome? Codemotion Madrid 2014
Page 14: What if everything is awesome? Codemotion Madrid 2014
Page 15: What if everything is awesome? Codemotion Madrid 2014
Page 16: What if everything is awesome? Codemotion Madrid 2014

CARE ABOUT SCIENCE? YOU NERD!!!!

Page 17: What if everything is awesome? Codemotion Madrid 2014
Page 18: What if everything is awesome? Codemotion Madrid 2014

ROCKSTAR • 💩

Page 19: What if everything is awesome? Codemotion Madrid 2014

DAILY FRUSTRATIONS…

Page 20: What if everything is awesome? Codemotion Madrid 2014

USERS HAVE AND EXERCISE THE RIGHT TO DO THINGS DIFFERENTLY THAN WE EXPECT…

Page 21: What if everything is awesome? Codemotion Madrid 2014

NOTHING MUCH HAPPENS WHEN WE MESS UP…

Page 22: What if everything is awesome? Codemotion Madrid 2014

A CONSTANT CALL FOR “PROFESSIONALISM” AND “MODERN WEB WORKFLOW”

Page 23: What if everything is awesome? Codemotion Madrid 2014

THE WEB NEEDS A CONTAINER FORMAT FOR APPS…

https://www.etsy.com/uk/listing/175222880/banana-holder-brown

Page 24: What if everything is awesome? Codemotion Madrid 2014

THE STATE OF APPS…

http://www.w3.org/2014/07/mobile-web-app-state/

Page 25: What if everything is awesome? Codemotion Madrid 2014

GREAT CODE IS GENERIC CODE?

https://medium.com/@fredriknoren/on-generalization-608949214e63

Page 26: What if everything is awesome? Codemotion Madrid 2014

PRE-PEELED BANANAS?

Page 27: What if everything is awesome? Codemotion Madrid 2014

A TENDENCY TO RE-CREATE INSTEAD OF IMPROVING…

Page 28: What if everything is awesome? Codemotion Madrid 2014

LET’S MAKE A STATIC SITE IN 2014…

Page 29: What if everything is awesome? Codemotion Madrid 2014

ADDING LAYERS AND LAYERS OF ABSTRACTION AND TOOLING…

Page 30: What if everything is awesome? Codemotion Madrid 2014

THE REAL DEVELOPMENT PROCESS TENDS TO LOOK DIFFERENTLY.

Page 31: What if everything is awesome? Codemotion Madrid 2014

PERFORMANCE

Page 32: What if everything is awesome? Codemotion Madrid 2014

WEBSITE OBESITY IS NOT UNCOMMON…

Page 33: What if everything is awesome? Codemotion Madrid 2014

HOW SLOW ARE WE?

http://www.webpagetest.org/

Page 34: What if everything is awesome? Codemotion Madrid 2014

HOW SLOW ARE WE? http://www.webpagetest.org/

Page 35: What if everything is awesome? Codemotion Madrid 2014
Page 36: What if everything is awesome? Codemotion Madrid 2014
Page 37: What if everything is awesome? Codemotion Madrid 2014
Page 38: What if everything is awesome? Codemotion Madrid 2014
Page 39: What if everything is awesome? Codemotion Madrid 2014
Page 40: What if everything is awesome? Codemotion Madrid 2014

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

PERFORMANCE TOOLS AND TESTING…

Page 41: What if everything is awesome? Codemotion Madrid 2014

AMAZING TECH AVAILABLE NOW…

Page 42: What if everything is awesome? Codemotion Madrid 2014

BROWSERS ARE CONSUMPTION AND CREATION TOOLS.

Page 43: What if everything is awesome? Codemotion Madrid 2014

BROWSERS ARE EMULATORS AND REMOTE DEBUGGERS OF CONNECTED DEVICES.

Page 44: What if everything is awesome? Codemotion Madrid 2014

WHAT ABOUT OUTDATED BROWSERS?

Page 45: What if everything is awesome? Codemotion Madrid 2014

<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

https://cdn.polyfill.io/v1/docs/features/

POLYFILL AS A SERVICE!

Page 46: What if everything is awesome? Codemotion Madrid 2014

http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/

GETTING VERY FLEXIBLE

Page 47: What if everything is awesome? Codemotion Madrid 2014

*, *:before, *:after { -moz-box-sizing: inherit; box-sizing: inherit;}!html { -moz-box-sizing: border-box; box-sizing: border-box;}!body { padding: 20px; font: 100% sans-serif;}!.bar { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; background: #eee; padding: 20px; margin: 0 0 20px 0;}

Page 48: What if everything is awesome? Codemotion Madrid 2014

margin: 0 0 20px 0;}.bar > * { margin: 0 10px;}!.icon { width: 30px; height: 30px; background: #ccc; border-radius: 50%;}!.search { -webkit-flex: 1; -ms-flex: 1; flex: 1;}.search input { width: 100%;}!.bar-2 .username { -webkit-order: 2; -ms-flex-order: 2; order: 2;}.bar-2 .icon-3 {

Page 49: What if everything is awesome? Codemotion Madrid 2014

}.bar-2 .icon-3 { -webkit-order: 3; -ms-flex-order: 3; order: 3;}!.bar-3 .search { -webkit-order: -1; -ms-flex-order: -1; order: -1;}.bar-3 .username { -webkit-order: 1; -ms-flex-order: 1; order: 1;}!.no-flexbox .bar { display: table; border-spacing: 15px; padding: 0;}.no-flexbox .bar > * { display: table-cell; vertical-align: middle; white-space: nowrap;}

Page 50: What if everything is awesome? Codemotion Madrid 2014

white-space: nowrap;}.no-flexbox .username { width: 1px;}!@media (max-width: 650px) { .bar { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }! .icon { -webkit-order: 0 !important; -ms-flex-order: 0 !important; order: 0 !important; }! .username { -webkit-order: 1 !important; -ms-flex-order: 1 !important; order: 1 !important; width: 100%; margin: 15px; }! .search {

Page 51: What if everything is awesome? Codemotion Madrid 2014

! .search { -webkit-order: 2 !important; -ms-flex-order: 2 !important; order: 2 !important; width: 100%; }}

Page 52: What if everything is awesome? Codemotion Madrid 2014

WEBRTC, WEBGL, WEB AUDIO AND MANY MORE THINGS ARE POINTING TO A HIGH FIDELITY WEB…

Page 53: What if everything is awesome? Codemotion Madrid 2014

https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcTpMS4

TOWARDS AN OFFLINE WEB: SERVICEWORKER

Page 54: What if everything is awesome? Codemotion Madrid 2014

NO MORE SECRETS: WEB COMPONENTS AND SHADOW DOM

Page 55: What if everything is awesome? Codemotion Madrid 2014

http://www.futureinsights.com/home/the-state-of-the-componentised-web.html

Page 56: What if everything is awesome? Codemotion Madrid 2014

THINGS TO DO FOR YOU

Page 57: What if everything is awesome? Codemotion Madrid 2014

LET’S AIM TO BUILD SOLID FOUNDATIONS OF SMALL BITS OF WORKING CODE.

Page 58: What if everything is awesome? Codemotion Madrid 2014

Hating JavaScript is like hating the Internet. The Internet is a cobweb of different technologies cobbled together with duct tape, string and chewing gum. It's not elegantly designed in any way, because it's more of a growing organism than it is a machine constructed with intent.

http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson

Mattias Petter Johansson, Spotify

TODAY’S TECH ISN’T GOING AWAY…

Page 59: What if everything is awesome? Codemotion Madrid 2014

If you build a web app today, it will run in browsers 10 years from now. Good luck trying the same with your favorite mobile OS (excluding Firefox OS).

http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/

Paul Bakaus, Google (ex. Zynga)

IT IS BUILT TO LAST!

Page 60: What if everything is awesome? Codemotion Madrid 2014

If you enable people world-wide to get a good experience and solve a problem they have, I like it. The technology you use is not the important part. How much you lock them in is. Don’t lock people in.

“IT IS BEAUTIFUL!

Christian Heilmann

Page 61: What if everything is awesome? Codemotion Madrid 2014

DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER

Page 62: What if everything is awesome? Codemotion Madrid 2014

TALK LIVE!

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

Page 63: What if everything is awesome? Codemotion Madrid 2014

DON’T FORGET: THE HUMANS AROUND YOU ARE THE DRIVING FORCE. TREAT THEM NICE AND WITH RESPECT.

Page 64: What if everything is awesome? Codemotion Madrid 2014

Chris Heilmannchristianheilmann.com @codepo8

Thank you!