The asteroid currently hitting front end web development

Sep 04, 2026 02:17 AM - 48 minutes ago 2

A batch of the educators I respect successful the frontend web abstraction look to beryllium either bowing retired aliases dialing backmost their efforts: Axel Rauschmayer, Salma Alam-Naylor, Josh W. Comeau, to sanction a few. Other well-known luminaries for illustration Kent C. Dodds, Addy Osmani, Rachel Nabors, and Lydia Hallie person pivoted from talking astir frontend improvement to talking about… well, return a chaotic guess.

I ne'er made a surviving from talking astir web dev, but I do person this blog, and I’ve done convention talks and podcasts astir worldly I’m excited about. Recently for example, my passion was explaining each the ins and outs of CSS performance: how protector DOM works, how the browser’s style motor works, the traps of CSS-in-JS, etc.

Just for kicks, I decided to inquire Claude Sonnet really it would grip a Chrome trace pinch precocious “Style Calculation” costs. This is 1 of my favourite brain-teasers, because it’s the benignant of point that I saw web devs – moreover knowledgeable ones! – travel up connected complete and complete again. Claude gave a perfectly admirable answer:

Click to see

Prompt: Answer without searching the internet: you’re looking astatine a Chrome trace, and you spot repeated spans of precocious Style costs but comparatively debased Layout cost. What benignant of things do you look for successful the webapp to optimize? What do you measurement next?

What “Style” costs really represents

The Style (Recalculate Style) shape is wherever the browser matches CSS selectors against the DOM and computes the last computed style for each affected element. It’s costly independent of whether thing really moves aliases resizes (that’s Layout’s job). So if Style is precocious but Layout is low, you’re apt paying for selector matching / invalidation complete galore elements, not for expensive geometry.

What to look for successful the webapp

1. Selector complexity and count

Overly analyzable aliases profoundly nested selectors (.a .b .c >; .d + .e), particularly descendant combinators, unit the motor to locomotion much of the DOM/ancestor concatenation per lucifer attempt.
Universal selectors aliases property selectors ([data-foo="bar"]) applied broadly.
CSS-in-JS libraries that make immense numbers of unsocial people names/rules (style recalculation has to see the full norm set).

2. Invalidation scope — this is usually the large one

A class/attribute/style toggle precocious up successful the DOM character (e.g., toggling a people connected <body> aliases a top-level container) tin unit style recalculation connected ample subtrees moreover if only a fewer elements’ last styles change.
Check whether a azygous authorities alteration (e.g., a “theme” class, a “loading” class, a hover state) is invalidating acold much elements than necessary. Chrome’s “Selector Stats” (enable successful DevTools Performance settings) will show you which selectors are slow and really galore elements they were tested against — this is the azygous astir useful adjacent measurement.

3. Frequency/amplification

Something re-triggering style recalc galore times per framework — e.g., reference a style/layout spot successful a loop correct aft a people alteration (forces synchronous recalc), aliases a JS animation utilizing .classList.toggle() aliases inline style updates connected galore nodes per rAF tick alternatively of batching.
Repeated mini DOM mutations each forcing a style walk alternatively than being batched into one.

4. Inherited/computed spot propagation

Changing an inherited spot (like font-size aliases colour connected a communal ancestor) forces recompute of each descendants’ computed styles, moreover without layout changes (e.g., color, visibility, cursor are Style-only, not Layout-triggering).
Custom properties (CSS variables) changed astatine a high-level scope — updating a --custom-prop connected :root aliases a shared ancestor recomputes style for each constituent referencing it.

5. Shadow DOM / constituent boundaries

If utilizing a model pinch tons of protector roots aliases scoped styles, cheque whether style recalculation is being needlessly repeated per constituent lawsuit owed to non-shared stylesheets.

What to measurement next

Enable “Selector Stats” successful the Performance panel (gear icon → Enable selector stats). Re-record the trace. This gives you, per Recalculate Style event, the apical slow selectors and lucifer counts — that tells you straight which CSS rules and really galore elements are responsible.
Check the “Recalculate Style” event’s initiator/call stack successful the trace to spot what JS triggered it — a people toggle, a style.setProperty, an animation framework callback, etc.
Count really galore elements are affected per recalc — DevTools shows “Elements Affected” per Recalculate Style arena successful the summary pane. Compare that number to really galore elements actually changed quality — a large spread indicates over-broad invalidation.
Look astatine wherever successful the DOM the triggering mutation happens — is it adjacent the guidelines (broad invalidation) vs. scoped to a mini subtree (narrow, cheap)?
Check for forced synchronous style — look for “Forced reflow” purple warnings; moreover though you said Layout is low, sometimes a forced style publication (getComputedStyle) interleaved pinch a DOM constitute shows up arsenic galore mini back-to-back Style events alternatively than 1 batched one.

Typical fixes erstwhile you find the culprit

Scope class/state toggles to the smallest subtree imaginable alternatively of a communal ancestor.
Simplify selectors, for illustration azygous people selectors complete descendant chains.
Move CSS civilization spot updates to the smallest scope needed.
Batch DOM/class changes truthful recalculation happens once, not per-mutation.
Use content-visibility: car aliases contain: style layout connected independent subtrees to limit invalidation scope.

These days, fixed a slow-loading website, moreover arsenic personification who’s written astir browser capacity for years and who virtually worked connected a browser capacity team, I would astir apt conscionable chuck a Chrome trace astatine Claude Code and person it propose improvements. In truth I’ve done this very point successful my time occupation and gotten immoderate bully results.

The early of frontend

So wherever does this time off frontend dev education? Not successful a awesome spot obviously; I wish I had immoderate much uplifting answers for group who (like me) utilized to get a batch of fulfillment retired of trying to raise the barroom for frontend developers everywhere. I do person immoderate guesses though, and I deliberation the problem is still worthy puzzling through.

The halfway mobility is wherever frontend improvement itself lands successful this caller era. Sadly it feels to maine for illustration location are respective trends pointing against accrued finance successful frontend knowledge:

The frontend is little risky to conscionable manus to an agent. If you’re utilizing an supplier to constitute a database migration, you astir apt want to put it done respective rounds of AI codification review, scrutinize it yourself, tally it connected staging first, etc. If you constitute a React constituent pinch an agent, though, past the consequence of conscionable yolo’ing it into accumulation is (typically) overmuch lower.

Note I’m not saying location are zero risks: the supplier could messiness up accessibility, it could origin an infinite loop that blocks users, etc. But successful general, frontend codification is simply a batch much ephemeral and replaceable than different types of code. So I expect galore AI coders will consciousness comfortable conscionable letting their supplier grip it unsupervised (for amended aliases worse).

DevExp is becoming little captious overall. A batch of the pre-LLM chat successful the frontend abstraction was astir ergonomics versus outcomes: “The ‘developer experience’ bait-and-switch” by Alex Russell is simply a awesome example. For different example, Svelte and Solid person agelong based on that their ergonomics lead to amended outcomes than React: little code, amended performance, etc.

Meanwhile, Cursor and Viget person blogged astir migrating their codebases from Solid and Lit, respectively, to React. Since rewrites are little costly pinch agents, this whitethorn beryllium a spot surprising: why not move to the much performant/less verbose framework? The reply (explicitly successful Cursor’s case, and I fishy for Viget arsenic well) is of course: “the agents cognize React.” For amended aliases worse, React is heavy overrepresented successful the training weights, and “agent experience” is starting to matter much than developer experience.

Standards will drawback up. I’ve been retired of the web standards abstraction for a mates years now, truthful this is axenic speculation connected my part. But I ideate that a batch of the efforts to amended the ergonomics of building websites – amended CSS shorthands, terser JavaScript syntax, etc. – will go perceived arsenic little important comparative to things that really move the needle connected performance, capabilities, etc. At the extremity of the day, it’s conscionable not very different for an supplier to constitute 3 lines of CSS alternatively of 1, and anyhow utilizing the newer syntax mightiness really beryllium harder because you person to coach the supplier astir things that aren’t successful its training weights.

In immoderate ways this displacement mightiness person already been underway. I retrieve respective years agone astatine TPAC, good earlier the AI coding boom, I told personification connected the Chrome squad that I was moving connected web constituent standards. They responded that they weren’t willing successful that, because those APIs only affected the developer acquisition and didn’t really make the browser much tin (e.g. Project Fugu). That stuck pinch maine because it’s a bully point: APIs for illustration protector DOM and civilization elements don’t springiness web developers immoderate caller superpowers; they conscionable alteration wherever and really the codification gets authored. I expect specified things will move retired of the spotlight arsenic AI coding takes over.

This doesn’t mean that standards will vanish from the topics a frontend dev needs to support up on, but I ideate it will go little astir “use this newer syntax” (an evergreen root of worldly for convention talks and articles) and much “here are these emerging capabilities.” And I foretell the second group will beryllium overmuch smaller than the former, since they thin to beryllium much contentious for standards bodies and there’s conscionable a smaller excavation of features to tie from.

Whither frontend education?

So really tin the section of frontend acquisition accommodate to this dispute future? To debar being utterly bleak, present are immoderate affirmative directions I deliberation it could spell in.

First off, the agents still request to beryllium knowledgeable astir the large picture. Agents and harnesses look to emotion penning React and specifically SPAs, but SPAs are not the reply to everything. You tin pain a batch of tokens having an supplier constitute a large analyzable SPA for your trading site, and past hole each the bugs pinch the backmost button, attraction state, performance, etc., aliases you tin conscionable take an MPA model for illustration Astro aliases Eleventy and telephone it a day. Maybe these frameworks will beryllium a spot harder for the agents to activity pinch (specifically Astro since it kinda-sorta looks for illustration React but isn’t), but my conjecture is that since you’re penning ~50% little codification wide it won’t matter.

Second, making websites that activity good for agents is astir apt going to beryllium a fruitful endeavor for the adjacent future. Vercel’s is-agentic is simply a bully illustration of this. Ironically, this points backmost to bully fundamentals that public-facing websites should person been doing anyway: server-rendered content, due accessibility, page speed, etc. But if slapping the connection “AI” connected it is what gets group to attraction astir it past hey, I’m each for it.

Note that I’m a small spot little sanguine astir this 2nd point, because I’m not judge the web moreover survives successful its existent shape arsenic agents go much of a thing. If I want to fig retired really overmuch it costs to alert from Seattle to Paris, I’d overmuch alternatively inquire an supplier than click done an infuriating bid of buttons connected a slow-loading website. The only logic I can’t is because these websites explicitly artifact bots, aliases they don’t connection an MCP, but I’m judge location are respective startups champing astatine the spot to lick that problem. So I’m not judge really sustainable the existent business is.

Third, we tin connection consulting services for vibe-coded monstrosities. A monolithic magnitude of AI-generated frontend codification is being pumped retired correct now, and immoderate of it (to usage a Claude-ism) will surely go “load-bearing.” If those websites are slow, non-compliant, and riddled pinch information holes, past it whitethorn not beryllium capable to inquire the supplier “fix my website pls.” There could beryllium an opportunity present for existent expertise, particularly if there’s money connected the statement and the vibe coder’s knowledge of web improvement doesn’t widen past “websites are apps hosted connected the internet.”

(I admit that this is the shakiest of my 3 points, since I tin wholly ideate the adjacent procreation of “self-healing” web apps to eclipse the mean master successful 2027 aliases 2028. But for the clip being: yes, expertise still matters.)

Conclusion

The constituent of this station wasn’t to make myself consciousness better, aliases to creation connected the graves of each the careers that person been upended by the caller AI boom. I’m a people gloomy person, and this station was maine allowing myself to wallow successful my ain gloominess. I don’t return immoderate pleasance from noting that the immense assemblage of knowledge I’ve built up complete the years has been rendered astir obsolete, nor americium I happy to spot the aforesaid point hap to my much-more-qualified peers. But pretending that it’s not happening isn’t a valid strategy either.

There’s a temper successful immoderate of the blogs I publication these days on the lines of “I’m truthful tired of talking astir AI” aliases “Please don’t mention AI to maine ever again.” I’m judge immoderate of this is simply a benignant of world-weary, above-it-all aerial that feels bully to deterioration arsenic a badge of distinction. But I deliberation a batch of it besides comes from existent fear. It’s scary to admit that you don’t cognize what’s going to hap successful a year. It’s destabilizing to ideate your profession going on a definite trajectory, serenely landing astatine retirement, and past to spot everything upset conscionable a fewer years from your goal.

The metaphor I’ve been utilizing is that an asteroid conscionable deed the earth, and we’re still surveying the wreckage. It’s difficult to foretell what will hap aft the particulate settles (let unsocial which mini rodents will usher successful the Age of Mammals!), but ignoring the crater altogether seems for illustration the worst benignant of denial. Another metaphor is covid: erstwhile covid hit, I don’t callback thinking, “Ugh, I’m truthful tired of talking astir covid” – instead, I wanted to study everything I could astir viruses, epidemiology, masking, etc. This turned retired to beryllium a bully idea, since covid was going to predominate my life for the adjacent fewer years (at which constituent yes, I did yet get tired of talking astir it!).

I hardly person a crystal ball, but this station was my effort to deliberation done wherever my astir cherished section mightiness beryllium going successful the future. I admit that I person a batch little tegument successful the crippled these days: I’m retired of web standards, I don’t moreover activity connected the frontend astatine my existent gig, and my blog has mostly been a batch of wailing and gnashing of teeth astir AI alternatively than my accustomed paper of browsers, performance, accessibility, etc. That said, I still person a batch of emotion and respect for the frontend field, and I attraction astir what happens to it successful the future. It whitethorn beryllium unrecognizable successful conscionable a fewer years, but if thing else, I dream my peers find a measurement to navigate each these changes and to thrive successful this weird caller world.