[{"children":[{"text":"I wrote a bit of JSX in my editor:"}],"type":"p","id":"3b92cf13-b889-4c65-b998-45517fb33191"},{"children":[{"text":"Hello, Alice!"}],"type":"p","id":"4661d53b-f9c1-40b6-9df0-4296daa4dde0"},{"children":[{"text":"The fact that this works is a marvel of engineering."}],"type":"p","id":"d831cb8b-4098-4f71-9b8f-6fc9fb4a738f"},{"children":[{"text":"Deep inside of your browser, there are pieces of code that know how to display a paragraph or draw text in italics. These pieces of code are different between different browsers, and even between different versions of the same browser. Drawing to the screen is also done differently on different operating systems."}],"type":"p","id":"d8f4d332-7464-474e-89fc-88681adab1f8"},{"children":[{"text":"However, because these concepts have been given agreed-upon names (

for a paragraph, for italics), I can refer to them without worrying how they really work on your device. I can’t directly access their internal logic but I know which information I can pass to them (such as a CSS className). Thanks to the web standards, I can be reasonably sure my greeting will appear as I intended."}],"type":"p","id":"e35eb1fa-a0eb-4d08-8ee9-ac511558242f"},{"children":[{"text":"Tags like

and let us refer to the built-in browser concepts. However, names don’t have to refer to something built-in. For example, I’m using CSS classes like text-2xl and font-sans to style my greeting. I didn’t come up with those names myself—they come from a CSS library called Tailwind. I’ve included it on this page which lets me use any of the CSS class names it defines."}],"type":"p","id":"a6147251-82ec-4e00-be5b-d9bbb3811071"},{"children":[{"text":"So why do we like giving names to things?"}],"type":"p","id":"e5ca3f94-4d27-4de7-9671-7419dbfd6930"},{"children":[{"text":"I wrote

and , and my editor recognized those names. So did your browser. If you’ve done some web development, you probably recognized them too, and maybe even guessed what would appear on the screen by reading the markup. In that sense, names help us start with a bit of a shared understanding."}],"type":"p","id":"54dad3fe-6807-42f1-a325-c18e3b649a60"},{"children":[{"text":"Fundamentally, computers execute relatively basic kinds of instructions—like adding or multiplying numbers, writing stuff to memory and reading from it, or communicating with external devices like a display. Merely showing a

on your screen could involve running hundreds of thousands of such instructions."}],"type":"p","id":"02fe3ed3-a409-45ed-bbe6-d574d080fc21"},{"children":[{"text":"If you saw all the instructions your computer ran to display a

on the screen, you could hardly guess what they’re doing. It’s like trying to figure out which song is playing by analyzing all the atoms bouncing around the room. It would seem incomprehensible! You’d need to “zoom out” to see what’s going on."}],"type":"p","id":"d76081a2-49e8-4286-9cd8-26b316391b4e"},{"children":[{"text":"To describe a complex system, or to instruct a complex system what to do, it helps to separate its behavior into layers that build on each other’s concepts."}],"type":"p","id":"0d54629b-401f-4f2b-82f1-187a84a7f07b"},{"children":[{"text":"This way, people working on screen drivers can focus on how to send the right colors to the right pixels. Then people working on text rendering can focus on how each character should turn into a bunch of pixels. And that lets people like me focus on picking just the right color for my “paragraphs” and “italics”."}],"type":"p","id":"acea19b2-eb99-4be1-8547-cd5e6b372b20"},{"children":[{"text":"We like names because they let us forget what’s behind them."}],"type":"p","id":"605a41d9-a993-4311-ba2d-58c5a7784a99"},{"children":[{"text":"I’ve used many names that other people came up with. Some are built into the browsers, like

and . Some are built into the tools I’m using, like text-2xl and font-sans. These may be my building blocks, but what am I building?"}],"type":"p","id":"4f51b34a-0ff4-48d6-adfc-50470880257e"},{"children":[{"text":"For example, what is this?"}],"type":"p","id":"04cdd70f-e654-4c8a-85d2-3dbbb8ef542b"},{"type":"p","children":[{"text":"

\n Hello, Alice!\n

\nRight now, this information only exists on my device. But with a bit of luck, it will travel through time and space to your device, and appear on your screen.
\n Hello, Alice!\n
\nHello, Alice!"}],"id":"d5b3bbd1-8df9-4b65-8433-1a2d9ae7b33a"}]