<!DOCTYPE html>
<html>
<head>
<title>Bytes: Biome v2 heals the planet</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> Conventionally attractive JavaScript functions, extreme prefetching, and fun ways to gaslight your users.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/48hvh7umqlll36bx/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDAy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970458">#402</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/kramer-drinking.jpg" alt="Kramer drinking a beer and smoking at the same time" 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;">Some Rome devs drink to remember, others drink to forget<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Biome v2 heals the planet</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Much like my gut micro-biome, the Biome <em>toolchain project</em> has been through a lot the past few years.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It first launched as Rome back in 2020, calling itself “the spiritual successor to Babel” and raising $4.5 million in VC, before ultimately flaming out a couple years later in semi-dramatic fashion.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But Emanuele Stoppa and a few other Rome maintainers didn’t want to see all that precious Rust code go to waste, so they forked the project in August 2023, renamed it <del>Rome 2</del> <code style="font-size: 14px;">Biome</code>, and started building.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Fast forward to today, and Biome is thriving like the forest in <em>Fern Gully</em> after all the fairies killed that toxic sludge monster.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The team has released a blazing formatter and linter that work interactively within your IDE, their weekly npm downloads have 4x’d in the last year, and they just launched <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/wnh2h6uqv777dga7/aHR0cHM6Ly9iaW9tZWpzLmRldi9ibG9nL2Jpb21lLXYyLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970459">Biome v2</a> with some powerful upgrades.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Let’s take a closer look at what’s new:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Type-aware lint rules</strong> – Biome can now lint your TypeScript code without needing the <code style="font-size: 14px;">tsc</code> compiler or the <code style="font-size: 14px;">typescript</code> package. That’s because it includes its own lightweight type inference engine, which makes linting faster, easier to configure, and less TypeScript-y.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Multi-file analysis</strong> – Biome now comes with a file scanner that scans and indexes all the files in your project. This enables more complex rules powered by Biome’s new type inference engine, though it may come with a slight performance trade-off in some cases.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Linter plugins</strong> – Biome now supports <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/reh8h9umvdddpnu2/aHR0cHM6Ly9iaW9tZWpzLmRldi9yZWZlcmVuY2UvZ3JpdHFsLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970460">GritQL</a> plugins that let you match specific code patterns and register customized diagnostic messages for them. More robust plugins should come in future releases.</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> Do I still get the occasional night terror about Hexxus, the animated sludge monster? No comment.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But the Biome team shows what we can accomplish if we bury our trauma down deep and use Rust to create build tools that heal the JS ecosystem – together.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/08hwhgu2weee4nfl/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDAy" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1756970461"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/8ghqh3uopddd8zck/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MDI=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1756970462"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/l2heh6ulv222p7u6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMHRoYXQlMjBCaW9tZSUyMHYyJTIwaGFzJTIwaW4lMjBjb21tb24lMjB3aXRoJTIwRmVybiUyMEd1bGx5JnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDAy" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1756970464"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/m2h7h6u30555xpcm/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMHRoYXQlMjBCaW9tZSUyMHYyJTIwaGFzJTIwaW4lMjBjb21tb24lMjB3aXRoJTIwRmVybiUyMEd1bGx5JTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQwMiZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1756970465"><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/aggrid-logo.png" alt="aggrid-logo.png" 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/scared-woody.jpg" alt="Blurry Woody looking scared" 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 you look under the hood at those charts you've been vibe-coding<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/dphehmuew666x9um/aHR0cHM6Ly9hZy1ncmlkLmNvbS9jaGFydHMvP3V0bV9jYW1wYWlnbj1ieXRlc2Rldi0xOXRoLWp1bmUmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970466">AG Charts are the best charts in the world</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They’re fast, customizable, and work seamlessly with <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/e0hph0u7wvvvz8s8/aHR0cHM6Ly9hZy1ncmlkLmNvbS9jaGFydHMvcmVhY3QvcXVpY2stc3RhcnQvP3V0bV9jYW1wYWlnbj1ieXRlc2Rldi0xOXRoLWp1bmUmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970467">any JavaScript framework</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s probably why the library gets over <em>1 million</em> npm downloads per month, and is now used in thousands of enterprise applications.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Their <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/7qh7h2u9plllenbz/aHR0cHM6Ly9hZy1ncmlkLmNvbS9jaGFydHMvZ2FsbGVyeS8_dXRtX2NhbXBhaWduPWJ5dGVzZGV2LTE5dGgtanVuZSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlc2Rldg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970468">gallery</a> shows off dozens of chart options, but here’s a few of my personal favorites:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Interactive financial charts</strong> that let you interact with data in real time – so you can easily track the minute-by-minute value of your <del>Funko Pop collection</del> <em>assets.</em></p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Customizable maps</strong> for visualizing data over geographic areas – so you can chart the relationship between Buc-ee’s locations and all those rolling blackouts.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Heatmaps</strong> that can chart everything from your team’s app performance, to your team members’ hairlines.</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/e0hph0u7wvvvz8s8/aHR0cHM6Ly9hZy1ncmlkLmNvbS9jaGFydHMvcmVhY3QvcXVpY2stc3RhcnQvP3V0bV9jYW1wYWlnbj1ieXRlc2Rldi0xOXRoLWp1bmUmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970467">Use it for free</a> – or check out the enterprise version for advanced features like animations, context menus, and more.</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;">Presented by <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/owhkhwuwl999e0bv/aHR0cHM6Ly9zZW1ncmVwLmRldi9zaWdudXA_dXRtX21lZGl1bT1yZWZlcnJhbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970469">Semgrep</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>Their <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/owhkhwuwl999e0bv/aHR0cHM6Ly9zZW1ncmVwLmRldi9zaWdudXA_dXRtX21lZGl1bT1yZWZlcnJhbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970469">AI App Security Engineer</a> uses static analysis and LLMs to eliminate all false positives, so your team only deals with *real* security issues. Loved by teams at Snowflake, GitLab, and Figma.</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;">let</span> seats <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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">seats</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">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> j <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Reserve the seat</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">Reserved seat at row </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>i <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">, column </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>j <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<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;">Surma wrote this in-depth article about <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/z2hgh7uer666zzcp/aHR0cHM6Ly9zdXJtYS5kZXYvdGhpbmdzL2xhbmdncmFwaC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970470">using LangGraph for complex workflows</a> and other goodies about LLM architecture.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kadi Kraman wrote about <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/p8hehqu45666evhq/aHR0cHM6Ly9leHBvLmRldi9ibG9nL3NpbXBsaWZ5aW5nLWF1dGgtZmxvd3Mtd2l0aC1wcm90ZWN0ZWQtcm91dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970471">simplifying auth flows in Expo Router with protected routes</a>, so you can gatekeep-gaslight-girlboss your users more than ever.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/x0hph3ued222g8a5/aHR0cHM6Ly9naXRodWIuY29tL2hvbm9qcy9ob25vL3JlbGVhc2VzL3RhZy92NC44LjA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970472">Hono 4.8</a> comes with a new Route helper, new third-party MCP middleware, and reduced code size.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Apryse’s <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/6qhehoul6rrrqkuo/aHR0cHM6Ly9hcHJ5c2UuY29tL2Jsb2cvd2Vidmlld2VyLWRvY3VtZW50LXNkay1pbnRlZ3JhdGlvbj91dG1fY2FtcGFpZ249Ynl0ZXNfMjAyNV8wNl8xOSZ1dG1fY29udGVudD1lbWFpbF90ZXh0bGluayZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9bmV3c2xldHRlcg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970473">PDF webviewer</a> is a powerful JavaScript SDK that lets you put document workflows directly in your application with features like annotation, search, form filling, and more. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jake Archibald wrote about <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/kkhmh2un2www75tl/aHR0cHM6Ly9qYWtlYXJjaGliYWxkLmNvbS8yMDI1L2FuaW1hdGluZy16b29taW5nLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970474">how to animate zooming using CSS</a>. If you’re curious about how to get a <em>zoomer animated,</em> I suggest telling them that their vintage sweatshirt smells like a rat’s nest.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Next.js team wrote a new guide to <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/58hvh8ugoxxxe0b6/aHR0cHM6Ly9uZXh0anMub3JnL2RvY3MvYXBwL2d1aWRlcy9wcmVmZXRjaGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970475">Prefetching</a> that’ll help you load your entire site within 30 seconds of your user waking up in the morning.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Joeri Sebrechts wrote about <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/25h2h9u3099950a3/aHR0cHM6Ly9wbGFpbnZhbmlsbGF3ZWIuY29tL2Jsb2cvYXJ0aWNsZXMvMjAyNS0wNi0xMi12aWV3LXRyYW5zaXRpb25zLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970476">bringing React’s <code style="font-size: 14px;"><ViewTransition></code> to vanilla JS</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/qvh8h8ud2wwwx0ul/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2JpdHMmdXRtX2NvbnRlbnQ9anVuMTkmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970477">CarbonQA</a> provides QA services for dev teams, so you’ll never have to QA test your own app ever again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ryan Toronto wrote about <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/g3hnhwumo999vzur/aHR0cHM6Ly90d29mb2xkZnJhbWV3b3JrLmNvbS9ibG9nL2NvbXBvc2FibGUtc3RyZWFtaW5nLXdpdGgtc3VzcGVuc2U=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970478">composable streaming with <code style="font-size: 14px;"><Suspense></code></a></p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/9qhzhdud3www7gf9/aHR0cHM6Ly9naXRodWIuY29tL3R5cGVkLXJvY2tzL3R5cGUtYnVkZHk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970479">Type Buddy</a> lets you hover over your complex types to reveal the beautiful function underneath. Like when the love interest in a romcom takes off their glasses and everyone realizes they actually were conventionally attractive all along.</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug: Solution</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/owhkhwuwl999e0bv/aHR0cHM6Ly9zZW1ncmVwLmRldi9zaWdudXA_dXRtX21lZGl1bT1yZWZlcnJhbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970469">Semgrep</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The code ends up making 3 reservations instead of 1. This is because the <code style="font-size: 14px;">break</code> statement only breaks out of the inner loop, not the outer loop. To fix this, you can replace the <code style="font-size: 14px;">break</code> statement with a <code style="font-size: 14px;">return</code> statement.</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;">let</span> seats <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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">seats</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">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> j <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Reserve the seat</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">Reserved seat at row </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>i <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">, column </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>j <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></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><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Alternatively, you can use <a href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/3ohphdu39mmmw7ir/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSmF2YVNjcmlwdC9SZWZlcmVuY2UvU3RhdGVtZW50cy9sYWJlbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1756970480">labeled statements</a> to explicitly break out of the outer loop:</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;">let</span> seats <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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</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 number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">seats</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">rows</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">columns</span><span class="token operator" style="color: #12b5e5; 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> j <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> j<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>j<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Reserve the seat</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">Reserved seat at row </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>i <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">, column </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>j <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></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> rows<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">reserveFirstAvailableSeat</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>seats<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/n2hohquv5qqqdvs6/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1756970481">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/48hvh7umqlllo6cx/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1756970482">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/wnh2h6uqv777zgt7/aHR0cHM6Ly91aS5kZXY=" url-id="1756970483">ui.dev</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://click.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3/reh8h9umvddd8na2/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1756970484">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://unsubscribe.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/75udrd6o33f8h640q67czhwz8p666fnh02g3" alt="">
</body>
</html>