Don't Panic @ Fronteers Conference 2017

10 years is a long time. You can change the world in less. So what have we done over the last decade? And more importantly, what lessons have we learned?

Transcript

1. don't panic
   don't panic
   

   View Slide

2. don't panic
   don't panic
   

   View Slide

3. don't panic
   don't panic
   

   View Slide

4. don't panic
   don't panic
   

   View Slide

5. don't panic
   don't panic
   

   View Slide

6. chriet titulaer

   1943 — 2017
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. wubbo ockels

    1946 — 2014
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. 110 meters tall
    

    View Slide

16. 2.58 km/s
    top speed
    

    View Slide

17. 384,400 km from home
    

    View Slide

18. 384,400
    

    View Slide

19. 384,400 almost identical websites
    B
    

    View Slide

20. View Slide

21. BREAK THE INTERNET
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. always bet 

    on the web
    

    View Slide

39. the golden age 

    of frontend 

    development
    

    View Slide

40. platforms
    

    View Slide

41. platforms
    

    View Slide

42. platforms
    

    View Slide

43. platforms
    

    View Slide

44. platforms
    

    View Slide

45. compatiblity
    

    View Slide

46. View Slide

47. View Slide

48. developer tools
    

    View Slide

49. frameworks
    

    View Slide

50. frameworks
    dhtml
    

    View Slide

51. frameworks
    prototype
    

    View Slide

52. frameworks
    mootools
    

    View Slide

53. frameworks
    jquery
    

    View Slide

54. frameworks
    yui
    

    View Slide

55. frameworks
    dojo
    

    View Slide

56. frameworks
    ext
    

    View Slide

57. frameworks
    flex
    

    View Slide

58. frameworks
    flex?
    

    View Slide

59. frameworks
    flex
    

    View Slide

60. frameworks
    unified
    

    View Slide

61. frameworks
    amber.js
    

    View Slide

62. frameworks
    bootstrap
    

    View Slide

63. frameworks
    backbone.js
    

    View Slide

64. frameworks
    nuclear.js
    

    View Slide

65. frameworks
    knockout.js
    

    View Slide

66. frameworks
    angular-js
    

    View Slide

67. frameworks
    angular 2
    

    View Slide

68. frameworks
    sencha touch
    

    View Slide

69. frameworks
    vanilla js
    

    View Slide

70. frameworks
    polymer
    

    View Slide

71. frameworks
    react
    

    View Slide

72. frameworks
    preact
    

    View Slide

73. frameworks
    vue
    

    View Slide

74. frameworks
    hyperhtml
    

    View Slide

75. frameworks
    

    View Slide

76. View Slide

77. features
    

    View Slide

78. features
    

    View Slide

79. features
    dom
    html tokeniser and tree builder, svg without
    plugins and inline in html5, custom elements,
    shadow dom and templates
    

    View Slide

80. features
    elements
    new semantic elements like section, nav, article,
    aside, header, footer and more, new form fields
    types for search, telephone numbers, urls, email,
    dates, month, week, time, number, range and
    color
    

    View Slide

81. features
    video
    the video element, subtitles, track selection, 

    video streaming and drm plugins
    

    View Slide

82. features
    audio
    the audio element, generating audio using 

    web audio, speech recognition and 

    speech synthesis
    

    View Slide

83. features
    graphics
    responsive images, improvements to canvas,
    web animation, requestanimationframe, webgl
    and webvr
    

    View Slide

84. features
    storage
    web sql database and indexeddb
    

    View Slide

85. features
    network
    server send event, beacon, fetch, web sockets,
    streams, webrtc, peer to peer messaging, csp
    and sub resource integrity
    

    View Slide

86. features
    devices
    gamepad control, pointer lock, access to the
    webcam, device motion, device orientation,
    sensor api, web bluetooth and web usb
    

    View Slide

87. features
    offline support
    service workers, cache api, push messages
    

    View Slide

88. features
    scripting
    mutations observer, url api, encoding api,
    modules, classes, arrow functions, promises,
    template strings, typed arrays,
    internationalisation, async and await
    

    View Slide

89. features
    css
    gradients, transforms, transition, animations,
    shadow, fonts, media queries, selectors, flex
    box, grid
    

    View Slide

90. features
    

    View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. goodbye

    internet 

    explorer
    

    View Slide

96. internet explorer

    is a good browser
    

    View Slide

97. internet explorer 6

    is a good browser
    

    View Slide

98. internet explorer 6

    is a great browser
    

    View Slide

99. internet explorer 6

    is a great browser
    (15 years ago)
    

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. it's okay to build 

     a website that 

     doesn't work without

     javascript
     

     View Slide

105. View Slide

106. View Slide

107. the tinfoil hat

     approach to

     javascript
     

     View Slide

108. the tinfoil hat

     approach to

     javascript
     developers, 

     developers,

     developers
     

     View Slide

109. progressive 

     enhancement
     

     View Slide

110. View Slide

111. View Slide

112. a bad 

     user experience 

     is just bad
     

     View Slide

113. it's okay to build 

     a websiteapp that 

     doesn't work without

     javascript
     

     View Slide

114. the web consists of 

     three pillars and

     javascript 

     is one of them
     

     View Slide

115. users over authors 

     over implementors 

     over specifiers over
     theoretical purity
     – w3c html5 design principles
     

     View Slide

116. View Slide

117. browser

     diversity
     

     View Slide

118. View Slide

119. View Slide

120. View Slide

121. View Slide

122. View Slide

123. best viewed with
     

     View Slide

124. we don't develop

     for browsers...

     

     we develop for

     the web
     

     View Slide

125. ten good 

     things about 

     bootstrap
     

     View Slide

126. #1
     consistency
     

     View Slide

127. cheap
     #2
     

     View Slide

128. free
     #2
     

     View Slide

129. cheap
     #3
     

     View Slide

130. easy
     #4
     

     View Slide

131. #5
     

     View Slide

132. View Slide

133. delight your 

     users
     

     View Slide

134. make things 

     a little bit 

     better
     

     View Slide

135. experiment
     

     View Slide

136. be happy
     

     View Slide

137. View Slide