<!DOCTYPE html>
<html>
<head>
<title>Bytes: Of Mice and Toolkits</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> Killing SPAs, getting radicalized by Airbnb’s lint rules, and learning valuable JavaScript lessons from my iPod Nano.</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/wnh2h6uqov2or6h7/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDEy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282104">#412</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/bee-dying.jpg" alt="The bee from the Bee movie disintegrating like in Avengers" 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;">I'll never forget you, Lodash<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Of Mice and Toolkits</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">One year ago we highlighted a new project called <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/reh8h9um5vl5qru2/aHR0cHM6Ly9lcy10b29sa2l0LmRldi8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282105">es-toolkit</a>, which bills itself as a “state-of-the-art, high-performance JavaScript utility library” that’s 2-3x faster and 97% smaller than Lodash.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And it was back in the news again last week thanks to its new <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/08hwhgu27w67m6tl/aHR0cHM6Ly9lcy10b29sa2l0LmRldi9jb21wYXRpYmlsaXR5Lmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282106">Lodash compatibility layer</a>, which makes it easier than ever to migrate away from dear old Lodie.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But you might be thinking, <em>do we really still need utility libraries in the Year of our Spec, 2025?</em></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It’s a fair question considering how far JavaScript has come – but in the past year, es-toolkit has grown to 3 million weekly npm downloads and is now being used in major projects like Storybook, Ink, and Recharts.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Let’s take a look at why:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Built for modern JavaScript</strong> – It doesn’t reimplement existing JS features like <code style="font-size: 14px;">map</code> and <code style="font-size: 14px;">filter</code>. Instead, it fills in actual language gaps with focused helpers like <code style="font-size: 14px;">debounce</code>, <code style="font-size: 14px;">delay</code>, <code style="font-size: 14px;">sum</code>, and <code style="font-size: 14px;">pick</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Solid TypeScript support</strong> – All functions come with clear, predictable types that play nicely with type inference. You also get useful type guards like <code style="font-size: 14px;">isNotNil</code> without needing to be an expert in conditionals.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Optimized for modern toolchains</strong> – Fully tree-shakeable, and tiny by default. Works out of the box with modern environments like Deno and Bun, and leverages modern JavaScript APIs for easy implementation.</p>
</li>
</ul>
<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> We don’t need utility libs as much as we did back in Lodash’s golden age of the late 2010s. But when one comes along that’s fast, type-safe, and actually helpful, we’re not gonna say no – especially if it can easily shave off some Old Lodie bloat in the process.</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/8ghqh3uo5p65gmuk/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEy" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1769282107"><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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/vqh3hmuok39knwig/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTI=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1769282108"><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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/l2heh6ulkvmkods6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9VGFraW5nJTIwYSUyMGNsb3NlciUyMGxvb2slMjBhdCUyMGVzLXRvb2xraXQlMjdzJTIwYXR0ZW1wdCUyMHRvJTIwcmVwbGFjZSUyMExvZGFzaCUyMGZvciUyMGdvb2QmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTI=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1769282109"><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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/m2h7h6u3n06noxum/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBVGFraW5nJTIwYSUyMGNsb3NlciUyMGxvb2slMjBhdCUyMGVzLXRvb2xraXQlMjdzJTIwYXR0ZW1wdCUyMHRvJTIwcmVwbGFjZSUyMExvZGFzaCUyMGZvciUyMGdvb2QlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEyJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1769282110"><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/coderabbit-logo.png" alt="CodeRabbit 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/saint-francis.jpg" alt="Painting of Saint Francis holding some doves" 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;">Tfw you can use AI to catch all the AI slop code<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/dphehmue7w97q3tm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282111">Get AI code reviews in your IDE – for free</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">CodeRabbit just launched a new VS Code extension that gives you line-by-line code reviews right in your editor.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And it understands the <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/dphehmue7w97q3tm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282111">full context</a> of your entire codebase, allowing it to catch complex bugs and subtle issues before you even submit a PR.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It’s great for:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Catching AI slop</strong> – so you can actually trust the code that Copilot generates for you, without manually reviewing it all yourself</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">One-click fixes</strong> – instantly incorporate the changes back into your codebase</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Fixing with AI</strong> – hand off CodeRabbit’s recommended changes and deep context <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/dphehmue7w97q3tm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282111">back to your code agent</a>, so it can make the changes for you</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/dphehmue7w97q3tm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282111">Install the free VS Code extension</a> – and see what it’s like having a senior developer check every line of your code (without judging you).</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/e0hph0u7nw3n09h8/aHR0cHM6Ly93d3cucG9zdG1hbi5jb20vYWkvOTAtZGF5LWFpLXJlYWRpbmVzcy1wbGF5Ym9vay8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282112">Postman</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 <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/e0hph0u7nw3n09h8/aHR0cHM6Ly93d3cucG9zdG1hbi5jb20vYWkvOTAtZGF5LWFpLXJlYWRpbmVzcy1wbGF5Ym9vay8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282112">90-day AI Readiness Playbook</a> to show engineering leaders exactly how to transform APIs into AI-ready tools that agents can discover and execute reliably.</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 operator" style="color: #12b5e5; font-size: 14px;">*</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">userGenerator</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">users</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> user <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> users<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><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span>user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>isActive<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><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;">yield</span> user<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;">const</span> users <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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Ben"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Alex"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">false</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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Tyler"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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;">const</span> gen <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">userGenerator</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>users<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> user <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> gen<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>user<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;">Jamie wrote a very well-researched article about <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/7qh7h2u94p24oktz/aHR0cHM6Ly9idXR0b25kb3duLmNvbS93aGF0ZXZlcl9qYW1pZS9hcmNoaXZlL3RoZS1tYW55LW1hbnktbWFueS1qYXZhc2NyaXB0LXJ1bnRpbWVzLW9mLXRoZS1sYXN0LWRlY2FkZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282113">the many, many, many JavaScript runtimes of the last decade</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Devon Govett wrote an interesting, technical deep-dive about <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/owhkhwuw8lm8r6cv/aHR0cHM6Ly9kZXZvbmdvdmV0dC5tZS9ibG9nL3BhcmNlbC1yc2MuaHRtbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282114">how Parcel bundles React Server Components</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Augment Code team just launched <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/z2hgh7uedr2d37fp/aHR0cHM6Ly93d3cuYXVnbWVudGNvZGUuY29tL2Jsb2cvaG93LXdlLWJ1aWx0LXRhc2tsaXN0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282115">Tasklist</a> – a transparent workflow for your coding agent that stores each step of your prompt as a first-class object with typed metadata. That means programmatic access and real-time updates for your tasks, while your agent plans and executes them. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">eslint-config-prettier</code> and several other linter packages were <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/p8hehqu475w7z5cq/aHR0cHM6Ly93d3cuYmxlZXBpbmdjb21wdXRlci5jb20vbmV3cy9zZWN1cml0eS9wb3B1bGFyLW5wbS1saW50ZXItcGFja2FnZXMtaGlqYWNrZWQtdmlhLXBoaXNoaW5nLXRvLWRyb3AtbWFsd2FyZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282116">hijacked last week</a> in a supply chain attack by some rogue developers who were most likely radicalized by Airbnb’s ESLint rules.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jono Alderson wrote about how <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/x0hph3ue7dv7wlc5/aHR0cHM6Ly93d3cuam9ub2FsZGVyc29uLmNvbS9jb25qZWN0dXJlL2l0cy10aW1lLWZvci1tb2Rlcm4tY3NzLXRvLWtpbGwtdGhlLXNwYS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282117">it’s time for modern CSS to kill the SPA</a>. A little aggressive, but we love a strong hook.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Sentry team wrote this in-depth guide on <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/6qhehoul268272so/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby93aGF0LXlvdS1hY3R1YWxseS1uZWVkLXRvLW1vbml0b3ItYWktc3lzdGVtcy1pbi1wcm9kdWN0aW9uLz91dG1fY2FtcGFpZ249YWktZnkyNnEyLWFnZW50bW9uaXRvcmluZyZ1dG1fY29udGVudD1uZXdzbGV0dGVyLWFpLWFnZW50LXJhaHVsLWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282118">what you actually need to monitor AI systems in production</a> – so you can do your part to prevent The Great Sloppening of the internet. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Webb wrote about how he and his team <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/58hvh8ug9od9mmb6/aHR0cHM6Ly9ldGNoLmNvL2Jsb2cvd2UtbWlncmF0ZWQtb3VyLXNpdGUtdG8tZWxldmVudHktYW5kLWluY3JlYXNlZC1wZXJmb3JtYW5jZS1ieS0yNC1wZXJjZW50" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282120">migrated their site from Next.js to Eleventy and improved performance by 24%</a>. But who knows, maybe he’s just deep in Big Static’s pocket.</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/25h2h9u3o0po23f3/aHR0cHM6Ly90a2RvZG8uZXUvYmxvZy90aGUtdXNlbGVzcy11c2UtY2FsbGJhY2s=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282121">The useless useCallback</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Daniel Ehrenberg wrote an article asking, <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/g3hnhwumzo8z3pur/aHR0cHM6Ly9xdWV1ZS5hY20ub3JnL2RldGFpbC5jZm0_aWQ9Mzc0NjE3NA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282123">when is WebAssembly going to get DOM support?</a> But every time we ask, they add 6 months to the counter.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Mux (the video API for developers that we use for all our courses) just announced <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/9qhzhdud23v2pnh9/aHR0cHM6Ly93d3cubXV4LmNvbS9ibG9nL3ByaWNlLWRyb3A=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282124">their biggest price drop ever</a>, thanks to some infrastructure improvements and optimizations that cut Mux Video prices by over 20%. You can read about how they did it <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/9qhzhdud23v2pnh9/aHR0cHM6Ly93d3cubXV4LmNvbS9ibG9nL3ByaWNlLWRyb3A=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282124">here</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ibrahim Diallo wrote about <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/3ohphdu3d95d7xar/aHR0cHM6Ly9pZGlhbGxvLmNvbS9ibG9nL3JldmlzaXRpbmctbXktb2xkLWphdmFzY3JpcHQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282125">revisiting his 2010 JavaScript library</a>, which he calls “a true relic from the past and a testament to just how far we’ve come.” I felt the same way when I found my old iPod Nano and saw that it was mostly just a bunch of Weird Al Yankovic songs pirated from LimeWire.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">In other nostalgia-related news, <a href="https://click.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/n2hohquvo59o3mt6/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvYmxvZy9tZG4tdHVybnMtMjAv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282126">MDN just turned 20 years old</a> and is now legally old enough to do a bunch of whippets in a frat house basement.</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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/e0hph0u7nw3n09h8/aHR0cHM6Ly93d3cucG9zdG1hbi5jb20vYWkvOTAtZGF5LWFpLXJlYWRpbmVzcy1wbGF5Ym9vay8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1769282112">Postman</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;">return</code> will stop the generator, so the second user will not be yielded which causes only the user object for Ben to be logged (instead of both Ben and Tyler). To fix this, use <code style="font-size: 14px;">continue</code> instead of <code style="font-size: 14px;">return</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 operator" style="color: #12b5e5; font-size: 14px;">*</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">userGenerator</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">users</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> user <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> users<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><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span>user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>isActive<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;">continue</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;">yield</span> user<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;">const</span> users <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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Ben"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Alex"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">false</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 literal-property property" style="color: #12b5e5; font-size: 14px;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Tyler"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">isActive</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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;">const</span> gen <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">userGenerator</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>users<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> user <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> gen<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>user<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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/48hvh7um2qd2rlcx/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1769282127">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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/wnh2h6uqov2ow6a7/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1769282128">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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/reh8h9um5vl50ra2/aHR0cHM6Ly91aS5kZXY=" url-id="1769282129">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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep/08hwhgu27w67d6ul/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1769282130">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/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/p9u7p74z33b9h29rep6uqhpek8933hrhg6ep" alt="">
</body>
</html>