Cool Bits
-
Wladislav Artsimovich wrote an in-depth, interactive article on Analytical Anti-Aliasing which includes “some juicy secrets” he’s never read anywhere else. And if that’s not enough to get you to read 5,000 words about image rasterization, I don’t know what will.
-
Mastra is a TypeScript AI framework for prototyping and productionizing AI features with a modern JS/TS stack.
-
Ian Vanagas wrote about the 5 principles PostHog uses to choose technologies. Surprisingly, one of these principles is not “blindly use whatever the meanest person on X says,” but to each their own. [sponsored]
-
Webflow just launched the Webflow Design Language – a purely functional programming language that’s designed to be used visually.
-
Reddit Staff Engineer, Jim Simon wrote about building Reddit’s frontend with Vite. It’s a great article, but he wrote it as a long Reddit post, so you’ll have to avoid getting distracted by all the outrage.
-
Daishi Kato spoke about how an RSC framework enables Server Actions.
-
TinyBase 5.4 introduces a new WebSocket synchronization server that runs on Cloudflare as a Durable Object.
-
Tailwind just released their v4.0 Beta 1 with a unified toolchain, CSS-first configuration, and more. I knew I could hear Slayer playing somewhere in the distance.
-
Brian Kardell wrote about interop and hard problems in the web platform.
-
Cali is an AI agent that helps you build React Native apps, and as far as I can tell, it was not created by Evan Bacon.
Pop Quiz: Answer
You can use the element’s getAnimations method to get an array of all the animations on the element. From there you can loop through the array and call the pause() method on each animation.
const circle = document.querySelector(".circle");
const animations = circle.getAnimations();
animations.forEach(animation => {
animation.pause();
})
Here’s what the full solution would look like, along with a working example if you’re the curious type.
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightblue;
margin: auto;
animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
<div class="circle"></div>
<button class="btn">Pause Animation</button>
<script>
const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
const animations = document.querySelector(".circle")
.getAnimations();
if (btn.textContent === "Pause Animation") {
animations.forEach((animation) => {
animation.pause();
});
btn.textContent = "Play Animation";
} else {
animations.forEach((animation) => {
animation.play();
});
btn.textContent = "Pause Animation";
}
});
</script>
There are other useful properties you can access on the animation object such as currentTime and playbackRate to have even more control over the animation.
Want us to write about your company?
Built with ❤️ by uidotdev
50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101
酷点
-
Wladislav Artsimovich 撰写了一篇关于 [分析抗锯齿](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/qv h8h8urkoxp0ncl/aHR0chHM6Ly9ibG9nLmZyb3N0Lmtpd2kvYW5hbHl0aWNhbC1hbnRpLWFsaWFzaW5nLw==)其中包括他从未在其他地方读过的“一些有趣的秘密”。如果这还不足以让您阅读 5,000 个有关图像光栅化的单词，我不知道还有什么可以。
-
Mastra 是一个 TypeScript AI 框架，用于使用现代 JS/TS 堆栈对 AI 功能进行原型设计和生产。
-
Ian Vanagas 撰写了PostHog 用于选择技术的 5 条原则。令人惊讶的是，这些原则之一不是“盲目地使用X上最卑鄙的人所说的任何话”，而是针对每个人自己的。 [赞助]
-
Webflow刚刚推出了【Webflow Design语言](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/n2hohqu376d0kqh6/aHR0cHM6Ly93ZWJmbG93LmNvbS9ibG9nL3dlYmZsb3ctZGVzaWduLWxhbmd1YWdl) –一种纯粹的函数式编程语言，旨在以视觉方式使用。
-
Reddit 高级工程师 Jim Simon 写了一篇有关 [使用以下内容构建 Reddit 前端Vite](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/reh8h9u06w8zelf2/aHR0cHM6Ly93d3cu cmVkZGl0LmNvbS9yL1JlZGRpdEVuZy9jb21tZW50cy8xZGh6dGs4L2J1aWxkaW5nX3JlZGRpdHNfZnJvbnRlbmRfd2l0aF92aXRlLw==)。这是一篇很棒的文章，但他把它写成一篇很长的 Reddit 帖子，所以你必须避免因为所有的愤怒而分心。
-
加藤大师谈到【RSC框架如何使服务器操作](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/08hwhgudlg8rk3hl/aHR0cHM6Ly 9naXRuYXRpb24uY29tL2NvbnRlbnRzL2hvdy10by1pbXBsZW1lbnQtc2VydmVyLWFjdGlvbnMtaW4tYW4tcnNjLWZyYW1ld29偏航==）。
7.【小基地5.4](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/8ghqh3ulrq4nxrck/aHR0cHM6Ly90aW55YmFzZS5vcmcvZ3VpZGVzL3JlbGVhc2VzLyN2NS00)引入了新的WebSocket作为持久对象在 Cloudflare 上运行的同步服务器。
-
Tailwind 刚刚发布了他们的 v4.0 Beta 1与统一工具链、CSS 优先配置等等。我知道我能听到杀手在远处某处演奏。
-
Brian Kardell 撰写了有关 网络中的互操作和难题平台。
-
Cali是一个AI代理它可以帮助你构建 React Native 应用程序，据我所知，它不是由 Evan Bacon 创建的。
小测验：答案
您可以使用元素的“getAnimations”方法来获取元素上所有动画的数组。从那里您可以循环遍历数组并在每个动画上调用“pause()”方法。
const circle = document.querySelector(".circle");
const animations = circle.getAnimations();
animations.forEach(animation => {
animation.pause();
})
这是完整的解决方案，以及[工作示例](https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/dphehmu0p83n7zfm/aH R0chHM6Ly9jb2Rlc2FuZGJveC5pby9zL2J5dGVzLXBhdXNlLWFuaW1hdGlvbi1pNXUyZXk_ZmlsZT0lMkZpbmRleC5odG1s)如果你是好奇的类型。
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: lightblue;
margin: auto;
animation: pulse 1s infinite ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
<div class="circle"></div>
<button class="btn">Pause Animation</button>
<script>
const btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
const animations = document.querySelector(".circle")
.getAnimations();
if (btn.textContent === "Pause Animation") {
animations.forEach((animation) => {
animation.pause();
});
btn.textContent = "Play Animation";
} else {
animations.forEach((animation) => {
animation.play();
});
btn.textContent = "Pause Animation";
}
});
</script>
您可以在动画对象上访问其他有用的属性，例如“currentTime”和“playbackRate”，以更好地控制动画。
希望我们写一下您的公司吗？
由 [uidotdev] 使用 ❤️ 构建（https://click.convertkit-mail4.com/r8u7647ndptoh28k75xc6ud708666h7/owkhwurqgzd8nfv/aHR0cHM6Ly91aS5kZXY=）
50 W Broadway Ste 333 PMB 51647 盐湖城，犹他州 84101
发布者