Framework field trip
 Today’s issue: Selfish component design, Hunter S. Thompson’s technical writing routine, and 3 frameworks worth 5 second round picks. Welcome to #160.  The Main Thing Please let this be a normal field trip Framework field tripIt’s a slow newsweek, so we’re taking you all on a little field trip to visit three next-gen frameworks that you’ve probably heard of, but might not be following all that closely. So buckle up, stay with your buddy, and remember — when you’re on a Bytes field trip, you’re not just representing yourself, you’re representing all 152,000 of us. Don’t make me turn this bus around. Qwik: This HTML-first framework takes a “precision lazy-loading” approach to rendering with resumability instead of traditional hydration. They launched their first beta back in September, along with Qwik City, their Next.js-like metaframework. Since then, they’ve released a few minor updates and have been harnessing their inner Hunter S. Thompson to write tons of content — 27 blog posts this year already! The team’s clearly focused on educating developers about why they should get down with the Qwikness. Astro: Their killer feature is their islands architecture, which extracts your UI into smaller, isolated components on the page and replaces unused JavaScript with a sea of static, non-interactive HTML. Astro started as an SSG framework that developers loved for its speed and simplicity, but they’ve been steadily adding more functionality since then — like SSR support, the ability to bring your own component framework, and their new “TypeScript for Markdown” API. Remix: Remix originally positioned itself as more of a React metaframework, but these days it describes itself as a “full stack web framework” that’s very focused on web standards. It also popularized the concept of nested routes (which Next.js users are grateful for), and has brought a renewed emphasis on progressive enhancement to web dev. After getting acquired by Shopify back in October, the next step for the Remix team (which was founded by the creators of React Router) is to get as many RR users as possible to start using Remix. Bottom Line: Before you ask, we’re big fans of all three. If you’re starting a new project today, you can’t go wrong with any of them.
 Our Friends |
 | Senior Full Stack Engineer | |||
| ||||
Motion is looking for experienced TypeScript engineers to build the next generation of productivity tools. You'll inform key frontend architectural decisions that help Motion scale the next 2 order of magnitudes, create delightful user-facing features, and improve application performance. We are an ambitious team of 15 people distributed remotely across North America. |
Pop Quiz
Sponsored by Unleash
Unleash feature management has helped tons of companies deploy at incredible speed, safely 🏎. Get set up with continuous deployment in a few easy steps, and join the world’s most powerful open-source feature flag community.
If you wanted to pause a CSS Keyframe animation using JavaScript, how would you do it?
<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>
Cool Bits
-
Speaking of Qwik’s fast-and-furious writing pace, they just released this blog post about Resumable React — which shows how you can build React apps inside Qwik, without ever loading React in the user’s browser.
-
Daniel Yuschick wrote about how The key to good component design is selfishness. I’ve heard that’s also the key to good parenting.
-
Datadog created this jam-packed Front-end Developer Kit — which comes with multiple best practices guides, solutions briefs, and videos for how to better monitor and understand your app’s user activity. It’s worth checking out. [sponsored]
-
Node is moving to a new, faster URL parser called Ada — which I think is named after Wall-E’s robot girlfriend? (Don’t fact-check me.)
-
Timothy Clem wrote a cool deep dive on The technology behind GitHub’s new code search.
-
Islam Sharabash wrote on the Superhuman blog about Architecting their web app to “just work” offline. My wifi router is slowly trying to train me to “just work” offline too. It’s not going well.
-
The stable release of Eleventy v2 just came out. Long live possum kingdom.
-
Magic.dev raised $23 million to try and compete with GitHub Copilot. But if that doesn’t work, they could always pivot and start a dev shop called Magic Mike Dev — where all the developers are also talented exotic dancers. I wonder how long it’d take to teach Channing Tatum JavaScript?
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.