Putting the "p" in npm

🗓️ Mark your calendars because we (finally) have an official launch date for our new React Query course, query.gg. It’ll be live on May 22nd.

Sign up for the email list if you want to get a sneak preview of the course and a big launch-day discount.

Today’s issue: Jay-Z refuses to use CSS preprocessors, learning how to build digital cat toys, and Biome rising from Rome’s ashes.

Welcome to #281.

---

Putting the “p” in npm

Pnpm just released v9.0 on Tuesday with an improved lockfile format, better resolution of peer dependencies, and some minor improvements you probably won’t notice.

But do you know what’s impossible not to notice? Pnpm’s explosive growth.

Their weekly downloads are up 3x since we wrote about them a year ago, after growing by 5x the year before. For you math majors keeping score at home, that’s a 15x jump in two years – putting them at 11 million weekly downloads, which is more than double what Yarn gets.

So what’s unique about pnpm, and what’s driving its insane growth? Let’s dive in.

Quick background: Back in 2017, Zoltan Kochan released v1 of pnpm, which TIL stands for “performant npm.” I always thought it stood for “pneumonia npm”, because my lungs would fill up with fluid whenever I used it – but it turns out that was just because my old office had a bunch of asbestos 🙃.

But “performant npm” is a great name, because that’s exactly what it is – a faster, more efficient replacement for npm that comes with better monorepo support and mostly feels like you’re just using npm. Here’s how it works:

• With Yarn and npm, if you have 100 projects using a dependency on your machine, you’ll have 100 copies of that dependency saved on your disk. They resolve those dependencies by using hoisting to flatten their node_modules. This eats up a lot of disk space and can cause slow installs (as you’ve probably experienced).

• Pnpm’s key insight was to use a content-addressable store instead, which stores each of your dependencies only once in a global store on your home folder. If you need different versions of the package, only the files that differ get added to the store (instead of the entire package).

• They do this via a non-flat node_modules directory, which creates a nested structure of dependencies, where every package and file inside the folder is hard linked to the store – saving you time and disk space 🤝.

Bottom Line: So far, Pnpm 9.0 looks like exactly what you want from a major release – solid improvements with minimal breaking changes, while being easy to upgrade to. Who knows if it’ll ever seriously challenge npm for the package manager throne, but it’s clearly hit that sweet spot of “easy to adopt” and “noticeably better for certain use cases.”

---

Catch vulnerabilities before they strike with Sonar’s deeper SAST

You know how you have that bad habit of blindly installing external packages as long as they have at least 50 downloads a week? Yeah, turns out that’s not great for your app’s security.

Thankfully, Sonar is here to enable your bad habits keep you safe.

Here’s how it works:

• Sonar traces data flow in and out of your app’s dependencies to uncover deeply concealed vulnerabilities that other SAST tools can’t detect (see source code for JavaScript example).

• Their security engine runs comprehensive code analysis on all interactions between your code and your dependencies’ code to check for tainted data.

• The engine flags and guides you to fix all bugs and security vulnerabilities, before anything goes wrong.

Check out the free trial to try it out for yourself.

---

Did you know that Chrome DevTools has some magical shortcuts powered by the $? Here are some of the most useful ones:

$() - is an alias for document.querySelector(). It allows you to select the first element that matches a given CSS selector. For example, $('div') would return the first div element on the page.

$$() - is an alias for document.querySelectorAll(). It returns an array of all elements that match a given CSS selector. For example, $$('div') would return all div elements on the page.

$0, $1, $2, ... $n - are references to the elements you have recently selected in the Elements panel. $0 represents the most recently selected element, $1 represents the second most recent, and so on.

$_ - represents the value of the most recently evaluated expression in the console.

$x() - allows you to query the DOM using XPath expressions. For example, $x("//div") would return all div elements on the page.

---

1. Paul Henschel wrote about Building an interactive 3D event badge with React Three Fiber for the Vercel Ship conference website. By the end of the post, you too will be capable of building a digital cat toy for human developers to play with for hours.

2. Yorick Peterse wrote this very detailed article on How to write your own code formatter.

3. Volksowl gives you detailed feedback on your CV from a community of senior software engineers to help you land a job in tech. Join the beta if you want to connect with senior-level developers and learn how to take your career to the next level. [sponsored]

4. Jason “Jay-Z” Zimdars wrote on the 37signals blog about How they built their new Campfire product using modern CSS features, vanilla CSS, and no frameworks or preprocessors. Why you gotta flex so hard on us like that, Jay-Z?

5. The React team added this new useTransition guide to the React docs.

6. Andy Bell wrote this Primer on the cascade and specificity to help you feel more confident with the fundamentals.

7. Biome v1.7 comes with an easy way to migrate from ESLint and Prettier, new linter rules, and it just hit 1 million monthly npm downloads. Rome fell, but Biome is rising from the ashes.

8. CarbonQA gives you high-quality QA services for dev teams with your own dedicated team of US-based testers, so you never have to waste engineering hours on QA testing again 🙏. [sponsored]

9. Jo Franchetti wrote this helpful Intro to TSConfig for JavaScript Developers on the Deno blog.

10. April 24th is officially JS Naked Day, where folks are removing all JavaScript from their websites for 24 hours to promote The rule of least power. You should probably still wear clothes though, unless you work from a windowless home like me and do all your best thinking in the nude.