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
   

   View Slide

2. Of Time
   And The Web
   

   View Slide

3. “was”
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. moments
   

   View Slide

9. View Slide

10. “Sounds too good to be true.”
    

    View Slide

11. “Sounds too bad to be true.”
    

    View Slide

12. 100 years
    

    View Slide

13. View Slide

14. 50 years
    

    View Slide

15. View Slide

16. 25 years
    

    View Slide

17. View Slide

18. 10 years
    

    View Slide

19. View Slide

20. world
    wide
    web
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. #663399
    

    View Slide

27. #663398
    

    View Slide

28. #663399
    

    View Slide

29. rgb(102,51,153)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. hwb()
    

    View Slide

34. hwb() lab()
    

    View Slide

35. hwb() lab() lch()
    

    View Slide

36. color()
    

    View Slide

37. View Slide

38. sans-serif
    

    View Slide

39. sans-serif
    

    View Slide

40. sans-serif
    

    View Slide

41. serif
    

    View Slide

42. serif
    

    View Slide

43. View Slide

44. View Slide

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

    View Slide

46. sIFR
    

    View Slide

47. cufón
    

    View Slide

48. View Slide

49. It is not done well but
    you are surprised to
    fi
    nd it done at all.”
    “
    

    View Slide

50. EOT
    

    View Slide

51. View Slide

52. WOFF
    

    View Slide

53. WOFF2
    

    View Slide

54. View Slide

55. View Slide

56. regular
    bold
    italic
    light
    extra bold
    

    View Slide

57. View Slide

58. View Slide

59. variable fonts
    

    View Slide

60. 100 Thin
    200 Extra Light
    300 Light
    400 Normal
    500 Medium
    600 Semi Bold
    700 Bold
    800 Extra Bold
    900 Ultra Bold
    

    View Slide

61. —Håkon Wium Lee
    One of the reasons we chose to use
    three-digit numbers was to support
    intermediate values in the future.”
    “
    

    View Slide

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

    View Slide

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

    View Slide

64. View Slide

65. 
    

    View Slide

66. 
    

    View Slide

67. 
    rel="embed">
    

    View Slide

68. 
    

    View Slide

69. src="…">
    

    View Slide

70. src="…">
    …
    
    

    View Slide

71. src="…"
    alt="…">
    

    View Slide

72. JPG
    

    View Slide

73. GIF
    

    View Slide

74. PNG
    

    View Slide

75. Flash
    

    View Slide

76. SVG
    

    View Slide

77. View Slide

78. View Slide

79. WebP
    

    View Slide

80. AVIF
    

    View Slide

81. src="…"
    alt="…"
    srcset="…">
    

    View Slide

82. src="…"
    alt="…"
    loading="lazy">
    

    View Slide

83. src="…">
    …
    
    

    View Slide

84. src="…">
    …
    
    

    View Slide

85. 
    
    

    View Slide

86. View Slide

87. Flash
    

    View Slide

88. View Slide

89. animation
    vector graphics
    video
    

    View Slide

90. View Slide

91. font
    centre
    width
    height
    

    View Slide

92. 
    src="spacer.gif">
    

    View Slide

93. View Slide

94. CSS
    

    View Slide

95. fl
    oat: left
    

    View Slide

96. View Slide

97. 640px
    

    View Slide

98. 640px
    800px
    

    View Slide

99. 640px
    800px
    960px
    

    View Slide

100. View Slide

101. %
     

     View Slide

102. %
     640px
     800px
     960px
     

     View Slide

103. @media all and (…)
     

     View Slide

104. @media %
     

     View Slide

105. responsive
     

     View Slide

106. responsive
     

     View Slide

107. fl
     exbox
     grid
     

     View Slide

108. fl
     exbox
     grid
     SVG
     web fonts
     animation
     video
     

     View Slide

109. fl
     oats
     hex system fonts
     

     View Slide

110. fl
     oats
     hex system fonts
     rgba
     fl
     exbox web fonts
     hsla grid variable fonts
     ajax
     media queries
     svg
     

     View Slide

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
     

     View Slide

112. View Slide

113. View Slide

114. View Slide

115. advertising
     

     View Slide

116. behavioural
     advertising
     

     View Slide

117. contextual
     advertising
     

     View Slide

118. behavioural
     advertising
     

     View Slide

119. tracking
     

     View Slide

120. View Slide

121. stateless
     

     View Slide

122. cookies JavaScript
     

     View Slide

123. cookies JavaScript
     third-party
     

     View Slide

124. stateful
     

     View Slide

125. tracking
     blockers
     

     View Slide

126. advertising
     blockers
     

     View Slide

127. websites
     

     View Slide

128. websites web apps
     

     View Slide

129. single page apps
     

     View Slide

130. rendering
     routing
     responding
     

     View Slide

131. complexity
     

     View Slide

132. 
     
     

     View Slide

133. 
     

     View Slide

134. software
     

     View Slide

135. dependencies
     

     View Slide

136. expectations
     

     View Slide

137. expectations
     

     View Slide

138. expectations
     

     View Slide

139. intentions
     

     View Slide

140. verschlimmbessern
     

     View Slide

141. View Slide

142. user needs
     

     View Slide

143. —Rachel Andrew
     Stop sol
     v
     ing problems you don’t yet have.”
     “
     

     View Slide

144. poly
     fi
     lls
     

     View Slide

145. developer convenience
     

     View Slide

146. developer convenience
     user needs
     

     View Slide

147. expectations
     

     View Slide

148. View Slide

149. View Slide

150. View Slide

151. —Zeynep Tüfekçi
     If you have something wonderful, if you do not
     defend it, you will lose it.”
     “
     

     View Slide

152. If you have something wonderful, if you do not
     defend it, you will lose it.”
     

     View Slide

153. thank you
     

     View Slide