Web Video Roundup: Progressive Enhancement, Modern JS, and CSSBattle

A handful of engineering-focused videos have been making the rounds recently, each touching on a different aspect of web development. Here’s a condensed look at what they cover and why they’re worth your time.

Tom Scott on Why the Web Is Messy

Tom Scott—the same person behind that self-updating video title—has a new explanation for the web’s chaos. His argument centers on cookies and, more broadly, on human behavior. It’s a short, accessible primer on how we got here.

Recreating Discord’s Sidebar in Detail

An unnamed developer’s recreation of the Discord sidebar deserves credit for getting the details right—mostly. The one notable difference: the :hover is applied to the <li> rather than to a meaningful link. That’s arguably an improvement over Discord’s own markup, which uses <div class="listItem_"> for the same purpose.

Heydon on Progressive Enhancement

Heydon’s latest video is locked to briefs.video due to privacy settings, so it can’t be embedded elsewhere. The central point—“the basic layout is not a broken layout”—is a good one, though the video’s example makes you wonder whether wrapping grid-template-rows in @supports changes much in practice.

It’s great that @supports exists, especially now that it’s well-supported across browsers, but it’s rarely necessary. Its main purpose is to do something other than “just let it not work,” which is an uncommon requirement for most layouts.

Modern JavaScript and the Compilation Trap

Houssein Djirdeh and Jason Miller dig into what “modern JavaScript” really means for shipping code. Their cautionary example: a single line of JavaScript compiled into 7,000 bytes—far larger and slower than the original. Supporting older browsers is worthwhile when you have significant numbers of users on them, but you may be compiling more than necessary if you’re overestimating how many visitors actually need legacy syntax.

The bigger issue is that you only control the code you write; the npm packages you ship are often less modern. Their suggested sweet spot is targeting ES 2017 as a general compile target, and if you need support for even older browsers, differential serving is the workaround. There’s also a written version of this talk.

CSSBattle: Two Approaches to One Spiky Shape

Jessica Chan and William Candillon go head-to-head on CSSBattle, trying to build a small, spiky virus-like shape. Neither relies on clever HTML or CSS tricks—they just iteratively work toward a working solution. It’s a relatable approach and a reminder that CSSBattle’s puzzles favor pragmatism over elegance, which is also why it’s not appealing to everyone.