1. WHAT IF EVERYTHIN G *IS* AWESOME?
Chris Heilmann (@codepo8) - Codemotion Madrid, November 2014

16. CARE ABOUT SCIENCE? YOU NERD!!!!

18. ROCKSTAR • 💩

19. DAILY FRUSTRATIONS…

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

21. NOTHING MUCH
HAPPENS WHEN WE
MESS UP…

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

23. THE WEB NEEDS A
CONTAINER FORMAT FOR
APPS…
https://www.etsy.com/uk/listing/175222880/banana-holder-brown

24. THE STATE OF APPS…
http://www.w3.org/2014/07/mobile-web-app-state/

25. GREAT CODE IS
GENERIC CODE?
https://medium.com/@fredriknoren/on-generalization-608949214e63

26. PRE-PEELED BANANAS?

27. A TENDENCY TO RE-CREATE
INSTEAD OF
IMPROVING…

28. LET’S MAKE A STATIC SITE IN 2014…

29. ADDING LAYERS AND
LAYERS OF ABSTRACTION
AND TOOLING…

30. THE REAL
DEVELOPMENT
PROCESS TENDS TO
LOOK DIFFERENTLY.

31. PERFORMANCE

32. WEBSITE OBESITY IS
NOT UNCOMMON…

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

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

40. PERFORMANCE TOOLS AND TESTING…
https://www.youtube.com/watch?v=FEs2jgZBaQA

41. AMAZING TECH
AVAILABLE NOW…

42. BROWSERS ARE
CONSUMPTION AND
CREATION TOOLS.

43. BROWSERS ARE
EMULATORS AND
REMOTE DEBUGGERS
OF CONNECTED
DEVICES.

44. WHAT ABOUT
OUTDATED
BROWSERS?

45. POLYFILL AS A SERVICE!
https://cdn.polyfill.io/v1/docs/features/
<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

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

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

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

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

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

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

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

53. TOWARDS AN OFFLINE WEB: SERVICEWORKER
https://www.youtube.com/watch?v=4uQMl7mFB6g https://www.youtube.com/watch?v=SmZ9XcTpMS4

54. NO MORE SECRETS:
WEB COMPONENTS
AND SHADOW DOM

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

56. THINGS TO DO FOR YOU

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

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

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

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

61. DON’T TRY TO EXPLAIN, SHOW AND FIX TOGETHER

62. TALK LIVE!
https://www.youtube.com/watch?v=hC9sXz3tRow

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

64. Chris Heilmann
christianheilmann.com
@codepo8
Thank you!