The Sculptor's First Unkeyed Mortise: On the Creaking Joint of a Perfectly Carved, Yet Unlocked, Structure

There is a quiet satisfaction in watching a complex component render perfectly on the screen. The data loads, the styles snap into place, and the user sees exactly what we intended. We step back, admiring our work. But then, the user clicks a button. A new element appears. And the entire page lurches downward, the ‘Read More’ button you were about to click now under your cursor, replaced by a sudden, jolting void. You’ve just been a victim of layout shift, and the culprit is often a beautifully crafted piece of the page that forgot one final, crucial step: the key.

In woodworking, a mortise and tenon is a classic joint, a square peg fitting into a square hole. But for a joint that must bear weight or resist movement, a craftsman will add a key—a small, driven wedge that locks the tenon securely into the mortise, transforming a simple connection into an immovable bond. Our front-end components are no different. We can build them with precision, but without locking them into their place in the document flow, they remain potential agents of chaos.

The most common unkeyed mortise in our craft is the asynchronous container. Think of a ‘Related Articles’ widget, a dynamically loaded comment section, or a hero banner that fetches its content. We build the space for it, a perfect empty div, and we await its content. The browser sees this empty space and renders the page without it. Then, the data arrives. The content pours into the div, and the browser must now recalculate everything. It pushes subsequent content down, and the page shifts.

The technique to key this joint is simple, yet profoundly effective: reserve the space. Before the data arrives, before the component even thinks about rendering, we must define its dimensions. For an image, we’ve long known this as setting width and height attributes. For a more complex component, we use aspect ratio boxes or, more directly, set a min-height. This min-height is our key. It’s a calculated value based on the expected content—perhaps 300px for your widget, or 120px for a comment input. By declaring this upfront in your CSS for the empty container, you drive the wedge into the joint.

The browser now knows, unequivocally, that this space is claimed. It will render the entire page with this reserved area in mind. When the dynamic content finally loads, it simply fills a space that was already there. There is no push, no shove, no lurch. The joint is locked. The structure is stable. It’s the difference between a guest arriving to find a prepared room and one who has to push the furniture aside upon entry. One feels seamless; the other feels disruptive.

This act of reservation is not a compromise of dynamism; it is its foundation. It is the acknowledgment that a page is not a static picture but a living document, and its stability is the stage upon which all interaction performs. By taking this one small, deliberate step—by always keying your mortises—you move from building components that merely look right to crafting experiences that feel solid, reliable, and truly professional. The user will never see the key, but they will always feel the stability it provides.

Notes & further reading

A few pages I came back to while writing this: