# Document Object Model (DOM) A platform- and language-neutral interface that lets programs and scripts access and update document content, structure, and style. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance DevFeed: [htmx 4.0: a Fetch-Based Rewrite, Built-In Morphing Swaps, and Explicit Attribute Inheritance]() Original publisher: [Read original article]() Author: Daniel Curtis Published: 2026-09-18T09:32:00Z Content type: news Language: en Sources: [InfoQ]() Topics: [htmx](), [fetch](), [Library](), [Document Object Model (DOM)](), [Streaming](), [API](), [Inheritance](), [JavaScript](), [Ajax](), [CSS](), [npm](), [WebSocket]() Tags: [ajax](), [api](), [css](), [development](), [elements](), [fetch](), [html](), [html5](), [htmx](), [htmx-4-released](), [inheritance](), [javascript](), [library](), [news](), [node-js](), [npm](), [open-source](), [server-side-rendering](), [streaming](), [web-development]() ### AI overview htmx 4.0 has been released as a major rewrite built on the fetch() API. It adds native streaming, built-in morphing swaps that preserve DOM state, multi-target updates, explicit attribute inheritance, standardized event names, and history refetching. The release is distributed under npm's next tag, while htmx 2.x remains supported. ### Source excerpt htmx 4 has been released, featuring a transition from XMLHttpRequest to the fetch() API, enhancing streaming capabilities. Key updates include built-in morphing swaps for DOM state preservation and an hx-partial tag for cleaner updates. Attribute inheritance is now explicit, with event names standardized. The library maintains focus on minimal JavaScript while remaining popular among frameworks. By Daniel Curtis ## animation-trigger DevFeed: [animation-trigger]() Original publisher: [Read original article]() Author: Saleh Mubashar Published: 2026-08-26T15:38:41Z Content type: article Language: en Sources: [CSS-Tricks]() Topics: [CSS](), [css animation](), [scroll-triggered animations](), [Playback](), [Document Object Model (DOM)](), [API](), [JavaScript]() Tags: [animation](), [api](), [concepts](), [css](), [css-animation](), [javascript](), [playback](), [scroll-triggered-animations]() ### AI overview An overview of the CSS animation-trigger property, which starts, pauses, reverses, or resets CSS animations in response to named timeline- or event-based triggers. The article explains its syntax, trigger scope, animation actions, and distinction from scroll-driven animations. ### Source excerpt The CSS animation-trigger property allows you to delay the start of a CSS animation until a specific trigger occurs. animation-trigger originally handwritten and published with love on CSS-Tricks. You should really get the newsletter as well. ## Compose & kotlinx.html DevFeed: [Compose & kotlinx.html]() Original publisher: [Read original article]() Published: 2026-08-26T00:00:00Z Content type: article Language: en Sources: [Jake Wharton]() Topics: [Compose](), [HTML](), [WebSocket](), [Document Object Model (DOM)](), [ui](), [client]() Tags: [backend](), [compose](), [html](), [sse](), [ui](), [web](), [websocket]() ### AI overview The article presents an approach for keeping server-rendered HTML admin pages fresh without abandoning static HTML. It uses Molecule on the JVM to observe state, kotlinx.html to render HTML fragments, Ktor to stream updates over WebSockets, and client-side JavaScript with Idiomorph to patch the DOM. It also discusses using server-sent events for unidirectional updates and the scalability tradeoffs of long-lived connections. ### Source excerpt Let's render a simple page with Ktor server and kotlinx.html: get("/users.html") { call.respondHtml { myLayout(title = "Users") { userList( users = db.users.value, ) } } } A reusable myLayout provides scaffolding, userList encapsulates the specific page content, and db.users is a StateFlow> from the persistence layer. I've been doing this over and over to create admin dashboard pages for a project. It works great right up until you leave it open for a minute or two, and its content becomes stale. Client-side frameworks exist within the ecosystem to "solve" this, such as Compose for HTML or Compose UI for Web. If your house has a leaky pipe you can also "solve" that by moving to a new house. I simply will not bring myself to abandoning HTML let alone delivery of static HTML in the response. Efforts are underway to adapt Compose for HTML for so-called isomorphic rendering. This would involve performing the initial composition on the server to produce the static HTML for the HTTP response. Then, client side as JS, mounting the same rendering code to reproduce the DOM tree and incrementally update it for future state changes. Tomorrow's Compose today Instead of waiting, I brought my own Compose on the JVM from home in the form of Molecule. Instead of managing a UI tree over time, Molecule manages a single piece of state over time. We can use that to render an HTML fragment on the server as a string, and then stream that to the client. webSocket("/users.ws") { launchMolecule(Immediate) { val users by db.users.collectAsState() createHTML().userList( users = users, ) }.collect(::send) } That's it. Ktor gives us the webSocket, Molecule runs the StateFlow which is piped into it, and kotlinx.html renders the HTML fragment of our existing content function. In the initial HTML payload you need to wire this up somehow. Something like: script { unsafe { +""" |const content = document.getElementById("content"); |const socket = new WebSocket("ws://" + location.ho ## The Infinite Scroll Was a Design Crime. Now Meta is Paying for It. DevFeed: [The Infinite Scroll Was a Design Crime. Now Meta is Paying for It.]() Original publisher: [Read original article]() Author: Simon Sterne Published: 2026-08-25T11:30:00Z Content type: opinion Language: en Sources: [Web Designer Depot]() Topics: [web design](), [User experience (UX)](), [Usability](), [Front end](), [Web Development](), [Web](), [Document Object Model (DOM)](), [Software Engineering](), [browser](), [browsers](), [CSS]() Tags: [addictive-design](), [behavioral-design](), [browser](), [browsers](), [css](), [dark-patterns](), [design](), [design-ethics](), [digital-detox](), [digital-wellness](), [dopamine-loops](), [ethical-design](), [front-end-development](), [infinite-scroll](), [meta](), [meta-lawsuit](), [meta-trial](), [social-media-lawsuit](), [software](), [tech](), [tech-ethics](), [tech-industry](), [tech-news](), [ui-ux](), [usability](), [user-experience](), [ux](), [ux-design](), [ux-usability](), [web-design](), [web-development]() ### AI overview The article argues that infinite scroll prioritized addictive engagement and advertising over usability, accessibility of stopping cues, and front-end integrity. It discusses legal scrutiny of Meta's Instagram and Facebook feeds, performance and state-management problems, and calls on web professionals to abandon the pattern. ### Source excerpt The infinite scroll was never a UX feature--it was a slot machine disguised as code. Now, as Meta faces a historic trial over algorithmic addiction, web designers must finally confront the ugly truth: we sacrificed basic usability and human willpower just to keep users trapped in a bottomless pit. ## JavaScript Find in Page: DOM Text Above the Codename One Canvas DevFeed: [JavaScript Find in Page: DOM Text Above the Codename One Canvas]() Original publisher: [Read original article]() Author: Shai Almog Published: 2026-08-23T00:00:00Z Content type: article Language: en Sources: [CodeName One]() Topics: [JavaScript](), [Document Object Model (DOM)](), [Canvas](), [browser](), [Accessibility]() Tags: [accessibility](), [browser](), [canvas](), [javascript]() ### AI overview The Codename One JavaScript port adds a targeted DOM layer for eligible visible text while keeping application components and layout on the canvas. This enables browser text search, selection, accessibility, input metadata, and sharper rendering on high-DPI displays. ### Source excerpt The Codename One JavaScript port now renders visible text into a targeted DOM layer, making it searchable, selectable, accessible, and sharp on high-DPI displays without giving browser layout control. ## Meet cypress tap: give your AI agent the context the Cypress app shows you DevFeed: [Meet cypress tap: give your AI agent the context the Cypress app shows you]() Original publisher: [Read original article]() Author: Authoring; Not Just Debugging Published: 2026-08-18T19:50:51Z Content type: article Language: en Sources: [Cypress Blog]() Topics: [Cypress](), [AI Agent](), [Command-line interface](), [Testing](), [Document Object Model (DOM)](), [aria]() Tags: [ai-agent](), [cli](), [code](), [cypress](), [testing]() ### AI overview Cypress tap is a beta set of CLI commands that lets an AI coding agent drive an already running Cypress open session from the terminal. The agent can run specs, read failures, pin snapshots for time travel, and inspect the application's DOM and accessibility tree while authoring or debugging tests. ### Source excerpt cypress tap is a new set of CLI command to pull Cypress app context into your terminal. It lets AI agent drive a Cypress open session from the terminal, so it can author new tests, extend existing ones, and read failures the way the Cypress app shows them. ## Building Tactile UX: Honoring Intentional Design With Lottie DevFeed: [Building Tactile UX: Honoring Intentional Design With Lottie]() Original publisher: [Read original article]() Author: hello@smashingmagazine.com (Alexey Kopytin) Published: 2026-08-11T10:00:00Z Content type: article Language: en Sources: [Articles on Smashing Magazine -- For Web Designers And Developers]() Topics: [User experience (UX)](), [Front end](), [Web](), [Document Object Model (DOM)](), [real-time](), [math](), [JSON](), [Matter]() Tags: [animation](), [article](), [design](), [developers](), [json](), [real-time](), [ui](), [ux](), [vector](), [web](), [web-interface]() ### AI overview This article explains how Isadora Agency built Stress Release, a tactile digital stress-relief squeeze toy, using intentional Lottie animations, DOM events, and distance-based math instead of a physics engine. It focuses on deterministic, frame-accurate animation control and describes mapping DOM interactions to Lottie states rendered as JSON-based SVG animations. ### Source excerpt When tasked with building a highly interactive, tactile web experience, the architecture must serve the art direction. In this article, Alexey Kopytin explains their architectural rationale for building a digital stress-relief squeeze toy game using Lottie animations, DOM events, and distance-based math to maintain absolute control over their designers' intentional motion. ## A properties panel and annotations, now in Figma Make DevFeed: [A properties panel and annotations, now in Figma Make]() Original publisher: [Read original article]() Author: Phillip Wang Published: 2026-07-30T19:25:32.996000Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Figma](), [Code](), [Document Object Model (DOM)](), [Prompt Engineering]() Tags: [agent](), [animation](), [code](), [design](), [figma](), [padding](), [tokens](), [typography]() ### AI overview Figma introduces a properties panel and annotations in Figma Make, enabling visual edits to code through familiar design controls and in-context prompts. The update supports detailed styling changes, DOM-tree selection, staged review before applying edits, and synchronization with underlying code. ### Source excerpt With visual editing and annotations, Figma Make is bridging the gap between design and code. Select any element you want to change, adjust it directly in the properties panel, or write in-context prompts with annotations. ## Testing That a Canvas Diagram Actually Painted Pixels DevFeed: [Testing That a Canvas Diagram Actually Painted Pixels]() Original publisher: [Read original article]() Author: Philipp Lehmann (philipp.lehmann@gruppe.ai) Published: 2026-07-21T07:00:00Z Content type: tutorial Language: en Sources: [Philipp Lehmann]() Topics: [Canvas](), [Testing](), [Playwright](), [Document Object Model (DOM)](), [browser]() Tags: [browser](), [canvas](), [frontend](), [html5](), [playwright](), [testing]() ### AI overview This tutorial explains why DOM-based tests can pass even when an HTML5 canvas renders nothing. Because canvas pixels are not represented in the DOM and jsdom does not provide real canvas rendering, it recommends using Playwright with a real browser and checking pixel data with getImageData. ### Source excerpt getImageData in Playwright to assert a canvas actually drew pixels, since jsdom has no canvas renderer and DOM assertions pass on a blank canvas. ## How Sentry replaced ASCII snapshots with structured context for Seer Agent DevFeed: [How Sentry replaced ASCII snapshots with structured context for Seer Agent]() Original publisher: [Read original article]() Author: Mihir Mavalankar Published: 2026-07-16T09:00:00Z Content type: article Language: en Sources: [Sentry Blog]() Topics: [context](), [dashboards](), [Document Object Model (DOM)](), [Claude]() Tags: [agent](), [claude](), [context](), [cost](), [history](), [structure]() ### AI overview Sentry describes replacing ASCII page snapshots with structured semantic context for its Seer Agent. The change is intended to reduce token costs and context degradation while enabling richer interaction hints and future page manipulation. ### Source excerpt How Sentry replaced ASCII page snapshots with structured semantic context to make Seer Agent faster, cheaper, and ready for agentic actions. ## Building accessibility into a canvas-based product DevFeed: [Building accessibility into a canvas-based product]() Original publisher: [Read original article]() Author: David Winslow; Elynn Lee Published: 2026-07-01T17:56:00Z Content type: article Language: en Sources: [Figma Blog]() Topics: [Accessibility](), [Canvas](), [Figma](), [Document Object Model (DOM)](), [aria](), [HTML](), [React](), [Data structures]() Tags: [accessibility](), [aria](), [figma](), [html](), [infinite](), [performance](), [react](), [real-time](), [web]() ### AI overview Figma explains how it added accessibility to its canvas-based product, whose browser-rendered accessibility tree is largely absent because the editor does not use traditional HTML and DOM for rendering. The solution combines an internal accessibility tree, a synchronized Mirror DOM React component, and selection synchronization so screen-reader and keyboard users can navigate and edit designs. ### Source excerpt Building on a canvas unlocks performance that a traditional HTML web app can't touch. It also strips away any accessibility the browser gives you for free. Here's how we built it back in. ## May in Servo: user scripts, mp4 compat, blackboxing in DevTools, and more! DevFeed: [May in Servo: user scripts, mp4 compat, blackboxing in DevTools, and more!]() Original publisher: [Read original article]() Author: The Servo Project Developers Published: 2026-06-30T00:00:00Z Content type: release Language: en Sources: [Servo Blog]() Topics: [servo](), [Web platform](), [Document Object Model (DOM)](), [Memory Safety](), [API](), [Security](), [Forms](), [Accessibility](), [Nix](), [webgpu]() Tags: [developers](), [forms](), [html](), [memory-safety](), [release](), [rust](), [security](), [servo](), [servo-engine](), [servo-rendering-engine](), [web-browser](), [web-browser-engine](), [web-engine](), [web-platform](), [web-rendering-engine](), [webgpu](), [windows]() ### AI overview Servo 0.3.0 summarizes 391 commits made in May, adding web platform and DOM API support, improving forms and media compatibility, and fixing build issues on Windows, FreeBSD, and Nix environments. The release also includes memory safety fixes through a SpiderMonkey update, experimental Sanitizer improvements, IndexedDB changes, DevTools work, and ongoing WebGPU, accessibility, and performance development. ### Source excerpt Servo 0.3.0 contains all of the changes we landed in May, which came out to 391 commits (April: 534). For security fixes, see § Security. We've shipped several new web platform features: 'font-kerning: none' (@simonwuelker, #44634) 'font-variant-east-asian' (@simonwuelker, #44989) 'font-variant-ligatures' (@simonwuelker, #44903) 'font-variant-numeric' (@simonwuelker, #44950) 'font-variant-position' (@simonwuelker, #45142) mp4 files without fast start in