<!DOCTYPE html>
<html>
<head>
<title>Bytes: TanStack Labubus</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> Webpack’s cure for my gut microbiome, Node.js type stripping, and big React Native news for crypto casinos.</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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/p8hehqu4742qg9fq/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDEz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727927">#413</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/labubus.jpg" alt="Two labubus dressed in suits and ties" 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;">Excuse me sir, do you have a moment to discuss the good word of TanStack?<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">TanStack Labubus</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Our caveman monkey brains love things that come in sets.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">For some of us, that manifests as waiting in line for three hours and starting a brawl with strangers to finally collect the final Labubu in the coveted <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/x0hph3ue7epq9wb5/aHR0cHM6Ly9zdG9ja3guY29tL3BvcC1tYXJ0LXRoZS1tb25zdGVycy1sYWJ1YnUtZm9yZXN0LWZhaXJ5LXRhbGUtc2VyaWVzLXZpbnlsLXBsdXNoLWhhbmdpbmctY2FyZA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727928">Labubu Forest Fairy Tale set</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">For others, it looks like staying up til 2 am playing with the <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/6qhehoul2l59nlso/aHR0cHM6Ly90YW5zdGFjay5jb20vYmxvZy90YW5zdGFjay1kYi0wLjEtdGhlLWVtYmVkZGVkLWNsaWVudC1kYXRhYmFzZS1mb3ItdGFuc3RhY2stcXVlcnkjdGFuc3RhY2stZGItZW5hYmxlcy1hLXJhZGljYWxseS1zaW1wbGlmaWVkLWFyY2hpdGVjdHVyZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727929">TanStack DB beta</a> that just dropped yesterday, so you can be the first to add the newest TanStack <del>Labubu</del> library to all your projects.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Both activities brought me a lot of joy this week, but TanStack DB probably has <em>slightly</em> more real-world utility. It builds on top of TanStack Query to provide an embedded client-side database that can join, filter, and reactively update across your entire data graph.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And that’s an enticing promise, because right now, most dev teams are forced to choose between two less-than-ideal options for handling client-side data as their app scales:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Option 1: Build tons of view-specific API endpoints</strong> – gives you a fast UI, but a sprawling backend drowning in brittle API routes and network waterfalls</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Option 2: Load everything and filter on the client</strong> – simplifies your backend, but slows down your UI with cascading re-renders and other perf issues</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">TanStack DB introduces a new <strong style="font-weight: 600;">Option 3:</strong> Load normalized data collections once, then run lightning-fast joins and filters right in the browser – using differential dataflow to update only what changed.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The goal here is to simplify your API, reduce your network calls, and make your frontend faster as your dataset grows.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And if you’re already using TanStack Query, you can incrementally adopt TanStack DB one collection at a time. Like two Labubus in a pod – if one handled data fetching and the other handled fast joins.</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> Now we just need the TanStack team to create some sort of fuzzy character on a keychain that I can hang from my Birkin bag.</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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/kkhmh2un9n5x66tl/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1770727930"><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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/58hvh8ug9gn6k7s6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTM=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1770727931"><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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/25h2h9u3o38m4nh3/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9VGFuU3RhY2slMjBEQiUyMGdvZXMlMjBmb3IlMjB0aGUlMjBob2x5JTIwZ3JhaWwlMjBvZiUyMHJlYWN0aXZlJTIwY2xpZW50JTIwc3RvcmVzJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1770727932"><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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/qvh8h8ud6d4koeal/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBVGFuU3RhY2slMjBEQiUyMGdvZXMlMjBmb3IlMjB0aGUlMjBob2x5JTIwZ3JhaWwlMjBvZiUyMHJlYWN0aXZlJTIwY2xpZW50JTIwc3RvcmVzJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQxMyZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1770727933"><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/hostinger-logo.png" alt="Hostinger 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/draper-drinking.jpg" alt="Don Draper drinking" 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;">When your serverless bill is more than your rent<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/g3hnhwumzmlq6rtr/aHR0cHM6Ly9ob3N0aW5nZXIuY29tL2J5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727934">Get VPS hosting for $10 /month with Hostinger</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They make it easy to set up your own Virtual Private Server for more power and control – so we can finally declare independence from our serverless overlords <span role="img" aria-label="folded hands">🙏</span>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Over 4 <em>million</em> developers use Hostinger to host their sites, because it gives you:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Total control & security</strong> – Get full root access to customize everything, DDoS protection, an integrated malware scanner and <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/g3hnhwumzmlq6rtr/aHR0cHM6Ly9ob3N0aW5nZXIuY29tL2J5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727934">free automatic weekly backups</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Easy & flexible setup</strong> – Choose from a bunch of different operating systems, or use their <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/g3hnhwumzmlq6rtr/aHR0cHM6Ly9ob3N0aW5nZXIuY29tL2J5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727934">pre-installed templates</a> to easily deploy frameworks like Next.js and Astro.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Great value</strong> – For under $10/month, you get 2 CPUs and 8 GB of RAM with rock-solid performance.</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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/g3hnhwumzmlq6rtr/aHR0cHM6Ly9ob3N0aW5nZXIuY29tL2J5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727934">Try their 1-click template to get started</a> – and get an extra 10% discount when you use the coupon code <code style="font-size: 14px;">BYTES</code>.</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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/9qhzhdud2d65zwh9/aHR0cHM6Ly9nby5jbGVyay5jb20vczVBM0VWag==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727935">Clerk</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>They created this free guide explaining <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/9qhzhdud2d65zwh9/aHR0cHM6Ly9nby5jbGVyay5jb20vczVBM0VWag==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727935">what multi-tenancy is and why it matters for B2B SaaS</a>, in order to help you better shape your app’s architecture.</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;">removeElement</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">array<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> elementToRemove</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;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<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 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>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> elementToRemove<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</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;">splice</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>i<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 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;">let</span> myArray <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 number" style="color: #fcba28; font-size: 14px;">1</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 number" style="color: #fcba28; font-size: 14px;">3</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 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 function" style="color: #9d7dce; font-size: 14px;">removeElement</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myArray<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>
</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;">The next version of React Native will introduce <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/3ohphdu3d32p4gtr/aHR0cHM6Ly9leHBvLmRldi9ibG9nL3ByZWNvbXBpbGVkLXJlYWN0LW5hdGl2ZS1mb3ItaW9z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727936">precompiled React Native builds for iOS</a>, which promises to cut compile times by up to 10x. Now there’s no excuse for me to not ship my Doodle Jump-themed crypto casino app targeted at Boomers and children under 12.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/n2hohquvovx76pt6/aHR0cHM6Ly93d3cuZnV6enljb21wdXRlci5jb20vcG9zdHMvb25ib2FyZGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727937">Onboarding for coding agents</a> shares how Matt Holden shrank his <code style="font-size: 14px;">CLAUDE.md</code> file to 13 lines, while still making sure his agent understood the PTO and workplace diversity policies.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/48hvh7um2mpx6dbx/aHR0cHM6Ly93d3cud2FycC5kZXYvbGlnaHRzcGVlZD91dG1fY2FtcGFpZ249bGlnaHRzcGVlZF9sYXVuY2gmdXRtX2NvbnRlbnQ9Ynl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9cHVibGljYXRpb25z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727938">Warp just launched Lightspeed</a> – which gives you 50,000 AI requests/month with their #1 ranked coding agent. Access Claude Opus and Sonnet, GPT-4.1, and Gemini — all in one. Use code <code style="font-size: 14px;">LIGHTSPEED20</code> for 20% off your first month. ($45 value) [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/wnh2h6uqoqk0xef7/aHR0cHM6Ly9naXRodWIuY29tL2NvZHBybzIwMDUvdHMtcmVnZXhwLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727939">ts-regexp</a> is a statically typed alternative to JavaScript’s RegExp.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Chris Dzombak wrote about <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/reh8h9um5m36w6u2/aHR0cHM6Ly93d3cuZHpvbWJhay5jb20vYmxvZy8yMDI1LzA3L3VzZS15b3VyLXR5cGUtc3lzdGVtLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727940">why you should use your type system</a>. Sometimes it’s the advice you least expect.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Armin Ronacher wrote about <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/08hwhgu2729lgpbl/aHR0cHM6Ly9sdWN1bXIucG9jb28ub3JnLzIwMjUvNy8zMC90aGluZ3MtdGhhdC1kaWRudC13b3JrLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727941">agentic coding things that didn’t work</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Embrace just released <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/8ghqh3uo5o2rq8uk/aHR0cHM6Ly9lbWJyYWNlLmlvL2Jsb2cvdXNlci1qb3VybmV5cy13YWxrdGhyb3VnaC8_dXRtX2NhbXBhaWduPWJ5dGVzLTctMzEtMjAyNSZ1dG1fY29udGVudD11c2VyLWpvdXJuZXlzJnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727942">User Journeys</a> – a new observability feature that tracks how technical performance impacts user engagement with your app’s features. It’s like zooming out one level from logs and spans to incorporate user behavior as a signal. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/vqh3hmuokovwe5ig/aHR0cHM6Ly94LmNvbS95b3V5dXhpL3N0YXR1cy8xOTUwMjM0MjYxNTczMDM4NDQ0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727943">Vite just passed Webpack in weekly npm downloads</a>, and the Rainforest spontaneously started to regenerate, and my gut microbiome magically healed itself <span role="img" aria-label="folded hands">🙏</span>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/l2heh6ulklnxr5h6/aHR0cHM6Ly9ub2RlanMub3JnL2VuL2Jsb2cvcmVsZWFzZS92MjIuMTguMA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727944">Node.js v22.18</a> now has type stripping by default, which means TypeScript support is enabled by default, which means no one’s allowed to complain about this anymore.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/dphehmue7eop5obm/aHR0cHM6Ly9zdGFjay5jb252ZXguZGV2L2NvbnZleC1yZXNlbmQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727946">Convex launched a Resend Component</a> that lets you easily integrate Resend’s DX-focused email service with any Convex project. They also just kicked off a <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/e0hph0u7n7lr4ei8/aHR0cHM6Ly93d3cuY29udmV4LmRldi9oYWNrYXRob25zL3Jlc2VuZA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727947">hackathon</a> with over $5,000 in prizes. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tan Li Hau wrote about how you can <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/7qh7h2u9496nzpuz/aHR0cHM6Ly9saWhhdXRhbi5jb20vY29tcGlsZS1zdmVsdGUtNS1pbi15b3VyLWhlYWQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727948">compile Svelte 5 in your head</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Steve Krouse wrote about how <a href="https://click.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/owhkhwuw8w6qo7hv/aHR0cHM6Ly9ibG9nLnZhbC50b3duL3ZpYmUtY29kZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727949">vibe code is legacy code</a>. At one point he says that asking AI to fix its own errors that you don’t understand is like “paying off credit card debt with another credit card” – which I found offensive, considering this strategy has helped my credit score almost crack the 600 mark.</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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/9qhzhdud2d65zwh9/aHR0cHM6Ly9nby5jbGVyay5jb20vczVBM0VWag==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1770727935">Clerk</a>
</h4></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;">removeElement</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">array<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> elementToRemove</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;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<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 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>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> elementToRemove<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</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;">splice</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>i<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 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;">let</span> myArray <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 number" style="color: #fcba28; font-size: 14px;">1</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 number" style="color: #fcba28; font-size: 14px;">3</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 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 function" style="color: #9d7dce; font-size: 14px;">removeElement</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myArray<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>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This solution isn’t ideal since it doesn’t account for the fact that the array is being modified as it’s being iterated over. When the element at index <code style="font-size: 14px;">1</code> is removed, the element at index <code style="font-size: 14px;">2</code> is shifted to index <code style="font-size: 14px;">1</code>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">There are a bunch of ways to make this better, all with varying tradeoffs. This is probably the best one, which uses JavaScript’s <code style="font-size: 14px;">filter</code> method to return a new array after filtering out the <code style="font-size: 14px;">elementToRemove</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;">removeElement</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">array<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> elementToRemove</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> array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">filter</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;">element</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> element <span class="token operator" style="color: #12b5e5; font-size: 14px;">!==</span> elementToRemove<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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/z2hgh7uedeklwdfp/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1770727950">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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/p8hehqu4742qx9hq/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1770727951">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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/x0hph3ue7epq3wc5/aHR0cHM6Ly91aS5kZXY=" url-id="1770727952">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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6/6qhehoul2l59olho/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1770727953">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/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/mvu0g06rqqb5hqop564cmhrp2d2qqs3hekq6" alt="">
</body>
</html>