Of Time And The Web

A presentation from border:none held in Nuremberg in October 2023, ten years after the first border:none in 2013.

https://adactio.com/articles/20638

Transcript

1. Of Time And The Web
2. Of Time And The Web
3. “was”
8. moments
10. “Sounds too good to be true.”
11. “Sounds too bad to be true.”
12. 100 years
14. 50 years
16. 25 years
18. 10 years
20. world wide web
26. #663399
27. #663398
28. #663399
29. rgb(102,51,153)
30. rgba(102,51,153,1)
31. hsl(270,50%,40%)
32. hsla(270,50%,40%,1)
33. hwb()
34. hwb() lab()
35. hwb() lab() lch()
36. color()
38. sans-serif
39. sans-serif
40. sans-serif
41. serif
42. serif
45. text-indent: -1000px; background: url(bg.gif);
46. sIFR
47. cufón
49. It is not done well but you are surprised to fi nd it done at all.” “
50. EOT
52. WOFF
53. WOFF2
56. regular bold italic light extra bold
59. variable fonts
60. 100 Thin 200 Extra Light 300 Light 400 Normal 500 Medium 600 Semi Bold 700 Bold 800 Extra Bold 900 Ultra Bold
61. —Håkon Wium Lee One of the reasons we chose to use three-digit numbers was to support intermediate values in the future.” “
62. —Håkon Wium Lee And the future is now :)” “
63. font-family: your-choice; font-weight: 467;
65. <icon>
66. <embed>
67. <a href="…"> rel="embed">
68. <img>
69. <img src="…">
70. <img src="…"> … </img>
71. <img src="…" alt="…">
72. JPG
73. GIF
74. PNG
75. Flash
76. SVG
79. WebP
80. AVIF
81. <img src="…" alt="…" srcset="…">
82. <img src="…" alt="…" loading="lazy">
83. <audio src="…"> … </audio>
84. <video src="…"> … </video>
85. <audio> <video>
87. Flash
89. animation vector graphics video
91. font centre width height
92. <table> <img src="spacer.gif">
94. CSS
95. fl oat: left
97. 640px
98. 640px 800px
99. 640px 800px 960px
101. %
102. % 640px 800px 960px
103. @media all and (…)
104. @media %
105. responsive
106. responsive
107. fl exbox grid
108. fl exbox grid SVG web fonts animation video
109. fl oats hex system fonts
110. fl oats hex system fonts rgba fl exbox web fonts hsla grid variable fonts ajax media queries svg
111. 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
115. advertising
116. behavioural advertising
117. contextual advertising
118. behavioural advertising
119. tracking
121. stateless
122. cookies JavaScript
123. cookies JavaScript third-party
124. stateful
125. tracking blockers
126. advertising blockers
127. websites
128. websites web apps
129. single page apps
130. rendering routing responding
131. complexity
132. <select> <input type="date">
133. <button>
134. software
135. dependencies
136. expectations
137. expectations
138. expectations
139. intentions
140. verschlimmbessern
142. user needs
143. —Rachel Andrew Stop sol v ing problems you don’t yet have.” “
144. poly fi lls
145. developer convenience
146. developer convenience user needs
147. expectations
151. —Zeynep Tüfekçi If you have something wonderful, if you do not defend it, you will lose it.” “
152. If you have something wonderful, if you do not defend it, you will lose it.”
153. thank you