A Conference Talk That Doubles as the Demo
Zach Leatherman’s recent talk, “This literal tech talk,” is part presentation, part live experiment. The talk is packed with small tricks and clever implementation details, several of which are worth a closer look.
Editing Everything, Everywhere
One of the simplest tricks in the talk is making the entire page editable. Adding contenteditable to the <body> element turns the whole document into an editable surface. The same effect is available in JavaScript via document.designMode = "on". That’s a handy way to tweak content or test layout changes directly in the browser without opening DevTools.
Multiple Cursors and Build-Time Syntax Highlighting
Leatherman also demonstrates typing into two elements simultaneously. That’s a feature CodePen supports natively: CMD + click positions a second cursor in the editor, or you can bake multiple cursors into a snippet.
A more substantial piece is moving syntax highlighting out of the browser and into the build. The 11ty syntax highlighting plugin wraps Prism.js and runs it when the page is generated rather than on the client. That’s still Prism under the hood, but it happens at build time, which means no JavaScript dependency at runtime. Many sites—including this one—still ship Prism.js client-side, but doing the work during the build is a cleaner approach worth adopting where possible.
Progress Elements as Barebones UI
For comparing rendering strategies, using <progress> elements inside <li> tags is a neat shortcut. The native element provides a complete progress bar without any CSS.
System Fonts and Decoration Breaks
The talk makes an argument for system fonts, and invoking them with system-ui is clean and straightforward. Firefox doesn’t support the single keyword, so the full font stack is still necessary for broad compatibility. The gap between a single value and a full fallback list is narrowing, but it hasn’t closed.
For inline headers, box-decoration-break adds a nice visual touch. Wrapping it in an @supports query makes sense because the property is often paired with several related styles—when the property isn’t supported, none of the surrounding styles should apply either.
The Bigger Argument
The underlying message is worth keeping in mind: building every site as a Single-Page App by default deserves scrutiny. JavaScript frameworks genuinely help with components and state, and client-side rendering can improve interactivity and perceived performance. The problem is when that rendering model shows up by default rather than as a deliberate choice.
There’s room for both static site generators and JavaScript frameworks. The trick is deciding which tool fits the job instead of letting the default decide for you.
