Senior Software Engineer, Andy Giannini discuses the process of how your URL address manifests into a web page.

1. How Web Pages Work
and other ghost stories

2. Disclaimer
no math
no programming
no problem

3. How do computers talk?

4. How do computers talk?

5. How do computers talk?

6. How do computers talk?

7. How do computers talk?

8. How do computers talk?

9. Great, so how do they become friends?
Domain Name System
DNS translates domains into something computers understand
google.com means nothing
1.1.1.1 means something

10. Who do they talk to?

11. Who do they talk to?
IP address gets traffic to the computer
Ports get the traffic to the application
ex. 1.1.1.1:80
ex. fakewebpage.com:8080

12. What do they talk about?
Hyper Text Transfer Protocol (HTTP)
Transfers HTML (Hyper Text Markup Language)
Usually on port 80

13. HTTP Format
Verb and info
Headers, one per line
[blank line]
Optional body

14. HTTP Verbs
GET
POST
The other guys: PUT / PATCH / DELETE / HEAD

15. HTTP Headers
Host - name of the website we’re talking to
User agent - browser version
Cache - remember this, not gonna answer again
Cookies - magic

16. HTTP GET Requests
GET / HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0
Accept: text/html,application/xml
Accept-Language: en-US,en,es-MX
Accept-Encoding: gzip, deflate
Cookie: _ga=GA1.2.229765080.1436819046

17. Request sent!
Server gets request
Forwards it to the web server program
Web server gets the file requested
Sends response with requested file contents

18. HTTP Responses
HTTP/1.1 200 OK
Content-Length: 1241
Date: Mon, 01 Feb 2016 17:54:16 GMT
Content-Type: text/html;charset=utf-8
Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)
[HTML body that’s 1241 characters long]

19. HTML (and CSS and JS and images and…)

20. HTTP Get Requests
GET /users.php?page=2 HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0
Accept: text/html,application/xml
Accept-Language: en-US,en,es-MX
Accept-Encoding: gzip, deflate
Cookie: _ga=GA1.2.229765080.1436819046

21. HTTP Responses
HTTP/1.1 404 Not Found
Content-Length: 28
Date: Mon, 01 Feb 2016 17:58:02 GMT
Content-Type: text/html;charset=utf-8
Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)
Sorry, that code is unknown.

22. HTTP Status Codes
1xx - info
2xx - success
3xx - redirect
4xx - client error
5xx - server error

23. HTTP Post Request

24. HTTP Post Request
POST /api/set HTTP/1.1
Host: oneis.us
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X) Firefox/44.0
Accept: text/html,application/xml
Accept-Language: en-US,en,es-MX
api_key=lolidunno&submit=submit

25. HTTP Responses
HTTP/1.1 302 Found
Location: https://oneis.us/goaway
Date: Mon, 01 Feb 2016 18:02:39 GMT
Server: WEBrick/1.3.1 (Ruby/1.8.7/2014-01-28)

26. So what the hell are JS and PHP?
PHP runs “server side” (read: on the server)
Never sent to you, generates the HTML
JS runs “client side” (read: in your browser)
Included in HTTP response, manipulates HTML

27. JavaScript included in response

28. TL;DR
DNS Lookup
Sends request
Server gets reads or runs requested file
Server sends response back
Browser draws response from HTML
Browser requests any other needed files, runs JS

29. TL;DR

30. What didn’t we cover?
HTTPS
AJAX
Cookies
Caching

31. More learnins
You can watch this stuff IRL in your browser’s dev tools
Wikipedia’s HTTP page has some examples