The State Of The Web

The opening presentation from An Event Apart Spring Summit held online in April 2021.

https://adactio.com/articles/18580

Transcript

1. The State Of The Web
2. What a terrible year!
6. Anders Borman Lovell
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!
25. Vannevar Bush
26. Vannevar Bush
27. memex
28. memex hypertext
29. Ted Nelson hypertext
30. Tim Berners-Lee
31. Douglas Engelbart
33. networks
34. arpanet
35. arpanet
36. arpanet
37. internet
38. hypertext + internet
39. World Wide Web
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()
56. sans-serif
57. sans-serif
58. sans-serif
59. serif
60. serif
63. text-indent: -1000px ; background: url(bg.gif);
64. sIFR
65. cufón
67. It is not done well but you are surprised to fi nd it done at all.” “
68. EOT
70. WOFF
71. WOFF2
74. regular bold italic light extra bold
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;
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
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>
105. Flash
107. animation vector graphics video
109. font centre width height
110. <table> <img src="spacer.gif">
112. CSS
113. fl oat: left
115. 640px
116. 640px 800px
117. 640px 800px 960px
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
128. HTML5
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.” “
133. LiveScript
134. JavaScript
135. DHTML
136. document.layers() document.all()
138. DOM
139. document.getElementById() document.getElementsByTagName()
140. #id { … } element { … }
141. $('#id') $('element')
142. document.querySelector() document.querySelectorAll()
144. Sass
145. poly fi lls
147. APIs
148. native apps
149. geolocation input type="image" web noti fi cations service workers
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
158. advertising
159. behavioural advertising
160. contextual advertising
161. behavioural advertising
162. tracking
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
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
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.”
201. I’m helping put a man on the moon.” “
204. thank you