--- title: "Rendering Doom in 3D with CSS" publication: "Frontend Focus" issue: 735 published_at: "2026-04-01" canonical_url: "https://frontendfoc.us/issues/735" --- Plus CSS containment, Axios drama, and does Pretext offer a new dawn for Web layout? Together with [![Greptile\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_333/e_make_transparent/co_white,e_outline:25/ohbyklp3lqlolbb0kzvv.png)](https://www.greptile.com/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=frontendfocus_primary_apr1) ๐Ÿš€ **Frontend** Focus #โ€‹735 โ€” April 1, 2026 | [Read on the web](https://frontendfoc.us/issues/735) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/cipm4q7l0cre7xhorejx.jpg)](https://chenglou.me/pretext/) [Pretext: A Multiline Text Measurement and Layout Library](https://chenglou.me/pretext/) โ€” This caused quite the stir this week, with some people even saying it'll redefine how layouts are made on the Web. Check out [this dynamic layout demo](https://chenglou.me/pretext/dynamic-layout) for a taste. Essentially it opens the door to real-time, multiline text measurement and dynamic layouts, without touching the DOM. [GitHub repo.](https://github.com/chenglou/pretext) Cheng Lou ๐Ÿ’ก **More:** Simon Willison has [a good overview of why this is exciting](https://simonwillison.net/2026/Mar/29/pretext/), and [Den Odell shares](https://denodell.com/blog/youre-looking-at-the-wrong-pretext-demo) what problems it's really solving. Meanwhile, Donnie D'Amato tempers our expectations a little [in this review](https://blog.damato.design/posts/pretext-review/) concluding _"This certainly isnโ€™t the end of CSS, itโ€™s showing whatโ€™s next."_ [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/db08bd93.png)](https://www.greptile.com/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=frontendfocus_primary_apr1) [Whoโ€™s Reviewing Your AI-Generated Frontend Code?](https://www.greptile.com/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=frontendfocus_primary_apr1) โ€” When AI writes more code, review becomes the bottleneck. Greptile reviews every PR with full repo context, catches real bugs, and adapts to your teamโ€™s conventions over time. Greptile sponsor [What is CSS Containment and How Can I Use It?](https://csswizardry.com/2026/04/what-is-css-containment-and-how-can-i-use-it/) โ€” Harry takes a look at this โ€œ_woefully underused_โ€ feature, explaining what [the CSS `contain` property](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/contain) actually is, what each of its values does, and how to use it confidently without creating hard-to-debug side effects. Harry Roberts โšก๏ธ IN BRIEF - โš ๏ธ [The popular `axios` package was compromised earlier this week](https://www.stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan), dragging in a cross-platform remote access trojan in a since-pulled version. You can [check if any of your projects were affected](https://www.stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan#am-i-affected), though. - ๐Ÿ†• Rachel Andrew shares [what changes we saw across the web platform](https://web.dev/blog/web-platform-03-2026) in March, including widespread JavaScript iterator sequencing support. - ๐Ÿช [Astro 6.1 is now available](https://astro.build/blog/astro-610/), adding smoother view transitions on mobile, image encoding changes, and more. - ๐ŸŽฌ There's a new W3C Editor's Draft of [CSS Image Animation Module Level 1](https://drafts.csswg.org/css-image-animation-1/) proposing a `image-animation` property to control playback of animated images. - ๐Ÿ’ฌ Jake Archibald has [flagged a few inconsistencies](https://github.com/whatwg/html/issues/12304#issue-4121948352) in how `popover=hint`behaves. ๐Ÿ“™ Articles, Opinions & Tutorials [Your Options for Preloading Images with JavaScript](https://macarthur.me/posts/preloading-images/) โ€” There's several ways to approach this, and, as Alex notes it can be _โ€œsurprisingly quirky [..] and the best one to choose can very much depend on the circumstances.โ€_ Alex MacArthur [Applying Accessibility Fixes with Stealth for the Greater Good](https://piccalil.li/blog/applying-accessibility-fixes-with-stealth-for-the-greater-good/) โ€” Advice on how to bake accessibility into your daily workflow and break down any systematic roadblocks, in the hope that a11y considerations become an inherent part of your process, rather than an afterthought. Steve Frenzel [What If Mobile Deploys Worked Like Web Deploys?](https://try.expo.dev/frontend-ota) โ€” With Expoโ€™s OTA updates, they do. You can configure OTA Updates in minutes and see them working on your next pull request. Expo sponsor ๐Ÿช [Cookie Consent Management in 2026](https://cloudfour.com/thinks/cookie-consent-management-in-2026-part-1-overview/) โ€” Jason notes that more and more โ€œ_companies are trying to get their cookie house in order_โ€ โ€” as such, he shares some high-level thoughts on what to be thinking about, along with some more [technical advice here](https://cloudfour.com/thinks/cookie-consent-management-in-2026-part-2-technical-tips/). Jason Grigsby [Magic Link Pitfalls](https://etodd.io/2026/03/22/magic-link-pitfalls/) โ€” The increasingly popular login pattern (_Iโ€™m not a fan_) has some security issues to be aware of. Evan shares those here, and [also came back](https://etodd.io/2026/03/31/more-magic-link-pitfalls/), having found some more . Evan Todd [Preserving the Web is Not The Problem. Losing It Is](https://www.techdirt.com/2026/02/17/preserving-the-web-is-not-the-problem-losing-it-is/) โ€” Some news organizations are restricting access to the [Wayback Machine](https://web.archive.org/) over fears of AI scraping. Mark Graham explains why these concerns are unfounded. Mark Graham [Why Designing in Code Makes You a Better Designer](https://adamsilver.io/blog/why-designing-in-code-makes-you-a-better-designer/) Adam Silver [Form Automation Tips for Happier Users and Clients](https://css-tricks.com/form-automation-tips-for-happier-user-and-clients/) Iqra Naaem ๐Ÿงฐ Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1775040980/grs7pzuei4fewldw1v8w.png)](https://blogs.windows.com/windowsdeveloper/2026/03/26/announcing-babylon-js-9-0/) [Announcing Babylon.js 9.0](https://blogs.windows.com/windowsdeveloper/2026/03/26/announcing-babylon-js-9-0/) โ€” A major release of [Microsoft's popular rendering engine](https://www.babylonjs.com) for building interactive, 3D web experiences packing in โ€œ_a year of new features, optimizations, and performance improvements_โ€, including a new clustered lighting system, a node-based particle editor, [volumetric lighting](https://playground.babylonjs.com/?webgpu&areaLights=1&volumetricLight=1&clusteredLights=1&camera=volumetric#8BQJH7), [advanced Gaussian Splatting](https://playground.babylonjs.com/#J3MJSN), and more. [Repo here](https://github.com/BabylonJS/Babylon.js). Carter & Lucchini (Microsoft) [Monitor Your AI Agent's Costs And Calls In Next.js](https://sentry.io/cookbook/monitor-ai-agent-costs-nextjs/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=nextjs-fy27q1-cookbook&utm_content=newsletter-agent-sponsoredlink-trysentry) โ€” Monitor token usage, LLM costs, and tool calls in your Next.js app. Set up Sentry + Vercel AI SDK in 15 minutes. Sentry sponsor [Web Platform Features Explorer: Discover New Web Platform Features and APIs](https://web-platform-dx.github.io/web-features-explorer/) โ€” A useful way to keep up with whatโ€™s new on the web platform (including an RSS option). You can filter by newly available, widely available, by browser, etc. The data is pulled from the W3C WebDX Community Group repos. These [monthly release notes](https://web-platform-dx.github.io/web-features-explorer/release-notes/march-2026/) are particularly valuable. WebDX CG ๐Ÿค– [Transformers.js v4: Run AI Models in the Browser](https://github.com/huggingface/transformers.js/releases/tag/4.0.0) โ€” Brings [Hugging Face](https://huggingface.co/)-hosted transformer models into the browser, meaning you can run numerous vision, audio and NLP models right in the page. This new version switches to a WebGPU runtime and is installable via npm. [Live demos](https://huggingface.co/collections/webml-community/transformersjs-v4-demos). Hugging Face [Heerich.js: A Tiny Engine for 3D Voxel Scenes Rendered to SVG](https://meodai.github.io/heerich/) โ€” A minimalist JavaScript engine that constructs 3D compositions and distills them into โ€˜pristineโ€™ SVGs. Pure vector output, zero dependencies. This is a really well presented site which runs through what it can do, and how. David Aerne [XML Comparator: A Web Tool to Compare XML Files](https://www.xmlcomparator.xyz/) โ€” Shows you the original, modified, and a full diffed version that allows you to select if you want to ignore whitespace or fold matched lines for easier diffing. XML Comparator ๐Ÿ“ฐ Classifieds ๐Ÿ“ธ Scan barcodes, QR codes and others directly in the browser using [STRICH](https://strich.io/?ref=frontend-focus), a lean JS library. [Free 30-day trial, try the demo app today!](https://strich.io/?ref=frontend-focus) --- [Gauntlet AI Live Night School](https://us06web.zoom.us/webinar/register/WN_GqPSYgDcRn6mkQjOnK3uTA#/registration?utm_source=frontend_focus_weekly&utm_medium=referral&utm_campaign=april_1&utm_content=nightschool) | Stop Shipping Slop: How to Verify AI Generated Code for Production Deployments (Virtual - 4/1 @ 6ET) ๐Ÿ˜ˆ ...and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1774955159/qtigygdizhw5nitwfxre.png)](https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/) [CSS is DOOMed: Rendering DOOM in 3D with CSS](https://nielsleenheer.com/articles/2026/css-is-doomed-rendering-doom-in-3d-with-css/) โ€” Every single wall, barrel, and imp is a `div` positioned in 3D space using CSS transform. The logic is JS, but all of the rendering is entirely CSS. [Give it a try here](https://cssdoom.wtf/). Niels Leenheer ๐Ÿ“ฌ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/735/*|UID|*?ipx=t)