> Markdown version of [/videos/1851-wearedevelopers-live-css-is-doomed](https://www.wearedevelopers.com/videos/1851-wearedevelopers-live-css-is-doomed). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# WeAreDevelopers LIVE - CSS is DOOMed

Can modern CSS run Doom and operate a real-life flamethrower? Discover how pushing web architecture to its absolute limits proves hand-crafted code will outlive AI-generated layouts.

- **Speakers:** [Chris Heilmann](https://www.wearedevelopers.com/@chris-heilmann), [Daniel Cranney](https://www.wearedevelopers.com/@daniel-cranney), Niels Leenheer
- **Event:** WeAreDevelopers LIVE
- **Published:** April 22, 2026
- **Duration:** 1:01:17
- **URL:** https://www.wearedevelopers.com/videos/1851-wearedevelopers-live-css-is-doomed

## Summary

The evolution of web design tools—most recently Claude Design—has sparked debates about the longevity of hand-crafted user interfaces versus AI-generated prototypes. While large language models can quickly assemble visually plausible layouts, they often lack a true understanding of progressive enhancement, continuous UX, and underlying design systems. Hand-coding interfaces outlasts prompt-driven generation because it prioritizes maintainability and contextual usability over disposable, "vibe-coded" aesthetics. Generative tools inherently aim for the average, but foundational "knowledge about the platform, knowledge about HTML, CSS, and JavaScript is not going to go away."

Beyond automated UI generation, emerging browser capabilities are fundamentally shifting how developers build interactive environments. Rendering accessible HTML inside Canvas elements unlocks highly interactive, GPU-accelerated graphics without sacrificing native browser traits like text selection or semantic navigation. This bridges the historic gap between pixel-fixed Canvas contexts and the fluid Document Object Model. At the fringes of browser experimentation, developers are continually testing architecture limits—from discovering how to store two bytes of data inside a computer mouse's DPI register to benchmarking machine limits by installing 84,000 Firefox extensions simultaneously.

Pushing front-end constraints even further, CSS serves as a surprisingly capable localized rendering and state engine. Utilizing modern CSS math functions (like sine and cosine) alongside 3D transforms, raw coordinate data can be mapped into functional 3D environments, entirely recreating the classic game Doom using animated DOM nodes. Furthermore, leveraging CSS custom properties as a living state machine makes it possible to seamlessly hand off state between JavaScript and stylesheets. This architecture can even control physical hardware, such as using the WebUSB API and DMX protocols to command stage lighting and a real-life flamethrower directly through the browser. These eccentric side projects prove that imaginative experimentation remains vital for understanding the outer limits of web standards.

**Keywords:** claude design AI generation, progressive enhancement UX, HTML in canvas API, CSS 3D transforms, CSS custom properties, browser state machines, WebUSB hardware integration, DMX protocol browser control, AI frontend development, browser accessibility features, CSS math functions, DOM hardware manipulation, PHP developer ecosystem, canvas GPU acceleration, UI maintainability

## Chapters

1. **Tech event networking and community hardware hacking projects** (00:00) — Tech conferences offer unique opportunities to connect over creative hardware engineering projects.
1. **Evaluating AI design tools for automated interface generation** (04:25) — Relying on large language models to generate application interfaces often sacrifices long-term maintainability.
1. **Understanding why AI struggles with front-end development tasks** (11:28) — Code generation platforms lack contextual user experience awareness and rely on outdated legacy code.
1. **Unlocking accessible web capabilities with HTML embedded in Canvas** (12:52) — Embedding document object model elements inside canvas layers introduces native accessibility interactions.
1. **Attracting younger developers to legacy PHP open source projects** (20:47) — Open source software communities adopt unique engagement strategies to sustain legacy technology maintenance.
1. **Storing data in hardware and collaborative digital art projects** (23:09) — Creative developers discover unconventional techniques to repurpose device memory and build digital art.
1. **Analyzing browser performance with thousands of simultaneous active extensions** (25:16) — Installing thousands of parallel extensions highlights critical browser processing and memory bottlenecks.
1. **Balancing explicit assignment and method chaining in JavaScript code** (27:03) — Prioritizing explicit variable assignment over deep method chaining improves code comprehension and debugging.
1. **Evaluating website readiness for automated content scraping agents** (29:32) — Diagnostic utilities help web publishers configure environments for automated large language model indexers.
1. **Detecting artificial intelligence generation patterns with specialized text editors** (31:01) — Specialized writing tools identify and correct generic robotic phrasing to improve communication authenticity.
1. **Recreating classic desktop software workflows in the web browser** (34:16) — Porting legacy native applications into browser environments showcases the flexibility of web properties.
1. **Generating programmatic video content via HTML and JavaScript automations** (35:32) — Web rendering apis provide a scriptable alternative to traditional pipelines for creating digital video.
1. **Reviewing bizarre technology headlines for factual news accuracy** (37:14) — Analyzing obscure cybersecurity breaches and peculiar hardware updates uncovers unexpected realities in modern computing.
1. **Rendering a functional game engine using experimental CSS transformations** (41:34) — Translating three-dimensional vectors into cascading style sheet calculations pushes alternative browser rendering techniques.
1. **Controlling physical hardware protocols via WebUSB and CSS** (51:42) — Bridging stage lighting protocols through web interfaces allows browser properties to command physical devices.
1. **Balancing stable software engineering careers with creative side projects** (57:03) — Maintaining an established professional role provides the financial freedom to build unconventional interactive experiments.

## Related Moments

- [Overcoming technical challenges of browser-based design environments](https://www.wearedevelopers.com/videos/982-fireside-chat-with-kris-rasmussen-cto-at-figma) (from "Fireside Chat with Kris Rasmussen, CTO at Figma")
- [Evaluating the future utility of CSS Houdini web standards](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")
- [Preserving retro tech demos and interactive browser captchas](https://www.wearedevelopers.com/videos/1723-wearedevelopers-live-graalvm-in-action-static-analysis-insights-and-more) (from "WeAreDevelopers LIVE - GraalVM in action, Static Analysis insights and more")
- [Strategies for keeping up with advanced CSS evolution](https://www.wearedevelopers.com/videos/835-what-s-new-in-css-for-designers) (from "What's new in CSS for Designers?")
- [Exploring complex frontend experiments and retro game decompilation](https://www.wearedevelopers.com/videos/1742-wearedevelopers-live-inclusion-accessibility-automation) (from "WeAreDevelopers LIVE – Inclusion, Accessibility & Automation")
- [Initial breakdown of the CSS Houdini ecosystem](https://www.wearedevelopers.com/videos/641-is-css-houdini-finally-usable-in-2023) (from "Is CSS Houdini finally usable in 2023?")

## Related Articles

- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Dev Digest 113 - Debugging above the cloud](https://www.wearedevelopers.com/magazine/422-dev-digest-113-debugging-above-the-cloud)
- [Dev Digest 130 - The Diablo is in the details](https://www.wearedevelopers.com/magazine/470-dev-digest-130-the-diablo-is-in-the-details)
- [Dev Digest 112 - The True Crime of AI Development](https://www.wearedevelopers.com/magazine/421-dev-digest-112-the-true-crime-of-ai-development)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/682327-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**