The Internet: A Play!

I wrote a play for middle school girls about how the internet works. Now you can read it too!

The Back Story

In Dec 2015, I was asked to speak at Girls’ STEM Roundup, a conference for middle school girls to showcase careers in STEM hosted by the science museum Exploration Works in my hometown of Helena, Montana.

I think I was asked to speak at the conference because I am a real live example of a Helena girl grown up to be an Engineer. I’m currently a Lead Product Engineer at the fashion-tech startup Rocksbox. However, I’m not *only* an Engineer. I’m also a lifelong theatre enthusiast and performer. As I thought about what I wanted to share with these young women, I kept coming back to three things:

  1. I wanted to share something that was approachable and relevant to their everyday lives. When I was younger, I thought that engineering was only used for big, far away things like rockets and bridges. I didn’t understand that it was also in the everyday things all around me.
  2. I wanted to teach them something I really do use in my job as a Software Engineer. I wanted fun and approachable, but it couldn’t just be fluff. It had to be real engineering principles/skills.
  3. I wanted to share my enthusiasm for the link between STEM and the Arts. I credit some of my success as a Software Engineer to the lessons I learned at Grandstreet Theatre School, and I wanted to showcase how the synergy of two seemingly dissimilar passions can create something really special.

I decided I would write a play that answers the infamous software engineering interview question: What happens when you type a url into the browser’s address box and press enter? The participants would rehearse it during our workshop, and then they would perform for the rest of the attendees later in the day.

It wouldn’t be just another lecture, they’d be on their feet, moving their bodies, imagining themselves as anthropomorphized files and servers! They wouldn’t just be learning about the internet, they’d also learn a bit about theatre! They would also have a leg up on answering that pesky interview question! If I were doing it over again, that’s how I’d want to learn about the internet. “Be the change you wish to see,” and all that, right?

Before jumping into the script, let’s meet the characters. This section was included as the first page of the girls’ scripts.

Note: If you’re a technical person reading this, you may find yourself tempted to chime in “Well actually, it doesn’t quite work like that…” I know. I tried to find a balance between how things actually work, what I can easily explain in a short time, and some entertaining artistic liberties. Not unlike Hamilton.

Meet The Characters

ARIEL: Ariel is your average STEM enthusiast. She’s been browsing the web in search of a fun summer camp. She is very fond of her cell phone.

GRACE: Grace, aka Admiral Grace Hopper was a actual computer scientist and programming pioneer! She coined the phrase “finding a bug” or “debugging” after she literally found a moth in her computer. Grace is Ariel’s technical fairy godmother.

A selection of “costumes” from The Internet: A Play

CLIENT: In this story, the client is Ariel’s iPhone. The client is peppy and eager to help Ariel out with exploring the internet. The client is a computer.

DNS SERVER: Despite being bookish and a bit of a know-it-all, the DNS Server is very popular amongst Client and her friends. The DNS Server is also a computer.

SERVER: The nasa.gov server is a top notch server. She is very responsive and prompt when contacted by clients. Like the DNS server, she is a computer.

HTML: Html is straightforward and no nonsense. She’s got a plan and she wants to get it executed. Html is a file, not a computer.

RENDERING ENGINE: The rendering engine is what will take all the files of a website and put it together to display it to the user. The rendering engine is a bit of software that run on the client computer.

CSS: Css is the stylish part of the internet. She contains the instruction on how a webpage should look. CSS is also a file.

JAVASCRIPT: Athletic and bouncy. Javascript files can have many purposes on web pages, but in this show, the javascript is responsible for adding some light motion and animation to the page. The javascript is also a file.

SPACE SERVER: Similar to the NASA server, but run by space.com instead. A hobbiest server. A little bit less robust than the NASA server. Also a computer.

SPACE IMAGE: A big, strong image. Lots of pixels mean lots of clarity in the image, but also make it a very large file.

And now, without further ado…

The Internet: A Play!

Lights come up on Ariel, using her phone, quite frustrated.

ARIEL: Ugh! This is really frustrating. I’m trying to read about this cool summer program on nasa.gov, but the page isn’t loading. What is up with that?!?!

GRACE: (appearing out of nowhere) Ahem. I think I may be able to help with that!

ARIEL: Who are you?!

GRACE: I’m Admiral Grace Hopper! I’m a computer science pioneer. And today, I am your technological fairy godmother. I can help you understand what’s going on with that web page if you’d like.

ARIEL: Wow, uh, that would be great!

GRACE: Alright, first things first. Meet your friend “THE CLIENT” (the client pops up out of nowhere). You might call the CLIENT by a different name: your smartphone, your tablet, your laptop, the computer lab computers.

CLIENT: Yeah, there are a lot of us out there. Basically any device that accesses the internet either through a browser or an app can be considered a client. I am here to do your bidding, so just let me know where on the internet you want to go.

ARIEL: Well I was trying to go to nasa dot gov slash summer camp… I typed the url in the address bar..

CLIENT: Great! I’ll take it from here. Before I can show you that information, I’ve got to figure out where to find it. Let me call up my friend the DNS Server.

DNS Server appears upstage center.

DNS SERVER: Hello hello hello. DNS Server, at your service, to whom may I direct your request?

CLIENT: Hey DNS, my user would like to go to nasa.gov. Can you point me in that direction?

DNS SERVER: Oh I can definitely help with that. I have a whole database that maps network names to IP addresses. Let me see what I can find… Ah, right here, nasa.gov, you can find that site at IP Address 178.79.242.47 (a pause while CLIENT looks at DNS SERVER expectantly) which means it’s over there.

CLIENT: Thanks. You da bomb dot com

DNS SERVER: Would you like the IP Address of bomb.com? One moment —

CLIENT: It’s an expression, DNS, just an expression.

GRACE: Moving right along you two…

ARIEL: So what happens next?

GRACE: Next we go find the nasa.gov server.

CLIENT: I got this. *ahem* Hey 178.79.242.47! Can you hear me?! Come in, 178.79.242.47, over and out. I would like to send me messages using protocol X.

SERVER: I copy, client. This is the nasa.gov server. Roger that. You’d like to receive messages using protocol X. I would like to receive messages using protocol Y.

CLIENT: Sounds good buddy. You would like to receive messages using protocol Y.

CLIENT and SERVER meet center stage and shake hands.

ARIEL: That was awfully formal of them.

GRACE: Indeed. We call that negotiation the TCP or Transmission Control Protocol Handshake. Servers and Clients can be written in all sorts of protocols, so it’s always polite to ask them which protocol they prefer before starting a conversation.

CLIENT and SERVER have returned to their separate corners.

CLIENT: Now that we have that out of the way, I would like to request the web page found at nasa.gov/summer_camp.

SERVER: Coming right up.

HTML appears next to SERVER.

HTML: Hi boss! Is it my turn? Do you need me?

SERVER: Yes indeed SummerCamp.html. Please send a copy of yourself to that client over there. As quick as you can.

HTML: You got it boss. Starting data stream…

HTML slowly starts spinning over towards the CLIENT.

ARIEL: What is this information that’s being transferred from the SERVER to the CLIENT?

HTML: Oh me?!? What is my job?! I am the HTML file. That stands for Hyperlinked Text Markup Language. And I am the most important part of the webpage! I am blueprints for how the page is layed out, plus all the text. I also have additional instructions about which other files the CLIENT will need to download in order to display the page properly. I am the first piece of information that the SERVER sends to the CLIENT about the requested web page.

CLIENT: And once I receive it, I hand it off to the RENDERING ENGINE. I just fetch the plans. Ol’ RENDERING ENGINE takes care of constructing the page.

RENDERING ENGINE: Yes, reading through this now… Everything looks good. Oh! Wait hold on. It says here we’ll need to get some CSS. CLIENT, can you ask SERVER to send the file ‘homepage.css’?

CLIENT nods, and looks to SERVER who nods and then looks over her shoulder expectantly at CSS.

CSS: Oh! Oh! That’s me. Coming right over!

CSS streams over to CLIENT the same way that the HTML did.

GRACE: Meanwhile, while the CSS is sending a copy over, the RENDERING ENGINE keeps reading through the HTML. Multi-tasking: the secret to getting things done!

RENDERING ENGINE: Alright, we need a paragraph here, and it looks like there a link in the paragraph. Got it. Ah, what’s this?! CLIENT! We’re going to need another file from the SERVER. Can you please request the files ‘spinning_planets.js’?

The scene becomes a bit busier, but still organized. While the CSS is still streaming down, the CLIENT talks to the SERVER and requests the JAVASCRIPT file. The RENDERING ENGINE is still reading through the HTML adding more basic elements to the page. Finally both the CSS and JAVASCRIPT arrive at the CLIENT. The RENDERING ENGINE looks up, having finished reading through the HTML.

RENDERING ENGINE: Alright CSS. What should I do with you?

CSS: Don’t ya know, darling? I am the only stylish thing about this website! They don’t call me Cascading Style Sheets for nothing. (She laughs, obnoxiously) I have the instructions on how to fancy up that dreary, basic looking HTML. Why don’t we start by making the whole background of the page a nice crisp grey, and let’s make the font color blue, but all the headings should be bright green for contrast, next we’ll…

GRACE: We’ll let her carry on. This might take awhile.

ARIEL: Grace, I have a question. Why can’t the HTML just have its own instructions about its appearance? Why do they have to be downloaded separately?

GRACE: Good question! We programmers have a rule we like to follow. It’s called (makes a grand gesture) “The Separation of Concerns!” (USER looks confused and unimpressed) Basically it means you should separate code that has different purposes. So in this case, the HTML contains the content of the page while the CSS contains the styling. They have completely separate jobs so they shouldn’t be co-mingled in a single file.

RENDERING ENGINE: Thanks CSS. I think I got all those details down… On to you JAVASCRIPT. What instructions do you have for me?

JAVASCRIPT (stretching) We’ve got to get some movement into this page! Which is why I’m here. I make static web pages come to life with a little animation and other fun tricks. Here’s what I have for this page, when the USER taps this button, let’s scroll them to the bottom of the page and then show this very cool picture of the galaxy. And when the user taps on each planet, we will play one of these sound effects.

RENDERING ENGINE: Alright. Sounds fine to me. But tell me more about this picture you want to show?? I don’t think I have any pictures on this page yet…

JAVASCRIPT: Oh yeah… I forgot to mention that you can find the image at “www.space.com/images/galaxy.jpg”

RENDERING ENGINE: CLIENT, can you help me out with that request?

CLIENT: Yes, but I don’t think I know where to find the Space.com server, hold on

ARIEL: So you’ll need to go ask the DNS SERVER for the IP Address of the Space.com SERVER?!

GRACE: Hey, you’ve got it. The whole process starts again! The CLIENT talks to the DNS SERVER and gets the IP Address of the SERVER for the requested web page. The CLIENT contacts the SERVER, they complete the TCP handshake, and then the SERVER sends down a copy of the requested file.

While Grace is reviewing the process, the CLIENT, DNS SERVER, Space.com SERVER and Space.com IMAGE are demonstrating each step, just as before.

SPACE SERVER: Here you go. One galaxy image coming up.

SPACE IMAGE: Weeeeee! I made it.

RENDERING ENGINE: Yes, yes, take your place. And I think that’s everything.

CLIENT: User, we are all done and ready for you to use!

The cast performing the world premier of The Internet: A Play at ExplorationWorks Girls’ STEM Roundup in Helena, Montana. February 27, 2016

ARIEL: Wow, thanks everybody. That was quite a production just to get this one webpage. But I still don’t understand why the webpage wasn’t working when I tried a minute ago…

GRACE: Well it’s hard to be sure exactly what went wrong. There are so many moving parts here. Any one of them could have caused the problem…

DNS SERVER: I could have been asleep on the job, so the CLIENT couldn’t get the IP Address she needed.

SERVER: Or I could have been undergoing maintenance and refused to talk with the CLIENT.

HTML: Or I could have had a small formatting error

RENDERING ENGINE: So then I couldn’t figure out how to read the HTML to display it for you

CSS: I could have accidentally made all the text white on a white background so no one could see the content that was there

JAVASCRIPT: I could have included a link to an image that didn’t exist…

SPACE SERVER: …So I would have had to respond with nothing. Or I could have be bombarded by requests from other clients, so it took me a very lonnnnng time to respond to the CLIENT

SPACE IMAGE: Or I could have been a massive image. So large that it took many many second for all of my data to be transferred from my SERVER to the CLIENT

GRACE: And on top of all that, it could be that the cellular network is transporting the data between each of these steps soooo slowly that it just feeeeeeels like the web page is broken.

ARIEL: So what can I do about it?

GRACE: Well if you were the engineer in charge of maintaining this web page, I would hope you would investigate each of the potential problems we brainstormed. But if you’re just a regular user, I’d suggest refreshing the page to see if that fixes things! Alright everyone, let’s take it from the top…

All the actors scatter back to their original places, ready to go again, always.

THE END.

If you’re interested in using this script in your own classroom, I would be a) thrilled and b) more than happy to share.