WHAT IF EVERYTHING *IS* AWESOME?

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

CARE ABOUT SCIENCE? YOU NERD!!!!

ROCKSTAR • 💩

DAILY FRUSTRATIONS…

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

NOTHING MUCH HAPPENS WHEN WE MESS UP…

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

THE WEB NEEDS A CONTAINER FORMAT FOR APPS…

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

THE STATE OF APPS…

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

GREAT CODE IS GENERIC CODE?

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

PRE-PEELED BANANAS?

A TENDENCY TO RE-CREATE INSTEAD OF IMPROVING…

LET’S MAKE A STATIC SITE IN 2014…

ADDING LAYERS AND LAYERS OF ABSTRACTION AND TOOLING…

THE REAL DEVELOPMENT PROCESS TENDS TO LOOK DIFFERENTLY.

PERFORMANCE

WEBSITE OBESITY IS NOT UNCOMMON…

HOW SLOW ARE WE?

http://www.webpagetest.org/

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

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

PERFORMANCE TOOLS AND TESTING…

AMAZING TECH AVAILABLE NOW…

BROWSERS ARE CONSUMPTION AND CREATION TOOLS.

BROWSERS ARE EMULATORS AND REMOTE DEBUGGERS OF CONNECTED DEVICES.

WHAT ABOUT OUTDATED BROWSERS?

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

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

POLYFILL AS A SERVICE!

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

GETTING VERY FLEXIBLE

*, *: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;}

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 {

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

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 {

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

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

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

TOWARDS AN OFFLINE WEB: SERVICEWORKER

NO MORE SECRETS: WEB COMPONENTS AND SHADOW DOM

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

THINGS TO DO FOR YOU

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

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…

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!

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

DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER

TALK LIVE!

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

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

Chris Heilmannchristianheilmann.com @codepo8

Thank you!