The Return of the Mix

Today’s issue: ASMR for optimization nerds, the cute design Olympics, and a whole lot of cheddar.

Welcome to #225.

---

The Return of the Mix

Remix v2 just came out, almost exactly two years after the framework first announced that it had raised $3m of VC to form an OSS company.

A lot has happened in Remix-land during these past 23 months, so let’s do a quick review before we dive into the v2 highlights.

• Remix v1 launched in November 2021 as an “edge-first web framework” that leaned heavily into standard web APIs like Request, Response, and FormData.

• Remixing React Router was a months-long process throughout 2022 where the Remix team moved all of Remix’s data APIs into React Router. This allowed RR to own data orchestration for the whole app, and made it easy for RR devs to adopt Remix.

• Shopify bought Remix in October 2022 to “give developers world-class shared infrastructure so they can focus on unique business needs and differentiators.” I’m not fluent in Corp-Speak, so I don’t know exactly what that means — but I do know that Remix is now the recommended way to build Shopify Admin apps, and that Remix doesn’t have to worry about running a company anymore.

That brings us to this month’s Remix v2 release which promises to be one of the smoothest framework upgrades ever, thanks to their heavy use of deprecation warnings and future flags.

Most of the juicy new features were already launched during various v1 releases — things like “flat” routing to simplify nested layouts, improved support for various CSS strategies, and a new dev server that does both HMR and HDR. But v2 does come with a brand new create-remix CLI experience that should be noticeably smaller and faster.

That’s it. Someone needs to tell the Remix team that simple, stable major releases make for boring newsletter content. Not sure where their priorities are.

Bottom Line: In two years, Remix has gone from being a pay-to-use product, to a VC-backed OSS startup, to an in-house open-source framework at Shopify. And through it all, they’ve built a passionate community of Remixologists who still love using it to build for the web. We’re excited to see where the next two years lead.

---

Sleuth Automations make it easy to be efficient

You can have the perfect plan for boosting your team’s productivity, but if it’s inconvenient, 0% of your developers will actually do it.

That’s why some of tech’s best software teams use Sleuth Automations — a pre-built collection of no-code checks, notifications, workflows, and actions that make it easy to be more efficient.

Here’s how it works:

• Find bottlenecks in your team’s processes with Sleuth’s DORA metrics tracker. Maybe you’ll learn that your team is taking a super long time to review PR’s.

• Apply automations to fix those bottlenecks. You could install this notify reviewers automation, which sends a Slack notification to relevant PR reviewers.

• Measure improvements with Sleuth’s dashboard to see how much time you’re saving your team.

Check out the automations for free — and see how they could make your team happier and more productive on Day 1.

---

Have a job you want to fill?

---

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

[newsletter, tagline].forEach((el) => console.log(el))

---

1. Our very own Lynn Fisher just released the prompt list for #divtober 2023, where you make a single div CSS illustration for each day in October. Don’t feel bad if yours don’t look as cute as hers, she’s a five-time gold medalist at the Cute Design Olympics.

2. Retool AI lets you instantly integrate AI into your apps and workflows with pre-built blocks. You can use any LLM, securely connect your business data, and add dynamic prompts to automate hundreds of tasks. It’s so powerful that even OpenAI uses it internally (!!). [sponsored]

3. Christian Mathiesen wrote an article called React Server Components Made Our Site A LOT Faster that kind of feels like ASMR for optimization nerds.

4. Nx Conf is happening this week, and the Nx gang just announced that they raised a $16m Series A from a16z and other investors. That’s a whole lot of cheddar.

5. Cloudflare Fonts just launched, which allow you to load your fonts from you site’s own domain, rather than from Google (if using Google Fonts). That helps boosts performance by bringing your fonts closer to end users.

6. Aaron Mitchell gave a 10-minute talk at Vue.js Conf called The Hidden Cost of Open Source. But I thought the best things in life are free?

7. PixieBrix is a browser extension that lets you easily create browser mods. Use it to add automation, integrations, collaboration, and AI to the web apps your team already uses, and see why dozens of developers are tweeting that it’s the most powerful browser extension they’ve ever used. Check it out. [sponsored]

8. Andy Bell wrote A (more) Modern CSS Reset as a follow up to his popular article from 4 years ago. Not to be confused with “The Great Reset”, which I believe was the name of Bill Gates’ plan for us to all start eating bugs or something.

9. GoSub is an experimental HTML tokenizer and parser that will “hopefully grow up to be a browser” one day. Dream big, kiddo.

10. Alex MacArthur wrote about how Priority Hints can help you get all that network activity under control. No word yet on if Priority Hints can help to get all the Swifties under control when posting about Taylor’s new football-playing bf.

---

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

[newsletter, tagline].forEach((el) => console.log(el))

You might be surprised to learn that this code doesn’t execute. If you try, you’ll get an error – Uncaught ReferenceError: tagline is not defined. But clearly it is, right? Wrongo.

This is the very rare scenario where not using semicolons can bite you. Because we have a string followed by no semicolon followed by an opening array bracket, JavaScript interprets our code like this, as if we’re trying to access elements from the string.

"Your weekly dose of JavaScript"[newsletter, tagline].forEach();

This, of course, throws an error because tagline isn’t defined. To fix this, add a + sign before the array.

const newsletter = "Bytes"
const tagline = "Your weekly dose of JavaScript"

+[newsletter, tagline].forEach((el) => console.log(el))

That’s mostly a joke, but it does work…

Instead, just use semicolons.

const newsletter = "Bytes";
const tagline = "Your weekly dose of JavaScript";

[newsletter, tagline].forEach((el) => console.log(el));