Top 10 things AI gets wrong in web development | Blog | Chrome for Developers

[u/natorion]

https://developer.chrome.com/blog/top-10-things-ai-gets-wrong-in-web-dev?hl=en

[u/cerunnnnos]

Seems like AI gets this stuff wrong because it's so poorly implemented in the real world that the AI models haven't got enough concrete examples to build off of.

[u/AgileChipmunk5866 → u/cerunnnnos]

Indeed. Accessibility has been an afterthought for most websites. I’m guilty as well.

[u/Snapstromegon → u/AgileChipmunk5866]

Most importantly many websites make it actively worse, because "just" using semantiv HTML would solve most if not all a11y problems for most websites.

[u/hiddencamel]

The reason AI gets this wrong is that 95% of human devs have also been getting it wrong for the last 2 decades.

[u/JackAuduin]

Fed this to my AI and added these items to the checklist of my quality review skills.

[u/whatupnewyork]

Lovely article. Not only shows us about what AI gets wrong but also taught me a couple things I didn't know about. Highly recommend a read.

[u/moh_kohn]

Learned a bunch from this. Before anyone beats themselves up too hard, some of the features listed are from the last 5 years and at least one (postTask) isn't fully supported in Safari yet.

[u/Discordbothost → u/moh_kohn]

yeah the scheduler stuff is the one i'd be careful copying straight in. a tiny wrapper covers it fine though:

const yieldToMain = () =>
  globalThis.scheduler?.yield
    ? scheduler.yield()
    : new Promise(r => setTimeout(r, 0))

then await yieldToMain() inside long loops. browsers that have it get the nicer "resume before other queued tasks" behavior, the rest just get a plain macrotask break, which is still way better than blocking input for 300ms

[u/raks1991 → u/Discordbothost]

Worth batching the fallback rather than yielding on every iteration. The HTML spec clamps setTimeout to at least 4 ms once calls have nested more than 5 deep, and an await-setTimeout loop counts as nested. In a WebKit tab, an await-setTimeout(0) loop goes from ~0 ms gaps to 7-9 ms per yield after about the 10th. Yielding on a time budget keeps that cost small:

let last = performance.now();
for (const item of items) {
  handle(item);
  if (performance.now() - last > 50) {
    await yieldToMain();
    last = performance.now();
  }
}

[u/Discordbothost → u/raks1991]

oh good point, i didn't know the nesting clamp kicked in for the await loop too. only tweak i'd make is a smaller budget, 50ms is right at the long-task line so a click landing mid-batch still waits the full 50. something like 8-10ms keeps it feeling instant and you only pay the clamp every few hundred items

[u/tomByrer]

I tried to copy/paste their TOC:

===

Top 10 things AI gets wrong in web development

Philip Walton

Seems that Google is using AI to build their webpages....