<!DOCTYPE html>
<html>
<head>
<title>Bytes: The great SQLite rewrite</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> Our benevolent Type God, selective memory, and AI Peyton Manning breaking my heart.</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/25h2h9u3ed5vx4a3/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDA3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708506">#407</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/proud-dog.jpg" alt="A dog with human hands looking pleased with itself" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">When you tell the ladies you're an open-source database contributor<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">The great SQLite rewrite</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><em>How do you eat an elephant?</em> One bite at a time, obviously.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><em>How do you rewrite SQLite from scratch in Rust?</em> No idea tbh, but the mad lads at Turso are doing it anyway – and they just released their <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/qvh8h8ud0nx73ntl/aHR0cHM6Ly90dXJzby50ZWNoL2Jsb2cvdHVyc28tdGhlLW5leHQtZXZvbHV0aW9uLW9mLXNxbGl0ZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708507">very first alpha</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But before we break down <em>how</em> they’re doing it, let’s answer a more interesting question: <em>Why?</em></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">SQLite is arguably the most reliable piece of software on the planet, but it wasn’t built for many of the demands of modern applications. It struggles with concurrent writes, its synchronous API doesn’t play nice in browsers, and it lacks solid support for things like vector search and streaming changes.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Hypothetically, SQLite <em>could</em> evolve and address these challenges on its own, but they’ve chosen to prioritize stability over all else – and the <em>very-much-closed</em> nature of its open-source community means you probably have a better chance of being invited to join the Illuminati than you do of successfully submitting a SQLite contribution.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">So Turso decided to start fresh. Their Rust-based rewrite aims to keep everything people love about SQLite, while adding new features that allow it to play nice with modern workloads like AI agents, real-time apps, and anything else that needs concurrency to just work.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This first alpha includes support for all the basic SQLite features, plus <strong style="font-weight: 600;">Turso’s key differentiators:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Async all the way down</strong> – A modern, asynchronous API replaces SQLite’s old-fashioned blocking calls, so you can use Turso seamlessly in browsers and serverless runtimes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Native vector search</strong> – Built-in support for vector embeddings, which is perfect if you’re building AI or ML apps and don’t want to glue on extra dependencies.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">SQLite-esque reliability</strong> – Turso uses a combination of deterministic simulation testing and autonomous testing to hammer edge cases and make sure it’s just as reliable as SQLite. They’re so confident that they’ll pay you $1,000 if you can find a corruption bug.</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> A “Rust-based rewrite of SQLite” is either one of the most ambitious open-source projects of our time, or it’s the greatest nerd honeypot ever devised. Either way, you have to respect the hustle.</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/3ohphdu3nzwo80ir/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDA3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1763708510"><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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/n2hohquvkrd84qf6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MDc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1763708511"><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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/48hvh7umngo538fx/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9V2hhdCUyMGRvZXMlMjBhJTIwUnVzdC1iYXNlZCUyMGZvcmslMjBvZiUyMFNRTGl0ZSUyMGFjdHVhbGx5JTIwbG9vayUyMGxpa2UlM0YlMjAlNDB0dXJzb2RhdGFiYXNlJTIwd2FudHMlMjB0byUyMHNob3clMjB5b3UmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MDc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1763708512"><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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/wnh2h6uq3gz5dpt7/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBV2hhdCUyMGRvZXMlMjBhJTIwUnVzdC1iYXNlZCUyMGZvcmslMjBvZiUyMFNRTGl0ZSUyMGFjdHVhbGx5JTIwbG9vayUyMGxpa2UlM0YlMjAlNDB0dXJzb2RhdGFiYXNlJTIwd2FudHMlMjB0byUyMHNob3clMjB5b3UlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDA3JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1763708513"><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/embrace-logo-dark.png" alt="Embrace 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/barbie-facepalm.jpg" alt="Barbie face palming disapprovingly" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">When the product team's strategy is just ✨vibes✨<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/reh8h9umex82plc2/aHR0cHM6Ly9lbWJyYWNlLmlvLz91dG1fY2FtcGFpZ249Ynl0ZXMtNy0xMS0yMDI1JnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708514">Embrace gives you user-focused observability for mobile <em>and</em> web</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Traditional observability tools focus on infrastructure and backend services, but they miss <strong style="font-weight: 600;">the #1 most critical piece</strong> – what your users <em>actually</em> experience.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s where <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/reh8h9umex82plc2/aHR0cHM6Ly9lbWJyYWNlLmlvLz91dG1fY2FtcGFpZ249Ynl0ZXMtNy0xMS0yMDI1JnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708514">Embrace</a> comes in. Their new <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/08hwhgu2kz8o43bl/aHR0cHM6Ly9lbWJyYWNlLmlvL2Jsb2cvaW50cm9kdWNpbmctZW1icmFjZS13ZWItcnVtLz91dG1fY2FtcGFpZ249Ynl0ZXMtNy0xMS0yMDI1JnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708515">Web RUM solution</a> turns every user tap, swipe, and click into real-time insights that help you measure and improve end-user experiences.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><em>But how is it different from other monitoring tools?</em></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Full visibility into every user session</strong> – See how things like Core Web Vitals, exceptions, and custom events impact your users and revenue</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Built for web and mobile</strong> – Get deep insights across platforms without having to stitch together multiple tools (<a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/8ghqh3uox9408rik/aHR0cHM6Ly9nZXQuZW1icmFjZS5pby93ZWItcnVtLWxhdW5jaC13ZWJpbmFyLz91dG1fY2FtcGFpZ249Ynl0ZXMtNy0xMS0yMDI1JnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708516">watch the demo</a>)</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Built on open standards like OpenTelemetry</strong> – You get context-rich data that you can control, not just charts and a black box</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/reh8h9umex82plc2/aHR0cHM6Ly9lbWJyYWNlLmlvLz91dG1fY2FtcGFpZ249Ynl0ZXMtNy0xMS0yMDI1JnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708514">Try it for free</a> – and see why companies like Pinterest, Hyatt, and Wondery rely on Embrace.</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/vqh3hmuodg5x6qfg/aHR0cHM6Ly9nby5jbGVyay5jb20vNGdTM0lQUA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708517">Clerk</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 step-by-step guide on <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/vqh3hmuodg5x6qfg/aHR0cHM6Ly9nby5jbGVyay5jb20vNGdTM0lQUA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708517">How to build an AI coding rules app with Clerk, Lovable, and Supabase</a> that’s fully secure and ready to ship.</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;">const</span> mockAPIData <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 literal-property property" style="color: #12b5e5; font-size: 14px;">items</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 punctuation" style="color: #231F20; font-size: 14px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">id</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 literal-property property" style="color: #12b5e5; font-size: 14px;">price</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">100</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 literal-property property" style="color: #12b5e5; font-size: 14px;">id</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">price</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">200</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">DataCache</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</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;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache <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;">Map</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">key</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><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<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>key<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;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">set</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>key<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> mockAPIData<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> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">get</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>key<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;">calculateTotal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">data</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
data<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">forEach</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">item</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
item<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>price <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> item<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>price <span class="token operator" style="color: #12b5e5; font-size: 14px;">*</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1.2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> data<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;">const</span> cache <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;">DataCache</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;">const</span> data <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'products'</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> withTax <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">calculateTotal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>data<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><span class="token string" style="color: #f99157; font-size: 14px;">'Before tax calculation:'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> data<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<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>price<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><span class="token string" style="color: #f99157; font-size: 14px;">'With tax:'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> withTax<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<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>price<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;">Zod creator Colin McDonnell just expanded his dominion over the TypeScript ecosystem by releasing <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/l2heh6ulzrg0ppt6/aHR0cHM6Ly9naXRodWIuY29tL2NvbGluaGFja3MvenNoeQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708518">zshy</a> – a no-bundler build tool for transpiling TS libraries. All hail our benevolent Type God <span role="img" aria-label="man kneeling">🧎♂️</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/m2h7h6u37ergxrim/aHR0cHM6Ly9vcHRpbWVpc3QuY29tP3V0bV9jYW1wYWlnbj1sYXVuY2gmdXRtX2lkPTcxNiZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708519">Optimeist</a> automatically optimizes your AWS Lambdas to reduce costs. You just drop in their <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/m2h7h6u37ergxrim/aHR0cHM6Ly9vcHRpbWVpc3QuY29tP3V0bV9jYW1wYWlnbj1sYXVuY2gmdXRtX2lkPTcxNiZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708519">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;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/dphehmuem5343zbm/aHR0cHM6Ly90YW5zdGFjay5jb20vc3RhcnQvbGF0ZXN0L2RvY3MvZnJhbWV3b3JrL3JlYWN0L3NlbGVjdGl2ZS1zc3Ijd2hhdC1pcy1zZWxlY3RpdmUtc3Ny" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708520">TanStack Start now has Selective SSR</a>, which goes perfectly with my selective memory about the number of free 7-11 Slurpees I’ve had today (so far).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Daishi Kato created <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/e0hph0u724xpxpb8/aHR0cHM6Ly9uZXdzbGV0dGVyLmRhaXNoaWthdG8uY29tL3AvaW50cm9kdWNpbmctdmFsdGlvLXJlYWN0aXZlLWEtcmVhY3RpdmUtbGlicmFyeS1idWlsdC1vbi12YWx0aW8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708521">valtio-reactive</a>, a Reactive library built on Valtio to provide a global state solution for React.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Devon Govett wrote about how <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/7qh7h2u9mzgkg6iz/aHR0cHM6Ly9kZXZvbmdvdmV0dC5tZS9ibG9nL3Njb3BlLWhvaXN0aW5nLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708522">JavaScript scope hoisting is broken</a> – much like my heart after watching my dad re-post yet another fake AI image of Peyton Manning hugging an old man on Facebook.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/owhkhwuw7ozkzniv/aHR0cHM6Ly93d3cucmVhY3R1bml2ZXJzZWNvbmYuY29tLz91dG1fY2FtcGFpZ249Ynl0ZXMmdXRtX21lZGl1bT1zcG9uc29yc2hpcCZ1dG1fc291cmNlPW1haWxpbmc=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708523">React Universe Conf is happening Sept 2-4</a> with 25+ speakers from Meta, Microsoft, Vercel, and others. You’ll learn about cutting edge advancements in React and React Native, participate in advanced-level workshops, and network with 600+ developers from all over the world. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kit Langton created <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/z2hgh7ue8wg4grfp/aHR0cHM6Ly9lZmZlY3Qua2l0bGFuZ3Rvbi5jb20v" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708524">Visual Effect</a> – a collection of interactive examples using TypeScript’s Effect library + React.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/p8hehqu4lxv3vltq/aHR0cHM6Ly9naXRodWIuY29tL2pvc2Rlam9uZy9qc29ucmVwYWly" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708525">jsonrepair</a> is a library that can repair invalid JSON documents. Because we all deserve to live in a world where <em>No <span role="img" aria-label="clapping hands">👏</span> JSON <span role="img" aria-label="clapping hands">👏</span> is <span role="img" aria-label="clapping hands">👏</span> invalid <span role="img" aria-label="clapping hands">👏</span>.</em></p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Mux Co-founder Matt McClure wrote about <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/x0hph3uel3grg7c5/aHR0cHM6Ly93d3cubXV4LmNvbS9ibG9nL211eC1tY3Av" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708526">the brand new Mux MCP</a>, which exposes Mux’s complete API through a self-documenting interface and allows AI agents to upload videos, generate thumbnails, add captions, access engagement data, and more wild stuff like that. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">John Dalziel dared to ask the question, <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/kkhmh2un3m7d7lbl/aHR0cHM6Ly9jb21wdXR1cy5vcmcvd2hlbi1jYW4taS11c2UtdGVtcG9yYWwv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708528">when can I use Temporal?</a> But unfortunately, the TC39 committee adds 6 months onto the wait time every time someone asks – so we’re now looking at December 2035. Thanks a lot, John.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Lydia Cho wrote about <a href="https://click.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/25h2h9u3ed5v54t3/aHR0cHM6Ly9zcGluLmF0b21pY29iamVjdC5jb20vbWFuYWdpbmctdGhlLXN0YXRlLW9mLXlvdXItcHJvbWlzZXMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708530">managing the state of your promises</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/qvh8h8ud0nx7xnul/aHR0cHM6Ly93d3cucmVhY3RuYXRpdmVjcm9zc3JvYWRzLmNvbS9wb3N0cy9pbnRyb2R1Y2luZy11bmlzdHlsZXMtMw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708531">React Native Unistyles 3.0</a> was just released, and it comes with selective updates, support for the new arch, and a majestic unicorn logo whose horn can pierce the sky.</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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/vqh3hmuodg5x6qfg/aHR0cHM6Ly9nby5jbGVyay5jb20vNGdTM0lQUA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1763708517">Clerk</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The <code style="font-size: 14px;">calculateTotal</code> method mutates the reference to the original data. This means that the original data is modified in place, which can lead to unexpected behavior. To fix this, you should create a new object in the <code style="font-size: 14px;">calculateTotal</code> method and return that instead of modifying the original data.
Here’s the corrected code:</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> mockAPIData <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 literal-property property" style="color: #12b5e5; font-size: 14px;">items</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 punctuation" style="color: #231F20; font-size: 14px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">id</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 literal-property property" style="color: #12b5e5; font-size: 14px;">price</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">100</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 literal-property property" style="color: #12b5e5; font-size: 14px;">id</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">price</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">200</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">DataCache</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</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;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache <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;">Map</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">key</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><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<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>key<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;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">set</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>key<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> mockAPIData<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> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">get</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>key<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;">calculateTotal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">data</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> newData <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 literal-property property" style="color: #12b5e5; font-size: 14px;">items</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> data<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">map</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">item</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 punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">...</span>item<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">price</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> item<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>price <span class="token operator" style="color: #12b5e5; font-size: 14px;">*</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1.2</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> newData<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;">const</span> cache <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;">DataCache</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;">const</span> data <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">getData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'products'</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> withTax <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> cache<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">calculateTotal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>data<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><span class="token string" style="color: #f99157; font-size: 14px;">'Before tax calculation:'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> data<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<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>price<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><span class="token string" style="color: #f99157; font-size: 14px;">'With tax:'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> withTax<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>items<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>price<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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/g3hnhwumkpvdvxcr/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1763708532">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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/9qhzhdudl97q74f9/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1763708533">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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/3ohphdu3nzwow0br/aHR0cHM6Ly91aS5kZXY=" url-id="1763708534">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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l/n2hohquvkrd8dqh6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1763708535">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/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/o8uqeqor33bqh64k7pduvhq2dg8rrfoh4g6l" alt="">
</body>
</html>