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

Transcript

1. Talking HEADs @jvhellemond @frontlab Jan van Hellemond
3. HTTP over
4. HTTP
5. HTTP v0.9 v1.0 v1.1 1991 1996 1997/1999 v2.0 2014?
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