Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Talking HEADs

Talking HEADs

Front-end web development is about HTML, CSS and JavaScript, right? Wrong! It's about HTML, CSS and JavaScript and HTTP. You might think that the protocol that has been serving us and our pages since the early nineties is showing its age, but it still has some surprises in store for us developers. This talk will be about the path from browser to server and back, and the distractions and attractions along the way.

Presented at the Fronteers Jam Session, 9 October 2013. These slides probably make more sense in combination with the video of this talk: http://vimeo.com/album/2588576/video/77588599

19f565f05a5d2e98d4416d1db627bf76?s=128

Jan van Hellemond

October 09, 2013
Tweet

More Decks by Jan van Hellemond

Other Decks in Programming

Transcript

  1. Talking HEADs @jvhellemond @frontlab Jan van Hellemond

  2. None
  3. HTTP over

  4. HTTP

  5. HTTP v0.9 v1.0 v1.1 1991 1996 1997/1999 v2.0 2014?

  6. 1991

  7. 1999

  8. Request Response

  9. CONVERSATION

  10. Method (verb) GET POST

  11. Method (verb) GET POST PUT DELETE

  12. Method (verb) ACL BASELINE-CONTROL BCOPY BDELETE BMOVE BPROPFIND BPROPPATCH CHECKIN

    CHECKOUT CONNECT COPY DELETE GET HEAD LABEL LOCK MERGE MKACTIVITY MKCOL MKWORKSPACE MOVE NOTIFY OPTIONS ORDERPATCH PATCH POLL POST PROPFIND PROPPATCH PUT REPORT SEARCH SUBSCRIBE TRACE UNCHECKOUT UNLOCK UNSUBSCRIBE UPDATE
  13. OMG! Slides with long lists!!1!( #fail

  14. Headers Content-Type Cache-Control

  15. Headers Accept Accept-Charset Accept-Encoding Accept-Language Accept-Ranges Age Allow Authorization Cache-Control

    Connection Content-Encoding Content-Language Content-Length Content-Location Content-MD5 Content-Range Content-Type Date ETag Expect Expires From Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Last-Modified Location Max-Forwards Pragma Proxy-Authenticate Proxy-Authorization Range Referer Retry-After Server TE Trailer
  16. Caching Accept Accept-Charset Accept-Encoding Accept-Language Accept-Ranges Age Allow Authorization Cache-Control

    Connection Content-Encoding Content-Language Content-Length Content-Location Content-MD5 Content-Range Content-Type Date ETag Expect Expires From Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Last-Modified Location Max-Forwards Pragma Proxy-Authenticate Proxy-Authorization Range Referer Retry-After Server TE Trailer
  17. Caching Accept Accept-Charset Accept-Encoding Accept-Language Accept-Ranges Age Allow Authorization Cache-Control

    Connection Content-Encoding Content-Language Content-Length Content-Location Content-MD5 Content-Range Content-Type Date ETag Expect Expires From Host If-Match If-Modified-Since If-None-Match If-Range If-Unmodified-Since Last-Modified Location Max-Forwards Pragma Proxy-Authenticate Proxy-Authorization Range Referer Retry-After Server TE Trailer
  18. OMG! Enuff with teh LONGass lists!!

  19. Status 200 OK

  20. 404 Not Found Status

  21. Status 200 OK 300 Multiple Choices 301 Moved Permanently 302

    Found 304 Not Modified 307 Temporary Redirect 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 410 Gone 500 Internal Server Error 501 Not Implemented 503 Service Unavailable 550 Permission denied
  22. Homework

  23. Homework

  24. Request Response

  25. BE POLITE

  26. BE SPECIFIC

  27. BE MODEST

  28. Jan van Hellemond @jvhellemond @frontlab