<!DOCTYPE html>
<html>
<head>
<title>Bytes: Vite fetish intensifies</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> PNG nostalgia bait, Angular’s fight against AI slop, and my Tailwind-inspired campaign slogan for student body treasurer.</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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/3ohphdu398z070br/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDA0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236686">#404</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/eric-andre-devil.jpg" alt="Eric Andre with an angel and a devil on his shoulder" 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;">Me deciding if I should make another 'rhymes-with-feet' joke<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Vite fetish intensifies</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Have you noticed that the JavaScript framework wars feel a lot less <em>war-like</em> these days?</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">There are a few different reasons for that, but if you’re looking for one thing to blame for the lack of drama, I’d start with Vite.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The build tool/dev server/plugin platform now forms the shared foundation for nearly every modern JS framework not named <code style="font-size: 14px;">Next.js</code> or <code style="font-size: 14px;">Remix</code> (though Remix has optional Vite support). And with fewer build tools to fight over, along with plugins and infrastructure that can be shared across projects, there’s just not as much framework beef as there used to be <span role="img" aria-label="pensive face">😔</span>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s probably going to become a new normal, because Vite’s dominance is still growing. They just released <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/n2hohquv54rm3qf6/aHR0cHM6Ly92aXRlLmRldi9ibG9nL2Fubm91bmNpbmctdml0ZTcuaHRtbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236687">Vite 7.0</a> on Tuesday and announced that their weekly npm downloads have almost doubled to 31 million since their last major release in November.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Compared to the feature-packed Vite 6, this v7 release feels more like a transitional update that’s laying the groundwork for some bigger things to come – but there’s a few noteworthy improvements.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The biggest under-the-hood upgrade is experimental support for Rolldown, their new Rust-powered bundler that’ll eventually replace Rollup as Vite’s default engine. It’s still opt-in only for now, but we already <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/48hvh7umq3gvr8fx/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvMzk5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236688">wrote</a> about how early adopters have seen some big perf wins.</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;">Here are a few more highlights:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Node 18 is out – Vite 7 requires Node 20.19+ or 22.12+, and ships as ESM-only with no CommonJS fallbacks. That might ruffle a few feathers for legacy holdouts, but it sets the stage for a leaner, more modern ecosystem.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The default browser target changed from <code style="font-size: 14px;">modules</code> to <code style="font-size: 14px;">baseline-widely-available</code> – improving performance and compatibility with Chrome 107+, Safari 16+, and friends.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A new <code style="font-size: 14px;">buildApp</code> hook lands in the Environment API, giving plugin authors more control over how apps are bundled and served.</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> OK fine, Vite might not have eliminated <em>all</em> drama from the JavaScript ecosystem (thank goodness). But it’s undoubtedly shifting the landscape of where the fiercest competition is taking place, while simultaneously making it easier than ever for JS libraries and frameworks to actually work 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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/wnh2h6uqvdgnwpa7/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDA0" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1759236689"><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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/reh8h9umvpx40lc2/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MDQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1759236690"><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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/08hwhgu2w4zvd3sl/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwVml0ZSUyMDclMjBhbmQlMjBFdmFuJTIwWW91JTI3cyUyMHF1ZXN0JTIwdG8lMjBlbmQlMjB0aGUlMjBKUyUyMGZyYW1ld29yayUyMHdhcnMmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MDQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1759236691"><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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/8ghqh3uop89zlrik/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwVml0ZSUyMDclMjBhbmQlMjBFdmFuJTIwWW91JTI3cyUyMHF1ZXN0JTIwdG8lMjBlbmQlMjB0aGUlMjBKUyUyMGZyYW1ld29yayUyMHdhcnMlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDA0JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1759236692"><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/convex-logo.png" alt="Convex 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/toad-steering.jpg" alt="Toad not seeing over the steering wheel" 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;">Trying to fix the backend of the app you vibe-coded<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/vqh3hmuo36glpqfg/aHR0cHM6Ly9jaGVmLmNvbnZleC5kZXYvP3JlZj1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236693">Chef is the AI agent for <em>*actual*</em> full-stack apps</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Most AI coding tools can whip up a decent frontend, but the backend is always a <del>boulevard of broken dreams</del> struggle.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s why Convex built <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/vqh3hmuo36glpqfg/aHR0cHM6Ly9jaGVmLmNvbnZleC5kZXYvP3JlZj1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236693">Chef</a> – an AI agent that turns your prompts into a production-ready app with a functional backend, database, auth, file storage, cron jobs, and a deployed frontend.</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;">How though?</strong> Because it’s built on Convex’s AI-optimized reactive database, where everything (frontend and backend) is <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/l2heh6ulvpre3pa6/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvdW5kZXJzdGFuZGluZy9iZXN0LXByYWN0aWNlcy90eXBlc2NyaXB0Lz9yZWY9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236694">written in pure TypeScript</a>. This enables Chef to generate high-quality, type-safe code that just works on the first try.</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;">Here’s what else Chef gets you:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">One-click deploys with a convex.app link</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Built-in auth with zero config required</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Beautiful dashboards for managing data, logs, and storage</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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/vqh3hmuo36glpqfg/aHR0cHM6Ly9jaGVmLmNvbnZleC5kZXYvP3JlZj1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236693">Try it for free</a> – and start vibe-coding full-stack apps that all the scary backend engineers you know would be proud of.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/m2h7h6u30xev8rbm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvYXBwLWJ1aWxkZXItcHJvZHVjdC1icmllZi8_dXRtX2NhbXBhaWduPWRnLWFwbS13dy1hcHAtYnVpbGRlci1icmllZi1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlc2Rldg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236695">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 created this <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/m2h7h6u30xev8rbm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvYXBwLWJ1aWxkZXItcHJvZHVjdC1icmllZi8_dXRtX2NhbXBhaWduPWRnLWFwbS13dy1hcHAtYnVpbGRlci1icmllZi1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlc2Rldg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236695">App Builder Product Brief</a> that breaks down how your team can automate manual engineering processes at scale, create self-service apps for specific functions, and lots 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;">eventuallyFail</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">time</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;">setTimeout</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 operator" style="color: #12b5e5; 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;">throw</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Oops!"</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> time<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;">try</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">eventuallyFail</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">1000</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;">catch</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>error<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>error<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>message<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;">Darius Cepulis wrote about how <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/dphehmuewx5vezfm/aHR0cHM6Ly93d3cubXV4LmNvbS9ibG9nL3RhaWx3aW5kLWlzLXRoZS13b3JzdC1mb3JtLW9mLWNzcy1leGNlcHQtZm9yLWFsbC10aGUtb3RoZXJz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236696">Tailwind is the worst form of CSS, except for all the others</a>, which is why you should embrace it. Coincidentally, this was the exact campaign slogan I used when I ran for student body treasurer in high school. (I lost horribly.)</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Turbopack is now passing <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/e0hph0u7wz467pi8/aHR0cHM6Ly9hcmV3ZXR1cmJveWV0LmNvbS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236697">100% of Next.js test suites</a>, which means that yes, we are officially turbo yet.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/7qh7h2u9pezq96iz/aHR0cHM6Ly9vcHRpbWVpc3QuY29tP3V0bV9jYW1wYWlnbj1sYXVuY2gmdXRtX2lkPTcxNiZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236698">Optimeist</a> automatically optimizes your AWS Lambdas to reduce costs. You just drop in their <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/7qh7h2u9pezq96iz/aHR0cHM6Ly9vcHRpbWVpc3QuY29tP3V0bV9jYW1wYWlnbj1sYXVuY2gmdXRtX2lkPTcxNiZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236698">generated API key</a>, and it instantly detects your Lambdas and fine-tunes their memory, timeout, and configs based on real usage – no manual tweaks required. It’s basically free money. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">After 20 years, <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/owhkhwuwleopwnav/aHR0cHM6Ly93d3cudzMub3JnL1RSL3BuZy0zLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236699">a new PNG spec</a> was just released in the same week we got announcements for <em>Ratatouille 2</em> and <em>The Social Network 2.</em> Nostalgia bait remains undefeated.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/z2hgh7uerzwnerap/aHR0cHM6Ly9ibG9nLmNsb3VkZmxhcmUuY29tL2NvbnRhaW5lcnMtYXJlLWF2YWlsYWJsZS1pbi1wdWJsaWMtYmV0YS1mb3Itc2ltcGxlLWdsb2JhbC1hbmQtcHJvZ3JhbW1hYmxlLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236700">Cloudflare Containers are now in public beta</a>, allowing you to run new kinds of apps alongside your Workers.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Warp’s new coding agent just landed the #1 spot for Terminal Bench (over 20% ahead of Claude Code) and clocked a 71% on SWE-Bench Verified. Their engineering team wrote this article about <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/p8hehqu45exm4luq/aHR0cHM6Ly93d3cud2FycC5kZXYvYmxvZy90ZXJtaW5hbC1iZW5jaD91dG1fY2FtcGFpZ249YWRlX2xhdW5jaF9zZWNvbmRhcnkmdXRtX2NvbnRlbnQ9Ynl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9cHVibGljYXRpb25z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236701">how they did it</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Next.js team released a new guide to <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/x0hph3uedm3oe7h5/aHR0cHM6Ly9uZXh0anMub3JnL2RvY3MvYXBwL2dldHRpbmctc3RhcnRlZC9saW5raW5nLWFuZC1uYXZpZ2F0aW5n" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236702">linking and navigating</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Angular team is doing their best to reduce the AI slop in the world by curating <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/6qhehoul64ozlpao/aHR0cHM6Ly9hbmd1bGFyLmRldi9haS9kZXZlbG9wLXdpdGgtYWk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236703">content and resources for more accurate code generation for Angular and LLMs</a>. Thanks for fighting the good fight, brothers.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/e0hph0u7wz4670h8/aHR0cHM6Ly9wcmV0dGllci5pby9ibG9nLzIwMjUvMDYvMjMvMy42LjA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236704">Prettier 3.6</a> comes with a new experimental high-performance CLI and new plugins for OXC and Hermes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kyle Shevlin wrote about <a href="https://click.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/7qh7h2u9pezq99hz/aHR0cHM6Ly9reWxlc2hldmxpbi5jb20vcHJlZmVyLWdhcHMtdG8tbWFyZ2lucy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236705">preferring gaps to margins</a>, which he says “is so obvious to me that it’s honestly challenging to write about.” Now you know how I feel writing <em>rhymes-with-feet</em> jokes every six months.</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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/m2h7h6u30xev8rbm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvYXBwLWJ1aWxkZXItcHJvZHVjdC1icmllZi8_dXRtX2NhbXBhaWduPWRnLWFwbS13dy1hcHAtYnVpbGRlci1icmllZi1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlc2Rldg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1759236695">Datadog</a>
</h4></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;">eventuallyFail</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">time</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;">setTimeout</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 operator" style="color: #12b5e5; 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;">throw</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Oops!"</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> time<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;">try</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">eventuallyFail</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">1000</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;">catch</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>error<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>error<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>message<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;"><code style="font-size: 14px;">try/catch</code> is synchronous. By the time our error is <code style="font-size: 14px;">throw</code>n, the <code style="font-size: 14px;">try/catch</code> block will be long gone - leaving us with <code style="font-size: 14px;">Uncaught Error: Oops!</code>. To fix this, we want to rely on promises which allow us more async control.</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;">eventuallyFail</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">time</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 keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Promise</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 parameter" style="color: #f38ba3; font-size: 14px;">res<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> rej</span><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 punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setTimeout</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 operator" style="color: #12b5e5; 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;">rej</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">Error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Oops!"</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> time<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;">eventuallyFail</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">1000</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;">catch</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 parameter" style="color: #f38ba3; font-size: 14px;">reason</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">error</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>reason<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>message<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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/owhkhwuwleopwghv/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1759236706">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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/z2hgh7uerzwnewcp/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1759236707">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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/p8hehqu45exm48bq/aHR0cHM6Ly91aS5kZXY=" url-id="1759236708">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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0/x0hph3uedm3oeka5/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1759236709">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/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/zlu4v4x2rrtnhkdn46diphwzp7000f6h3wl0" alt="">
</body>
</html>