<!DOCTYPE html>
<html>
<head>
<title>Bytes: Stop, Drop and Rolldown</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> Tanking my React social credit score, peak CSS athleticism, and what Electron taught me about elective cosmetic surgery.</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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/58hvh8ug3lp499h6/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDU3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434454">#457</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/cigarette-guy.jpg" alt="A guy smoking a cigarette with a guy dressed up like a cigarette sneaking up on him" 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;">OSS maintainers trying to resist the urge to rewrite everything in Rust<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Stop, Drop and Rolldown</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The Vite team has been teasing their blazing-fast bundler for the past 12 months, and on Tuesday we finally got to see it up close with the <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/25h2h9u3lnrqo7a3/aHR0cHM6Ly92b2lkemVyby5kZXYvcG9zdHMvYW5ub3VuY2luZy1yb2xsZG93bi1yYw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434455">Rolldown 1.0 RC</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">If you’re not fully plugged into the Vite hivemind, you might be asking, “Wait, did they really build a whole new bundler from scratch just so they could write it in Rust?”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And the answer is, kind of.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Building Rolldown in Rust <em>does</em> make it fast. But more importantly, Rolldown lets Vite unify the best parts of its two existing bundlers <em>without</em> needing to maintain separate transformation pipelines, plugin systems, and a growing pile of glue code to keep everything in sync.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Rolldown aims to combine the native speed of esbuild with the ecosystem compatibility of Rollup. It also comes with some other notable upgrades:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Built-in transforms</strong> for TypeScript, JSX, and syntax lowering powered by the Oxc compiler</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Native CJS/ESM interop</strong> with no <code style="font-size: 14px;">@rollup/plugin-commonjs</code> required</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Granular code splitting</strong> with Webpack-like chunking control via <code style="font-size: 14px;">output.codeSplitting</code></p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Rollup-compatible plugin API</strong> so that existing Rollup plugins work out of the box</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> For lots of open source projects, rewriting their internals in Rust is like invading Russia: they’re seduced by the glory but ultimately doomed to freeze to death.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Vite succeeded because they have the rare combination of solid leadership, real money to pay full-time engineers, and a compelling problem to solve.</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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/qvh8h8udeqgl6rul/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDU3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1827434456"><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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/g3hnhwumgx70zmhr/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NTc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1827434457"><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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/9qhzhdud4nke2zf9/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9V2hlbiUyMHJld3JpdGluZyUyMHlvdXIlMjBpbnRlcm5hbHMlMjBpbiUyMFJ1c3QlMjBnb2VzJTIwcmlnaHQlMjAlMjhmb3IlMjBvbmNlJTI5JnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDU3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1827434458"><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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/3ohphdu3xv6kdzir/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBV2hlbiUyMHJld3JpdGluZyUyMHlvdXIlMjBpbnRlcm5hbHMlMjBpbiUyMFJ1c3QlMjBnb2VzJTIwcmlnaHQlMjAlMjhmb3IlMjBvbmNlJTI5JTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ1NyZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1827434459"><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/thomas-gross.jpg" alt="Thomas Tank Engine cringing" 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 the code smell is extra potent<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/n2hohquv2ewloea6/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434460">CodeRabbit actually checks if your PR solves the issue</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You know what’s fun? Closing a Jira ticket. You know what’s less fun? Getting pinged two days later because your PR didn’t actually fix the thing it claimed to fix.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s why we love CodeRabbit’s issue validation feature. It reads your linked GitHub, Linear, or Jira issues, extracts the actual requirements, and drops a <span role="img" aria-label="check mark button">✅</span> / <span role="img" aria-label="cross mark">❌</span> / <span role="img" aria-label="question mark">❓</span> table right in your PR telling you whether your code actually addresses each objective.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/48hvh7umwkz72wtx/aHR0cHM6Ly93d3cuY29kZXJhYmJpdC5haS9ibG9nL2hvdy10by11c2UtY29kZXJhYmJpdC10by12YWxpZGF0ZS1pc3N1ZXMtYWdhaW5zdC1saW5lYXItYm9hcmQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434461">Check out this blog post</a> to see how to set it up for free.</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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/wnh2h6uqm89lons7/aHR0cHM6Ly9nby5jbGVyay5jb20vdEprZW5TTg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434462">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>This in-depth guide shows you <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/wnh2h6uqm89lons7/aHR0cHM6Ly9nby5jbGVyay5jb20vdEprZW5TTg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434462">how to add API Key support to your SaaS app</a> in just a few minutes.</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;">decodeBinaryCommands</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">binaryStrings</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> commands <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>
<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> binStr <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> binaryStrings<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> command <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">parseInt</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>binStr<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</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;">switch</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>command<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;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Start"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Stop"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Pause"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Resume"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">default</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Unknown"</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;">break</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> commands<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> binaryCommands <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 string" style="color: #f99157; font-size: 14px;">"0001"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0010"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0100"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0011"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"1100"</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> decodedCommands <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">decodeBinaryCommands</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>binaryCommands<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>decodedCommands<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;">Ryan Carniato wrote a deep dive on <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/08hwhgu2nq0p7ril/aHR0cHM6Ly9kZXYudG8vdGhpcy1pcy1sZWFybmluZy9qYXZhc2NyaXB0LWZyYW1ld29ya3MtaGVhZGluZy1pbnRvLTIwMjYtMmhlbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434464">JavaScript frameworks heading into 2026</a> that will surely affect his social credit score under the React hegemony.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/8ghqh3uowke75vik/aHR0cHM6Ly9tYWRjc3MuY29tLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434465">March MadCSS</a> is exactly what it sounds like: 16 developers at the peak of their physical fitness, battling for glory in the stylesheets before their carpal tunnel flares up.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/vqh3hmuom82qk9fg/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9UQ0hONDdJUVRUVFRUVEhKUjJVTkxUVFRUVFRRVVNEMjI2VFRUVFRUUDQ3Q0tCVlRUVFRUVEVMRVFNQ1VMSjdVSzJMQ0NKREIyUkpDNldJVzJNTFU1RVNGMlJURQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434466">AppSignal gives you full-stack monitoring for errors, metrics, and logs</a> that’s easy to use and powerful by design. Try it out. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Lea Verou wrote a manifesto about how <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/l2heh6ulqw5dk8u6/aHR0cHM6Ly9sZWEudmVyb3UubWUvYmxvZy8yMDI2L3dlYi1kZXBzLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434467">web dependencies are broken</a> that goes beyond npm’s security issues.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/m2h7h6u32wkln4im/aHR0cHM6Ly9saXguZGV2L2Jsb2cvaW50cm9kdWNpbmctbGl4Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434468">Lix</a> is a universal version control system that can diff any file format, so your AI agent can’t gaslight you about what it changed.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/dphehmuedrz272im/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9URkhLQUJaUVRUVFRUVFQzNU1FQ0xUVFRUVFQyTEVTNDI2VFRUVFRUNFQ1TkxCVlRUVFRUVDIzTTIySkhLTERRUVFNV0FBTFlDN0JVV1dJMjJISkNWMkRRQ0pXVA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434469">Auth0 makes it easy to build AI agents more securely</a>, so they can access your tools, workflows, and users’ data with fine-grained control and enterprise-grade auth. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">atlas9 wrote about <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/e0hph0u7m59dnzc8/aHR0cHM6Ly9hdGxhczkuZGV2L2Jsb2cvc29mdC1kZWxldGUuaHRtbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434470">the challenges of soft delete</a> and how to subtly shift blame to your coworkers.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Matt Smith wrote a post begging everyone to <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/7qh7h2u9d3vx4giz/aHR0cHM6Ly9hbGx0aGluZ3NzbWl0dHkuY29tLzIwMjYvMDEvMTIvc3RvcC10dXJuaW5nLWV2ZXJ5dGhpbmctaW50by1hcnJheXMtYW5kLWRvLWxlc3Mtd29yay1pbnN0ZWFkLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434471">stop turning everything into arrays</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ian Macartney wrote this deep dive on <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/owhkhwuwx53043uv/aHR0cHM6Ly9zdGFjay5jb252ZXguZGV2L2F1dGhvcml6YXRpb24=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434472">Authorization in practice</a> for the Convex blog. With any luck, you’ll finally learn how it’s different from auth<em>entication</em>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Paul Herbert shared some strong feelings about <a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/z2hgh7ue509mo4sp/aHR0cHM6Ly9wYXVsbWFrZXN3ZWJzaXRlcy5jb20vd3JpdGluZy9zaGFkY24tcmFkaW8tYnV0dG9uLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434473">“the incredible overcomplexity” of the shadcn radio button</a>. Tell us how you really feel Paul.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/p8hehqu4r8kp92uq/aHR0cHM6Ly9sb2d0YXBlLm9yZy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434474">LogTape</a> is an unobtrusive logging library with zero dependencies, built-in-data redaction and support on all major runtimes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/x0hph3uekx84nzb5/aHR0cHM6Ly93d3cuZWxlY3Ryb25qcy5vcmcvYmxvZy9lbGVjdHJvbi00MC0w" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434475">Electron 40</a> just came out, and it wants to remind you that no one can even tell you’re in a “midlife crisis” if you get enough Botox.</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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/wnh2h6uqm89lons7/aHR0cHM6Ly9nby5jbGVyay5jb20vdEprZW5TTg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1827434462">Clerk</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">If we run this code, we get an output of <code style="font-size: 14px;">['Start', 'Unknown', 'Unknown', 'Unknown', 'Unknown']</code>. This is because the <code style="font-size: 14px;">parseInt</code> function has the wrong radix. In this case, we want to use a radix of 2 to convert the binary string to a decimal number.</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;">decodeBinaryCommands</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">binaryStrings</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> commands <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>
<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> binStr <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> binaryStrings<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> command <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">parseInt</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>binStr<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 keyword" style="color: #f38ba3; font-size: 14px;">switch</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>command<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;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Start"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Stop"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Pause"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">case</span> <span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Resume"</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;">break</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">default</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span>
commands<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><span class="token string" style="color: #f99157; font-size: 14px;">"Unknown"</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;">break</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> commands<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> binaryCommands <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 string" style="color: #f99157; font-size: 14px;">"0001"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0010"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0100"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"0011"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">"1100"</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> decodedCommands <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">decodeBinaryCommands</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>binaryCommands<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>decodedCommands<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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/6qhehoulx0v3p6uo/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1827434476">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/kkhmh2unz4go83cl/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1827434477">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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/58hvh8ug3lp459s6/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1827434478">Fireship</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://c5e21242.click.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6/25h2h9u3lnrq77t3/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1827434479">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://c5e21242.unsubscribe.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.kit-mail6.com/mvu0g06rqqb5hq26rz4smhrk950qqb3hekq6" alt="">
</body>
</html>