Unit tests... but make it blazing

We greatly appreciate all of you who shared React, Visualized last issue. We chose our three winners for the Airpods Pro giveaway and they are Travis Mair, Matt Sears, and María Ozámiz. We’ll reach out to each of you.

Today’s issue: A human keyboard, a taco that can teach React, and a new JavaScript-based religion that I definitely didn’t make up.

Welcome to #178.

---

Unit tests… but make it blazing

I’m 99% sure that’s the official unofficial motto for Vitest, the Vite-native test framework that just released v0.30 on Monday.

And developers have been eating it up like it’s a Pizza Hut lunch buffet from 1998 — in the last 12 months, Vitest’s weekly npm downloads have grown >10x to more than 1.3 million 😱.

So why all the hype for a pretty straightforward unit testing framework? From what I can tell, there are three main reasons:

• Vite love 📈 — Vitest’s growth is obviously tightly linked with Vite’s own explosive growth, but it’s not just riding coattails. It dramatically reduces the complexity of testing Vite apps by sharing the Vite config, transformers, resolvers, and plugins — so you get consistency across your app and tests with a single pipeline.

• Jest compatibility — Vitest recognizes that Jest is the unit testing 🐐, so it includes most Jest features and provides an API that lets you use it as a drop-in replacement for most projects.

• Unique features — The smart & instant watch mode lets you only re-run related changes (kind of like HMR for tests). The framework also comes with out-of-the-box support for ESM, TypeScript, and JSX, all powered by esbuild.

Bottom Line: Vitest wants to position itself as the default test runner for Vite apps and eventually become a solid alternative for non-Vite projects too. So far, it seems off to a great start.

Now we just need somebody to create a library called “Viter”, so we can complete each phase of the full Vite evolution. And I need somebody to bring me some Pizza Hut breadsticks and a copy of Shrek 2 on DVD asap.

---

Secureframe will keep you out of jail

Everybody procrastinates. Why else do you think I’m furiously typing this at 3:00 am with enough caffeine in my blood to knock out a horse?

But if there’s one thing you shouldn’t put off any longer, it’s setting up all the security and compliance stuff for your site – for obvious reasons. Thankfully, Secureframe can help.

They figured out how to automate the entire compliance process for tons of security frameworks – like SOC 2, HIPAA, and GDPR. Their platform has helped thousands of companies save months of time up front, and easily maintain compliance as they scale.

Best of all, they give you guided support from real, in-house experts every step of the way. So you don’t have to have any more stress dreams about being thrown in jail for screwing something up.

Check out their free, personalized demo to get a quick compliance check-up.

---

Did you know that you can make your typography responsive without using a media query?

h1 {
  font-size: clamp(2rem, 8vw, 4rem);
}

The clamp function takes three arguments:

1. A minimum value: 2rem - This means the font-size won’t go below 2 times the root element’s font-size, 32px (assuming the root element’s font-size is 16px).

2. A preferred value: 8vw - This sets the preferred font-size to 8% of the viewport width. As the viewport width changes, the font-size will scale accordingly.

3. A maximum value: 4rem - This sets the maximum font-size to 4 times the root element’s font-size (64px).

You can see this technique in action on 🕹️ react.gg.

---

1. Have you ever wondered what a collab between Minesweeper and the TC39 would look like? Well do I have GREAT news for you. Reinis “don’t let your dreams be dreams” Ivanovs had the same fantasy and decided to bring it to life with his uniquely named JavaScript Equality Table Game.

2. Everythingishacked used OpenCV and a pose detection platform to turn himself into a full-body keyboard. His wpm score probably isn’t the best, but it’s probably still faster than my mom typing on an iPhone (love u, mom).

3. Discover the high-risk vulnerabilities that might be impacting the OSS packages you are using today, and learn how to fix them in Snyk’s newly released Top 10 Javascript Open Source Vulnerabilities Report. [sponsored]

4. Jean Bussier wrote an article called Adventures in Garbage Collection. It’s about improving the performance of Shopify’s massive monolith, but that title also perfectly describes my college dating history.

5. Have ever wondered what pizza and tacos could possibly teach you about passing props in React? Of course you have. That’s why we created this visual guide to help make you even smarter (and slightly hungrier) than you already are.

6. Discord.js is an object-oriented Node.js module for easily building Discord bots. Because if there’s one thing that could make Discord even more unbearable super fun, it’s more bots.

7. The HTML spec just added a new grouping content element called search. But since Safari probably won’t add it until 2026, you probably don’t need to worry about it for a while.

8. Modern.js is a whole new web engineering system that comes with a framework, an npm package manager, a doc site solution, and a build engine. Post-modern.js is a new, JavaScript-based religion that revealed itself to me during a waking dream I had when I got lost inside the Salvador Dalí exhibit at the MoMA for 4 hours after that ayahuasca retreat. It’s currently still in alpha.