View source

While Case stares at a spinner, Molly, three states away and bored of refreshing, right-clicks the route page and chooses the menu item that says View Source, a small act of idle curiosity about to teach her more than the next hour of refreshing will. She was not supposed to do that. Nobody minds. Nobody ever checks.

She was looking for the bit about the bridge. What she finds is the page’s recipe: three languages in one file.

Three materials

The first is HTMLConcept · lights on your mapHTMLThe language giving a page its structure and meaning: what each thing is. A heading, a paragraph, a button. The first of the frontend’s three materials, before CSS styles it and JavaScript makes it act., which says what things are. This is a heading. This is a paragraph about a bridge. This is a link. Structure, with no opinion about appearance.

The second is CSSConcept · lights on your mapCSSThe language controlling presentation and layout: how things look. Colour, spacing, type, position. Applied over the structure HTML provides., which says how things look. Harborview blue, this typeface, that spacing. Change only the CSS and the same page becomes unrecognisable without a word of it moving.

The third is JavaScriptConcept · lights on your mapJavaScriptThe standard language for making pages interactive inside the browser, and via runtimes elsewhere, a server-side language too. HTML structures, CSS styles, JavaScript behaves., which makes the page do things. The countdown that ticked away to 10:00 this morning was JavaScript, deciding once a second that a number on the screen had just become wrong and fixing it. All night. For the eleven hundred people who left the tab open and went to bed.

The parts that never change

Look closer at what the page is made of, and it splits along a different seam. The course map image is the same for Molly as for every person who will ever load it, today, tomorrow, and on race morning itself, when half a million spectators will arrive wanting the same map inside the same hour. That is static contentConcept · lights on your mapstatic contentContent prepared once and reused: images, fonts, stylesheets. Often identical for every user, which is what makes it safe to cache and therefore fast., and it is why her cached copy from two scenes ago was safe to keep.

The little counter that says how many places remain is the opposite. It was computed for this request, this moment, this refresh, and it will be wrong within seconds. That is dynamic contentConcept · lights on your mapdynamic contentContent generated for the current request: your inbox, your cart, a live counter. It cannot simply be cached and handed to the next person, and the next person would not want it., and no browser should keep it.

Static and dynamic: the reusable and the fresh. Every page you have ever loaded is a sandwich of the two, and making the web feel fast is mostly the quiet craft of knowing, file by file, which is which.

Molly closes View Source, having understood roughly none of the syntax and, without noticing, all of the idea. The bit about the bridge was in the HTML the whole time. Right at the top.