I’m getting to the point at work where it’s about time to understand more web technology. How do these web apps we’re building actually work — beyond the markup, styles and scripts I’m used to thinking about? Some notes from reading MDN web docs about HTTP:

  • A protocol for communication between browsers and servers,
  • …on the application layer (that’s the last one, closest to the end user),
  • …which is similar to DNS, FTP, IMAP, POP, SMTP, SSH, TLS/SSL.

Requests and responses

💻 A browser initiates a request to fetch resources.
🌎 The server provides a response to deliver the answer.

User-agent and proxy

The user-agent is any tool that acts on the behalf of the user.

Between the user’s computer and the web server, there are proxies acting as gateways and handle operations like: caching, filtering, load balancing, authentication, logging.

HTTP messages

Examples of some elements they can contain are:

Methods

  • GET is a method to fetch a resource
  • POST is a method to send data to the server

Headers

Information sent as "Name: Value" pairs to describe a resource. This all looks very familiar, but I haven’t understood before now how HTTP headers fit into the world around them.

Status code and message

Oh hey! 👋 I know you. But some more details and more examples:

  • 1xx are information responses 💁
  • 2xx means there was a successful respons ⭐️
  • 3xx are used for redirection messages ♻️
  • 4xx when there’s a problem with the request from the client 😕
  • 5xx if there’s an error with the server 😱

  • 200 OK Success, for example that the resource is fetched and in the message body.
  • 401 Unauthorized …or really “unauthenticated”. Not sure you are who you say you are!
  • 403 Forbidden Yeah yeah, we know who you are, but you can’t access this.
  • 500 Internal Server Error Halp. I don’t know how to handle this.

Cache, cookies and CORS

There’s private browser cache on my laptop, and what’s called shared proxy cache somewhere else down the pipeline. There’s a Cache-Control header field that can specify different mechanisms, and now I see how one name can be repeated in headers to set multiple values.

I know what cookies are! But not that they technically belong here, so that’s interesting to grasp. Also noting that the recommended modern approach is to use Web storage API for client storage. I’m also vaguely familiar with what CORS is, but again — it’s super cool to now be able to put it into this HTTP box for a more complete picture.

Network Monitor

I’ll make an effort to keep this open more often, and actively pay attention to what’s happening with the resources on pages I’m working on.