The State Of The Web

A presentation at An Event Apart Spring Summit in April 2021 in by Jeremy Keith

Slide 1

Slide 1

The State Of The Web

Slide 2

Slide 2

What a terrible year!

Slide 3

Slide 3

Slide 4

Slide 4

1968

Slide 5

Slide 5

Slide 6

Slide 6

Lovell Borman Anders

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

fi Th Th Th Hey, don’t take that, it’s not scheduled. 😉you… Hand Oh my meGod! that You Wow! Oh, Look got roll Quick! aman! of colour atcolour that at’s Quick! pretty! picture at’s… quick, lm, Jim? would over there! ere’s the Earth coming up.

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Vannevar Bush

Slide 26

Slide 26

Vannevar Bush

Slide 27

Slide 27

memex

Slide 28

Slide 28

memex hypertext

Slide 29

Slide 29

hypertext Ted Nelson

Slide 30

Slide 30

Tim Berners-Lee

Slide 31

Slide 31

Douglas Engelbart

Slide 32

Slide 32

Slide 33

Slide 33

networks

Slide 34

Slide 34

arpanet

Slide 35

Slide 35

arpanet

Slide 36

Slide 36

arpanet

Slide 37

Slide 37

internet

Slide 38

Slide 38

internet + hypertext

Slide 39

Slide 39

World Wide Web

Slide 40

Slide 40

Slide 41

Slide 41

Slide 42

Slide 42

Slide 43

Slide 43

Slide 44

Slide 44

#663399

Slide 45

Slide 45

#663398

Slide 46

Slide 46

#663399

Slide 47

Slide 47

rgb(102,51,153)

Slide 48

Slide 48

rgba(102,51,153,1)

Slide 49

Slide 49

hsl(270,50%,40%)

Slide 50

Slide 50

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

Slide 51

Slide 51

hwb()

Slide 52

Slide 52

hwb() lab()

Slide 53

Slide 53

hwb() lab() lch()

Slide 54

Slide 54

color()

Slide 55

Slide 55

Slide 56

Slide 56

sans-serif

Slide 57

Slide 57

sans-serif

Slide 58

Slide 58

sans-serif

Slide 59

Slide 59

serif

Slide 60

Slide 60

serif

Slide 61

Slide 61

Slide 62

Slide 62

Slide 63

Slide 63

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

Slide 64

Slide 64

sIFR

Slide 65

Slide 65

cufón

Slide 66

Slide 66

Slide 67

Slide 67

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

Slide 68

Slide 68

EOT

Slide 69

Slide 69

Slide 70

Slide 70

WOFF

Slide 71

Slide 71

WOFF2

Slide 72

Slide 72

Slide 73

Slide 73

Slide 74

Slide 74

light regular italic bold extra bold

Slide 75

Slide 75

Slide 76

Slide 76

Slide 77

Slide 77

variable fonts

Slide 78

Slide 78

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

Slide 79

Slide 79

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

Slide 80

Slide 80

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

Slide 81

Slide 81

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

Slide 82

Slide 82

Slide 83

Slide 83

<icon>

Slide 84

Slide 84

<embed>

Slide 85

Slide 85

<a href=”…”> rel=”embed”>

Slide 86

Slide 86

<img>

Slide 87

Slide 87

<img src=”…”>

Slide 88

Slide 88

<img src=”…”> … </img>

Slide 89

Slide 89

<img src=”…” alt=”…”>

Slide 90

Slide 90

JPG

Slide 91

Slide 91

GIF

Slide 92

Slide 92

PNG

Slide 93

Slide 93

Flash

Slide 94

Slide 94

SVG

Slide 95

Slide 95

2001

Slide 96

Slide 96

2011

Slide 97

Slide 97

WebP

Slide 98

Slide 98

AVIF

Slide 99

Slide 99

<img src=”…” alt=”…” srcset=”…”>

Slide 100

Slide 100

<img src=”…” alt=”…” loading=”lazy”>

Slide 101

Slide 101

<audio src=”…”> … </audio>

Slide 102

Slide 102

<video src=”…”> … </video>

Slide 103

Slide 103

<audio> <video>

Slide 104

Slide 104

Slide 105

Slide 105

Flash

Slide 106

Slide 106

Slide 107

Slide 107

animation vector graphics video

Slide 108

Slide 108

Slide 109

Slide 109

font centre width height

Slide 110

Slide 110

<table> <img src=”spacer.gif”>

Slide 111

Slide 111

Slide 112

Slide 112

CSS

Slide 113

Slide 113

fl oat: left

Slide 114

Slide 114

Slide 115

Slide 115

640px

Slide 116

Slide 116

640px 800px

Slide 117

Slide 117

640px 800px 960px

Slide 118

Slide 118

Slide 119

Slide 119

%

Slide 120

Slide 120

640px 800px 960px %

Slide 121

Slide 121

@media all and (…)

Slide 122

Slide 122

@media %

Slide 123

Slide 123

responsive

Slide 124

Slide 124

responsive

Slide 125

Slide 125

fl exbox grid

Slide 126

Slide 126

fl animation exbox video SVG grid web fonts

Slide 127

Slide 127

Slide 128

Slide 128

HTML5

Slide 129

Slide 129

Slide 130

Slide 130

Slide 131

Slide 131

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 ersal readership. ere is no uni ersal interpreted programming language.” v Th —Tim Berners-Lee v Th “

Slide 132

Slide 132

Slide 133

Slide 133

LiveScript

Slide 134

Slide 134

JavaScript

Slide 135

Slide 135

DHTML

Slide 136

Slide 136

document.layers() document.all()

Slide 137

Slide 137

Slide 138

Slide 138

DOM

Slide 139

Slide 139

document.getElementById() document.getElementsByTagName()

Slide 140

Slide 140

#id { … } element { … }

Slide 141

Slide 141

$(‘#id’) $(‘element’)

Slide 142

Slide 142

document.querySelector() document.querySelectorAll()

Slide 143

Slide 143

Slide 144

Slide 144

Sass

Slide 145

Slide 145

fi poly lls

Slide 146

Slide 146

Slide 147

Slide 147

APIs

Slide 148

Slide 148

native apps

Slide 149

Slide 149

fi geolocation input type=”image” web noti cations service workers

Slide 150

Slide 150

Slide 151

Slide 151

“ By the end of the year, I would predict that any major native mobile application could be instead built using native web capabilities/APIs.” —Ire Aderinokun

Slide 152

Slide 152

fl hex oats system fonts

Slide 153

Slide 153

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

Slide 154

Slide 154

fi fl fl houdini service workers geolocation svg ajax web fonts rgba exbox hex oats system fonts hsla grid variable fonts media queries device APIs noti cations web components

Slide 155

Slide 155

Slide 156

Slide 156

Slide 157

Slide 157

Slide 158

Slide 158

advertising

Slide 159

Slide 159

behavioural advertising

Slide 160

Slide 160

contextual advertising

Slide 161

Slide 161

behavioural advertising

Slide 162

Slide 162

tracking

Slide 163

Slide 163

Slide 164

Slide 164

stateless

Slide 165

Slide 165

cookies JavaScript

Slide 166

Slide 166

third-party cookies JavaScript

Slide 167

Slide 167

stateful

Slide 168

Slide 168

tracking blockers

Slide 169

Slide 169

advertising blockers

Slide 170

Slide 170

websites

Slide 171

Slide 171

websites web apps

Slide 172

Slide 172

single page apps

Slide 173

Slide 173

rendering routing responding

Slide 174

Slide 174

complexity

Slide 175

Slide 175

<select> <input type=”date”>

Slide 176

Slide 176

<button>

Slide 177

Slide 177

software

Slide 178

Slide 178

dependencies

Slide 179

Slide 179

expectations

Slide 180

Slide 180

expectations

Slide 181

Slide 181

expectations

Slide 182

Slide 182

intentions

Slide 183

Slide 183

verschlimmbessern

Slide 184

Slide 184

Slide 185

Slide 185

user needs

Slide 186

Slide 186

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

Slide 187

Slide 187

fi poly lls

Slide 188

Slide 188

developer convenience

Slide 189

Slide 189

user needs developer convenience

Slide 190

Slide 190

expectations

Slide 191

Slide 191

Slide 192

Slide 192

Slide 193

Slide 193

Slide 194

Slide 194

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

Slide 195

Slide 195

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

Slide 196

Slide 196

Slide 197

Slide 197

Slide 198

Slide 198

Slide 199

Slide 199

Slide 200

Slide 200

Slide 201

Slide 201

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

Slide 202

Slide 202

Slide 203

Slide 203

Slide 204

Slide 204

thank you