<!DOCTYPE html>
<html>
<head>
<title>Bytes: Cage-free Nuxt 4.0</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> A Tailwind plugin for American literature enthusiasts, Astro’s term sheet, and celebrating Wasm’s 10th anniversary with some constructive criticism.</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/48hvh7umn38558bx/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDEw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260776">#410</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/aang-gaga.jpg" alt="Lady Gaga looking like Aang from Avatar" 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;">Long ago, the four JavaScript frameworks used to live in harmony<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Cage-free Nuxt 4.0</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It’s been a big month for Nuxt. First, their parent company got acquired by open-source Daddy Warbucks, and last week they announced <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/wnh2h6uq3d655ph7/aHR0cHM6Ly9udXh0LmNvbS9ibG9nL3Y0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260777">Nuxt 4.0</a> – their first major release in 2.5 years.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But unlike that v3 release, which featured a full rewrite of the entire framework, Nuxt 4 introduces significantly fewer changes that are mostly focused on improving the developer experience:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Cleaner project structure</strong> – All application code now lives in an <code style="font-size: 14px;">app/</code> directory by default, which should help keep your app faster and more organized.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Smarter data fetching</strong> – <code style="font-size: 14px;">useAsyncData</code> and <code style="font-size: 14px;">useFetch</code> work better now, multiple components using the same key now share their data automatically, and you get more control over when cached data gets used.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Better TypeScript support</strong> – Nuxt now creates separate TS projects for your app code, server code, <code style="font-size: 14px;">shared/</code> folder, and builder code. This should allow for better autocomplete, more accurate type inference, and fewer confusing errors.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Faster CLI</strong> – Thanks to faster cold starts, automatic reuse of the v8 compile cache, native file watching, and socket-based communication between the CLI and Vite dev server.</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> The Nuxt team is calling this a “hype-free” major release that’s focused on providing some noticeable DX wins, while still allowing developers to upgrade from Nuxt 3 with minimal effort.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But now that they have the Vercel war chest behind them, it’ll be interesting to see if the Nuxt team starts to take some bigger swings on more experimental features to try and woo a new crowd of developers.</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/reh8h9umepz22lu2/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEw" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1767260778"><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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/08hwhgu2k4roo3hl/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTA=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1767260779"><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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/8ghqh3uox8n00rbk/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwTnV4dCUyN3MlMjBmaXJzdCUyMG1ham9yJTIwcmVsZWFzZSUyMGluJTIwMi41JTIweWVhcnMmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTA=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1767260780"><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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/vqh3hmuod6rxxqhg/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwTnV4dCUyN3MlMjBmaXJzdCUyMG1ham9yJTIwcmVsZWFzZSUyMGluJTIwMi41JTIweWVhcnMlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEwJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1767260781"><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/ant-twerk.jpg" alt="Ant from Bug's Life watching another ant dance with a human body" 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;">Watching my AI app hallucinate slop to all my users<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/l2heh6ulzp700pa6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9zb2x1dGlvbnMvZ2VuLWFpLXRlc3Rpbmc_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9BSVRlc3RpbmdfMjAyNTA3MjItTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PUFJVGVzdGluZ19TY2hlZHVsZUFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0FUaGVNb3N0RWZmaWNpZW50V2F5VG9UZXN0WW91ckFJQXBwX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MDcyMl92Ml8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09aGVhZGxpbmUtVGhlTW9zdEVmZmljaWVudFdheVRvVGVzdFlvdXJBSUFwcA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260782">The most efficient way to test your AI app</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Testing genAI apps is a nightmare. Outputs are non-deterministic, edge cases are infinite, and the underlying models are constantly changing and causing regressions.</p>
<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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/m2h7h6u37xzggrim/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0FJVGVzdGluZ18yMDI1MDcyMi1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9QUlUZXN0aW5nX1NjaGVkdWxlQVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVRoZU1vc3RFZmZpY2llbnRXYXlUb1Rlc3RZb3VyQUlBcHBfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNzIyX3YyXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVFBV29sZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260783">QA Wolf</a> can fix that. They build, run, and maintain a new breed of tests designed specifically for genAI apps:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Input validity tests</strong> – Throw every input variation you can think of (lengths, file types, weird characters) and make sure your app doesn’t implode</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Model performance tests</strong> – Track <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/dphehmuemxn4ozam/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9zb2x1dGlvbnMvZ2VuLWFpLXRlc3Rpbmc_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9BSVRlc3RpbmdfMjAyNTA3MjItTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PUFJVGVzdGluZ19TY2hlZHVsZUFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0FUaGVNb3N0RWZmaWNpZW50V2F5VG9UZXN0WW91ckFJQXBwX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MDcyMl92Ml8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS1SZXNwb25zZVRpbWVVbmRlckxvYWQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260784">response time under load</a> and optimize GPU + memory usage, without setting your cloud bill on fire</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Output consistency tests</strong> – Catch regressions and make sure users aren’t getting wildly different results from similar prompts</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/e0hph0u72zoplpt8/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0FJVGVzdGluZ18yMDI1MDcyMi1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9QUlUZXN0aW5nX1NjaGVkdWxlQVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVRoZU1vc3RFZmZpY2llbnRXYXlUb1Rlc3RZb3VyQUlBcHBfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNzIyX3YyXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1jdGEtU2NoZWR1bGVBUGVyc29uYWxpemVkRGVtbw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260785">Schedule a personalized demo</a> to learn how QA Wolf can handle your genAI testing, <em>without</em> burning through your tokens.</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/7qh7h2u9me5k66bz/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlbnRyeS1idWlsZC8_dXRtX2NhbXBhaWduPWFpLWZ5MjZxMi1haXdvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYnl0ZXMtYnVpbGQtd29ya3Nob3AtcmVnaXN0ZXImdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260786">Sentry</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 engineers are hosting a free workshop next week on <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/7qh7h2u9me5k66bz/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlbnRyeS1idWlsZC8_dXRtX2NhbXBhaWduPWFpLWZ5MjZxMi1haXdvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYnl0ZXMtYnVpbGQtd29ya3Nob3AtcmVnaXN0ZXImdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260786">How to automatically debug issues</a> using Seer (Sentry’s new AI agent) alongside the Sentry MCP and other tools.</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;">addOneMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> newDate <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>date<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">setMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getMonth</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 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>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getDate</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> date<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getDate</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>
newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">setDate</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 keyword" style="color: #f38ba3; font-size: 14px;">return</span> newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> today <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">2024</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">17</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// October 17, 2024</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> oneMonthFromToday <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">addOneMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>today<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>oneMonthFromToday<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;">Andy Wingo wrote an article called <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/owhkhwuw7edk6nuv/aHR0cHM6Ly9xdWV1ZS5hY20ub3JnL2RldGFpbC5jZm0_aWQ9Mzc0NjE3MQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260787">WebAssembly: Yes, but for What?</a> that celebrates Wasm’s 10th anniversary by detailing its wins and losses so far, and predicting where it’ll go in the next 2-3 years. I did the exact same thing to my nephew to celebrate his 10th birthday this month.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/z2hgh7ue8zx4krip/aHR0cHM6Ly9ibGF6aXR5LmNvbS90aGUtZXhwZXJ0LWd1aWRlLXRvLW5leHRqcy1wZXJmb3JtYW5jZS1vcHRpbWl6YXRpb24_dXRtX2NhbXBhaWduPWVib29rLWd1aWRlLW5leHQtanMtcGVyZm9ybWFuY2Utb3B0aW1pemF0aW9uJnV0bV9jb250ZW50PWJ5dGVzJnV0bV9tZWRpdW09ZW1haWwmdXRtX3NvdXJjZT1uZXdzbGV0dGVy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260788">The Expert Guide to Next.js Performance Optimization 2025</a> is a free, 10-chapter ebook filled with real-life examples and open-source libraries to help you fix bottlenecks and boost performance in enterprise-scale Next.js apps. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The React team just released <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/p8hehqu4leo32luq/aHR0cHM6Ly9yZWFjdC5kZXYvbGVhcm4vcmVhY3QtY29tcGlsZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260789">new docs about React Compiler</a>, and all React course creators threatened to glue their hands to the Mona Lisa in protest.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Google’s Open Source Security Team just announced <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/x0hph3uelm0rp7t5/aHR0cHM6Ly9zZWN1cml0eS5nb29nbGVibG9nLmNvbS8yMDI1LzA3L2ludHJvZHVjaW5nLW9zcy1yZWJ1aWxkLW9wZW4tc291cmNlLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260790">OSS Rebuild</a>, a new project that aims to reduce supply chain attacks by giving security teams powerful data to avoid compromise, without burdening upstream maintainers <span role="img" aria-label="folded hands">🙏</span>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/6qhehould4ek5pao/aHR0cHM6Ly93d3cucHVscG1pbmVyLmNvbS8_dXRtX2NhbXBhaWduPXVpZGV2X2p1bHkyMDI1JnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPXVpZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260791">PulpMiner converts any webpage into a realtime JSON API</a> by using an AI-powered scraper. It was the #2 Product of the Day on Product Hunt and is <em>a lot</em> easier to use than other data extraction tools. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/kkhmh2un3pvd5ltl/aHR0cHM6Ly9hc3Ryby5idWlsZC9ibG9nL2FzdHJvLTUxMjAv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260792">Astro 5.12</a> comes with TOML support for content loaders, experimental raw environment values, and a new term sheet from Vercel – just kidding (I think).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">hoakley wrote this <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/58hvh8ugzw2vngt6/aHR0cHM6Ly9lY2xlY3RpY2xpZ2h0LmNvLzIwMjUvMDcvMTkvYS1icmllZi1oaXN0b3J5LW9mLXByaW1hcnktY29kaW5nLWxhbmd1YWdlcy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260793">brief history of primary coding languages for the Apple ecosystem</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/25h2h9u3exwv84t3/aHR0cHM6Ly9naXRodWIuY29tL21hcnNib3MvZmx1ZW50LXN0YXRl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260794">fluent-state</a> is a proxy-based React hook for deeply nested, reactive state.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Can your coding agent run long commands and plan its next move? Warp’s can – and it just beat Claude Code by 20% on Terminal-Bench. <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/qvh8h8ud03p74nul/aHR0cHM6Ly93d3cud2FycC5kZXYvYmxvZy90ZXJtaW5hbC1iZW5jaD91dG1fY2FtcGFpZ249YWRlX2xhdW5jaF9zZWNvbmRhcnlfanVseSZ1dG1fY29udGVudD1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1wdWJsaWNhdGlvbnM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260795">Their team wrote about how they pulled it off here</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/g3hnhwumk2wdlxur/aHR0cHM6Ly92dWUtYml0cy5kZXYv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260796">Vue Bits</a> is a collection of 80+ animated Vue components that sounds suspiciously close to <em>Cool Bits.</em> I’d hate to get my lawyer (who also happens to handle trademark law for a company called Oracle) involved <span role="img" aria-label="face with monocle">🧐</span>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Daniel Friyia wrote about <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/9qhzhdudl8rq64f9/aHR0cHM6Ly9leHBvLmRldi9ibG9nL2J1aWxkLTJkLWdhbWUtc3R5bGUtcGh5c2ljcy13aXRoLW1hdHRlci1qcy1hbmQtcmVhY3QtbmF0aXZlLXNraWE=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260797">How to build 2D game-style physics with Matter.js and React Native Skia</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/3ohphdu3n8go20br/aHR0cHM6Ly9kYWlzeXVpLmNvbS9kb2NzL3Y1Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260798">daisyUI released v5.0</a> of its component library for Tailwind CSS that always keeps a green light on at the end of its dock to symbolize how Gatsby’s hopes and dreams (and indeed the American dream itself) can feel so close but still just out of reach.</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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/7qh7h2u9me5k66bz/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlbnRyeS1idWlsZC8_dXRtX2NhbXBhaWduPWFpLWZ5MjZxMi1haXdvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYnl0ZXMtYnVpbGQtd29ya3Nob3AtcmVnaXN0ZXImdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1767260786">Sentry</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Months are 0 indexed in JavaScript. So, <code style="font-size: 14px;">new Date(2024, 10, 17)</code> is actually November 17, 2024. When we add one month to that date, we get December 17, 2024.</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;">addOneMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> newDate <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>date<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">setMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getMonth</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 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>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getDate</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> date<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getDate</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>
newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">setDate</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 keyword" style="color: #f38ba3; font-size: 14px;">return</span> newDate<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> today <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Date</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">2024</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">9</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">17</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// October 17, 2024</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> oneMonthFromToday <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">addOneMonth</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>today<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>oneMonthFromToday<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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/n2hohquvk408xqh6/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1767260799">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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/48hvh7umn385p8cx/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1767260800">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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/wnh2h6uq3d65kps7/aHR0cHM6Ly91aS5kZXY=" url-id="1767260801">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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l/reh8h9umepz23la2/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1767260802">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/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/o8uqeqor33bqh64woxxuvhq2dg8rrfoh4g6l" alt="">
</body>
</html>