Buen sitio de Google (y colaboradores invitados) con un montón de demostraciones divertidas de lo que Houdini puede hacer. Además de un artículo de Una. Estas son todas las demostraciones de Paint API. Houdini es técnicamente un grupo de siete cosas que son geniales, y la API de Paint es solo una de ellas. Paint es divertido, pero las cosas comenzarán a ponerse realmente raras cuando obtengamos la API de diseño, creo.
Creo que el valor de Houdini se vuelve más claro cuando ves un ejemplo de algo tan divertido en tan poco código (el confeti de Una):
Lo importa, lo usa. Lo controlas con propiedades personalizadas de CSS. El de arriba es menos de 1 kB.
Siento que la historia inicial con Houdini fue que serán estas API de muy bajo nivel las que prácticamente la gente de la plataforma utilizará para crear prototipos de nuevas funciones de la plataforma de una manera más segura. Ahora la historia es más como: ¡¡¡confeti !!!! Me gustan las dos historias.
Firefox todavía se siente como un gran comodín aquí. Dicen que “vale la pena hacer un prototipo”, pero se siente un poco exagerado ahora después de los despidos de su equipo de plataforma. Paint API se puede rellenar, por ejemplo:
(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');
})()Y ese polyfill es de solo ~ 5kB, así que tal vez esté bien.
Sin embargo, las demos de Vincent De Oliveira han sido durante mucho tiempo mis favoritas. Si bien todos son bastante artísticos, también se sienten como cosas de interfaz de usuario algo prácticas que quizás quieras intentar hacer en la web, pero que tradicionalmente se han sentido un poco difíciles de llevar a cabo bien.
Y aquí hay un buen tutorial escrito de Estelle Weyl, Ruth John y Chris Mills que no solo se aplica a la API de Paint, sino también a Typed OM (menos brillante, súper práctico).
Enlace directo →