A talk by Avi Flombaum

What happens when you press <enter>?

How the magic of the internet works and why it's important.

https://
Wikipedia's homepage loaded in a browser
01 A complete history of human communication 02 A thorough history of machines and computing 03 Why the internet is super important 04 How the internet works

Keep in mind.

  • This is a lot.
  • I talk fast.
  • Take notes. Questions and discussion after.
  • Don't worry about remembering everything.
  • Exposure and awareness are everything.
  • You can learn this, I promise.
01 / Communication

http://www.

The internet is the world's largest and most advanced communication system, but it is not the first.

Let's spend five minutes looking at the past so that the present and the future have some context.

There is no new thing under the sun.

A history of communication in emojis.

  1. Hand stencils on a cave wall, about 40,000 BCE 🙌40000 BCE
  2. Prehistoric cave painting of an animal, about 6,000 BCE ⛹6000 BCE
  3. Egyptian hieroglyphs carved and painted in stone, about 1,300 BCE 💯1300 BCE
  4. Greek text written on papyrus, about 300 BCE 🔠300 BCE
  5. An unrolled Hebrew scroll, about 200 BCE 📜200 BCE
  6. The Diamond Sutra, the oldest dated printed book, about 1,000 CE 📃1000 CE
  • Personal, proximal, physical. Tribally precise, preservable, short-term multi-generational.
  • Media: dyes, paints, inks.
  • Medium: caves, papyrus, scrolls, wood, paper.
  • Tech: fingers, brushes, quills, pens, movable type, presses.
A Gutenberg Bible open on a stand 📖 1450 CE
  1. Smoke signal rising from a tower on the Great Wall of China 🔥800 BCE
  2. Hands playing a pair of West African talking drums 🥁700 BCE
  3. Illustration of a messenger runner 📬500 BCE
  4. A heliograph, a mirror on a tripod for signalling with sunlight 🔍400 BCE
  5. A stone optical telegraph tower with semaphore arms 📞1790 CE
  6. A signal wave and its AM and FM encodings 📻1900 CE
  7. A communications satellite above the Earth 📡🛰1950 CE
  • Instrument, distance. Metaphysical, computational, ephemeral.
  • Media: smoke, sound, light, waves, radiation.
  • Medium: text, audio, visual, data.
  • Tech: fire, drums, mirrors, telegraphs, wires, radio, cables.
Diagram of total internal reflection inside an optical fiber Hands holding a cross-section of a submarine cable 🔌 1960 CE

Communication is about sending information via signs that have meaning. It's how we connect to each other. 😀

:-) 01101000 01100001 01110000 01110000 01111001 00001101 00001010 Happy
Back to the internet…

How?

Machines communicating.

02 / Machines

Just a super quick history of machines…

Ben Franklin's electrifying discovery

The kite experiment proved that lightning was electricity. That discovery led to understanding electricity's properties and its potential.

Electricity powers machines. It is the foundation for transmitting information across vast distances: it provides the power for the machines and a medium to transfer information.

1.21 gigawatts?!

Engraving of Benjamin Franklin flying a kite in a thunderstorm Lightning striking at night

Babbage and Lovelace on thinking machines

First the Difference Engine, for solving polynomial equations, and then the theoretical Analytical Engine, which can be "operated" to solve anything.

Ada Lovelace's diagram from Note G, the first published computer algorithm Lovelace's diagram from Note G, the first published computer algorithm.

Ada Lovelace describes the future of thinking machines:

"A new, a vast, and a powerful language is developed for the future use of analysis, in which to wield its truths so that these may become of more speedy and accurate practical application for the purposes of mankind."

"The science of operations, as derived from mathematics more especially, is a science of itself, and has its own abstract truth and value."

Ada Lovelace

Michael Faraday harnesses electricity

Electricity and magnetism are not two separate forces but one interconnected force, electromagnetism, each capable of influencing the other.

Spin a magnet around a copper coil and you generate electricity through the movement of electrons in the coil.

Electrify a magnet and you can reverse its polarity, turning negative to positive.

With a magnet and electricity you can create motion, known as a motor.

With motion, say from steam, you can spin a magnet to generate electricity, known as a generator.

Portrait of Michael Faraday Faraday's electromagnetic rotation experiment, 1821
The Faraday disk, the first electric generator, built in 1831

Nikola Tesla creates a modern world

Tesla invents alternating current, which can transport electricity over great distances.

He creates the modern turbines used for generating huge quantities of electricity, including those at Niagara Falls and the Hoover Dam.

He describes the Earth as having "acoustical resonance," capable of amplifying and bouncing waves back and forth, allowing for wireless communication.

The world is now electrified and connected.

Nikola Tesla, seated portrait A model of Tesla's first induction motor and a squirrel cage rotor

Okay, let's move a little faster. Nothing super important (except splitting the atom) happens from 1900 to 1940.

Anyone want to guess why?

Turing, Shannon, and Hopper invent computing

Alan Turing designs the "universal machine" and helps build some of the first stored-program computers, including the Manchester Mark 1. Watch The Imitation Game, it's great.

Grace Hopper works on one of the first computers in World War II to solve the imploding sphere problem, and after the war invents the idea of a "compiler" and "human readable" code: COBOL. She was 39 when she started in computing.

Claude Shannon coins the unit of measurement of a bit and creates information theory, a mathematical way of unifying all data into a singular notion.

Portrait of Alan Turing Valves of the Manchester Mark 1 computer Grace Hopper at a UNIVAC console Portrait of Claude Shannon

A Mathematical Theory of Communication

"Information is the resolution of uncertainty, the negative reciprocal value of probability. One bit is typically defined as the uncertainty of a binary random variable that is 0 or 1 with equal probability, or the information that is gained when the value of such a variable becomes known."

Claude Shannon

"What lies at the heart of every living thing is not a fire, not warm breath, not a 'spark of life'. It is information, words, instructions. If you want to understand life don't think about vibrant, throbbing gels and oozes, think about information technology."

Richard Dawkins, biologist

"It from bit. Every it, every particle, every field of force, even the space-time continuum itself. What we call reality arises in the last analysis from the posing of yes or no questions. All things physical are information-theoretic in origin, and this is a participatory universe. The whole universe is thus seen as a computer, a cosmic information processing machine."

John Archibald Wheeler, physicist

Kilby, Noyce, Faggin and Xerox PARC invent modern computing

The integrated circuit creates reliable and significantly smaller computers. Kilby makes Texas Instruments and Noyce makes Intel.

Faggin invents the CPU, and the computational power of computers doubles every year (Moore's Law).

Adele Goldberg and Alan Kay at Xerox Palo Alto Research Center invent everything: the personal computer, object orientation, ethernet, the mouse, the graphical user interface, just everything. Apple steals it all.

Jack Kilby with the first integrated circuit Federico Faggin with the Intel 4004 Adele Goldberg at Xerox PARC Alan Kay and colleagues at Xerox PARC in front of a pirate flag
Intel logo

Vint Cerf networks all the computers together

Portrait of Vint Cerf

Vint Cerf created the TCP/IP protocol that allows computers to reliably communicate with each other over long distances of ethernet and fiber optic cables.

The internet is born, but it's mostly used by government and universities for POP, SMTP, FTP, and USENET.

How TCP/IP works: the protocol breaks data into packets, routes them across the internet, and reassembles them Figure 2. How data travels over the Net.
Manchester Mark 1 Jack Kilby Adele Goldberg Xerox PARC Vint Cerf
Personal computer, 1950s–80s

The integrated circuit and the central processing unit made computers smaller and more reliable. Xerox PARC made computers personal. Apple made computers palatable. Vint Cerf networked them all together.

And now we're ready. How does the internet work?

03 / Magic

It's basically…

Shia LaBeouf saying 'magic' with jazz hands

If we hide information, things become simpler.

Everything we just covered that enables the World Wide Web doesn't need to be known by any individual programmer.

Technology creates black boxes of abstractions. You can build on top without needing to know how the box works.

The World Wide Web is an abstraction too. It's all about a standard interface.

A light switch You flip it.
A blue shipping container You ship it.
A car dashboard and steering wheel You drive it.
The OSI model: seven layers from physical to application Lots of hardware. The OSI model.

Lots of software

  • HTTP
  • URI
  • Browser
  • Web server
  • DNS
  • Operating system
  • Interface
  • Network
  • Router
  • HTML
  • More
Map of the world's submarine internet cables

Very physical.

Basic components of Wi-Fi service: end user devices, radio frequency spectrum, access point, switches and routers, the internet

Everything is a signal moving through a medium: radio to an access point, copper to a router, glass across an ocean. The abstraction sits on top of a very real machine.

Nikola Tesla, portrait with hand on chin

"It is paradoxical, yet true, to say, that the more we know, the more ignorant we become in the absolute sense, for it is only through enlightenment that we become conscious of our limitations. Precisely one of the most gratifying results of intellectual evolution is the continuous opening up of new and greater prospects."

Nikola Tesla

Wireless of the future

Before HTTP, before packets, Tesla told the New York Times the world would carry an instrument no bigger than a watch and hear anything, anywhere.

Popular Mechanics cover, October 1909, 15 cents Wireless of the Future, Nikola Tesla quoted in the New York Times
Tim Berners-Lee

In 1989 he proposed a global hypertext project, to be known as the World Wide Web. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb", a what-you-see-is-what-you-get hypertext browser and editor which ran in the NeXTStep environment.

The work started in October 1990. The program "WorldWideWeb" was first made available within CERN in December, and on the internet at large in the summer of 1991.

"The web is more a social creation than a technical one. I designed it for a social effect, to help people work together, and not as a technical toy. The ultimate goal of the Web is to support and improve our weblike existence in the world. We clump into families, associations, and companies. We develop trust across the miles and distrust around the corner. The Web does not just connect machines, it connects people."

"The Web as I envisioned it, we have not seen it yet. The future is still so much bigger than the past."

"In an extreme view, the world can be seen as only connections, nothing else. We think of a dictionary as the repository of meaning, but it defines words only in terms of other words. I liked the idea that a piece of information is really defined only by what it's related to, and how it's related. There really is little else to meaning. The structure is everything. There are billions of neurons in our brains, but what are neurons? Just cells. The brain has no knowledge until connections are made between neurons. All that we know, all that we are, comes from the way our neurons are connected."

Tim Berners-Lee
Charlie Chaplin at the microphones in The Great Dictator

"The very nature of these inventions cries out for the goodness in men; cries out for universal brotherhood; for the unity of us all."

Charlie Chaplin, The Great Dictator, 1940
Neurons under a microscope, white on black

Connections are everything

Neurons stained green and red

Connections are everything

Simulation of the cosmic web, filaments of galaxies

Connections are everything

How do you know what something is about?

Google is a measurement of connections.

PageRank illustrated as bubbles sized by how many pages link to them
The PageRank formula: the rank of a page is the sum of the ranks of pages linking to it divided by their number of links The PageRank value for a page depends on the PageRank values of each page linking to it, divided by the number of links from that page.
An open book lit by a candle

The internet is important.

It connects us.

04 / The Web

The Web in a nutshell.

The server is always online, sitting and waiting for people to request information from it via the World Wide Web. Specifically, via something called an HTTP request, which is just a name for the messages computers pass each other on the internet.

Clients make requests. Servers respond with data from files.

Clients make HTTP/S requests. Clients are anything that can send and process an HTTP/S request.

Clients on the left send HTTP requests through the internet to a server on the right laptop phone camera Clients Internet GET https://twitter.com GET https://instagram.com GET https://netflix.com Server
An iPhone showing Google A wireless security camera A smart TV showing a museum website Firefox logo Phones, cameras, TVs, browsers: all clients.

A specifically formatted string sent from one computer to another.

The string gets converted to TCP/IP packets. Those packets travel across all the computers on the internet until they reach the computer you want. Then the packets are converted back into the HTTP request string.

Request headers as shown in browser developer tools: method, host, user agent, accept, cookie A real request, as the browser's developer tools show it.
An HTTP request string is split into TCP/IP packets, which travel separately and are reassembled into the same string GET /aviflombaum HTTP/1.1 one formatted string 1 2 3 4 5 6 7 8 TCP/IP packets, each finding its own route GET /aviflombaum HTTP/1.1 the same string

What's in an HTTP request

1VerbGET
2Protocolhttp (plain text) or https (secured, encrypted)
3Domaingithub.com
4Resource/aviflombaum
1PurposeWhat do you want to do?
2TransportationHow does it travel?
3BuildingWhich building?
4ApartmentWhich apartment?

All together:

GET http://github.com/aviflombaum HTTP/1.1
HEADAsks for a response like a GET but without the body.
GETRetrieves a representation of a resource.
POSTSubmits data to be processed in the body of the request.
PUTUploads a representation of a resource in the body of the request.
DELETEDeletes a specific resource.
TRACEEchoes back the received request.
OPTIONSReturns the HTTP methods the server supports.
CONNECTConverts the request to a TCP/IP tunnel (generally for SSL).
PATCHApplies a partial modification of a resource.

Servers send HTTP responses. Still just a giant, specifically formatted string.

  • An HTTP response contains information about the response in the header.
  • A response comes in a format: HTML, JSON, XML, binary (images, etc).
  • A response has a status code.
A raw HTTP response: status line, headers, then HTML HTTP/1.1 200 OK, headers, a blank line, then the body.

HTTP status codes

  • 1xx informational
  • 2xx success
  • 3xx redirect
  • 4xx error
  • 5xx server error
HTTP Status Rappers: rappers matched to status codes like 200 OK HTTP Status Rappers. 200 OK.

The server sends back HTML from a file to your browser, which turns it into a graphical representation.

The HTML source of a web page, dense text HTML: the language of the web.

Responding to HTTP: anything can do it, any language. That's the beauty of the format. It's all about abstraction.

Ruby on Rails Node.js Django Spring

A global game of catch.

A browser sends an HTTP request to a server, the server sends an HTTP response back Browser 1. HTTP Request GET /aviflombaum HTTP/1.1 2. HTTP Response HTTP/1.1 200 OK, then HTML Server
  1. Clients make requests for information via HTTP.
  2. Servers receive requests and then send HTTP responses.
  3. Clients process the response, generally rendering it graphically via the browser.

All these HTTP formatted requests and responses are sent via TCP/IP across the internet.

How TCP/IP works, an MCI diagram of packets travelling router to router
A hex dump of packet bytes What the packets actually look like on the wire.

Where do requests go?

DNS servers look up the domain and correspond it to an IP address.

DNS resolution: github.com is looked up through six hops until it becomes the IP address 140.82.112.3 GitHub.com Where do requests go? Local machine 1. the hosts file and cache Home router 2. the box in the corner ISP 3. your internet provider Upstream provider 4. their internet provider Root name servers 5. who handles .com? TLD name servers 6. who handles github.com? 140.82.112.3

Static sites

  1. Receive a request.
  2. Naive processing.
  3. Serve response from the filesystem.
  4. Rarely any interactivity.
  5. No write ability.
  6. Doesn't change often.

Dynamic sites

  1. Receive a request.
  2. Routing.
  3. Integrate a data source.
  4. Compose a response.
  5. Provide write ability.
  6. Use programming languages for logic.
  7. Change all the time.
Web application stack: an HTTP server passes requests to an application server, which queries a database and builds the response 1. HTTP Server (Nginx) Listens for HTTP requests Sends HTTP responses 2. Application Server Receives requests Builds responses 3. Database Passes data to the application server HTTP Request Code SQL HTTP Response HTML Data
  1. A standard protocol (format) for HTTP requests and responses over TCP/IP.
  2. Clients are anything that makes an HTTP request and can receive a response.
  3. A web application is responsible for receiving HTTP requests and sending an HTTP response.
  4. HTTP responses are formatted text with a response header, a status, and a body (generally HTML or JSON).
  5. Web applications provide dynamic responses to HTTP requests.

Clients make requests to URLs. Our applications respond to requests to URLs.

get  '/'               # loading the homepage
get  '/questions/new'  # clicking the "New Question" link
post '/questions'      # submitting the "New Question" form
get  '/questions'      # redirecting to list all the questions

Our application code has to respond to all these requests. We map URLs to discrete application logic to process the request and respond with HTML.

A big red button

"The most important thing that was new was the idea of URI or URL, that any piece of information anywhere should have an identifier, which will allow you to get hold of it."

Tim Berners-Lee

An HTTP request to response is typically a 200 ms roundtrip.

As I said, it's basically magic.

Shia LaBeouf saying 'magic' with jazz hands

You can become a magician, a sorcerer, part of this timeless narrative of people leveraging technology to make a better world by helping us connect.

Thank you.

More at avi.nyc