<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/bad-bunny-honey.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/slack-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/slack-meme.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/spot-the-bug.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: Everything but the runtime</title>
<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: 18px; 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: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> Proof-of-life blog posts, Cheeto-flavored DynamoDB, and 700,000 GPU hours of automated red teaming.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/kkhmh2un084g2mblh7/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDk5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742443">#499</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/bad-bunny-honey.jpg" alt="Bad Bunny brushing honey onto a shirtless Travis Kelce" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Developers finding their Node.js happy place<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Everything but the runtime</h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">When Bun came into the picture in 2021 and we were riding the high of becoming Dogecoin millionaires, it was hard not to be excited about the idea of an alternative to Node that was faster and easier to use. But over time, reality tends to sink in and you realize that you’re actually down $680 on meme coins and your company uses Node, so you can’t play with the shiny new toys.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Fortunately, Colin McDonnell (the creator of Zod, tRPC, and former Bun core team member) saw this gap and decided to build <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/58hvh8ugd5lpolc6h4/aHR0cHM6Ly9udWJqcy5jb20v" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742444"><code style="font-size: 15px;">nub.js</code>, an all-in-one toolchain</a> that “augments Node.js instead of trying to replace it.” If you’re not Bun-pilled, you might be wondering what an all-in-one toolchain even means and why you would want it.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Why <code style="font-size: 15px;">nub.js</code>:</strong></p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Node has done a lot of work collapsing the number of tools you need to be productive, but most devs still depend on a number of external tools, including <code style="font-size: 15px;">npm</code>, which, last time I checked, is still owned by m*****ft. Nub uses some of the recent Node.js extension mechanisms to provide a toolchain that includes the following components:</p>
<ul>
<li>
<strong style="font-weight: 600;">File Runner:</strong> Nub’s file runner can run <code style="font-size: 15px;">.ts</code>, <code style="font-size: 15px;">.tsx</code>, and <code style="font-size: 15px;">.jsx</code> files (with full TS support, not just type stripping) and automatically loads your <code style="font-size: 15px;">.env</code> and <code style="font-size: 15px;">.tsconfig</code>.</li>
<li>
<strong style="font-weight: 600;">Script Runner:</strong> <code style="font-size: 15px;">nub run</code> is 24x faster than <code style="font-size: 15px;">npm run</code> and supports workspaces and <code style="font-size: 15px;">pnpm</code> lifecycle hooks.</li>
<li>
<strong style="font-weight: 600;">Package Runner:</strong> <code style="font-size: 15px;">nubx</code> is 19x faster than <code style="font-size: 15px;">npx</code> and automatically executes binaries in <code style="font-size: 15px;">node_modules/.bin</code> without using a Node process.</li>
<li>
<strong style="font-weight: 600;">Package Manager:</strong> Nub claims to be 2.7x faster than <code style="font-size: 15px;">pnpm</code> and can read and write whatever <code style="font-size: 15px;">npm</code>, <code style="font-size: 15px;">pnpm</code>, or Bun lockfile format your project uses.</li>
<li>
<strong style="font-weight: 600;">Node Version Manager:</strong> Reads from your <code style="font-size: 15px;">.npmrc</code> or <code style="font-size: 15px;">.node-version</code> and provides a built-in replacement for <code style="font-size: 15px;">nvm</code> or <code style="font-size: 15px;">fnm</code>.</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> By giving developers “everything but the runtime” for building with Node, Nub is already crushing the infallible metric that all developers care about (GitHub stars), and I won’t be surprised if it becomes the de facto way to season your Node.js app.</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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/25h2h9u3p7nr0lu3h4/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDk5" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1865742445"><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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/g3hnhwum8ex7o9arh9/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0OTk=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1865742447"><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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/9qhzhdudvgnk3rh9h3/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9TnViJTIwZ2l2ZXMlMjBOb2RlLmpzJTIwZGV2ZWxvcGVycyUyMEJ1bi1saWtlJTIwdG9vbGluZyUyMHdpdGhvdXQlMjBzd2l0Y2hpbmclMjBydW50aW1lcy4mdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0OTk=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1865742448"><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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/3ohphdu35qv69lcrhn/bWFpbHRvOj9zdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0YmYm9keT1UaG91Z2h0JTIweW91JTI3ZCUyMGxvdmUlMjB0aGlzJTIwd2VlayUyN3MlMjBCeXRlcyUwQS0tLSUwQU51YiUyMGdpdmVzJTIwTm9kZS5qcyUyMGRldmVsb3BlcnMlMjBCdW4tbGlrZSUyMHRvb2xpbmclMjB3aXRob3V0JTIwc3dpdGNoaW5nJTIwcnVudGltZXMuJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ5OQ==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1865742449"><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/slack-logo.png" alt="Slack 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/slack-meme.png" alt="Slack promo image about building workflows that let work flow" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Build workflows that let work flow<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/n2hohquv9new59i6hg/aHR0cHM6Ly9zbGFjay5jb20vcmVzb3VyY2VzL3VzaW5nLXNsYWNrLzMwLXdheXMtdG8tYXV0b21hdGUtd29yay1pbi1zbGFjaz9kPTcwMWVkMDAwMDE0MjRJV0FBWSZuYz03MDFlZDAwMDAxNDNnTktBQVkmdXRtX3NvdXJjZT1ieXRlc25ld3NsZXR0ZXImdXRtX21lZGl1bT10cF9lbWFpbCZ1dG1fY2FtcGFpZ249YW1lcl91c19zbGFjay1pbnZvaWNlXyZ1dG1fY29udGVudD1jcm9zcy1zZWdtZW50X2FsbC1zdHJhdGVnaWMtYnl0ZXMtcHJpbWFyeS1qdW5lMjBfNzAxZWQwMDAwMTQyNElXQUFZX2VuZ2xpc2hfMzAtd2F5cy10by1hdXRvbWF0ZS13b3JrLWluLXNsYWNrLQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742450">Automate the busywork. Build what matters.</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">From routing leads and triaging incidents to running async standups and approving campaigns, Slack connects to 550+ tools so you can automate the work that slows your team down.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Companies like Sony, Wayfair, and Canva have already saved tens of thousands of hours. And for developers who want to go deeper, Slack’s APIs, CLI, and SDK let you build custom workflow steps, create internal apps, and integrate proprietary systems — all in the place your team already works.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">3 million workflows run in Slack every day. Are you ready to build yours?</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/n2hohquv9new59i6hg/aHR0cHM6Ly9zbGFjay5jb20vcmVzb3VyY2VzL3VzaW5nLXNsYWNrLzMwLXdheXMtdG8tYXV0b21hdGUtd29yay1pbi1zbGFjaz9kPTcwMWVkMDAwMDE0MjRJV0FBWSZuYz03MDFlZDAwMDAxNDNnTktBQVkmdXRtX3NvdXJjZT1ieXRlc25ld3NsZXR0ZXImdXRtX21lZGl1bT10cF9lbWFpbCZ1dG1fY2FtcGFpZ249YW1lcl91c19zbGFjay1pbnZvaWNlXyZ1dG1fY29udGVudD1jcm9zcy1zZWdtZW50X2FsbC1zdHJhdGVnaWMtYnl0ZXMtcHJpbWFyeS1qdW5lMjBfNzAxZWQwMDAwMTQyNElXQUFZX2VuZ2xpc2hfMzAtd2F5cy10by1hdXRvbWF0ZS13b3JrLWluLXNsYWNrLQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742450">Explore 30 ways to automate your work with Slack</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="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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Spot the Bug - Presented by <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/wnh2h6uq2r89v0t7hx/aHR0cHM6Ly9vcmtlcy5pby9ibG9nL2hvdy1jb25kdWN0b3Itc2tpbGxzLXRlYWNoZXMtYWktYWdlbnRzLXRvLWJ1aWxkLXdvcmtmbG93cz91dG1fY2FtcGFpZ249Qnl0ZXMuZGV2JnV0bV9zb3VyY2U9TmV3c2xldHRlciZ1dG1fbWVkaXVtPWVtYWls" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742452">Orkes</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 18px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>Orkes shared how they taught Claude, Cursor, and Copilot to <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/wnh2h6uq2r89v0t7hx/aHR0cHM6Ly9vcmtlcy5pby9ibG9nL2hvdy1jb25kdWN0b3Itc2tpbGxzLXRlYWNoZXMtYWktYWdlbnRzLXRvLWJ1aWxkLXdvcmtmbG93cz91dG1fY2FtcGFpZ249Qnl0ZXMuZGV2JnV0bV9zb3VyY2U9TmV3c2xldHRlciZ1dG1fbWVkaXVtPWVtYWls" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742452">build agentic workflows without hallucinating</a>.</em></p>
</div>
</div>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> people <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">[</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Aaron"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Smith"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Émile"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Zola"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Charlotte"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Brown"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Beyoncé"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Knowles"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Ólafur"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Arnalds"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"David"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Jones"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Zoë"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Deschanel"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">sortAlphabetically</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> arr<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function" style="color: #9d7dce; font-size: 15px;">sort</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">a<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> b</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>a<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span> b<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">-</span><span class="token number" style="color: #fcba28; font-size: 15px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>a<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 15px;">></span> b<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token number" style="color: #fcba28; font-size: 15px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 15px;">sortAlphabetically</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>people<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</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: 19px; line-height: 1.5;">The Flow team at Meta sent the developer community another “proof of life” blog post about how <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/reh8h9umlqn9vot2h6/aHR0cHM6Ly9tZWRpdW0uY29tL2Zsb3ctdHlwZS9mbG93cy1vY2FtbC10by1ydXN0LXBvcnQtNzhiOTViY2Y0OWU5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742453">Flow has been ported from OCaml to Rust</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Fabian Hiller announced the <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/08hwhgu26mq0w4alh5/aHR0cHM6Ly9mb3JtaXNjaC5kZXYvYmxvZy9mb3JtaXNjaC12MS1yZWxlYXNlLWNhbmRpZGF0ZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742454">release candidate for Formisch v1</a>, the type-safe form library. Formisch is German for “Formik”.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Companies like Supabase, Clerk, and Mintlify run CI on <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/8ghqh3uo6gkep4ikh9/aHR0cHM6Ly9ibGFja3NtaXRoLnNoLz91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fY2FtcGFpZ249Ynl0ZXNfc2Vjb25kYXJ5XzIwMjZfMDZfMTk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742455">Blacksmith</a>: a drop-in replacement for GitHub runners that’s 2x faster and 60% cheaper. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Deno just released <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/l2heh6ulmow5z0t6h0/aHR0cHM6Ly9kZW5vLmNvbS9ibG9nL3YyLjk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742457">version 2.9</a>, which means you can now use <code style="font-size: 15px;">deno desktop</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Lambros Petrou created <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/m2h7h6u36owk7qcmhq/aHR0cHM6Ly93d3cubGFtYnJvc3BldHJvdS5jb20vYXJ0aWNsZXMvZm9rb3NkYi8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742458">a new database on top of Cloudflare’s Durable Objects</a>, which some are calling a “Cheeto-flavored DynamoDB.”</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Dan Abramov got a little too lonely on Bluesky, so he decided to join his homies at Vercel and helped ship <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/dphehmue9qrzmkbmh4/aHR0cHM6Ly9uZXh0anMub3JnL2Jsb2cvbmV4dC0xNi0zLWluc3RhbnQtbmF2aWdhdGlvbnM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742459">Instant Navigation</a>, a new feature that fixes caching for Next.js.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Amazon Devices Builder Tools for AI-Powered Development gives your coding agent full context for building Fire TV apps. From onboarding to crash analysis, you can finally ship your React Native app to the big screen without rage-Googling remote control focus management at 2 a.m. <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/e0hph0u73k592wb8h2/aHR0cHM6Ly9mYW5kZi5jby80ZU9mSnlI" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742460">Learn more.</a> [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Rspack 2.1 is out with <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/7qh7h2u9203vmmczh6/aHR0cHM6Ly9yc3BhY2sucnMvYmxvZy9hbm5vdW5jaW5nLTItMQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742461">support for TypeScript 7, the Rust-based React Compiler, and a dim sum platter of other new features</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">GitHub just released an <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/owhkhwuwm45378hvhr/aHR0cHM6Ly9naXRodWIuYmxvZy9jaGFuZ2Vsb2cvMjAyNi0wNi0yNS1hY3Rpb25zLXN0ZXBzLWNhbi1ub3ctYmUtcnVuLWluLXBhcmFsbGVsLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742462">update that lets you run GitHub Actions steps in parallel</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Be the dev who actually shipped the thing: write the React, then let <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/p8hehqu4w98klzcqh3/aHR0cHM6Ly90cnkuZXhwby5kZXYvYnl0ZXMtanVuZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742464">Expo handle the builds, submissions, and live updates</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Iheanyi Ekechukwu built a <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/x0hph3uevnx8lec5hl/aHR0cHM6Ly9naXRodWIuY29tL2loZWFueWkvZ3JvdmU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742465">git worktree manager called <code style="font-size: 15px;">grove</code></a> that does all the dirty work of cloning dependencies and managing dev servers.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">OpenAI announced <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/6qhehoul8p0vdntohk/aHR0cHM6Ly9vcGVuYWkuY29tL2luZGV4L3ByZXZpZXdpbmctZ3B0LTUtNi1zb2wv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742466">a preview of GPT-5.6 Sol</a>, and in an effort not to get Dario’d by the U.S. government, they did 700,000 GPU hours of “automated red teaming.”</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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Presented by <a href="https://c5e21242.click.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/wnh2h6uq2r89v0t7hx/aHR0cHM6Ly9vcmtlcy5pby9ibG9nL2hvdy1jb25kdWN0b3Itc2tpbGxzLXRlYWNoZXMtYWktYWdlbnRzLXRvLWJ1aWxkLXdvcmtmbG93cz91dG1fY2FtcGFpZ249Qnl0ZXMuZGV2JnV0bV9zb3VyY2U9TmV3c2xldHRlciZ1dG1fbWVkaXVtPWVtYWls" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1865742452">Orkes</a>
</h4></div>
</div>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> people <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">[</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Aaron"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Smith"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Émile"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Zola"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Charlotte"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Brown"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Beyoncé"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Knowles"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Ólafur"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Arnalds"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"David"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Jones"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">firstName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Zoë"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">lastName</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Deschanel"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">sortAlphabetically</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> arr<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function" style="color: #9d7dce; font-size: 15px;">sort</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">a<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> b</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>a<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span> b<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">-</span><span class="token number" style="color: #fcba28; font-size: 15px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>a<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 15px;">></span> b<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token number" style="color: #fcba28; font-size: 15px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 15px;">sortAlphabetically</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>people<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">By default, string comparison in JavaScript is not language-sensitive, which means it doesn’t account for language-specific rules or special characters like accents. That can produce a sorted list that’s technically sorted by code points, but not alphabetically in the way users expect.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The solution is to use <code style="font-size: 15px;">Intl.Collator</code>, which gives us language-sensitive string comparison.</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">sortAlphabetically</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> collator <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 15px;">Intl<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>Collator</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token string" style="color: #f99157; font-size: 15px;">"en"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">sensitivity</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token string" style="color: #f99157; font-size: 15px;">"base"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">return</span> arr<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function" style="color: #9d7dce; font-size: 15px;">sort</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">a<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> b</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=></span> collator<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function" style="color: #9d7dce; font-size: 15px;">compare</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>a<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> b<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>firstName<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/kkhmh2un084g3mclh7/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1865742467">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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/58hvh8ugd5lpzlt6h4/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1865742468">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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/25h2h9u3p7nrela3h4/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1865742469">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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov/qvh8h8udm8qg0ztlhk/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1865742470">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.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/5quqzqpw00b7hnrzp4qu6h9xn8g0qunhxdov" alt="">
</body>
</html>