<!DOCTYPE html>
<html>
<head>
<title>Bytes: Vite+ is the future of something</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> Next.js spicy mode, Web Components’ killer feature, and rethinking my JavaScript consumption.</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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/7qh7h2u99xg093fz/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDM1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879908">#435</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/oops-brandy.jpg" alt="Brandy with big hands saying oops" 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 get caught sharing the password to your premium JavaScript bundler<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Vite+ is the future of something</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">When I saw that the VoidZero team announced a new product called <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/owhkhwuww0z4wxbv/aHR0cHM6Ly92aXRlcGx1cy5kZXYv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879909">Vite+</a>, my first thought was “Finally, I can stream all of Evan You’s comedy specials in one place.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But I guess I’ll have to continue pirating those off LimeWire, because Vite+ is actually a new “unified toolchain for the web” that builds on top of the team’s open source tools (Vite, Vitest, Rolldown, and Oxc) and bundles them with some new, <em>less-open</em> utilities into one Rust-powered CLI.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here are a few early features they’re cooking up:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">vite new</code> – scaffolds monorepos with recommended structure, code generators, and built-in templates.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">vite test</code> – runs Vitest with browser mode, visual regression tests, and Jest-compatible APIs.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">vite lint</code> – uses Oxlint, which ships with 600+ ESLint-compatible rules and runs up to 100× faster.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">vite run</code> – a task runner and monorepo cache with automatic input inference (think Turborepo, but smarter).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">vite ui</code> – GUI devtools for analyzing build speed, bundle size, and module transforms.</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">In other words, it’s a single dependency for dev, build, test, lint, and everything else you’d normally duct-tape together in your toolchain.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And as you’ve probably guessed by now, they’ll be charging companies for this extra functionality. But thankfully, it will still be under a source-available license that’ll still be free for individuals and OSS projects.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> Vite+ aims to solve the technical problem of fragmentation in the JS tooling ecosystem – but it also wants to solve the money problem of funding all of the OSS tools in the Vite ecosystem (and the VC-backed company behind them).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s a bold strategy, but it’s refreshing to see an OSS startup try to make money without becoming yet another hosting provider.</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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/z2hgh7ueemgoentp/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM1" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1798879910"><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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/p8hehqu44pv946bq/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzU=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1798879911"><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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/x0hph3uee4gne0s5/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMGNvbWluZyUyMHRvJTIwVml0ZSUyQiZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQzNQ==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1798879912"><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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/6qhehoull3qplgio/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMGNvbWluZyUyMHRvJTIwVml0ZSUyQiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzUmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1798879913"><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/qa-wolf-logo.png" alt="QA Wolf 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/witcher-interesting.jpg" alt="Miranda Cosgrove with the Witcher face" 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 see other teams bragging about their 'AI productivity gains'<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/58hvh8ugg4e5gra6/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS93aGF0LWFpLXJlYWxseS1tZWFucy1mb3ItdGhlLWZ1dHVyZS1vZi1xYS10ZWFtcy9yZWdpc3RyYXRpb24_dXRtX2NhbXBhaWduPUFDUV9BbGxfRXZlbnQlMjBSZWdpc3RyYXRpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX1doYXRBSU1lYW5zRm9yVGhlRnV0dXJlT2ZRQVRlYW1zXzIwMjUxMDIzLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1XaGF0QUlNZWFuc0ZvclRoZUZ1dHVyZU9mUUFUZWFtc19SU1ZQRm9yVGhlU2Vzc2lvbl9Ob25lX0hlYWRsaW5lJTNBRmlyZXNpZGVDaGF0V2hhdEFJTWVhbnNGb3JUaGVGdXR1cmVPZlFBVGVhbXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMDIzX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1oZWFkbGluZS1GaXJlc2lkZUNoYXRXaGF0QUlNZWFuc0ZvclRoZUZ1dHVyZU9mUUFUZWFtcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879915">Fireside chat – What AI means for the future of QA teams</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You could argue that AI is transforming QA testing faster than any other part of software development.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s why <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/25h2h9u33q573mi3/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS8_dXRtX2NhbXBhaWduPUFDUV9BbGxfRXZlbnQlMjBSZWdpc3RyYXRpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX1doYXRBSU1lYW5zRm9yVGhlRnV0dXJlT2ZRQVRlYW1zXzIwMjUxMDIzLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1XaGF0QUlNZWFuc0ZvclRoZUZ1dHVyZU9mUUFUZWFtc19SU1ZQRm9yVGhlU2Vzc2lvbl9Ob25lX0hlYWRsaW5lJTNBRmlyZXNpZGVDaGF0V2hhdEFJTWVhbnNGb3JUaGVGdXR1cmVPZlFBVGVhbXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMDIzX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVFBV29sZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879916">QA Wolf’s</a> Senior Engineering Director is hosting a free fireside chat, where he’ll cut through the noise and show specific ways his team is using AI for QA.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You’ll learn:</p>
<ul>
<li>How teams use AI to speed up QA cycles and boost quality</li>
<li>How to train your QA team to use powerful AI tools</li>
<li>How QA roles evolve with AI</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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/qvh8h8uddlx8dltl/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS93aGF0LWFpLXJlYWxseS1tZWFucy1mb3ItdGhlLWZ1dHVyZS1vZi1xYS10ZWFtcy9yZWdpc3RyYXRpb24_dXRtX2NhbXBhaWduPUFDUV9BbGxfRXZlbnQlMjBSZWdpc3RyYXRpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX1doYXRBSU1lYW5zRm9yVGhlRnV0dXJlT2ZRQVRlYW1zXzIwMjUxMDIzLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1XaGF0QUlNZWFuc0ZvclRoZUZ1dHVyZU9mUUFUZWFtc19SU1ZQRm9yVGhlU2Vzc2lvbl9Ob25lX0hlYWRsaW5lJTNBRmlyZXNpZGVDaGF0V2hhdEFJTWVhbnNGb3JUaGVGdXR1cmVPZlFBVGVhbXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMDIzX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1jdGEtUlNWUEZvclRoZVNlc3Npb24=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879917">RSVP for the session</a> to see how other orgs are using AI to improve their QA process.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/g3hnhwumm0vem2tr/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879918">Datadog</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>They made this <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/g3hnhwumm0vem2tr/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879918">Front-end Developer Kit</a> that comes with a best practices guide for monitoring, a solutions brief on catching issues early, and more.</em></p>
</div>
</div>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">getEvenNumbers</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">numbers</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> evenNumbers <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> 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> numbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">%</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</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 punctuation" style="color: #231F20; font-size: 14px;">{</span>
evenNumbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers<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><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> evenNumbers<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;">getEvenNumbers</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;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">6</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Right on cue, <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/9qhzhdudde7gd7s9/aHR0cHM6Ly92aXRlc3QuZGV2L2Jsb2cvdml0ZXN0LTQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879919">Vitest 4.0</a> just launched with visual regression testing and stable support for Browser Mode. But I haven’t been able to play with it yet because my mom changed the password to our household’s Vite+ account.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Nadia Makarevich wrote a data-driven deep dive on <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/3ohphdu33kwq46sr/aHR0cHM6Ly93d3cuZGV2ZWxvcGVyd2F5LmNvbS9wb3N0cy9yZWFjdC1zZXJ2ZXItY29tcG9uZW50cy1wZXJmb3JtYW5jZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879920">whether React Server Components really improve performance</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/n2hohquvvldn68a6/aHR0cHM6Ly9uZXh0anMub3JnL2Jsb2cvbmV4dC0xNg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879921">Next.js 16</a> just launched with all the features we wrote about last week, plus a new “spicy mode” for all users who verify their identity with Real ID.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/48hvh7umm7o06pbx/aHR0cHM6Ly96ZWQuZGV2L2Jsb2cvemVkLWZvci13aW5kb3dzLWlzLWhlcmU_dXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879922">Zed finally just launched on Windows</a> and it’s a real native app (not Electron <span role="img" aria-label="folded hands">🙏</span>). Download it now to see if everyone’s favorite editor lives up to the hype. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/wnh2h6uqqlzrx4h7/aHR0cHM6Ly9zb2xpdG8uZGV2L3Y1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879923">Solito just released v5</a> of their wrapper around React Navigation and Next.js for sharing navigation code in RN apps.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">You can now run <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/reh8h9ummo8qwvu2/aHR0cHM6Ly9kZXZlbG9wZXJzLmdvb2dsZWJsb2cuY29tL2VuL3NheS1oZWxsby10by1hLW5ldy1sZXZlbC1vZi1pbnRlcmFjdGl2aXR5LWluLWdlbWluaS1jbGkv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879924">complex, interactive commands in Gemini CLI</a> like vim for editing, top for monitoring, and more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/08hwhgu22p8mgkbl/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXNlY29uZGFyeSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879925">Only idiots write manual tests</a> – modern engineering teams like Notion, Dropbox and Wiz use Meticulous to maintain e2e UI tests that cover every edge case of your web app. [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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/8ghqh3uoo74gq5hk/aHR0cHM6Ly9qYWtlYXJjaGliYWxkLmNvbS8yMDI1L2ltcG9ydGluZy12cy1mZXRjaGluZy1qc29uLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879926">importing vs fetching JSON</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dave Rupert wrote about <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/vqh3hmuooq5nenug/aHR0cHM6Ly9kYXZlcnVwZXJ0LmNvbS8yMDI1LzEwL2N1c3RvbS1lbGVtZW50cy1tYW5pZmVzdC1raWxsZXItZmVhdHVyZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879927">the killer feature of Web Components</a> – besides the sense of moral superiority.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/l2heh6ulldgo63b6/aHR0cHM6Ly93d3cuY29kZXJhYmJpdC5haS8_ZHViX2lkPVdyMElISkVIaVFHOGJUUTMmdXRtX2NhbXBhaWduPWNsaSZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879928">CodeRabbit cuts your code review time in half</a> – and catches more bugs than your most OCD senior engineer. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The new <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/m2h7h6u33lrom3sm/aHR0cHM6Ly90YW5zdGFjay5jb20vZGV2dG9vbHMvbGF0ZXN0L2RvY3MvdGhpcmQtcGFydHktcGx1Z2lucw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879929">TanStack devtools marketplace</a> lets third-party developers build their devtools for TanStack.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Matt Smith wrote about <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/dphehmuee23q88sm/aHR0cHM6Ly9hbGx0aGluZ3NzbWl0dHkuY29tLzIwMjUvMTAvMjAvcmV0aGlua2luZy1hc3luYy1sb29wcy1pbi1qYXZhc2NyaXB0Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879930">rethinking async loops in JavaScript</a>. It’s similar to how I’m rethinking my past decade of protein powder consumption after learning that it has more lead in it than a mechanical pencil.</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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/g3hnhwumm0vem2tr/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1798879918">Datadog</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Our logic is a little off. <code style="font-size: 14px;">n % 2</code> will return <code style="font-size: 14px;">0</code> if <code style="font-size: 14px;">n</code> is an even number. The bug is that our code checks if it returns <code style="font-size: 14px;">1</code> (which would be an odd number).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">To fix this, we can change that line to see if it evaluates to <code style="font-size: 14px;">0</code>, not <code style="font-size: 14px;">1</code>.</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">getEvenNumbers</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">numbers</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> evenNumbers <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> 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> numbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">%</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</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>
evenNumbers<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers<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><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> evenNumbers<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;">getEvenNumbers</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;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">4</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span><span class="token number" style="color: #fcba28; font-size: 14px;">6</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/e0hph0u77dxkq4t8/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1798879931">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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/7qh7h2u99xg0w3fz/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1798879932">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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/owhkhwuww0z4gxcv/aHR0cHM6Ly91aS5kZXY=" url-id="1798879933">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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96/z2hgh7ueemgopnup/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1798879934">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.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/qdux3x7pqqb7h4owpqkflh89p0rkkb4hpe96" alt="">
</body>
</html>