Robin

@solarise_webdev • 3,981 subscribers

Senior dev. Laravel, Craft, WordPress since 2010 - I run rescue & recovery for agencies when it hits the fan. Dad, gamer, walker. I like the cold.

Shorts

I know you're all getting mighty tired of seeing typography on your timeline today! But here's a pretext.js demo that (hopefully) isn't a crime against justification and indentation.

I know you're all getting mighty tired of seeing typography on your timeline today! But here's a pretext.js demo that (hopefully) isn't a crime against justification and indentation.

464,197 views

Since typography is the Hot New Thing right now, a perfect opportunity to repost my marker highlighter library Highlight text on websites with colourful wavy lines. Spans multiple lines! Responsive! Nice! (if you like that sort of thing) Nothing to do with pretext (and won't actually work with pretext right now, but that'll be a relatively simple fix)

Since typography is the Hot New Thing right now, a perfect opportunity to repost my marker highlighter library Highlight text on websites with colourful wavy lines. Spans multiple lines! Responsive! Nice! (if you like that sort of thing) Nothing to do with pretext (and won't actually work with pretext right now, but that'll be a relatively simple fix)

39,030 views

Videos

Anya Rossi

sweetdream.ai

SweetDream.ai•Sponsored•Livecam

Watch Anya Live

Anya is streaming live right now! Join her private show and enjoy exclusive content.

Exclusive private shows

1.2k viewers online

Private Show

Join now for exclusive access

Free preview available • Premium content

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.

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.

114,445 views • 2 months ago

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.

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.

46,432 views • 2 months ago

Pretext gives a massive performance boost for client-side pagination. An entire novel can be paginated on-the fly (with previews for each page) in 2-3ms per run vs 100ms+ for DOM Very cool and very responsive demo at (I think this is a fair comparison - there might be additional optimisations possible for the DOM approach, but can't escape the reflow trap)

Pretext gives a massive performance boost for client-side pagination. An entire novel can be paginated on-the fly (with previews for each page) in 2-3ms per run vs 100ms+ for DOM Very cool and very responsive demo at (I think this is a fair comparison - there might be additional optimisations possible for the DOM approach, but can't escape the reflow trap)

55,362 views • 2 months ago

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

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

24,742 views • 2 months ago

No more content to load