Preface: I was born in 1999 and only really started programming around 2009/2010, so a lot of what I mention before then is just what I’ve learned from reading books and articles about the era. Feel free to correct me if I got anything wrong.

Genesis

It’s 1985, and you’ve just launched your ambitious pizza restaurant: Pizza Bungalow.

It’s your goal to make the most of the technology in front of you in order to beat the competition, get rich quick, and emerge as the premiere pizza distributor worldwide.

Now, you’re not really a “programmer” - who really is? - but you’re willing to learn. Here’s how you do it.

1985-1990

Microsoft Word

In the beginning, there was nothing.

But then, there was Word. And pizza. Actually, there was always pizza.

Microsoft Word 1.0 was first released in 1985 for the Macintosh (and again in 1989 for, you know, Windows). It was one of the first GUI applications to embrace the WYSIWYG model - What You See Is What You Get. That means if you wrote a Word document on one computer and transferred it to another via floppy disk*, it would look exactly the same as it looked on the first one. With no programming experience required, anyone who knew how to operate a GUI could begin creating files that stored their writing - but with the added advantage of being able to style it. For the first time on a computer, you could change the font size of a text selection, make it bold or italic, underline it, change the font entirely, etc. using just a few buttons. The changes would show up instantly, and you could make however many changes you wanted until you achieved a design that was just right. This trumped all the fancy typewriters and command line editors of the era. Need a special form, contract, or poster? Now you could design it straight from your computer and print it out. Of course, you go out and buy Word at your nearest electronics store. It comes in a floppy disk.

Your first technological endeavor is to make a poster containing your restaurant address and your phone number. You also have a few lines showing your best menu items and their prices. You print out a bunch of these and hang them up around your town, but you wonder if there’s any way to get a bigger audience. Also, printer ink is pretty expensive, and your ad budget is….unreal. As in, it no longer exists.

Floppy disk: A small, often purple rectangle-like thing that is basically what a flash drive was before flash drives existed. It couldn’t really hold that much data, and it was popular for software installations to come in packs of a dozen or more floppy disks that you had to switch out once the current one finished being copying over.

Click on the image above to learn more about the history of MS Office.

As newer versions of Word came out, its capabilites continued growing. Tables were a big deal - lots of important stuff can be represented with tables (so much so that Microsoft ended up writing an excellent table management software, which I’ll talk about later). Images also changed the game, allowing you to include tasty pizza graphics within your documents. All of these additions would culminate in the ability of the common person to design, build, and distribute Hypertext - the backbone of the World Wide Web. But not yet.

A few years later, you design a version 2 of your original pizza poster with a ton of pictures of your pizzas, and a handy menu table showing each item and its price. Again, you go out and hang up the posters.

Floppy disks actually weren’t the only alternative to printing things back then. There were a few other popular options, including a neat protocol called FTP.

FTP & The Internet (aka Microsoft Outlook)

Before we go further, let’s introduce the Internet. Importantly, the Internet is not the World Wide Web - it’s the layer beneath the WWW that makes it work. There’s a lot of nuance and layers to peel in order to accurately describe the Internet, so instead I will simply analogize it to Microsoft Outlook (which came out in ‘98, but don’t worry, I’m using an email application to describe the very Internet it uses so this analogy was doomed from the start). The Internet is basically Outlook for computers instead of humans.

In Outlook, you have an email address - an IP address on the Internet - that you can receive messages to, and you can send messages to other email addresses. But since this is Outlook for computers it’s not you sending or receiving the emails, it’s the different applications on your computer. There are two types of applications in this context: clients and servers. Clients send a message first and wait for a reply from the server. The first message is called a request and the reply is the response. From the server perspective, it simply sits there monitoring its inbox waiting for incoming mail, processes the request, and replies with a response. However, in order for the server to understand the request and the client to understand the response, both applications need to speak in ways the other can understand. So to make things go smoother the developer overlords of the Internet designed protocols to follow when crafting messages. A protocol is essentially a made-up language two applications can use to talk to each other on the Internet. The idea was that, as long as you sent a request that obeyed the requirements described in the protocol, the server would be able to give you a useful response that also obeyed the protocol.

One of the everlasting protocols of this era was DNS - the Domain Name System. It allowed you to assign a name to an IP address, so you’d only have to remember the name and not the IP. Think of this like Outlook’s contact book, where you can have a contact for each person you interact with. The contact can hold that person’s name, last name, birthday, etc. and link all of it to their email address, so you don’t need to remember it yourself. Likewise, a DNS server maintained a list of domain names and the IP addresses they mapped to, so any DNS client could resolve (convert to an IP address) a domain name. The DNS protocol asked that DNS servers worked together - that is, talked amongst themselves - so that new entries could propagate (spread) to all existing DNS servers. This way, no matter which server you asked, you’d get an accurate result. If the server had no record for the domain you’re asking about, it could ask the other ones it knows to see if any of them have a record for it.

Okay, back to FTP, aka File Transfer Protocol. FTP was one of the biggest major steps to building the Web we know today. It was written by Abhay Bhushan* and came out in 1971! The way it worked is that someone who owned a computer connected to ARPANET (the Internet didn’t exist yet) would run a FTP server program on their computer. Another person using another computer would run an FTP client, which spoke the FTP protocol and communicated with the server to upload and download files. Once the file was stored on the server, another client could connect and download it and upload its own files and so on. You may have seen this concept in the wild already - Google Drive is basically its great-grandchild.

Fun fact: Mr. Bhushan is only 74. One of the coolest parts of working in a field this young and in computer science in general is that many of its heroes - the Da Vincis and Galileos - are still alive and well. You can email them!

Back to the future ’80s. So you’ve got this fancy Word poster that you want as many eyeballs on as possible, but you really don’t want to have to keep putting up posters - they’re expensive and it take up a lot of time. Why not upload the Word file onto a few local FTP servers instead? Maybe a few potential customers will try downloading it to see what’s inside. To make it more likely for people to download it, you title it “WARNING_YOU WONT_BELIEVE_WHAT_WE_HAVE_TO_OFFER_AT_PIZZA_BUNGALOW.doc”, making you the first person in the world to use clickbait to enrich yourself. Mark Zuckerberg would have taken notes if he wasn’t, like, six.

That’s still a lot of steps, though. Not only do you have to make the Word document, but you also have to find an FTP server, upload the doc, tell your friends and existing customers about it, and hope they go through the hoops to finally get it up on their screen. You also have to hope that any of the random strangers who also interact with the server don’t try to delete your file, and that the owner of the FTP server doesn’t take it offline. You could start your own FTP server, but nobody would know about it.

Surely there’s a better way?

1990-1995

HTTP

In 1991, the Hypertext Transfer Protocol (HTTP) was standardized and unleashed the Web to the world. In its first iteration, it only specified codified one standard message - the GET request:

GET /index.html HTTP/1.0

An HTTP client - more commonly known as a web browser - would connect to a web server and send a GET request when you navigated to a new website. The server would process the GET request and send a response containing headers and the file you asked for (if it existed - if not it would return a 404 error code).

A web server, like the FTP server described previously, is simply a computer running web server software that knows how to speak the HTTP protocol. Generally the software could be configured to use a specific folder as its root directory which is where it would find the files you ask it for. For example, you could put three pictures in your root directory - say “cheese.jpg”, “pepperoni.jpg”, “sausage.jpg”, and you could retrieve them from the web server with the following requests:

GET /cheese.jpg HTTP/1.0 GET /pepperoni.jpg HTTP/1.0 GET /sausage.jpg HTTP/1.0

You could also have folders in the root directory, say a folder titled “specials” containing images “monday.png”, “wednesday.png”, and access them this way:

GET /specials/monday.png HTTP/1.0 GET /specials/wednesday.png HTTP/1.0

I mentioned headers. You can think of these as the subject line on an email (remember - the Internet is just Outlook for computers). The point of a subject line is to inform you about what the message body contains. Similarly, headers tell the server what type of file the client is requesting, what type of software is being used to talk to the server, and other useful metadata. The server can also send its own headers, such as what type of file it’s returning, how many bytes the file is, what server software is running, etc.

So now with HTTP, problem solved, right? Just set up a web server on your home computer, configure the root directory, and stick all your docs and pictures in it. You could have a document for general information, your restaurant’s history (been in business for 6 years now!), your menu, and one for specials. The possibilites are endless! And, more importantly, you don’t need to go out and buy printer ink. What a racket.

So, you set that up over the course of a few days, and share your IP address with everyone you know. And immediately you get some poor feedback:

  • The IP address is hard to remember
  • I don’t like having to type the document name in my address bar every time
  • I don’t have Word installed
  • My web browser doesn’t load the site
  • The server is down?
  • This document is hard to read on my screen

Oh, bother. Looks like you’ve got more work to do.

The first issue is easy to solve: you call up a DNS registrar (a company that is able to hand out new domain names) and buy the domain pizzabungelow.com. Then, you tell them your IP address, and they tell you that the new domain should begin working within a few hours.

Except, it’s been a few hours, and it still isn’t working. What could have gone wrong? You type your IP address into your browser, hoping that it’s the registrar’s fault. No dice. Your IP stopped working too. Maybe this is what happened to the person who said the server was down?

You call up the registrar again and ask them for help. They inform you that sometimes, an IP address isn’t static - it’s dynamic. Static IP addresses don’t change, but dynamic ones do at intervals determined by your ISP. You can’t host your web server on your personal home Internet connection, because your IP address will keep changing. Unfortunate, but you’ve bought the domain and set up the server already and you’re determined to make this happen. You call up your ISP and ask to be moved onto the Business plan. That one gets you more bandwidth and guarantees a static IP address. After another quick call with the registrar, you’re good to go - pizzabungelow.com is in business.

Next, people don’t like that you need Word to access your website. It costs money, and it doesn’t look great on all different screen sizes. Customers tell you that the other websites they use can be accessed from directly in their browser - tables, images, text and all! In awe at this revelation, you investigate, and discover HTML.

HTML

Hypertext Markup Language. Essentially a very well structured text file, HTML came quickly on the heels of HTTP and standardized what a web page actually is. Before 1993, web browsers all had their own different visions (and subsequent implementations) of what a web server should serve. Each had a special file format that prevented other browsers from rendering* their special files. HTML came along and did away with that whole compatability mess* (well, kind of - you’ll see), and defined a global standard that any web browser could adopt.

Rendering - the process of taking an piece of input, like an HTML text file, and drawing it on the screen. Ultimately this involves a lot of math and changing pixels.

Spoiler alert: that compatability mess? it’ll be around for quite a bit longer….

So you spend a few days rewriting your site in HTML. Any text editor will do - you use Notepad because it’s easily available. After reading a few tutorials, you quickly pick up the HTML syntax. It’s not anything difficult; in fact, it’s quite uniform and simplistic:

<html>
  <head>
    <title>Welcome to Pizza Bungelow</title>
  </head>
  <body>
    <h1>Pizza Bungelow</h1>
    <h3>256 Walnut Street, 48103 MI</h3>
    <h3>(555) 555 - 5555*</h3>

    <img src="logo.jpg" width="500px" height="300px" />

    <p>Pizza Bungelow is YOUR premier choice for delicious pizza and pizza derivatives.</p>

    <h1>Navigation</h1>
    <a href="/about.html">About us!</a>
    <a href="/specials.html">Current specials</a>
    <a href="menu.html">Full menu</a>

    <h1>Popular Options</h1>
    <ul>
      <li>Cheese pizza: $3.50</li>
      <li>Pepperoni pizza: $4.00</li>
      <li>Build-your-own: $6.00</li>
      <li>... And more!</li>
    </ul>
  </body>
</html>

NOTE: put in a picture of this document here

This document, unlike your Word document, is made up of tags. A tag is a word that goes between two brackets, like <div>. You can put tags inside of tags, but importantly you have to remember to close tags in the order you add them: <div><p>hi!</p></div> is acceptable, <div><p>hi!</div></p> just wouldn’t make any sense. Some tags, like <mg> can close themselves, like so: <img />. Each tag also has its own set of attributes (like width and height for <img>) which gives the browser more details in terms of how to render it.

Here’s a periodic table of all the HTML tags currently listed in the spec. Note that these were quite different in the early ’90s, but they’ve evolved over time.

What would happen if you did close the tags in the wrong order, though? Could you make your web browser crash?

As it turns out, as fragile as early browsers were, not crashing - aka stability - became a huge priority for web browser developers. This is because users hated when their browsers crashed and prevented them from accessing the sites they wanted (duh). They would be more likely to blame the web browser than the atrociously designed HTML. Whether or not the browser could properly parse* the page, the user expected a page and boy, they were going to get a page. It might look like utter trash, but at least the browser did its job to the best of its ability.

Parsing: before rendering, the web browser must first turn your HTML text document into a tree data structure, typically called the DOM*, which is used to guide the rendering process.

DOM: Document Object Model. This will come in handy later, but what you should know now is that the DOM allows the browser to understand where a particular element is in relation to all the other elements around it. Imagine the whole thing as a family tree. For example, the DOM lets the browser understand that the <ul> tag - unordered list - has 4 children: all the <li> tags. The <ul> tag has an parent, the <body> tag (which itself has the <html> tag as its parent), and the <h1> tag as its sibling, because they’re on the same level.

Anyways, you’ve got your first HTML page done. At this point you’ve got to be thinking: text, headers, bullet lists, images. Word does that all! What’s the point of HTML?

Unbeknownst to you, HTML came built-in with a secret weapon, and it was on your own very page.

The <a> tag, aka the anchor tag. This tag let you create links from your text. When you clicked on the link, your browser would take you to another HTML page. No more messing with the address bar. More importantly than that, not only could you link within your own site but you could even link to other sites. Sites that other people ran.

At the time, you thought nothing of it - an HTML page filled with a bunch of links to random sites wasn’t going to get you the billions of dollars you desire! Come on, nobody would use that. No, pizza was the way to go. Years later, through a fateful encounter with Larry Page and Sergey Brin one day at Pizza Bungelow, you tried to knock some sense into them. They should quit pursuing Google and instead start a pizza shop in Mountain View, you think. Much more likely to break even. They don’t seem to listen.

Unfortunately, a lot of your Word styles - custom fonts and text sizes and color - can’t be conveyed through HTML. But it’s a small price to pay. Your customers love the new HTML site. It loads quick, has all the information they want, and they can navigate easily with the links. It’s readable on any display.

Quickly, you begin to love the site too. Gone completely are the days of printing out your own posters. Now, if you want to announce a new special or add a new picture, you can simply update your HTML. Want to add a new page? Just put it in your root directory and add a new anchor link. Easy.

A few months later, a guy walks in who says he likes your site, and turns out he runs his own website too. He maintains a business directory for all the small businesses in the area, and he’d be happy to link to pizzabungelow.com from his site to yours for a small fee. You decide to take the chance and pay the fee.

Noticeably, more customers come in. You find more and more site owners and submit Pizza Bungelow all of them. Some customers even link to it for free just because they love the pizza you’re making.

The bet paid off. Customers are flooding through the doors - so many, in fact, that you’re finally able to afford to set up your second location. Pizza Bungelow was officially a chain.

1995 - 2000

Microsoft Excel

While your website was thriving, the situation inside your first restaurant was anything but. With you now hopping between two locations, everything had quickly become disorganized. Ingredients were going missing and new shipments weren’t being called in on time. Staff scheduling was a nightmare, and you were no longer entirely certain of how much money was being spent and made. Tracking individual employee performance and information, such as who had sick days and who needed raises, was seldom done at all. It was clear something needed to change before you were eaten by your own success.

Luckily for you, Word and Outlook weren’t the only products Microsoft was offering in 1995. They also had something called Microsoft Excel. You’d seen it way back in ‘85 when you bought Word, but didn’t really think you had any use for it. Now, with fellow business owners telling you to give it a chance, you try it out.

At its core, Excel is a spreadsheet program. Its main interface consisted of an infinite amount of cells, each of which could contain text or numbers. A cell could also be assigned a formula, which allowed a user to explain to Excel how to calculate the cell’s value using the other cells around it and a bit of basic arithmetic. The ability for one cell to affect many other cells allowed one to simulate almost any real world environment where there are multiple variables at play. As you can imagine, this was the perfect storm for the science and business worlds. Excel could do tables! It could do mathematical formulas! Averages, minimums, sums, common math functions! Charts! For anyone that dealt with numbers, Excel offered a light at the end of the tunnel. As you can guess, it caught on quickly.

Right off the bat Excel solves your most pressing problems. As I mentioned before, tables are handy for quite a lot of things. Inventory, finances, scheduling - you name it, there’s probably a table you can make that would make it easier to deal with. You especially like the cool formulas you can make with Excel: you wonder if this is what real programming is like.

Armed with two Compaq computers and a myriad of floppy disks to transfer your spreadsheets, you train your employees to fill out the sheets and email them to you at closing time. Now you could stay at home if you wanted, and keep a fully-digital archive of each store’s vitals. Writing new formulas was really easy and helped you figure out a lot of “what-if” scenarios - just fudge a few numbers and see how you make out. Similarly, you could make charts based off the past few weeks and try to figure out patterns. What had once been a manual book-keeping chore had become an extremely useful source of information.

While you were busy mastering Excel, though, the world of web development had kept chugging along. Near the end of 1996, Cascading Style Sheets (CSS) were introduced by the W3C* which aimed to solve your design woes.

CSS

Remember how initially your website’s front page was just a collection of a few tags, and a few hyperlinks to jump between the rest of the pages? Well, as more and more people started developing for the web, they kept pushing for more ambitious things. One of the obvious requests was for better control over how the HTML was displayed by the browser - exactly what CSS aimed to fix.

W3C: World Wide Web Consortium. These were the guys that helped bring HTML into the world.

CSS, like HTML, was ultimately another text file that would get parsed by the web browser. The idea was that the HTML would explain to the browser what the content was that the page contained, and the CSS would dictate to the browser how exactly to display it (said more fancily, this is called the “separation of presentation and content”). CSS could tell the browser what color certain text elements should be, what font, etc. Also for the first time, CSS could assist with layout - want a bar of links on the side, or across the top? Want to place a piece of text in the middle of the screen? Want every image on your page to be the same width and height? All of these desires could be achieved by CSS. All you’d need to do is throw in a few lines like this:

p {
  font-size: 18px;
  font-family: "Times New Roman";
}

h1 {
  color: red;
}

img {
  width: 200px;
  height: 200px;
}

…and the browser would make the magic happen.

CSS seems like a good bet, so you go ahead and spend some time refactoring pizzabungelow.com to take advantage of it. Perfectly sized images of pizza grace your screen. You build your first real navigation bar, like all the big “professional” sites have. Your simple list menu transforms into an epic assortment of pizzas, toppings, and prices. Satisfied, you drop your CSS file into your root directory and include it (via the <style> tag) into all of your pages.

You are Picasso, and the keyboard is your brush.

…and then the phone rings.

  • The site’s broken!
  • I can’t see anything!
  • What happened to the old design? Can you bring it back?
  • I have no idea how to use this…
  • Dude, sick redesign! This looks *AWESOME*!

Wait - why did it work for that last guy, and not anyone else?

Through further research you find out that the site appears to break in a newer version of Netscape Navigator.

Well, this is odd. You know they’re getting served the same page with the same CSS, so why aren’t they delivering the same result?

You wouldn’t think it at the time, but you had just flung yourself into an all-out war.

Browser Wars: Part I

In October 1997, Internet Explorer 4.0 was released. The release party in San Francisco featured a ten-foot-tall letter “e” logo. Netscape employees showing up to work the following morning found the logo on their front lawn, with a sign attached that read “From the IE team …We Love You” The Netscape employees promptly knocked it over and set a giant figure of their Mozilla dinosaur mascot atop it, holding a sign reading “Netscape 72, Microsoft 18” representing the market distribution. - https://en.wikipedia.org/wiki/Browser_wars#First_Browser_War:_1995-2001

You open the site in Netscape Navigator and sure enough, it looks completely wrong. Turns out, there’s a problem with standards that aren’t enforced: they were never standards.

XKCD standars

Truth be told, the W3C never had any control over Netscape, or Microsoft, or any other company that wanted to put its web browser in the race. HTML and CSS were very useful standards, but there was no agreement that every browser would treat them the same way. So…they didn’t.

Remember that spoiler alert about how HTML actually didn’t solve the compatability issue? Yeah. Here’s where it comes to bite you. We’re at the half time show, it’s 72-18, and Microsoft is out for blood.

Internet Explorer needed to gain market dominance in any way possible, so it started by adding new tags like <blink>. The purpose of blink, if you couldn’t guess, was to make any text placed in between it…blink (duh). Of course, blink only worked in IE, because it wasn’t part of the official spec. Rinse and repeat for about a thousand other things IE did that didn’t follow the spec.

This wouldn’t have been a problem, if Internet Explorer didn’t also have a very rich dad. Eventually it went from being another Microsoft software product to being included in the Microsoft software product - Windows. On any new Windows computer, you could find IE. It came by default. And as you can imagine, a lot of people chose to use it.

So now you have to make the choice: do you support Netscape, which had the majority, or IE, which was quickly gaining ground?

You stopped to think.

Why not both?

Of course, supporting both would effectively double the effort you’d have to put into ever changing your website. Such a change was simply too disruptive. So you settle on a middle ground: table based design.

You see, because CSS was too young to be taken seriously and IE was in its teenage rebellious stage straight from the corporate womb, it was actually more easy to lay out a site using HTML tables - yes, the same tables you dealt with in Excel.

By changing the width and height of individual cells on your table, you could build a makeshift grid within which you could put in your site’s elements. For example, you could have a cell go across the entire screen at the very top with which to put your header in. Similarly you could run cells down the sides to build sidebars. What’s great is that the table would resize itself automatically if you ever resized the browser window, so in most cases your website would look pretty on any screen and on any browser.

The new table layout did the job, and Netscape and IE users once again rejoiced in the ability to view your pizza offerings.

Then one day, as you’re counting jars of tomato sauce in the stockroom, one of your employees asks: “Hey, how many people have looked at the website anyways?”

You realize that’s a good question.

CGI-Bin