$30 off During Our Annual Pro Sale. View Details »

HTTP and Me

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

Shane Logsdon

August 11, 2014
Tweet

More Decks by Shane Logsdon

Other Decks in Technology

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