@solarise_webdev I'd actually love to hear more about where you ran into issues like these. Would be super helpful for the eng team! Can you DM me more details?
English
Una ๐บ๐ฆ
31.1K posts
Una ๐บ๐ฆ
@Una
Building the web you build on @GoogleChrome โจ๐จ Web Experience DevRel Lead ๐ฆ @csswg + @openuicg. #CSSPodcast host ๐ฌ https://t.co/J9Y8U6Bz4f
Brooklyn, NY Katฤฑlฤฑm Kasฤฑm 2008
1.4K Takip Edilen88.1K Takipรงiler
Exactly! A great visual cue that itโs integrated tightly with the DOM. And error, focus states etc all controlled by CSS
*But* I still had to apply some workaround to actually line up the inputs with CSS transforms (which makes sense ofc as itโs doing arbitrary things with canvas textures), but itโs a neat effect regardless
English
You know its real DOM content because look at those browser-UI form validation popovers ๐ still accessible and placed correctly ๐ฏ
Robin@solarise_webdev
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 html-in-canvas-stuff.solarise.dev/doom.html - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of
English
Una ๐บ๐ฆ retweetledi
Added interaction support to the HTMLTexture (html-in-canvas) example.
github.com/mrdoob/three.jโฆ
English
Una ๐บ๐ฆ retweetledi
After seeing the reaction to pretext, I can tell you:
the world is not ready for HTML-in-Canvas.
English
Una ๐บ๐ฆ retweetledi
ใใใๆใใฆใผใถใผใซๅชใใใชใใใฉใผใ UIใงใ
ในใใ ๅฏพ็ญใซใคใใใพใ
ChromeใฎHTML-in-Canvas APIใงใคใใใพใใ
ๆฅๆฌ่ช
@twholman @jaffathecake I got links on codepen! Mostly various versions of test demos tho
English
The first rule of html-in-canvas api, never share anything but a video of your html-in-canvas demo.
English
Una ๐บ๐ฆ retweetledi
7 years at Google today!? Wow time flies.
So much has changed in that time, and I'm still happy to be doing meaningful work on a product that impacts billions of users with an awesome team ๐ This much hasn't changed ๐
English
@FourEyedWiz I just learned that cross-origin content is not supported due to security risks so it would need to be an iframe or video hosted on the same origin
English
@Una I am sure it is possible. I am just saying the examples people are showing are not selling it well.
English
All the HTML in Canvas examples I have seen so far are things you could have done without HTML in Canvas.
What I would expect someone to do is embed HTML components into a game world. This could unlock advertising in certain ways.
Max Leiter@maxleiter
With html-in-canvas, you can make shader-powered page transitions
English
@tfdev__ Literally the Basement studio site is one of the first things I showed to the PM last year as an example of where this would be amazing. *fangirling* can't waitttt to see what else you build
English
I just built a Chrome extension that brings experimental HTML-in-Canvas to life. It includes a live shader editor and presets.
The extension is currently in the Chrome Store review queue, but you can dive into the source code right now!
repo: github.com/tomasferrerasdโฆ
English
Una ๐บ๐ฆ retweetledi
Use ๐๐๐๐๐๐๐-๐๐๐๐๐ก() to stagger children of a parent without having to manually track a using --๐ ๐๐๐๐๐๐๐๐๐ or having to use an animation library
.๐๐๐๐ {
๐๐๐๐๐๐๐๐๐: ๐๐๐๐๐ ๐ถ.๐บ๐ป๐ ๐๐๐๐๐-๐๐๐ฃ๐๐๐(๐ถ.๐ธ๐ธ, ๐ท, ๐ถ.๐น๐ผ, ๐ท) ๐๐๐๐;
๐๐๐๐๐๐๐๐๐-๐๐๐๐๐ข: ๐๐๐๐(๐ถ.๐ท๐ธ๐ * (๐๐๐๐๐๐๐-๐๐๐๐๐ก() - ๐ท));
}
@๐๐๐ข๐๐๐๐๐๐ ๐๐๐๐๐ {
๐๐๐๐ {
๐๐๐๐๐๐๐ข: ๐ถ;
๐๐๐๐๐๐๐๐๐: ๐๐๐๐๐๐๐๐๐๐(๐ผ๐๐ก);
}
๐๐ {
๐๐๐๐๐๐๐ข: ๐ท;
๐๐๐๐๐๐๐๐๐: ๐๐๐๐๐๐๐๐๐๐(๐ถ);
}
}
Clean and minimal approach for stagger animations
English
@Una @motiondotdev I know, me too. Now I just use little dashes to prove I'm a man of the people. My big gap is interruptable view transitions!
English
Proud of our team for making this happen ๐ฅฒ
Many years of work, lots of discussions, and many prototypes painfully taken back to the drawing board.
*of course it isn't just the Chrome team working on this--the web is a huge collaborative effort--but you can't deny that Chrome is leading the charge here and this post represents a ton of our engineering effort, feature championing, and vision.
blog.gitbutler.com/the-great-css-โฆ
English
CSS view transitions + anchor positioning now let you easily build smooth SPA-like navigation on a good old static website!
English