Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WHAT IF EVERYTHIN G *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/
PERFORMANCE TOOLS AND TESTING… 
https://www.youtube.com/watch?v=FEs2jgZBaQA
AMAZING TECH 
AVAILABLE NOW…
BROWSERS ARE 
CONSUMPTION AND 
CREATION TOOLS.
BROWSERS ARE 
EMULATORS AND 
REMOTE DEBUGGERS 
OF CONNECTED 
DEVICES.
WHAT ABOUT 
OUTDATED 
BROWSERS?
POLYFILL AS A SERVICE! 
https://cdn.polyfill.io/v1/docs/features/ 
<script src="//cdn.polyfill.io/v1/polyfill.min.js" asyn...
GETTING VERY FLEXIBLE 
http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/
*, *:before, *:after { 
-moz-box-sizing: inherit; 
box-sizing: inherit; 
} 
! 
html { 
-moz-box-sizing: border-box; 
box-s...
margin: 0 0 20px 0; 
} 
.bar > * { 
margin: 0 10px; 
} 
! 
.icon { 
width: 30px; 
height: 30px; 
background: #ccc; 
border...
} 
.bar-2 .icon-3 { 
-webkit-order: 3; 
-ms-flex-order: 3; 
order: 3; 
} 
! 
.bar-3 .search { 
-webkit-order: -1; 
-ms-fle...
white-space: nowrap; 
} 
.no-flexbox .username { 
width: 1px; 
} 
! 
@media (max-width: 650px) { 
.bar { 
-webkit-flex-wra...
! 
.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…
TOWARDS AN OFFLINE WEB: SERVICEWORKER 
https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcT...
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.
TODAY’S TECH ISN’T GOING AWAY… 
Hating JavaScript is like hating the Internet. 
The Internet is a cobweb of different 
tec...
IT IS BUILT TO LAST! 
If you build a web app today, it will run in 
browsers 10 years from now. Good luck 
trying the same...
IT IS BEAUTIFUL! 
If you enable people world-wide to 
get a good experience and solve a 
problem they have, I like it. The...
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 Heilmann 
christianheilmann.com 
@codepo8 
Thank you!
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
What if everything is awesome? Codemotion Madrid 2014
Upcoming SlideShare
Loading in …5
×

What if everything is awesome? Codemotion Madrid 2014

5,061 views

Published on

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.

Published in: Education

What if everything is awesome? Codemotion Madrid 2014

  1. 1. WHAT IF EVERYTHIN G *IS* AWESOME? Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014
  2. 2. CARE ABOUT SCIENCE? YOU NERD!!!!
  3. 3. ROCKSTAR &BULL; 💩
  4. 4. DAILY FRUSTRATIONS…
  5. 5. USERS HAVE AND EXERCISE THE RIGHT TO DO THINGS DIFFERENTLY THAN WE EXPECT…
  6. 6. NOTHING MUCH HAPPENS WHEN WE MESS UP…
  7. 7. A CONSTANT CALL FOR “PROFESSIONALISM” AND “MODERN WEB WORKFLOW”
  8. 8. THE WEB NEEDS A CONTAINER FORMAT FOR APPS… https://www.etsy.com/uk/listing/175222880/banana-holder-brown
  9. 9. THE STATE OF APPS… http://www.w3.org/2014/07/mobile-web-app-state/
  10. 10. GREAT CODE IS GENERIC CODE? https://medium.com/@fredriknoren/on-generalization-608949214e63
  11. 11. PRE-PEELED BANANAS?
  12. 12. A TENDENCY TO RE-CREATE INSTEAD OF IMPROVING…
  13. 13. LET’S MAKE A STATIC SITE IN 2014…
  14. 14. ADDING LAYERS AND LAYERS OF ABSTRACTION AND TOOLING…
  15. 15. THE REAL DEVELOPMENT PROCESS TENDS TO LOOK DIFFERENTLY.
  16. 16. PERFORMANCE
  17. 17. WEBSITE OBESITY IS NOT UNCOMMON…
  18. 18. HOW SLOW ARE WE? http://www.webpagetest.org/
  19. 19. HOW SLOW ARE WE? http://www.webpagetest.org/
  20. 20. PERFORMANCE TOOLS AND TESTING… https://www.youtube.com/watch?v=FEs2jgZBaQA
  21. 21. AMAZING TECH AVAILABLE NOW…
  22. 22. BROWSERS ARE CONSUMPTION AND CREATION TOOLS.
  23. 23. BROWSERS ARE EMULATORS AND REMOTE DEBUGGERS OF CONNECTED DEVICES.
  24. 24. WHAT ABOUT OUTDATED BROWSERS?
  25. 25. POLYFILL AS A SERVICE! https://cdn.polyfill.io/v1/docs/features/ <script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
  26. 26. GETTING VERY FLEXIBLE http://css-tricks.com/flexbox-nav-bar-fixed-variable-take-rest-elements/
  27. 27. *, *: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; }
  28. 28. 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 {
  29. 29. } .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; }
  30. 30. 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 {
  31. 31. ! .search { -webkit-order: 2 !important; -ms-flex-order: 2 !important; order: 2 !important; width: 100%; } }
  32. 32. WEBRTC, WEBGL, WEB AUDIO AND MANY MORE THINGS ARE POINTING TO A HIGH FIDELITY WEB…
  33. 33. TOWARDS AN OFFLINE WEB: SERVICEWORKER https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcTpMS4
  34. 34. NO MORE SECRETS: WEB COMPONENTS AND SHADOW DOM
  35. 35. http://www.futureinsights.com/home/the-state-of-the-componentised-web.html
  36. 36. THINGS TO DO FOR YOU
  37. 37. LET’S AIM TO BUILD SOLID FOUNDATIONS OF SMALL BITS OF WORKING CODE.
  38. 38. TODAY’S TECH ISN’T GOING AWAY… 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. “ Mattias Petter Johansson, Spotify http://www.quora.com/Why-is-JavaScript-the-only-client-side-language-available/answer/Mattias-Petter-Johansson
  39. 39. IT IS BUILT TO LAST! 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). “ Paul Bakaus, Google (ex. Zynga) http://paulbakaus.com/2014/08/26/the-web-is-built-to-last/
  40. 40. IT IS BEAUTIFUL! 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. “ Christian Heilmann
  41. 41. DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER
  42. 42. TALK LIVE! https://www.youtube.com/watch?v=hC9sXz3tRow
  43. 43. DON’T FORGET: THE HUMANS AROUND YOU ARE THE DRIVING FORCE. TREAT THEM NICE AND WITH RESPECT.
  44. 44. Chris Heilmann christianheilmann.com @codepo8 Thank you!

×