After listening to this show, you should have a better understanding of:

Transcript
Kevin: Hi, I'm Kevin, and you're listening to Tech Oversimplified, the show where we pump out strategic understanding of technology faster than the Fed prints money.

Today, we're going to follow what happens when you click a button on a website to load the next page. Now, I know this seems a little bit boring or dry, but most of us spend hours using these technologies every day. Email? Ding. Video calls? Ding. Downloading this very episode? Ding.

So, given that we're using these most days, understanding these technologies at a high level is kind of a superpower in the business world. So many of the things that go wrong with technology are easier to understand when you get what all the pieces are at a high level and how they fit together.

I'm going to tackle this in a format that will become really familiar to you throughout the show. I'm going to take a story that's a bit of a contrived example, I’m then going to go through all the pieces involved in that story, break them down one at a time into the high-level technical pieces, and I'm going to explain to you why it all matters, at the end. If you want to research any of these pieces more deeply, we can make that a topic in a future episode, so feel free to reach out to me at techoversimplified.com and we'll get into those details in the future. Now, I should note that there are a lot of acronyms in the tech world. And the first time I'm going to actually say what all the letters mean. But after that, the definitions will always be in the show notes, so feel free to look those up after the show. So, let's get into it.

What actually happens when you try to load that next page by clicking that button? So, let's say that you want to ask for the latest Tech Oversimplified episode, but I'm a hipster and I'm on a no tech holiday, so you can't just email me, or text me or, you know, send me a ‘contact us’ inquiry on my website. So, you decide to send a postcard that says, “Hey, can we talk now?” You and I have already agreed, independently of this, that we're going to speak in English, so you know that I can understand you when you say, “Hey, can we talk?”

Now as you know, I am, in fact, quite famous. So, you just need to write ‘Kevin Brown’ on the postcard. There's no address required, and everybody will just know where that goes because, of course, I'm Kevin Brown. Where else would it go? So, you go to a dodgy transport company and you give them your postcard. Now they're full service, so they figure out the address for you using a directory book in their office and based on where that address is, they know who to hand it off to next to finally get it to its destination.

So, your dodgy local delivery company forward this on, now knowing where it goes, to the post office so it can come to me. Internally, the post office bounces around a bunch, however they want to route it. They can take it from any office to any other office using whatever method of transport they feel is best, as long as it comes out the other side. So, eventually, it gets to my local delivery company, and they put it in my mailbox.

Now my assistant checks this mailbox and writes back, “Sure.” on their own postcard. This then bounces all the way back through all the pipes; however it got to me is likely how it will come back, but it's not guaranteed; it doesn't have to go that way. So, let's recap for a moment. You want to talk, you've sent a postcard, my assistant has gotten that postcard and has written back, “Sure, we can talk.”

You receive that postcard, so you're now in a place where you know it's okay to talk, I understand English, and that I am in fact willing to have this conversation. Now that you've gotten this postcard back that says, “Sure.” You say, “Okay, great. Can I have the latest Tech Oversimplified episode?” Now, when my assistant receives this request, they give the episode back to you. They give you the script of the show, and they split it across multiple postcards.

You're going to find out in a minute why they're so obsessed with these tiny little postcards and why they split all of their content across them instead of just giving you a letter, like a normal person. So, you get all the pieces, and you put it back together on your side. Now you have to arrange them in the right order, you have to understand overall what you've asked for and what you're getting back, but you do, so you put it all back together into this document.

As you read through this document, you see that my assistant is referencing images and sounds and all other things that make up this episode. It's kind of strange, they didn't just put them in to begin with, but okay. So, you send more requests to ask for those, and since you know all the ones you need, you can send them largely together in one chunk. You don't have to now wait, do one at a time like you did to start off with.

So, what the heck? Why not just send it with the original thing? Well, we'll get to that, too. So, my assistant gives all the pieces back to you, again spread over multiple postcards because that is apparently their super-weird thing that they have to do. So, you assemble all of this on your side, you now have the original request, the original document, you've got all the things that the assistant referenced, and you now have all the pieces of those and you now have the full picture of what you wanted. This is largely how getting web pages work.

Okay, so that's it. That's the story. You're sending postcards and the assistant is sending you back responses. You read through those responses and you have to put together the whole picture through multiple requests.

So, it's time for concept one, IP addresses. This is Internet Protocol addresses. These are numbers, and currently, they're separated with dots. In the future, they will change, but right now, they're four numbers separated with some dots that computers can use to find each other on that network. If you want to talk to somebody else, you have to know where they are so that you can talk to them. That's it. That's all an IP address is. You've probably heard of these referenced in pop culture, for example, on CSI New York, with law enforcement doing silly things that make no actual sense to try to find other computers. Okay, great. We've covered IP addresses.

So, on to the next piece. Who was that dodgy local delivery company that I was talking about? Well, this is concept two: it's whoever you buy your internet from, also known as your Internet Service Provider, or ISP. And that's who you give all of these postcards to so they can get where they're going. Okay cool, so we know who that dodgy local delivery company is.

What about that book that they were using to look up my super-famous name and figure out where I live? That book is concept three, which is DNS, or Domain Name System. This is the system that ISPs used to look up a nice, friendly name, like techoversimplified.com, and turn it into an IP address so they know what to talk to.

Why did they have a book in their office? Well, because every internet service provider has their own little copy of the system, which is why when you make changes to these records, it can take a while before everywhere on the internet has those changes. Everybody's looking at their own little local book. So, you can change the central record, but it might take a while before those changes get through to everybody.

So, why all these postcards, what's up with all of those? Well, first off, aren't they a little bit insecure? Why are we using postcards in the first place? Everybody in the entire process of going from and to everywhere can just read what's on all of these postcards.

Yes, in fact, that is quite insecure. Everybody can see the content. Wouldn't it be better if we put that content in an envelope so that only the people at the beginning and the end of the process can actually see what's in there? Well, yes, we do actually want to do that. That is a technology called secure transport.

And it is concept four. So, the normal transport and the secure transport are important concepts. When you see a padlock in your browser, that's secure, which means the people in the middle can't see what's inside all of that content. So, that's great. Secure transport gives us an envelope so we can be sure that only the people at the ends of the communication can see what's in it.

What is often not covered in this process is talking about what happens after that. Once you give that information to the recipient securely, you can't control what they do with it. They might leave it on their porch, or send it to their mother, or do any number of things with that content. So, your data, that security of that data is only protected by the recipient. And there are many data breaches that happen even though the data was originally sent over secure transport.

So, just because you see a padlock in your browser does not actually mean that the recipient of that data is going to do the right thing with it. This is important to know. So, what about this agreeing to speak in English part? Yeah, well, that's just agreeing on a standard that you and I are going to use to talk. You've probably already heard of the standard that web browsers used to talk.

It's called HTTP or hypertext transfer protocol. And it is concept five. You've seen this all over the place on the left side of URLs because this is how computers are agreeing to talk to each other. When we send information with HTTP, we also send back some information about the status of your request in general.

So, you asked for this document. Was it successful? Has it moved? Has it gone somewhere else? Is it missing entirely? That additional information is sent in what is called a status code, which is just a number that we've all agreed certain numbers mean certain things. So, for example, 200 means success. 404 means not found. That's why we talk about 404 pages, the page that’s sent when we don't know where the content is, and we can't find what you're looking for.

Now, random nerd fact, if you want to impress your technical friends, there is actually an HTTP status code called status 418. And that is, “I am a teapot,” and it is sent when a device refuses to brew coffee because it is a teapot. This is actually part of the HTTP standard and was put in as part of an April Fool's joke. It's still part of the standard, many, many years later. And we now have, permanently, a status code we can use to refuse to brew coffee because we are a teapot. The specification also indicates that the response may indeed be short and stout.

So, let's talk about the security of HTTP. I'm showing my age a little bit, but back when I was in university, not very much data was sent securely across the network. Many students at my university liked to just sit in the student union and watch the traffic that was happening on the WiFi network. Most people's emails were being sent unencrypted, you could just read whatever went by. These days, thankfully, tech providers have started moving to just doing everything, by default, over secure transport, which is great, we should have more of that. But make sure that when you're sending data that you care is kept secret, that it is actually sent securely.

Okay, so we've talked about secure and insecure transport. What about this business of having to chunk everything up into these little postcards? Why don't we just put a few pages together? Well, it turns out our networking technologies and standards are actually pretty old, at least in internet years, and they can only handle so much data; there's only so much you can squish into one little chunk.

And they need to be able to chunk it up so that they can handle it efficiently. By splitting them up, we can route them more effectively—we can move them where they need to go—without having to deal with giant chunks of data all the time. So, the postcards are actually, in computer land, a more effective way of sending all of this data because we can split it and we can route it differently based on where it needs to go, and if we want, we can even parallelize some of that routing in some cases.

So, these are called packets, and they're concept six. Those packets are little chunks of data that are of a certain size, and because they're small, we can handle them more easily. So, that's why we chunk it up into small chunks.

So, what's with this bit about my mailbox and my assistant? What's going on with that? We're talking about an assistant that's always around, and listening, and ready to respond to requests. You've probably heard of this before: it's called a server, and it's just a computer on a network that listens and responds. And it's generally on because otherwise when you send it messages just would give you errors back because it's not there to talk to.

So, concept seven is a server. That's all the server is: it's just a computer that's around all the time. And in fact, servers don't have to be particularly expensive, but they often are just because they need to be reliable, and they need to be able to be on 24/7, so we often choose high-quality hardware for these things. But we don't have to. It's just a computer,  that's all it is.

All right. I know we're moving through a lot of concepts very quickly, but we're up to concept eight. What happened when we got the document back? How do we reassemble it, and look through it, and understand what it was referencing, and get all those other pieces and then put it all back together?

Well, this is a technology called HTML, or Hypertext Markup Language. And HTML is just a format for text that says this is what a document looks like on the web. And your web browser can read that document and can understand what it means. So, that's all that that first response was, was a document that said this is all the other stuff that I'm going to need. And here is the actual textual content to display.

Once you have that textual content, there's some information that's a bit like the stationery that that document is on. It says how to format and show all the pieces of information that are there. This is a technology you also might have heard of, called CSS, or Cascading Style Sheets. CSS is concept nine.

So, we've already covered nine concepts very quickly, I'm going to sneak one more in which is concept ten. Got to round out that number. What happens when we get this document? We know how to show it, in terms of its styling, because we have this style sheet that comes with it. Well, if we want to make it interactive, there's actually a programming language called JavaScript. And that is our last concept for today.

So, JavaScript is a programming language that is widely used on the web that can change what you see in that document. It can go do things and request more information, and generally make the webpage more interactive. JavaScript is a somewhat controversial programming language in the programming world because it is a little bit of a messy language. It was created in about two weeks when we were building Netscape Navigator. However, it has persisted and it has become the most widely used programming language in the world today.

So, most programmers know how to write JavaScript. They've had to do it, at least a little bit for the web. And JavaScript can be run on just about anything, so it's one of those languages that programmers don't love for its purity; we love for its utility. It lets us get things done quickly. Most web pages around today, when they're trying to do something interactive and interesting, they're using JavaScript to do that.

Okay, let's review. So, you wanted to get the latest episode of Tech Oversimplified. You sent a request on a postcard which my assistant received. Now, that whole process involved a few things. It involved IP addresses.

In order to figure out what the IP address was for our server, we needed to go to a DNS server and figure out how to take techoversimplified.com and turn it into an IP address. We then sent that postcard through our dodgy local delivery company, which is our ISP, or internet service provider. My assistant—my server—sent back the document to you in HTML, and it did that via HTTP in this example. So, you got lots of unencrypted postcards—or packets—that anybody could read along the way.

Your browser read through that information using HTML, CSS, and JavaScript and figured out what to do with that page. It also requested the other images and sounds involved in that page, and it assembled them all into the result.

That's how the story maps to technology. Okay, so we now understand what, but the question is why? Why is this important or relevant? Most businesses today do something that involves technology and the internet, and they're using all of these technologies to achieve that. By understanding, at a high level, what the pieces are that are involved and what all the moving parts are, you can have much better conversations with your service providers and engineering staff.

If they have a particular problem or challenge, you can reference the story and the pieces in it, and you can understand more about exactly what is going wrong, and why you're seeing what you're seeing in the behavior of your tools.

Thank you for listening to Tech Oversimplified. I hope this information was easy to understand. I didn't get my caffeine because I erroneously asked my coffee maker to make me some tea. So, it gave me a 418 status code.

You can subject yourself to even more of this show at techoversimplified.com and on iTunes, Spotify, Google Play, or wherever you get your pods.