WEBVTT

1
00:00:01.200 --> 00:00:06.044
Every time you open a web page, three ideas from 1990 go to work.

2
00:00:06.244 --> 00:00:08.113
An address that names the page.

3
00:00:08.133 --> 00:00:09.881
A document written in markup.

4
00:00:09.901 --> 00:00:13.797
And a short conversation between two computers to fetch it.

5
00:00:13.997 --> 00:00:17.575
Frameworks, apps, and APIs all sit on top of those three,

6
00:00:17.595 --> 00:00:20.420
no matter how deep the abstraction goes.

7
00:00:20.620 --> 00:00:24.845
So to understand the web as a medium, it helps to start where it started.

8
00:00:27.345 --> 00:00:28.135
March 1989.

9
00:00:28.155 --> 00:00:33.683
CERN, the particle physics lab on the border of France and Switzerland.

10
00:00:33.883 --> 00:00:38.456
Researchers from dozens of countries come and go, writing papers, notes,

11
00:00:38.476 --> 00:00:41.073
and documentation in many languages.

12
00:00:41.273 --> 00:00:46.509
They work on computers that don’t share information: mainframes, minicomputers,

13
00:00:46.529 --> 00:00:52.219
Unix workstations, Macs, and PCs, each with its own formats and its own programs.

14
00:00:52.419 --> 00:00:54.432
Information gets lost all the time.

15
00:00:54.452 --> 00:00:58.180
When someone leaves, what they knew often leaves with them.

16
00:00:58.380 --> 00:01:01.597
Tim Berners-Lee, a British computer scientist at CERN,

17
00:01:01.617 --> 00:01:04.294
sees that the problem isn’t any one computer.

18
00:01:04.314 --> 00:01:07.491
It’s that nothing links the information on them.

19
00:01:09.591 --> 00:01:13.053
So he writes a proposal called Information Management.

20
00:01:13.073 --> 00:01:14.924
Instead of a rigid hierarchy,

21
00:01:14.944 --> 00:01:19.825
it describes a web of linked notes: documents that point to other documents,

22
00:01:19.845 --> 00:01:21.112
on any machine.

23
00:01:21.312 --> 00:01:26.305
His boss, Mike Sendall, writes three words on the cover. Vague, but exciting.

24
00:01:27.005 --> 00:01:28.869
Sendall lets him keep going.

25
00:01:28.889 --> 00:01:34.522
By late 1990, Berners-Lee has picked a name, and with his colleague Robert Cailliau,

26
00:01:34.542 --> 00:01:37.332
he proposes the WorldWideWeb project.

27
00:01:37.532 --> 00:01:39.891
The name could have been different.

28
00:01:39.911 --> 00:01:42.882
Information Mesh sounded too much like mess.

29
00:01:42.902 --> 00:01:45.533
Mine of Information abbreviated to MOI,

30
00:01:45.553 --> 00:01:49.523
French for “me.” And The Information Mine spelled TIM.

31
00:01:51.623 --> 00:01:53.680
The web rests on three inventions.

32
00:01:53.700 --> 00:01:55.955
Think of them as the web’s atom.

33
00:01:56.155 --> 00:02:00.702
First, the URL: one addressing scheme for every kind of information.

34
00:02:00.722 --> 00:02:02.650
A scheme, a host, and a path.

35
00:02:02.670 --> 00:02:08.358
The same pattern could point to a web page, a file server, a newsgroup, or a mailbox,

36
00:02:08.378 --> 00:02:12.305
and stitch those separate information spaces into one.

37
00:02:12.805 --> 00:02:17.430
The double slash was borrowed from the file system of Apollo workstations.

38
00:02:17.450 --> 00:02:21.260
Years later, Berners-Lee admitted it wasn’t really necessary.

39
00:02:21.280 --> 00:02:26.225
Programmers have typed those two extra characters billions of times since.

40
00:02:26.825 --> 00:02:29.458
Second, HTML: a simple markup language.

41
00:02:29.478 --> 00:02:33.949
Its tags describe what content is, a heading, a paragraph, a list,

42
00:02:33.969 --> 00:02:36.602
rather than exactly how it should look.

43
00:02:36.622 --> 00:02:39.255
And its most important tag is the link.

44
00:02:39.275 --> 00:02:43.317
Anyone can link to anything, without asking permission.

45
00:02:43.917 --> 00:02:48.564
Third, HTTP: the protocol that fetches a document by its URL.

46
00:02:48.584 --> 00:02:52.007
The first version was almost comically small.

47
00:02:52.027 --> 00:02:55.297
The browser sent one line: GET, and a path.

48
00:02:55.317 --> 00:02:58.831
The server sent back the HTML and hung up.

49
00:02:59.431 --> 00:03:01.098
Address, document, delivery.

50
00:03:01.118 --> 00:03:04.411
Nearly everything on the web still touches those three,

51
00:03:04.431 --> 00:03:07.923
even when they’re buried under layers of abstraction.

52
00:03:10.223 --> 00:03:13.570
To make it real, Berners-Lee wrote both ends himself,

53
00:03:13.590 --> 00:03:19.035
on a NeXT computer: a web server, and the first web browser, called WorldWideWeb.

54
00:03:19.235 --> 00:03:23.274
The server had a hand-written label on it. This machine is a server.

55
00:03:23.294 --> 00:03:24.847
Do not power it down!

56
00:03:25.447 --> 00:03:30.158
So that anyone could try it, even from a plain text terminal, Nicola Pellow,

57
00:03:30.178 --> 00:03:35.645
a student on placement at CERN, wrote a line-mode browser that ran almost anywhere.

58
00:03:35.845 --> 00:03:41.124
In August 1991, Berners-Lee announced the web on Internet newsgroups.

59
00:03:41.144 --> 00:03:45.809
And on April 30th, 1993, CERN made the software royalty-free,

60
00:03:45.829 --> 00:03:50.353
for anyone to use and build on. No permission, no fees.

61
00:03:52.453 --> 00:03:55.868
People saw the power of it quickly, and the web grew fast.

62
00:03:56.068 --> 00:03:58.706
The first big extension was media.

63
00:03:58.726 --> 00:04:05.194
In 1993, a new img tag let browsers like Mosaic put pictures right inside the page,

64
00:04:05.214 --> 00:04:08.016
each one fetched by its own URL.

65
00:04:08.216 --> 00:04:12.308
At that point it wasn’t just hypertext anymore. It was hypermedia.

66
00:04:12.328 --> 00:04:17.113
Audio, video, fonts, and much more followed, all addressed the same way.

67
00:04:19.213 --> 00:04:20.352
Here’s a fun fact.

68
00:04:20.372 --> 00:04:22.864
The first browser wasn’t just a viewer.

69
00:04:22.884 --> 00:04:24.924
WorldWideWeb was also an editor.

70
00:04:24.944 --> 00:04:29.881
You could change a page, and make links, as easily as you could read it.

71
00:04:30.081 --> 00:04:34.837
That seems odd now, but a word processor both shows and edits documents.

72
00:04:34.857 --> 00:04:38.275
The web was meant to be written, not just read.

73
00:04:38.475 --> 00:04:41.948
Your browser still has that power. Open the console,

74
00:04:41.968 --> 00:04:46.903
set document.designMode to “on,” and the whole page becomes editable.

75
00:04:47.803 --> 00:04:50.841
It only changes your copy. But that’s the lesson.

76
00:04:50.861 --> 00:04:54.897
Everything that reaches the browser can be inspected and changed.

77
00:04:54.917 --> 00:04:57.517
The client side is not under your control,

78
00:04:57.537 --> 00:05:00.583
and the network in between is nearly as bad.

79
00:05:01.183 --> 00:05:03.634
We still publish all the time, of course.

80
00:05:03.654 --> 00:05:08.335
We just do it through apps, like a social feed or a content management system,

81
00:05:08.355 --> 00:05:11.488
instead of editing pages in the browser itself.

82
00:05:13.788 --> 00:05:15.037
Next came programs.

83
00:05:15.057 --> 00:05:19.245
First on the server, with the Common Gateway Interface, or CGI,

84
00:05:19.265 --> 00:05:24.307
which let a web server run a program and send back whatever it printed.

85
00:05:24.507 --> 00:05:28.792
Then in the browser, in 1995, with Java applets and JavaScript.

86
00:05:28.812 --> 00:05:33.507
Brendan Eich built the first version of JavaScript in about ten days,

87
00:05:33.527 --> 00:05:37.927
and despite the name, it has almost nothing to do with Java.

88
00:05:38.127 --> 00:05:39.418
This is a big shift.

89
00:05:39.438 --> 00:05:42.303
A web of documents became a web of programs,

90
00:05:42.323 --> 00:05:45.573
and programs need things documents never did.

91
00:05:46.073 --> 00:05:48.912
They need to remember you between requests.

92
00:05:48.932 --> 00:05:51.770
HTTP forgets everything, so we got cookies,

93
00:05:51.790 --> 00:05:56.677
named after the magic cookies Unix programmers passed back and forth.

94
00:05:56.877 --> 00:06:01.879
They handle passwords and payments, so connections needed encryption.

95
00:06:01.899 --> 00:06:04.601
Today that’s TLS, the S in HTTPS.

96
00:06:04.801 --> 00:06:07.056
And they have to pay for themselves.

97
00:06:07.076 --> 00:06:09.836
One of the first banner ads went up in 1994,

98
00:06:09.856 --> 00:06:14.385
and almost half the people who saw it clicked. Those days are long gone,

99
00:06:14.405 --> 00:06:19.630
but advertising and analytics still shape nearly every decision in web development,

100
00:06:19.650 --> 00:06:21.656
whether we admit it or not.

101
00:06:23.956 --> 00:06:28.833
Remember what the web was built to be. Open. Decentralized. Free to use.

102
00:06:28.853 --> 00:06:32.213
Nobody needed a vendor’s approval to publish.

103
00:06:32.413 --> 00:06:37.439
At the opening of the 2012 London Olympics, Berners-Lee put it in four words.

104
00:06:37.459 --> 00:06:39.135
This is for everyone.

105
00:06:40.035 --> 00:06:42.084
Today that web is under strain.

106
00:06:42.104 --> 00:06:46.822
Power has concentrated in a few huge platforms, pages have grown heavy,

107
00:06:46.842 --> 00:06:50.212
and tracking follows people from site to site.

108
00:06:50.412 --> 00:06:53.649
Some of that comes from our own choices as developers.

109
00:06:53.669 --> 00:06:55.699
Some of it, we’re even paid to do.

110
00:06:55.719 --> 00:07:00.120
It’s easy to build against the grain of the medium without noticing.

111
00:07:02.220 --> 00:07:05.048
That’s the point of this course. Your choices matter.

112
00:07:05.068 --> 00:07:09.667
And to make good ones, you have to understand the medium before you build on it.

113
00:07:09.967 --> 00:07:15.878
URLs, HTML, and HTTP. A client you don’t control. A network you can’t trust.

114
00:07:15.898 --> 00:07:19.163
And a web that was built for everyone.

115
00:07:19.763 --> 00:07:23.872
Next, we’ll follow a single page load from the user’s side of the screen,

116
00:07:23.892 --> 00:07:26.228
and see who falls off along the way.