Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

Wow, it actually *is* DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

steren's profile picture

Steren

11,327 subscribers

733,582 görüntüleme • 22 gün önce •via X (Twitter)

Bilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →
1:01

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Google for Developers

22,793 görüntüleme • 5 ay önce

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.
0:32

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Chrome for Developers

1,041,402 görüntüleme • 8 ay önce

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨
2:08

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

40,487 görüntüleme • 4 gün önce

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome
0:31

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

Robin

24,742 görüntüleme • 2 ay önce

you can even project DOM events html-in-canvas is insane
0:22

you can even project DOM events html-in-canvas is insane

carmen

30,809 görüntüleme • 28 gün önce

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.
0:32

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,432 görüntüleme • 2 ay önce

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.
0:26

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

114,445 görüntüleme • 2 ay önce

the new --cpu-prof flag is a really nice way to see how much of your time Bun is spending on the CPU ⚡ you can open the profile directly in VSCode/Cursor/Chrome DevTools. also makes it easier to compare how your script performs in Bun vs Node!
0:20

the new --cpu-prof flag is a really nice way to see how much of your time Bun is spending on the CPU ⚡ you can open the profile directly in VSCode/Cursor/Chrome DevTools. also makes it easier to compare how your script performs in Bun vs Node!

Lydia Hallie ✨

70,061 görüntüleme • 7 ay önce

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!
2:02

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!

Delip Rao e/σ

238,890 görüntüleme • 8 ay önce

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.
0:27

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

Zsolt Kacso

62,386 görüntüleme • 2 ay önce

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨
0:33

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

jhey ʕ•ᴥ•ʔ

382,988 görüntüleme • 1 yıl önce

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂
1:10

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂

Rizèl Scarlett 🇦🇬🇬🇾

75,408 görüntüleme • 6 ay önce

is one of the most impressive applications of modern browser tech. It's a Rust-based immediate mode UI app compiled to the web via Webassembly targetting WebGPU. The whole app is just a large <canvas>.
1:01

is one of the most impressive applications of modern browser tech. It's a Rust-based immediate mode UI app compiled to the web via Webassembly targetting WebGPU. The whole app is just a large <canvas>.

Guillermo Rauch

205,301 görüntüleme • 1 yıl önce

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools
0:27

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

Chrome for Developers

2,621,406 görüntüleme • 1 yıl önce

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇
0:33

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇

Kun Chen

57,179 görüntüleme • 1 ay önce

‼️WHY TODAY IS A BIG DAY FOR INTERNET COMPUTER PROTOCOL DFINITY Foundation's Internet Computer Protocol is set to unveil caffeine v3.0 today, April 7. According to the announcement made by Dom Williams (dom | icp), it will kickstart a new era on ICP. The update introduces "Cloud Engines," enabling enterprises to deploy private subnets using a mix of sovereign nodes and traditional AWS instances to achieve specialized throughput. Bullish for the ICP ecosystem.
0:30

‼️WHY TODAY IS A BIG DAY FOR INTERNET COMPUTER PROTOCOL DFINITY Foundation's Internet Computer Protocol is set to unveil caffeine v3.0 today, April 7. According to the announcement made by Dom Williams (dom | icp), it will kickstart a new era on ICP. The update introduces "Cloud Engines," enabling enterprises to deploy private subnets using a mix of sovereign nodes and traditional AWS instances to achieve specialized throughput. Bullish for the ICP ecosystem.

BSCN

15,261 görüntüleme • 2 ay önce

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.
0:43

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

680,625 görüntüleme • 2 yıl önce

On who they want to see as John Cena's final opponent Bayley, Grayson Waller and Nattie choose Dominik Mysterio. Dom is universally loved by that lockerroom. Bayley: "Dom is a perfect story. Cena's been passing the torch...Dom is a perfect fit for it." Grayson: "Dom is the guy that deserves that opportunity. In some ways Dom is gonna be the next Cena, he's gonna be around for the next 20 years."
1:38

On who they want to see as John Cena's final opponent Bayley, Grayson Waller and Nattie choose Dominik Mysterio. Dom is universally loved by that lockerroom. Bayley: "Dom is a perfect story. Cena's been passing the torch...Dom is a perfect fit for it." Grayson: "Dom is the guy that deserves that opportunity. In some ways Dom is gonna be the next Cena, he's gonna be around for the next 20 years."

Adam

57,360 görüntüleme • 8 ay önce

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.
0:24

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.

Remotion

574,888 görüntüleme • 1 ay önce

New side project: a tiny Chrome extension to Slooow down and capture any web animation. I never open the animation devtools, but I always want to see how far a team pushed their polish. 0.1x turns every interface into a motion design critique — you see things you’d normally miss.
0:44

New side project: a tiny Chrome extension to Slooow down and capture any web animation. I never open the animation devtools, but I always want to see how far a team pushed their polish. 0.1x turns every interface into a motion design critique — you see things you’d normally miss.

Micka

40,631 görüntüleme • 3 ay önce