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 trip

It’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
(With Benefits)

You're playing with fire, my friend

FusionAuth made auth easy

Building authentication from scratch is like going to Taco Bell on a first date — it seems tempting, but it’s pretty much guaranteed to end up as a messy disaster.

That’s why we’re huge fans of FusionAuth. They’re a complete auth solution that takes care of all the gross stuff like SSO, MFA, WebAuthn, user management, and security — and if you don’t know what one or more of these things are… you probably need it.

Their Free Community version is surprisingly robust (no credit card, no limits, and it’s free forever if you self host 🙏). That makes it great to learn with or use for side projects, but it also has a pretty seamless integration process for existing apps.

And if you ever get stuck, premium users can call their support line and talk to an *actual engineer* who really knows auth — instead of just typing your questions into a support chat box that no one will ever read.

Check it out — and never worry about auth again.

The Job Board

	Senior Full Stack Engineer
	Remote friendly TS $160-210k
	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

1. Daniel Yuschick wrote about how The key to good component design is selfishness. I’ve heard that’s also the key to good parenting.

2. 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]

3. 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.)

4. Timothy Clem wrote a cool deep dive on The technology behind GitHub’s new code search.

5. 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.

6. The stable release of Eleventy v2 just came out. Long live possum kingdom.

7. 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?

Pop Quiz: Answer

Sponsored by Unleash

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.