Nice site from Google (and guest contributors) with a bunch of fun demos of what Houdini can do. Plus a write-up from Una. These are all Paint API demos. Houdini is technically a group of seven things that are all pretty cool, and the Paint API is just one of them. Paint is fun, but things will start getting really weird when we get the Layout API, methinks.
I think the value of Houdini becomes more clear when you see an example of something this fun in so little code (Una’s confetti):
You import it, you use it. You control it with CSS custom properties. That one above is less than 1 kB.
I feel like the early story with Houdini was that it will be these really low-level API’s that will pretty much be used by platform people to prototype new platform features in a safer way. Now the story is more like: confetti!!!! I like both stories.
Firefox still feels like a big wildcard here. They say it’s “worth prototyping” but that feels like a bit of a stretch now after their platform team layoffs. The Paint API is polyfillable, for example:
(async function() {
if (CSS['paintWorklet'] === undefined)
await import('https://unpkg.com/css-paint-polyfill')
CSS.paintWorklet.addModule('https://unpkg.com/houdini-tesla/dist/worklet.js');
})()
And that polyfill is only ~5kB, so maybe that’s fine?
Vincent De Oliveira’s demos have long been my favorite though. While they are all fairly artsy, they also feel like somewhat practical UI things that you might wanna try to do on the web, but have traditionally felt a bit hard to pull off nicely.
And here’s a nice written tutorial from Estelle Weyl, Ruth John, and Chris Mills that goes not only into the Paint API, but the Typed OM too (less shiny, super practical).
For some reason Houdini remember me the old and abandoned CSS Shaders: in both cases the examples look great, but CSS Shaders were abandoned because security issues.
It’s nice to be enthusiastic when some new ideas come up to the web, but looking the past, even if some idea looks good, it can be dropped because some issue. I hope all security issues eventually found get solved without needing to drop the entire thing entirely (some were already solved, like the history leaking one). I already had the experience to experiment
<style scoped>
, like it then find years later was abandoned, even if it was previously implemented not only in Chrome but also in Firefox (under a flag). As part of it is polyfillable looks that it will have a better future than those other proposals.Very excitied to see how Houndini will change the web. Hopefully it will ship this year.