HTTP and Me

An introduction to HTTP and how it drives the modern web. Deck was created for and targeted at a lunch and learn for developers, designers, and non-creatives at Blackstone Media (http://www.blackstonemedia.com/) and StarkNine (http://www.starknine.com/) in Louisville, KY.

Screencast: http://youtu.be/uCkptOF75II

Transcript

1. HTTP
   a n d m e
   

   View Slide

2. HTTP RUNS THE
   MODERN WEB*
   

   View Slide

3. WHAT IS HTTP?
   

   View Slide

4. Hypertext Transfer Protocol
   an application protocol for
   distributed, collaborative,
   hypermedia information
   systems
   

   View Slide

5. Hypertext Transfer Protocol
   an application protocol for
   distributed, collaborative,
   hypermedia information
   systems
   

   View Slide

6. Tim Berners-Lee & Team
   

   View Slide

7. …Who Created
   Original HTTP
   HTML
   Associated technology for a web server
   Text-based web browser
   

   View Slide

8. ALL ABOUT THE GIVE AND TAKE
   AKA THE REQUEST LIFE CYCLE
   

   View Slide

9. Basic HTTP Request Life Cycle
   

   View Slide

10. View Slide

11. GET / HTTP/1.1
    Host: duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 200 OK
    Server: nginx
    Date: Thu, 24 Jul 2014 04:21:31 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Length: 9991
    Connection: keep-alive
    ETag: "53d05a42-2707"
    Expires: Thu, 24 Jul 2014 04:21:32 GMT
    Cache-Control: max-age=1
    Strict-Transport-Security: max-age=31536000
    Accept-Ranges: bytes
    
    
    
    content="IE=Edge" />
    content="text/html;
    charset=UTF-8;charset=utf-8">
    …
    

    View Slide

12. GET / HTTP/1.1
    Host: duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 200 OK
    Server: nginx
    Date: Thu, 24 Jul 2014 04:21:31 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Length: 9991
    Connection: keep-alive
    ETag: "53d05a42-2707"
    Expires: Thu, 24 Jul 2014 04:21:32 GMT
    Cache-Control: max-age=1
    Strict-Transport-Security: max-age=31536000
    Accept-Ranges: bytes
    
    
    
    content="IE=Edge" />
    content="text/html;
    charset=UTF-8;charset=utf-8">
    …
    

    View Slide

13. METHODS TO MADNESS
    

    View Slide

14. A Request Method is…
    the primary source of request
    semantics; it indicates the
    purpose for which the client has
    made this request and what is
    expected by the client as a
    successful result.
    

    View Slide

15. 3 & 5 Make Many
    GET
    POST
    HEAD
    HTTP/1.0
    OPTIONS
    PUT
    DELETE
    TRACE
    CONNECT
    HTTP/1.1
    

    View Slide

16. GET / HTTP/1.1
    Host: duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 200 OK
    Server: nginx
    Date: Thu, 24 Jul 2014 04:21:31 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Length: 9991
    Connection: keep-alive
    ETag: "53d05a42-2707"
    Expires: Thu, 24 Jul 2014 04:21:32 GMT
    Cache-Control: max-age=1
    Strict-Transport-Security: max-age=31536000
    Accept-Ranges: bytes
    
    
    
    content="IE=Edge" />
    content="text/html;
    charset=UTF-8;charset=utf-8">
    …
    

    View Slide

17. OFF WITH ITS HEADERS
    

    View Slide

18. Examples
    Host
    User-Agent
    Accept
    Accept-Encoding
    Accept-Language
    Request
    Server
    Location
    Content-Type
    Expires
    Cache-Control
    Response
    

    View Slide

19. Reasons for Headers
    Provide more information about the
    request/response context
    Make the request conditional based on the
    target resource state
    Suggest preferred formats for the request/
    response
    Supply authentication credentials
    Modify the expected request processing
    

    View Slide

20. GET / HTTP/1.1
    Host: duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 200 OK
    Server: nginx
    Date: Thu, 24 Jul 2014 04:21:31 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Length: 9991
    Connection: keep-alive
    ETag: "53d05a42-2707"
    Expires: Thu, 24 Jul 2014 04:21:32 GMT
    Cache-Control: max-age=1
    Strict-Transport-Security: max-age=31536000
    Accept-Ranges: bytes
    
    
    
    content="IE=Edge" />
    content="text/html;
    charset=UTF-8;charset=utf-8">
    …
    

    View Slide

21. SOCIAL STATUS
    (CODE)
    

    View Slide

22. Five Main Groups
    1XX Informational
    2XX Successful
    3XX Redirection
    4XX Client Error
    5XX Server Error
    

    View Slide

23. GET / HTTP/1.1
    Host: duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 200 OK
    Server: nginx
    Date: Thu, 24 Jul 2014 04:21:31 GMT
    Content-Type: text/html; charset=UTF-8
    Content-Length: 9991
    Connection: keep-alive
    ETag: "53d05a42-2707"
    Expires: Thu, 24 Jul 2014 04:21:32 GMT
    Cache-Control: max-age=1
    Strict-Transport-Security: max-age=31536000
    Accept-Ranges: bytes
    
    
    
    content="IE=Edge" />
    content="text/html;
    charset=UTF-8;charset=utf-8">
    …
    

    View Slide

24. GET / HTTP/1.1
    Host: www.duckduckgo.com
    Content-Type: text/html
    Cache-Control: no-cache
    HTTP/1.1 301 Moved Permanently
    Server: nginx
    Date: Thu, 24 Jul 2014 04:30:31 GMT
    Content-Type: text/html
    Content-Length: 178
    Connection: keep-alive
    Location: https://duckduckgo.com/
    Expires: Thu, 24 Jul 2014 04:30:32 GMT
    Cache-Control: max-age=1
    
    301 Moved Permanently
    
    301 Moved Permanently
    nginx
    
    
    

    View Slide

25. PUTTING IT ALL
    TOGETHER
    

    View Slide

26. Wrapping Up
    Requests are made to servers. Responses
    are sent in return to clients.
    Methods note “type” of request
    Status codes note “type” of response
    Headers modify request/response
    All defined in HTTP specifications
    

    View Slide

27. GITHUB
    TWITTER
    WWW
    @SLOGSDON
    @SHANELOGSDON
    SHANE.LOGSDON.IO
    THANKS!
    QUESTIONS? FIND ME AT:
    

    View Slide