<!DOCTYPE html>
<html>
<head>
<title>Bytes: The Remix Chronicles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 16px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> The only prescription for a broken metaframework, a more ruggedly handsome version of Tom Holland, and the simple joys of learning nothing from a big project.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/g3hnhwumn0qoqdbr/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvMzk2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061217">#396</a>.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">The Main Thing</h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/dope.jpg" alt="a retro army guy" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">My app still running React Router v4<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">The Remix Chronicles</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">I don’t talk about it often, but over my many years of writing software, I’ve developed what I’d consider to be a repeatable system for managing tech debt across large codebases.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Whenever you come across a codebase that you 1) didn’t write or 2) no longer understand, delete it and start over.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Is it practical? Is it realistic? <strong style="font-weight: 600;">Is this haunted room actually stretching?</strong></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Regardless, it seems that with their latest announcement, the Remix team is also a believer in my system.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But before we get to that, let’s take a quick detour to see how we got here.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">First we started with React Router, then that split and we got Reach Router, then that merged back into React Router, then we got Remix, then Remix got tired and took a nap – which left us with React Router, but while Remix was napping it had one of those dreams where React cheated on it, and now it’s awake and wants nothing to do with React.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Instead, <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/9qhzhdudxe5356h9/aHR0cHM6Ly9yZW1peC5ydW4vYmxvZy93YWtlLXVwLXJlbWl4" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061218">Remix v3</a> will be a fork of Preact, a mature virtual DOM library already used heavily at Shopify, and will focus on “simplicity, clarity, and performance”.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">In other words, <strong style="font-weight: 600;">it’s an entirely new thing that has nothing to do with Remix, React, or React Router.</strong></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Bold, and that’s kind of the point. Because React Router has “a dedicated team, long-term backing, and an open governance model to keep it growing for years to come,” the Remix boys say they’re “free to go build what comes next”.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What exactly that means is still TBD, but they gave us some principles they’re hoping to abide by:</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Model-First Development</strong> – Optimize the code, docs, tooling, and abstractions for LLMs</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Build on Web APIs</strong> – Keep the entire stack on vanilla Web APIs + JavaScript to eliminate context-switching</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Religiously Runtime</strong> – Design everything to execute unbundled at runtime</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Avoid Dependencies</strong> – Minimize or entirely avoid third-party libs</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Demand Composition</strong> – Ship small, single-purpose modules that plug in or drop out without issue</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Distribute Cohesively</strong> Re-export those modules as one “remix” toolbox so adoption stays effortless</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> If you didn’t want your spouse to be upset, you shouldn’t have cheated on them in their dreams.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/3ohphdu3rkp9prsr/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGMzk2" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1751061219"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/n2hohquvgl7575t6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkYzOTY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1751061220"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/48hvh7um97xqxnfx/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9VGhlJTIwJTQwYnl0ZXNkb3RkZXYlMjBjcmV3JTIwYnJlYWslMjBkb3duJTIwUmVtaXglMjB2My4mdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkYzOTY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1751061221"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/wnh2h6uq4l0v0os7/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBVGhlJTIwJTQwYnl0ZXNkb3RkZXYlMjBjcmV3JTIwYnJlYWslMjBkb3duJTIwUmVtaXglMjB2My4lMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGMzk2JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1751061222"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"></a>
</td></tr></tbody></table>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="150" src="https://bytes.dev/images/content/qa-wolf-logo.png" alt="QA Wolf logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"><span>Our Friends <br class="mobile-break">(With Benefits)</span></h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/edna.jpg" alt="Edna Mode from the Incredibles staring into the camera" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Me watching all my tests slowly fail one by one<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/reh8h9um7o6v6qc2/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNTMwLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBVGhlRWFzeVdheVRvU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNTMwX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1oZWFkbGluZS1UaGVFYXN5V2F5VG9TcGVlZFVwWW91clRlYW1zUmVsZWFzZUN5Y2xlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061223">The easy way to speed up your team’s release cycles</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What if you could wave a magic wand to help your team immediately start shipping faster?</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s exactly what <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/08hwhgu2xplwldul/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNTMwLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBVGhlRWFzeVdheVRvU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNTMwX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVFBV29sZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061224">QA Wolf</a> has done for hundreds of companies – including Brilliant, who was able to cut their release cycles from 24 hours to 5 minutes (<a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/8ghqh3uo37rprofk/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9jYXNlLXN0dWRpZXMvYnJpbGxpYW50P3V0bV9jYW1wYWlnbj1BQ1FfQWxsX0RlbW9fQ29udmVyc2lvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfQ3V0UUFDeWNsZXNfMjAyNTA1MzAtTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PUN1dFFBQ3ljbGVzX0dldEFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0FUaGVFYXN5V2F5VG9TcGVlZFVwWW91clRlYW1zUmVsZWFzZUN5Y2xlc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTA1MzBfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWJvZHktU2VlVGhlQ2FzZVN0dWR5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061225">see the case study</a>).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here’s how it works:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">They create, maintain, and run automated Playwright tests to cover your entire application, 5x faster than anyone else</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">They provide <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/vqh3hmuo4qw3wetg/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9ob3ctaXQtd29ya3M_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9DdXRRQUN5Y2xlc18yMDI1MDUzMC1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9Q3V0UUFDeWNsZXNfR2V0QVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVRoZUVhc3lXYXlUb1NwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MDUzMF92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS1VbmxpbWl0ZWRQYXJhbGxlbFRlc3RSdW5z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061226">unlimited parallel test runs</a> on their infrastructure and get you pass/fail results within 3 minutes</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">You get zero flakes, because every failed test is reviewed by their team of human QA engineers</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/l2heh6ul4dxvxrc6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNTMwLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBVGhlRWFzeVdheVRvU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNTMwX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1jdGEtR2V0QVBlcnNvbmFsaXplZERlbW9Gb3JZb3VyVGVhbQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061227">Get a personalized demo for your team</a> – and see how their average customer increases their release cadence by over 5x.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/m2h7h6u39l404wsm/aHR0cHM6Ly9yZWRpcy5pby9jbG91ZC8_dXRtX2NhbXBhaWduPTIwMjUtMDUtYXBwLXBlcmZvcm1hbmNlJnV0bV9jb250ZW50PWN1LXJlZGlzX2Nsb3VkX3VzZXJzLTcwMTN6MDAwMDAxV2NtYSZ1dG1fbWVkaXVtPWNwYSZ1dG1fc291cmNlPWJ5dGVzLW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061228">Redis</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>Configure and scale <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/m2h7h6u39l404wsm/aHR0cHM6Ly9yZWRpcy5pby9jbG91ZC8_dXRtX2NhbXBhaWduPTIwMjUtMDUtYXBwLXBlcmZvcm1hbmNlJnV0bV9jb250ZW50PWN1LXJlZGlzX2Nsb3VkX3VzZXJzLTcwMTN6MDAwMDAxV2NtYSZ1dG1fbWVkaXVtPWNwYSZ1dG1fc291cmNlPWJ5dGVzLW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061228">Redis 8 on the cloud</a> in 2 minutes. Effortlessly hit 1 billion ops per second.</em></p>
</div>
</div>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">forEach</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">item</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>Array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">isArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
result<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">concat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">else</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
result<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> result<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Evan You just announced that <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/dphehmuek2pwpdfm/aHR0cHM6Ly92b2lkemVyby5kZXYvcG9zdHMvYW5ub3VuY2luZy1yb2xsZG93bi12aXRl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061229">Rolldown-Vite</a> is now live and ready to bundle your Vite apps with the sweet nectar of Rust.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">TkDodo wrote about <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/e0hph0u7edrwr6c8/aHR0cHM6Ly90a2RvZG8uZXUvYmxvZy90aGUtYmVhdXR5LW9mLXRhbi1zdGFjay1yb3V0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061230">the beauty of TanStack Router</a>, but he failed to mention how Tanner is a more ruggedly handsome version of Tom Holland.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">JavaScript Mastery created this 4-hour tutorial video on <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/7qh7h2u98xnpnlsz/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1YVWtOUi1KZkh3bw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061231">launching a SaaS app with Next.js, Supabase, and Clerk Billing</a> – the easiest way to set up subscriptions in your application. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Antirez wrote about how <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/owhkhwuwn0qlqdtv/aHR0cHM6Ly9hbnRpcmV6LmNvbS9uZXdzLzE1Mw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061232">human coders are still better than LLMs</a>, which is great news if your livelihood depends on that fact <span role="img" aria-label="upside-down face">🙃</span>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Syntax crew interviewed the creator of VS Code and the Copilot Lead about <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/z2hgh7ue7mlrlvap/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1HTW1hWVVjZE15VQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061233">the future of VS Code and Copilot</a>, now that it’s all open source.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The RedwoodSDK team wrote about <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/p8hehqu4dpq5qwhq/aHR0cHM6Ly9yd3Nkay5jb20vYmxvZy95b3VyLXJlYWN0LW1ldGEtZnJhbWV3b3JrLWZlZWxzLWJyb2tlbg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061234">why your React meta-framework feels broken</a>, and how the only prescription is more <del>cowbell</del> Redwood.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Growl wrote about how <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/x0hph3uez4qdq5h5/aHR0cHM6Ly9ncm93bC5kZXYvYmxvZy9uZXh0anMtc2VydmVyLWFjdGlvbnMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061235">Next.js server actions are public-facing API endpoints</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The ESLint team wrote this <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/6qhehoulw39699co/aHR0cHM6Ly9lc2xpbnQub3JnL2Jsb2cvMjAyNS8wNS9lc2xpbnQtdjkuMC4wLXJldHJvc3BlY3RpdmUv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061236">retrospective on ESLint v9</a>. Most teams only publish retros like this if something goes wrong, but my team prefers to write them when everything goes perfectly. “We released this thing, it does what we said it would do, we had no issues, and we learned nothing new from this experience. Enjoy.”</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug: Solution</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/m2h7h6u39l404wsm/aHR0cHM6Ly9yZWRpcy5pby9jbG91ZC8_dXRtX2NhbXBhaWduPTIwMjUtMDUtYXBwLXBlcmZvcm1hbmNlJnV0bV9jb250ZW50PWN1LXJlZGlzX2Nsb3VkX3VzZXJzLTcwMTN6MDAwMDAxV2NtYSZ1dG1fbWVkaXVtPWNwYSZ1dG1fc291cmNlPWJ5dGVzLW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1751061228">Redis</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><code style="font-size: 14px;">Array.prototype.concat()</code> doesn’t mutate the original array, it returns a new array. To fix the issue, we need to assign the return value of <code style="font-size: 14px;">result.concat(flattenArray(item))</code> back to <code style="font-size: 14px;">result</code>.</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">forEach</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">item</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>Array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">isArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> result<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">concat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">else</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
result<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> result<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">flattenArray</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/kkhmh2uneox2xoal/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1751061237">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/58hvh8ug046o6wc6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1751061238">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/25h2h9u3gqm0m5b3/aHR0cHM6Ly91aS5kZXY=" url-id="1751061239">ui.dev</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://click.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl/qvh8h8udvlk2lgtl/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1751061240">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://unsubscribe.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/e5u6n6ew55c7hl2v69vsmi8dowo22cl" alt="">
</body>
</html>