A package manager for your package manager's package manger to manage

This week, we’ve got a new way to script, a very special birthday boy, and a new package manager for your package manager’s package manger to manage. Welcome to #65.

---

Now kith

Easy JavaScript-ing

Google recently put the script back into JavaScript when they released zx — an unholy union of Bash and JavaScript.

What does it do? Sometimes you’ve got a process that you’d like to automate with a little code. You could write it in pure Bash, but that’s complicated, the documentation is terrible, and your hair isn’t gray enough. Node is a little nicer to work with, but not as powerful as Bash.

Zx (pronounced “zx”) combines the best parts of Bash and Node, giving you a simple-but-powerful automation tool that has a bunch of mini-tools built in. You’ve got fetch for HTTP requests, question for accepting user input, globby for getting files that match a glob pattern, and more.

Let me show you an example. Suppose I’m migrating my Node project from CommonJS to ESM. As I migrate, I need to rename my existing files from .js to .cjs. With zx, I can do that with just five lines of code.

// cjsMigrate.mjs
#!/usr/bin/env zx

const jsFiles = await globby("./src/**/*.js")
for (let path of jsFiles) {
  const newPath = path.replace('.js','.cjs')
  await $`mv ${path} ${newPath}`
}

Nice! Notice that #!/usr/bin/env zx at the top? That lets me execute this script as if it were a normal Bash script. All I have to do is set the right permissions.

chmod +x ./cjsMigrate.mjs
./cjsMigrate.mjs

The magic of zx is in the $. It may look like JQuery, but don’t be fooled — whatever you put in the backticks will execute as a Bash command. The interpolated parts between the curly brackets will automatically be escaped, so it should “just work.”

You can run it by itself, pipe the results to the console, or put it the result in a variable and use it elsewhere in your script.

The Bottom Line: If you’ve ever had a hard time writing Bash scripts, zx might be for you. It may say that it’s “not an officially supported Google product” at the bottom of the readme, but zx will probably last longer than Google Reader did (RIP in peace).

---

Just ship it. [sponsored]

Retool can help you build internal tools 10x faster

It finally happened. Your boss approached you and needs some “internal tools thrown together” because the suits upstairs want to make some “data-driven decisions.”

No problem, you think, should only take a few days. But then you spend the next month hacking together a wide variety of your company’s data sources, only to realize at the last minute that you never considered auth, and (oh crap) the whole thing looks terrible. Should’ve used Retool.

Retool started when a few developers realized that all internal tools are made up of the same basic pieces — tables, lists, charts, forms, maps, wizards (I’m a wot?), etc. So they made a rad product that abstracts away all the annoying parts of building those tools, while still giving you the flexibility to write custom JavaScript anywhere in the app.

And thanks to their pretty generous free tier, I can finally tell my mom that I’m a 10x (internal tools) developer.

👉__Check it out__

---

…the schemas will align, ever so nicely

TWIH — GraphQL is Born

Six years ago this week, the data fetching prophecies were fulfilled when Facebook open-sourced GraphQL — a query language for APIs that differentiated itself from traditional REST APIs in a few meaningful ways:

• GraphQL APIs can get all the data your app needs in a single request (REST APIs typically require loading from multiple URLs).

• GraphQL queries mirror their response, which makes it much easier to predict the shape of the data that’s returned from a query.

• GraphQL has a hierarchical structure that naturally follows relationships between objects (without requiring multiple round trips or complex SQL statements).

In one way or another, all of these features were (and still are) designed to make the data fetching process a lot more intuitive for frontend developers and a lot more efficient for the apps themselves.

Lee Byron wrote that he and his team originally created GraphQL because, at that time (back in 2012), Facebook’s native mobile apps needed a data API that was “powerful enough to describe all of Facebook, yet simple enough to be easy to learn and use by our product developers.”

Turns out, that was a pretty compelling value prop to lots of other developers too, so they open sourced it in September 2015.

Fast forward to today, and GraphQL is getting a cool 5.5 million npm downloads per week, while helping to spawn a few VC wet dreams OSS-as-marketing unicorns along the way, like Apollo and Hasura. Here’s to the next six years of thinkpieces about “GraphQL vs. REST.”

---

Cool Bits

1. Popular RUM tool, Raygun, has released a bunch of new features recently to help you monitor and improve Core Web Vitals using real user insights. Their latest announcement takes things to the next level, allowing you to drill into specific users, sessions, and instances, based on their CWV score. [sponsored]

2. Stefan wrote about Dissecting Deno, which proves that we’ve learned nothing from the Jurassic Park movies.

3. KDL is a new serialization format and configuration language that’s similar to JSON, YAML, and XML. Apparently, KDL is pronounced as Cuddle, which reminds me of when I tried to tell my mom in high school that FML is just slang for Family.

4. Matthew wrote about How to get into Rust as a TypeScript developer. Now all you need is “How to get into TypeScript as a JavaScript developer” and you’ll be all caught up with the cool kids.

5. Sachin created Replace-jQuery — which automatically finds jQuery methods from existing projects and generates vanilla JavaScript alternatives. If Sachin throws “AI” and “Machine Learning” on his landing page he’s got himself a nice little seed stage startup there.

6. Omar wrote about how he’s using React Router with Vite to build a file-based routing for client-side React apps. Isaiah 11:6.

7. Corepack is a new, experimental Node.js feature for automatically managing your package managers (not a joke). Can’t wait to see which package gets chosen as assistant to the regional package manager of package managers.

8. Harlem is a lightweight, un-opinionated, and extensible state management solution for Vue that just released v2.0. Really looking forward to next year’s Harlem Conf, where we’ll try to finally break the record for world’s longest Harlem Shake — 44.5 hours! Use the code BYTES to book your early-bird ticket right now and get 15% off the $1,200 entry (souvenir water bottle not included).