<!DOCTYPE html>
<html>
<head>
<title>Bytes: The Next.js of LLMs</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> Cloudflare calls out Perplexity, CSS and Tailwind become BFFs, and developers discover the power of kratom-based productivity tools.</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/dphehmue7vk3nzhm/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDE0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402496">#414</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/arianna-noface.jpg" alt="No Face from Spirited Away with Ariana Grande's face photoshopped into it" 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;">Vercel's new Head of AI, reporting for duty<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">The Next.js of LLMs</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">When Vercel first launched <code style="font-size: 14px;">AI SDK</code> two years ago, it seemed like it <em>might</em> be just another half-baked attempt by a devtool company to jump on the AI gravy train.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But since then, “the AI toolkit for TypeScript” has grown to 2 million weekly npm downloads and quickly become a go-to library for developers building AI-powered apps.</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;">Why tho?</strong> Because it gives you a clean abstraction over all the hairiest parts of working with LLMs – streaming, tool calling, persistence, and switching between models. It also works with every major UI framework and offers <del>extreme</del> <em>robust</em> type safety.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They just released <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/e0hph0u7n6exopa8/aHR0cHM6Ly92ZXJjZWwuY29tL2Jsb2cvYWktc2RrLTUjZXhwZXJpbWVudGFsLXNwZWVjaC1nZW5lcmF0aW9uLSYtdHJhbnNjcmlwdGlvbg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402497">AI SDK 5</a> last week, and it doubles down on all of that. Here are the biggest highlights:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Agentic loop control:</strong> New primitives like <code style="font-size: 14px;">stopWhen</code> and <code style="font-size: 14px;">prepareStep</code> let you build multi-step agents with greater control – define when your agent stops, switch models mid-loop, or force specific tool usage step-by-step.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Tool improvements:</strong> A new <code style="font-size: 14px;">outputSchema</code> enables type safe tool outputs on the client, and the <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/7qh7h2u94q8g56iz/aHR0cHM6Ly9haS1zZGsuZGV2L2RvY3MvYWktc2RrLWNvcmUvdG9vbHMtYW5kLXRvb2wtY2FsbGluZyNkeW5hbWljLXRvb2xz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402498"><code style="font-size: 14px;">dynamicTool</code> function</a> lets you define rules at runtime, which is helpful when inputs/outputs aren’t known in advance.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Redesigned chat with full-stack type safety:</strong> They rebuilt the <code style="font-size: 14px;">useChat</code> hook from the ground up with typed message streams, structured parts (like tools and metadata), and a clean separation between UI and model messages for less front-end spaghetti code.</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> Vercel has already cemented Next.js as the de facto way to build full-stack React apps. Now they’re starting to do the same for AI-powered apps, which <em>might</em> prove to be an even bigger and more important market over the next decade.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Never bet against the goth kids.</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/z2hgh7uedn7gxrtp/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDE0" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1772402500"><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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/p8hehqu47mdvoluq/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1772402501"><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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/x0hph3ue7ozg07s5/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwdGhlJTIwYmlnZ2VzdCUyMHVwZGF0ZXMlMjBpbiUyMEFJJTIwU0RLJTIwNSZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQxNA==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1772402502"><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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/6qhehoul2zwqepto/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwdGhlJTIwYmlnZ2VzdCUyMHVwZGF0ZXMlMjBpbiUyMEFJJTIwU0RLJTIwNSUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTQmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1772402503"><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/hamilton-phone.jpg" alt="A hand holding up a phone to Hamilton's on a TV screen" 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;">Seeing new bugs in prod right after shipping a 'bug fix release'<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/kkhmh2un9re7vltl/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0Zhc3Rlck1vYmlsZVJlbGVhc2VzXzIwMjUwODA1LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1GYXN0ZXJNb2JpbGVSZWxlYXNlc19TY2hlZHVsZUFEZW1vVG9MZWFybk1vcmVfTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyTW9iaWxlUmVsZWFzZXNXaXRoQXV0b21hdGVkUUFfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwODA1X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1oZWFkbGluZS1TcGVlZFVwWW91ck1vYmlsZVJlbGVhc2VzV2l0aEF1dG9tYXRlZFFB" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402504">Speed up your mobile releases with automated QA</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Turns out, manually testing your team’s mobile app on a couple dusty iPhones isn’t exactly “best practice.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It slows down release cycles, lets bugs slip through, and wastes your engineers’ time.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">QA Wolf’s <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/58hvh8ug9q0e2gu6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0Zhc3Rlck1vYmlsZVJlbGVhc2VzXzIwMjUwODA1LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1GYXN0ZXJNb2JpbGVSZWxlYXNlc19TY2hlZHVsZUFEZW1vVG9MZWFybk1vcmVfTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyTW9iaWxlUmVsZWFzZXNXaXRoQXV0b21hdGVkUUFfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwODA1X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVFBV29sZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402505">AI-native testing service</a> fixes that. You’ll get 80% automated test coverage in weeks, with tests running on real iOS devices and Android emulators:</p>
<ul>
<li>Tests cover every device, gesture, feature, and user flow</li>
<li>Your tests run in 100% parallel, with <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/qvh8h8ud6zvxpnal/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9ob3ctaXQtd29ya3M_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9GYXN0ZXJNb2JpbGVSZWxlYXNlc18yMDI1MDgwNS1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9RmFzdGVyTW9iaWxlUmVsZWFzZXNfU2NoZWR1bGVBRGVtb1RvTGVhcm5Nb3JlX05vbmVfSGVhZGxpbmUlM0FTcGVlZFVwWW91ck1vYmlsZVJlbGVhc2VzV2l0aEF1dG9tYXRlZFFBX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MDgwNV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS1VbmxpbWl0ZWRSdW5z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402507">unlimited runs</a>
</li>
<li>Zero flakes, with human-verified bug reports</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/9qhzhdud20x7r4h9/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0Zhc3Rlck1vYmlsZVJlbGVhc2VzXzIwMjUwODA1LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1GYXN0ZXJNb2JpbGVSZWxlYXNlc19TY2hlZHVsZUFEZW1vVG9MZWFybk1vcmVfTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyTW9iaWxlUmVsZWFzZXNXaXRoQXV0b21hdGVkUUFfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwODA1X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1jdGEtU2NoZWR1bGVBRGVtb1RvTGVhcm5Nb3Jl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402509">Schedule a demo to learn more</a> – and see how they help customers do 5x more releases than they did before QA Wolf.</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="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/3ohphdu3d0rwg0ir/aHR0cHM6Ly9zZW50cnkuaW8vc29sdXRpb25zL3NlbnRyeS1mb3ItYWkvP3V0bV9jYW1wYWlnbj1haS1meTI2cTMtYWdlbnRtb25pdG9yaW5nJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktYWdlbnQtbW9uaXRvcmluZy1nYS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402510">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>They just introduced <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/3ohphdu3d0rwg0ir/aHR0cHM6Ly9zZW50cnkuaW8vc29sdXRpb25zL3NlbnRyeS1mb3ItYWkvP3V0bV9jYW1wYWlnbj1haS1meTI2cTMtYWdlbnRtb25pdG9yaW5nJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktYWdlbnQtbW9uaXRvcmluZy1nYS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402510">AI Agent Monitoring</a> to help you prevent errors, optimize your LLM costs, and understand the full picture when something in your AI agent breaks.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">We have an existing <code style="font-size: 14px;">filterRecommendations</code> function that takes two arguments:</p>
<ol>
<li>
<code style="font-size: 14px;">purchasedProducts</code>: A list of product IDs that a user has already purchased.</li>
<li>
<code style="font-size: 14px;">potentialRecommendations</code>: A list of product IDs that could be recommended to the user, which might include some products they have already purchased.</li>
</ol>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The goal is to generate a list of unique product recommendations, ensuring that products the user has already purchased are not included.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Given that information, how can this code be improved?</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;">filterRecommendations</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> potentialRecommendations</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> potentialRecommendations<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">filter</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;">product</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 operator" style="color: #12b5e5; font-size: 14px;">!</span>purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">includes</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>product<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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Testing the function</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">time</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Recommendations"</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> purchasedProducts <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 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 number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">8</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;">10</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> potentialRecommendations <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 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 number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">8</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;">10</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">11</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">12</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">13</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">14</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">15</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> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">filterRecommendations</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>
purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
potentialRecommendations
<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>result<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;">// [11, 12, 13, 14, 15]</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">timeEnd</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Recommendations"</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;">// 0.34814453125 ms</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;">Jared White wrote about how <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/n2hohquvomgd0qc6/aHR0cHM6Ly90aGF0aHRtbC5ibG9nLzIwMjUvMDgvdGFpbHdpbmQtYW5kLWNzcy1mcmllbmRzLWF0LWxhc3Qv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402511">CSS and Tailwind are finally friends at last</a>. Just like how I’m finally friends with my old high school nemesis who has apparently been quietly working at Figma for the last 7 years. It’s so nice to reconnect with old classmates without any sort of pretext or personal agenda.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Take Postman’s <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/48hvh7um2v9o88fx/aHR0cHM6Ly9mbmYuZGV2LzRsRUZCT3Y=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402512">State of the API Survey</a>. Thousands of developers have already shared how the world of APIs has changed. Join them and you’ll be entered to win an iPad Pro with all the accessories. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Colton Voege wrote about how AI is <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/wnh2h6uqon4z6pu7/aHR0cHM6Ly9jb2x0b24uZGV2L2Jsb2cvY3VyaW5nLXlvdXItYWktMTB4LWVuZ2luZWVyLWltcG9zdGVyLXN5bmRyb21lLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402513"><em>not</em> actually making engineers 10x more productive</a>. Only a potent blend of gas station kratom and disapproval from a father figure can do that.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Waku (a minimal React framework focused on RSC) now has <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/reh8h9um5478zlc2/aHR0cHM6Ly9uZXdzbGV0dGVyLmRhaXNoaWthdG8uY29tL3Avd2FrdS1nYWlucy12aXRlLXJzYy1zdXBwb3J0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402514">Vite RSC support</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Una Kravets wrote about <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/08hwhgu27vx8r3il/aHR0cHM6Ly91bmEuaW0vc2Nyb2xsLXRhcmdldC1ncm91cC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402515">creating a scroll-spy with 2 lines of CSS</a>. But if you want a scroll-manchurian-candidate, you’re still gonna need to use Tailwind.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/8ghqh3uo5z34nrik/aHR0cHM6Ly93d3cucmVhY3R1bml2ZXJzZWNvbmYuY29tLz91dG1fY2FtcGFpZ249Ynl0ZXMmdXRtX21lZGl1bT1zcG9uc29yc2hpcF8yJnV0bV9zb3VyY2U9bWFpbGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402516">React Universe Conf just published their full agenda</a>, featuring Nicola Corti and Riccardo Cipolleschi from Meta co-hosting the keynote, plus new speakers from Amazon and HelloFresh. Matt Pocock will also be leading a Vercel AI SDK v5 workshop <span role="img" aria-label="fire">🔥</span>. <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/8ghqh3uo5z34nrik/aHR0cHM6Ly93d3cucmVhY3R1bml2ZXJzZWNvbmYuY29tLz91dG1fY2FtcGFpZ249Ynl0ZXMmdXRtX21lZGl1bT1zcG9uc29yc2hpcF8yJnV0bV9zb3VyY2U9bWFpbGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402516">Check it out</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Catherine Jue wrote about the power of <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/l2heh6ulke4g7pu6/aHR0cHM6Ly93d3cuY2F0aGVyaW5lanVlLmNvbS9mYXN0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402518">fast</a> software.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Speaking of which, Ryan Skinner wrote about how he <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/m2h7h6u3nv9rzrim/aHR0cHM6Ly9yeWFuc2tpbm5lci5jb20vcG9zdHMvaG93LWktYnVpbHQtYS1mdWxsLXN0YWNrLXJlYWN0LWZyYW1ld29yay00eC1mYXN0ZXItdGhhbi1uZXh0anMtd2l0aC00eC1tb3JlLXRocm91Z2hwdXQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402519">built a full-stack React framework that’s 4x faster than Next.js with 4x more throughput</a>. Tim Neutkens, you have 24 hours to respond.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">CodeRabbit’s <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/dphehmue7vk3gzsm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402520">free VS Code extension</a> gives you line-by-line AI code reviews right in your IDE. It’s like having a senior developer who understands the context of your whole codebase give you feedback on every line of code and provide one-click fix suggestions. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">TkDodo wrote about <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/e0hph0u7n6exgph8/aHR0cHM6Ly90a2RvZG8uZXUvYmxvZy9yZWFjdC1xdWVyeS1zZWxlY3RvcnMtc3VwZXJjaGFyZ2Vk" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402521">React Query selectors, supercharged</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jean Boussier wrote about <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/7qh7h2u94q8g76iz/aHR0cHM6Ly9ieXJvb3QuZ2l0aHViLmlvL3J1YnkvanNvbi8yMDI1LzA4LzAyL3doYXRzLXdyb25nLXdpdGgtdGhlLWpzb24tZ2VtLWFwaS5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402522">what’s wrong with the JSON gem API</a>. We all know that Ruby is objectively inferior, but this post does have some interesting insights on API design.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Cloudflare called out Perplexity for using <a href="https://click.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/p8hehqu47mdv0laq/aHR0cHM6Ly9ibG9nLmNsb3VkZmxhcmUuY29tL3BlcnBsZXhpdHktaXMtdXNpbmctc3RlYWx0aC11bmRlY2xhcmVkLWNyYXdsZXJzLXRvLWV2YWRlLXdlYnNpdGUtbm8tY3Jhd2wtZGlyZWN0aXZlcy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402525">stealth, undeclared crawlers to evade website no-crawl directives</a> – which gave me flashbacks to being called out by the manager of my local 7-11 for wearing multiple disguises into the store on July 11th to get eight free slurpees. And I would’ve gotten away with it too, if it weren’t for those meddling kids.</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="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz: Answer</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/3ohphdu3d0rwg0ir/aHR0cHM6Ly9zZW50cnkuaW8vc29sdXRpb25zL3NlbnRyeS1mb3ItYWkvP3V0bV9jYW1wYWlnbj1haS1meTI2cTMtYWdlbnRtb25pdG9yaW5nJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktYWdlbnQtbW9uaXRvcmluZy1nYS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1772402510">Sentry</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;">filterRecommendations</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> potentialRecommendations</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> potentialRecommendations<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">filter</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;">product</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 operator" style="color: #12b5e5; font-size: 14px;">!</span>purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">includes</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>product<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>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">We can improve this code by using a <code style="font-size: 14px;">Set</code> to store the <code style="font-size: 14px;">purchasedProducts</code> list. Because <code style="font-size: 14px;">Set</code> allows us to check for the existence of a value in constant time, we can avoid the linear time lookup that <code style="font-size: 14px;">Array.includes</code> requires. In theory, this should make the function significantly faster for large lists of products (but you should always benchmark your code to be sure).</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;">filterRecommendations</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>
<span class="token parameter" style="color: #f38ba3; font-size: 14px;">purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
potentialRecommendations</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> purchasedProductsSet <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;">Set</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>purchasedProducts<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> potentialRecommendations<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">filter</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;">productId</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 operator" style="color: #12b5e5; font-size: 14px;">!</span>purchasedProductsSet<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">has</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>productId<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>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">time</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Recommendations"</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> purchasedProducts <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 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 number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">8</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;">10</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> potentialRecommendations <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 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 number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">8</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;">10</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">11</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">12</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">13</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">14</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">15</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> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">filterRecommendations</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>
purchasedProducts<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
potentialRecommendations
<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>result<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;">// [11, 12, 13, 14, 15]</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">timeEnd</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"Recommendations"</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;">// 0.212890625 ms</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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/x0hph3ue7ozg67f5/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1772402526">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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/6qhehoul2zwqgpuo/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1772402527">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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/kkhmh2un9re7qlcl/aHR0cHM6Ly91aS5kZXY=" url-id="1772402528">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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w/58hvh8ug9q0e8ga6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1772402529">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/n4ugqg6788hvhxnlv9eh6h62wewggilho53w">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/n4ugqg6788hvhxnlv9eh6h62wewggilho53w" alt="">
</body>
</html>