The persistence of this guy is remarkable. Key points & spoilers:
> A new set of APIs affectionately known as Houdini4 give your browser the power to control CSS via its own Object Model in Javascript
> It only works in Chrome
> Possibly the biggest feature to come out of this work is the CSS Paint Worklet5, which allows you to 'paint' on an element, not unlike the Canvas you know and love, and have the browser treat it as an image in CSS.
> you are still allow to import code as long as it's an ES6 Module.
> I assumed this would be just like writing text to a canvas. How hard can that be, right?
> It can still draw paths and curves, of course, so the lack of a convenient API is an impediment but not a dealbreaker.
> Luckily, a library called opentype.js8 offers hope of a solution. It can parse a font file and then, given a string of text, generate the letterforms of each character.
> It also has a parse method that accepts an array buffer. I'll just base64 encode the font then and decode it in my module.
> the worklet doesn't have the APIs for handling base64 strings either
> I put this code in its own file because it's not very…ergonomic…to have to work around a 200kb string of encoded font alongside the rest of the code. And that's how I abused an ES module to load my font.
> It would be better if you had to use CSS to query the database.
> For this, a custom CSS property is required. Defining inputProperties has the benefit of subscribing to changes to that property, so this will re-render if the value of that property ever changes. No need to set up any listeners ourselves.
> A new set of APIs affectionately known as Houdini4 give your browser the power to control CSS via its own Object Model in Javascript
> It only works in Chrome
> Possibly the biggest feature to come out of this work is the CSS Paint Worklet5, which allows you to 'paint' on an element, not unlike the Canvas you know and love, and have the browser treat it as an image in CSS.
> you are still allow to import code as long as it's an ES6 Module.
> I assumed this would be just like writing text to a canvas. How hard can that be, right?
> It can still draw paths and curves, of course, so the lack of a convenient API is an impediment but not a dealbreaker.
> Luckily, a library called opentype.js8 offers hope of a solution. It can parse a font file and then, given a string of text, generate the letterforms of each character.
> It also has a parse method that accepts an array buffer. I'll just base64 encode the font then and decode it in my module.
> the worklet doesn't have the APIs for handling base64 strings either
> I put this code in its own file because it's not very…ergonomic…to have to work around a 200kb string of encoded font alongside the rest of the code. And that's how I abused an ES module to load my font.
> It would be better if you had to use CSS to query the database.
> For this, a custom CSS property is required. Defining inputProperties has the benefit of subscribing to changes to that property, so this will re-render if the value of that property ever changes. No need to set up any listeners ourselves.