When I was last at UC Berkeley, I found this dinosaur skeleton in a science building and tried to capture it in one photo. As you can see, it’s a large model and I had to splice two pictures together. In person, it’s even more impressive. And it got me wondering: who had the job of assembling this huge thing and how did they go about it?
I pictured all the bones arriving in boxes or crates. And I sure hope a good instruction manual came with them. I imagined that manual (like most assembly manuals) would probably identify the pieces with some kind of anatomical naming convention, or at the very least, by number. And the assemblers would interpret those diagrams and instructions, fetching each piece from the create one by one, placing it in position.
So how does this relate to web design and how web pages and browsers work?
I’ve often been called upon to explain the DOM (Document Object Model) that is the basis of web pages, and I always point back to my Berkeley dinosaur friend for a great analogy because it can be used to explain the DOM, HTML, CSS, and (to a lesser extent) why jQuery is lauded for its simplicity.
The HTML document is the assembly manual, and the DOM is the resulting model. The web browser reads the HTML to understand the structure it needs to create. It forms a sort of memory-picture or “mental model.” Then it fetches the pieces required one by one (from the web server) and assembles the actual web page (that you experience) based on that model. This model is the DOM, and it is a living model that can be changed once initially assembled. If you change the DOM, the web page also changes to reflect the new model. It’s kind of like the bones with skin over the top. While the DOM is behind the scenes, it’s providing the structure for everything you actually see and experience. Change the bones, and the skin/body itself will reflectively change to the person experiencing it on the outside.
But is structure all the DOM deals with? Not quite.
Let’s return to the dinosaur model again. Once assembled, if you wanted to paint just one bone, to treat it differently from the others, you’d need to know how to identify it for the painting crew. It would be important, for efficient painting and styling, if the painters understood the identification convention used for dinosaur bones. You’d give the painter the number or anatomical name for the bone you wished to tint and then specify the color.
For web pages, this is the job of Cascading Style Sheets. CSS provides this way of identifying and selecting elements in the model to which you want to apply a visual style or effect. Selector syntax is crucial for identifying the parts of the DOM to which styles should be applied, which will treat the appearance of each targeted element in the web page as specified. This is why mastering CSS rules and selector syntax is a major part of web design.
And finally, if, like in A Night at the Museum, you wanted to make your dinosaur skeleton dance around the room, you’d need a way to select specific bones and describe how to move them in a pre-planned way. That’s the beauty and simplicity of why people like jQuery. It uses the same CSS selector syntax for selecting elements, to target them for specific actions instead of visual styles.
Modern web browsers do all this interpretation, assembly, and styling every time you load a web page, and they do it relatively quickly given how many structural, style, and action details are contained in the average page. But the reality is that the browser, like the dinosaur assembly crew, is simply following the assembly manual instructions. Ever tried to cook something from a bad recipe? Carelessly written instructions will produce unreliable results, which is why web development is a profession. Because even through the browser is interpreting the HTML and applying the CSS, make no bones about it, it’s still the people behind the scenes writing the script and puling the strings.
I hope you enjoyed this explanation and remember it the next time you admire any model, be it prehistoric or modern.