Houdini.how

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!

不错的网站 来自 Google(以及客座撰稿人),其中包含大量关于 Houdini 可以做什么的有趣演示。再加上 Una 的文章。这些都是 Paint API 演示。从技术上讲,Houdini 是一组 七件事,它们都非常酷,而 Paint API 只是其中之一。Paint 很有趣,但当我们获得 Layout API 时,事情将开始变得非常奇怪,我认为。

我认为,当您看到如此少的代码就可以实现如此有趣的示例时,Houdini 的价值就更加清晰了(Una 的五彩纸屑)。

您导入它,您使用它。您可以使用 CSS 自定义属性进行控制。上面那个不到 1 kB。

我感觉 Houdini 的早期故事是,它将成为这些非常底层的 API,这些 API 将几乎被平台人员用来以更安全的方式对新的平台功能进行原型设计。现在的故事更像是:五彩纸屑!我喜欢这两个故事。

Firefox 在这里仍然感觉像一个很大的通配符。他们说它“值得进行原型设计”,但在他们的平台团队裁员之后,这感觉有点牵强。例如,Paint API 是可以填充的。

(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');
})()

而且那个 polyfill 只有 ~5kB,所以也许这没问题?

Vincent De Oliveira 的演示 一直是我最喜欢的。虽然它们都相当艺术,但它们也感觉像是您可能想在 Web 上尝试做的某些实际 UI 内容,但传统上感觉有点难以完美地实现。

这是 Estelle Weyl、Ruth John 和 Chris Mills 写的 一篇不错的教程,它不仅介绍了 Paint API,还介绍了 Typed OM(不太闪亮,非常实用)。

直接链接 →