The State Of The Web

Transcript

1. The State Of The Web

2. What a terrible year!

3. None

4. 1968

5. None

6. Anders Borman Lovell

7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None
15. None
16. None
17. None

18. Oh my God! Look at that picture over there! Th

    ere’s the Earth coming up. Wow! Th at’s pretty! Hey, don’t take that, it’s not scheduled. 😉 You got a colour fi lm, Jim? Hand me that roll of colour quick, would you… Oh, man! Th at’s… Quick! Quick!
19. None
20. None
21. None
22. None
23. None
24. None

25. Vannevar Bush

26. Vannevar Bush

27. memex

28. memex hypertext

29. Ted Nelson hypertext

30. Tim Berners-Lee

31. Douglas Engelbart

32. None

33. networks

34. arpanet

35. arpanet

36. arpanet

37. internet

38. hypertext + internet

39. World Wide Web

40. None
41. None
42. None
43. None

44. #663399

45. #663398

46. #663399

47. rgb(102,51,153)

48. rgba(102,51,153,1)

49. hsl(270,50%,40%)

50. hsla(270,50%,40%,1)

51. hwb()

52. hwb() lab()

53. hwb() lab() lch()

54. color()

55. None

56. sans-serif

57. sans-serif

58. sans-serif

59. serif

60. serif

61. None
62. None

63. text-indent: -1000px ; background: url(bg.gif);

64. sIFR

65. cufón

66. None

67. It is not done well but you are surprised to

    fi nd it done at all.” “

68. EOT

69. None

70. WOFF

71. WOFF2

72. None
73. None

74. regular bold italic light extra bold

75. None
76. None

77. variable fonts

78. 100 Thin 200 Extra Light 300 Light 400 Normal 500

    Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold

79. —Håkon Wium Lee One of the reasons we chose to

    use three-digit numbers was to support intermediate values in the future.” “

80. —Håkon Wium Lee And the future is now :)” “

81. font-family: your-choice ; font-weight: 467;

82. None

83. <icon>

84. <embed>

85. <a href="…"> rel="embed">

86. <img>

87. <img src="…">

88. <img src="…"> … </img>

89. <img src="…" alt="…">

90. JPG

91. GIF

92. PNG

93. Flash

94. SVG

95. 2001

96. 2011

97. WebP

98. AVIF

99. <img src="…" alt="…" srcset="…">

100. <img src="…" alt="…" loading="lazy">

101. <audio src="…"> … </audio>

102. <video src="…"> … </video>

103. <audio> <video>

104. None

105. Flash

106. None

107. animation vector graphics video

108. None

109. font centre width height

110. <table> <img src="spacer.gif">

111. None

112. CSS

113. fl oat: left

114. None

115. 640px

116. 640px 800px

117. 640px 800px 960px

118. None

119. %

120. % 640px 800px 960px

121. @media all and (…)

122. @media %

123. responsive

124. responsive

125. fl exbox grid

126. fl exbox grid SVG web fonts animation video

127. None

128. HTML5

129. None
130. None

131. —Tim Berners-Lee Th e problem is that of programming language.

     You need something really powerful, but at the same time ubiquitous. Remember a facet of the web is uni v ersal readership. Th ere is no uni v ersal interpreted programming language.” “
132. None

133. LiveScript

134. JavaScript

135. DHTML

136. document.layers() document.all()

137. None

138. DOM

139. document.getElementById() document.getElementsByTagName()

140. #id { … } element { … }

141. $('#id') $('element')

142. document.querySelector() document.querySelectorAll()

143. None

144. Sass

145. poly fi lls

146. None

147. APIs

148. native apps

149. geolocation input type="image" web noti fi cations service workers

150. None

151. —Ire Aderinokun By the end of the year, I would

     predict that any major native mobile application could be instead built using native web capabilities/APIs.” “

152. fl oats hex system fonts

153. fl oats hex system fonts rgba fl exbox web fonts

     hsla grid variable fonts ajax media queries svg

154. fl oats hex system fonts rgba fl exbox web fonts

     hsla grid variable fonts ajax media queries geolocation device APIs service workers noti fi cations svg web components houdini
155. None
156. None
157. None

158. advertising

159. behavioural advertising

160. contextual advertising

161. behavioural advertising

162. tracking

163. None

164. stateless

165. cookies JavaScript

166. cookies JavaScript third-party

167. stateful

168. tracking blockers

169. advertising blockers

170. websites

171. websites web apps

172. single page apps

173. rendering routing responding

174. complexity

175. <select> <input type="date">

176. <button>

177. software

178. dependencies

179. expectations

180. expectations

181. expectations

182. intentions

183. verschlimmbessern

184. None

185. user needs

186. —Rachel Andrew Stop sol v ing problems you don’t yet

     have.” “

187. poly fi lls

188. developer convenience

189. developer convenience user needs

190. expectations

191. None
192. None
193. None

194. —Zeynep Tüfekçi If you have something wonderful, if you do

     not defend it, you will lose it.” “

195. If you have something wonderful, if you do not defend

     it, you will lose it.”
196. None
197. None
198. None
199. None
200. None

201. I’m helping put a man on the moon.” “

202. None
203. None

204. thank you