编写代码，获取彩带 | CSS-Tricks

今年我了解了canvas-confetti npm 包。这是一个简单的 JavaScript 包，可以将（虚拟的，<canvas>）彩带爆炸效果注入到您正在使用的任何网页中。

完成了一个教程？彩带！

第一次使用该新功能？彩带！！

刚刚记起你的银行登录信息？**彩带时间！**！！

我使用这个包越多，就越欣赏这些小小的胜利（或者像我所说的，“彩带时刻”）。网页开发变得很复杂，很容易忘记网页浏览器可以多么交互、创意和有趣。

在过去十年中，网页开发人员的工具包变得更加复杂。浏览器和服务器之间的界限变得模糊，像Next.js和Redwood这样的全栈 JavaScript 应用程序出现了，“零配置设置”如create-react-app仅安装了 1400 多个依赖项，才能让你看到“Hello, World!”。

但是，如果您更喜欢保持简单，那么去年给了您充分的理由保持希望。2020 年是这种复杂性趋势开始放缓，甚至完全逆转的第一年。Web 平台的进步现在让您用更少的代码做更多的事情。像esbuild和Snowpack（免责声明：我在 Snowpack 工作）这样的项目促使了新一代更简单、更快的构建工具的诞生。像Eleventy这样的项目现在提供了一种替代方案，即 HTML 优先的 Web 开发风格，感觉非常新鲜。我敢说……有趣！

我希望这种新趋势能够持续下去，为每个人带来更多乐趣和彩带。🎉

Siang Lim

# 2021年1月15日

我喜欢 Snowpack 的入门指南提示您添加此包。

我还注意到，如果电子邮件正文中出现“祝贺”一词，outlook.com 上的电子邮件会喷洒彩带。

Diana

# 2021年3月29日

嗨，Fred，

非常感谢你分享这个。我真的很喜欢这个效果，并且真的在按钮上点击了 30 多次。我也想在我的网站上使用它，但我完全不懂 JavaScript。你愿意告诉我你是怎么做到的，或者甚至制作一个简短的视频教程吗？不幸的是，npmjs.com 的链接并没有让我更聪明，因为我只懂 CSS :(

如果你能分享你的知识，那就太好了。

谢谢
Diana

Fred

评论永久链接# 2021年3月29日
https://skypack.dev/ 在主页上有一个演示，您可以将其添加到脚本标签内的网站中
```
<script type="module">
  import confetti from 'https://cdn.skypack.dev/canvas-confetti';
  confetti();
</script>
```

Thomas Güttler

# 2021年4月15日

是的，事情变得更简单了。例如，html-over-the-wire (htmx) 被接受，因为它可以带来良好的 Web 指标得分。

评论