Remix takes a SPA day
Today’s issue: Andrew Huberman for Developers, the year of Node.js, and VueXYZ, 123, do-re-mi, baby you and me girl.
Welcome to #266.
The Main Thing
If you're gonna build a SPA, I'd rather you do it in the house
Remix takes a SPA day
If there’s one thing I learned from my last high school reunion, it’s that if someone starts bragging about how “stable” they are, it’s usually a red flag.
Thankfully, that’s not the case for JavaScript frameworks, so we were happy to see Remix bragging about how last week’s v2.7 release comes with stable Vite support 👏.
This enables a few exciting improvements, but the most significant change is Remix’s new SPA Mode — which supports building purely static sites that don’t need a JavaScript server in production.
But wait, isn’t using Remix without a server kind of like watching a Tarantino movie without the F-words and feet close-ups? That’s an oddly specific analogy, but good point.
The Remix team has spent the last few years telling us that SPAs are for dummies — so why are they suddenly trying to make it easier for us to build SPAs? Two reasons:
1. Boiling a frog. Remix still believes that having a server is the best way to go for most apps, but they now admit that there might be some valid use cases for SPAs after all.
SPA Mode™️ gives you a simple way to build single-page apps, but it also eases you into the Remix lifestyle with features like file-based routing and <head> management via their <Links>/<Meta> APIs. From there, you’re just one small config change away from a server runtime and access to the full buffet of Remixy goodness.
2. New migration path for React Router devs. SPA Mode is basically what you’d get if you had your own React Router + Vite setup, plus the aforementioned Remix goodies. This allows RR users to easily move to Remix without having to switch to a server-rendered architecture.
Bottom Line: Now that they’re nestled safe under Daddy Warbucks Tobi’s wing at Shopify, Remix doesn’t need to chase adoption numbers as hard as they did as a startup. But it’s still a smart move for them to make it as easy as possible for SPA and React Router developers to give the framework a try.
And along the way, Vite stays winning.
    |
Our Friends
(With Benefits)
When you get to use someone else's components to build your back end.
Convex is launching database components?
We’ve already told you about how Convex’s full-stack dev platform gives you everything you need to build your next project — but the “2024 version of Firebase” is just getting started.
That’s because their CEO just gave us all a sneak peek at Convex components, a WIP framework that’ll let you easily integrate solutions to common backend problems.
Here’s what that lets you do:
-
Easily share implementations of ORMs, permission systems, workflow systems, and more.
-
Use community-built components to quickly add advanced functionality (like row-level security) to your backend.
-
Speed up compilation time by only type checking, recompiling, and re-bundling changed components instead of the entire project.
When you combine this with their cloud functions, file storage, and software-defined database, you get a uniquely powerful platform for building full-stack apps.
Check out the free tier to see it for yourself.
Pop Quiz
Sponsored by tea Protocol
They’re offering a $250k grant to eligible open-source projects that launch with their testnet, plus the chance to meet and learn from their CEO (and Homebrew creator) Max Howell.
Nested loops aren’t ideal, but sometimes they’re unavoidable. Given the nested loop below, how can we break out of the nested loop when j === 2?
function loop () {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (j === 2) {
// Break out here
}
}
}
}
Cool Bits
-
Ahmad Shadeed wrote this in-depth Interactive guide to the CSS
:has()selector, so you can finally understand the problems it solves and why folks are so hyped about it - instead of just nodding your head politely and pretending you get it when it comes up. -
CarbonQA provides high-quality QA services for dev teams, so you never have to waste engineering time on QA testing ever again. Their US-based QA testers work directly in your tools and help you catch bugs before something breaks. [sponsored]
-
Lightning CSS v1.24 adds support for compiling the
light-dark()color function, parses CSS system colors, de-duplicates custom properties during minification, and more. -
Rafael Gonzaga (a member of the Node.js and Fastify core teams) wrote A summary of achievements in the Node.js space in 2023. I wrote a similar article, but it only covers my personal achievements in the world of high-stakes competitive eating.
-
Jamie Turner (Co-founder and CEO of Convex) wrote about the power of software-defined databases, where your code is in the database itself.
-
Simon Le Marchant created VueXYZ, a collection of creative Vue 3 composables that’s easy as ABC, 123, do-re-mi, baby you and me girl.
-
tea Protocol is offering a $250k grant for eligible open source projects that launch with their incentivized testnet, plus the chance to receive mentorship from their CEO, Max Howell (who also created Homebrew). It only takes a few minutes to apply. [sponsored]
-
Dmitry Kudryavtsev wrote about his experience Rendering emails with Svelte, which was surprisingly not quite as painful as it sounds.
-
Alex Harri wrote about JSDoc as an alternative TypeScript syntax.
-
A team at Meta wrote an academic paper on How they used LLMs to automatically improve existing human-written tests with an internal tool called TestGen-LLM. Once you skim it and 3-4 other research papers, you’ll be ready to launch the Andrew Huberman for Developers Podcast. Just be sure to get some sunlight in your eyes first.
It’s rarely used, but in JavaScript you can use a labeled statement to add a label to a for loop. This then allows you to break and interrupt the loop when needed – even from inside another loop.
function loop () {
dance:
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (j === 2) {
break dance;
}
}
}
}