<!DOCTYPE html>
<html>
<head>
<title>Bytes: TanStack dominance intensifies</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 16px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> Becoming a Silicon Valley insider, erotic Erlang, and a JavaScript engine zoo.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/6qhehouln86lv5bo/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDQx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585474">#441</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/spy-kids-robot.jpg" alt="Spy Kids robot villain guy walking through a city" 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;">You'll all bow to TanStack eventually<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">TanStack dominance intensifies</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">TanStack just hit <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/kkhmh2un602ngecl/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3Bvc3RzL3Rhbm5lcmxpbnNsZXlfNC1iaWxsaW9uLWRvd25sb2Fkcy1hY3Rpdml0eS03Mzk0Mjc0MDIxMTUzODQ5MzQ0LXJnNVQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585475">4 <em>billion</em> total npm downloads</a> across all of its open-source projects – which means that statistically speaking, Tanner Linsley is more famous than Glen Powell now. It’s simple math.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And the Tan train isn’t slowing down any time soon. They just released <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/58hvh8ugkdogpob6/aHR0cHM6Ly90YW5zdGFjay5jb20vYmxvZy90YW5zdGFjay1kYi0wLjUtcXVlcnktZHJpdmVuLXN5bmM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585476">TanStack DB 0.5</a> on Tuesday and introduced a unique new feature called Query-Driven Sync, which makes your component’s query the API call. No custom endpoints, no GraphQL resolvers, and no backend changes.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The pitch is to “just write your query and TanStack DB figures out exactly what to fetch.” Here’s what that means in practice:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Pure queries over data</strong> – Similar to how React made components a pure function of state with <code style="font-size: 14px;">UI = f(state)</code>, it brings the same philosophy to data with <code style="font-size: 14px;">view = query(collections)</code>. Just describe the data you need and it handles all the fetching, caching, and updating by recomputing queries whenever the underlying data changes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Live queries that compute themselves</strong> – TanStack DB turns your <code style="font-size: 14px;">where</code>, <code style="font-size: 14px;">join</code>, <code style="font-size: 14px;">orderBy</code>, and <code style="font-size: 14px;">limit</code> clauses into expression trees powered by differential dataflow. That lets it incrementally compute exactly which records need to load or reload, and generate the minimal network calls required to keep your query up to date.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Three sync modes that scale</strong> – <code style="font-size: 14px;">Eager mode</code> loads everything up front, <code style="font-size: 14px;">On-demand mode</code> loads only what your queries request, and <code style="font-size: 14px;">Progressive mode</code> gives you a fast first paint while syncing the full dataset in the background. This lets you scale from 1,000 rows to over 100k without changing any 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> Query-Driven Sync promises to “fundamentally change how you think about loading data,” and it <em>could</em> become the killer feature that eventually convinces millions of developers to give TanStack DB a try.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">I can’t wait to watch Tanner star in <em>Twistersss 3.</em></p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/25h2h9u34p03rec3/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQx" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1805585477"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/qvh8h8udom2dg6ul/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1805585478"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/9qhzhdudzv3dkpf9/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwJTQwdGFuX3N0YWNrJTIwREIlMjAwLjUlMjBhbmQlMjB0aGUlMjBRdWVyeS1Ecml2ZW4lMjBTeW5jJTIwcmV2b2x1dGlvbiZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ0MQ==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1805585480"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/3ohphdu3459363hr/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwJTQwdGFuX3N0YWNrJTIwREIlMjAwLjUlMjBhbmQlMjB0aGUlMjBRdWVyeS1Ecml2ZW4lMjBTeW5jJTIwcmV2b2x1dGlvbiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDEmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1805585481"><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/sentry-logo.png" alt="Sentry 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/pedro-plankton.jpg" alt="Plankton from SpongeBob with Pedro Pascal's thinking face" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Me pretending to read the logs when my app crashes<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/n2hohquv695vw6b6/aHR0cHM6Ly9zZW50cnkuaW8vcHJvZHVjdC9sb2dzLz91dG1fY2FtcGFpZ249bG9ncy1meTI2cTQtbG9nc2xhdW5jaCZ1dG1fY29udGVudD1uZXdzbGV0dGVyLW1haW4tc3BvbnNvci1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585482">Sentry made logs finally useful</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Logs <em>seem</em> like a great idea in theory – but in most real apps, they’re noisy, expensive, and unhelpful (the unholy trifecta).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Sentry finally did something about that by creating structured logs that are tightly connected to your <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/48hvh7um6dqmzgbx/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9sb2dzLWdlbmVyYWxseS1hdmFpbGFibGUvP3V0bV9jYW1wYWlnbj1sb2dzLWZ5MjZxNC1sb2dzbGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItbWFpbi1zcG9uc29yLWxlYXJubW9yZSZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585483">issues, traces, and code</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That way, you can see what happened and <em>why</em> it happened without switching tools or losing context:</p>
<ul>
<li>See the logs behind a bad deploy or dropped webhook right from the issue</li>
<li>Spot silent failures with trace-connected logs</li>
<li>Search structured logs by real metadata, instead of raw string hopes and dreams</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/wnh2h6uqx2vq98f7/aHR0cHM6Ly9kb2NzLnNlbnRyeS5pby9wcm9kdWN0L2V4cGxvcmUvbG9ncy8_dXRtX2NhbXBhaWduPWxvZ3MtZnkyNnE0LWxvZ3NsYXVuY2gmdXRtX2NvbnRlbnQ9bmV3c2xldHRlci1tYWluLXNwb25zb3ItbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585484">Check out the docs</a> to see how it works.</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;">Presented by <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/reh8h9umwlvm9ku2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585485">Meticulous</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>Meticulous generates and maintains an exhaustive suite of <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/reh8h9umwlvm9ku2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585485">e2e UI tests</a> that covers every edge case of your web app. See why CTOs at Dropbox, Notion and Wiz rely on them.</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> newsletter <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Bytes"</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> tagline <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Your weekly dose of JavaScript"</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>newsletter<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tagline<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;">forEach</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;">el</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>el<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;">Meta software engineer, Melissa Liu wrote an <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/08hwhgu2g6w20vhl/aHR0cHM6Ly9lbmdpbmVlcmluZy5mYi5jb20vMjAyNS8xMS8xMS93ZWIvc3R5bGV4LWEtc3R5bGluZy1saWJyYXJ5LWZvci1jc3MtYXQtc2NhbGUv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585486">insider’s guide to Meta’s StyleX styling system</a>. So now you can <em>finally</em> feel like a Silicon Valley insider – just not the kind who ends up on flight logs with Peter Thiel and you-know-who.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Manoj Vivek wrote about <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/8ghqh3uoq6poedfk/aHR0cHM6Ly93d3cucG9sYXJzaWduYWxzLmNvbS9ibG9nL3Bvc3RzLzIwMjUvMTEvMDQvamF2YXNjcmlwdC1zb3VyY2UtbWFwcy1pbnRlcm5hbHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585487">the inner workings of JavaScript source maps</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Bora Gönül wrote a <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/vqh3hmuoe93o2rtg/aHR0cHM6Ly9ib3JhZ29udWwuY29tL3Bvc3QvZmFsbGluZy1pbi1sb3ZlLXdpdGgtZXJsYW5n" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585488">love letter to Erlang</a>. I wouldn’t say it was erotic, but I also wouldn’t say it’s <em>not</em> erotic.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Molisha Shah wrote about <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/l2heh6ul6mvl59c6/aHR0cHM6Ly9mYW5kZi5jby8zTFQ5TTdC" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585489">10 AI tactics that actually end context switching for full-stack engineers</a> – and how Augment Code is uniquely built to do that with a 200k-token context engine and persistent memory architecture. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/m2h7h6u3m603k6hm/aHR0cHM6Ly9pdmFua3JhLmdpdGh1Yi5pby9qYXZhc2NyaXB0LXpvby8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585490">JavaScript engines zoo</a> lets you compare over 100 JavaScript engines by performance and learn more about each one.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Speaking of which, Andy Wingo wrote about <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/dphehmue89wezlhm/aHR0cHM6Ly93aW5nb2xvZy5vcmcvYXJjaGl2ZXMvMjAyNS8xMS8xMy90aGUtbGFzdC1jb3VwbGUteWVhcnMtaW4tdjhzLWdhcmJhZ2UtY29sbGVjdG9y" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585491">the last couple years in v8’s garbage collector</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ian Macartney wrote a deep dive on <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/e0hph0u7q3w79ri8/aHR0cHM6Ly9zdGFjay5jb252ZXguZGV2L2F1dGhvcml6YXRpb24=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585492">authorization in practice</a> that explains all the different approaches and the tradeoffs of each one. Most importantly, it’ll help you understand how it’s different from <em>authentication.</em> [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/7qh7h2u9w2p9vxsz/aHR0cHM6Ly9naXRodWIuY29tL3RtaWtvdi9pbWd1aS1yZWFjdC1ydW50aW1l" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585493">imgui-react-runtime</a> is an experimental React runtime for Dear ImGui that uses Static Hermes to let you write interfaces with React’s component model, hooks, JSX, event handling, and a bunch of other stuff the Remix team probably hates.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Nicolas Charpentier wrote an interactive blog post called <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/owhkhwuwgmlw3efv/aHR0cHM6Ly93d3cuY2hhcnBlbmkuY29tL2Jsb2cvZG9udC1ibGluZGx5LXVzZS11c2V0cmFuc2l0aW9uLWV2ZXJ5d2hlcmU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585494">Don’t blindly use <code style="font-size: 14px;">useTransition</code> everywhere</a>, but Nicolas is not my mom so I technically don’t have to listen to him if I don’t want to.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/p8hehqu4gw543kiq/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2JpdHMmdXRtX2NvbnRlbnQ9bm92MTQmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585496">CarbonQA</a> provides high-quality QA services for dev teams, so you’ll never have to waste time testing your own app again. Their US-based testers work in your tools, talk with your team on Slack, and let your devs spend their time building real features. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Emil Kowalski shared <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/x0hph3ue9vderru5/aHR0cHM6Ly9lbWlsa293YWwuc2tpL3VpLzctcHJhY3RpY2FsLWFuaW1hdGlvbi10aXBz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585497">7 simple animation ideas</a> to help you improve your animations without needing to fully sell your soul to the dark lord of animations.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/6qhehouln86lk5io/aHR0cHM6Ly9ibG9nLmZsdXR0ZXIuZGV2L2Fubm91bmNpbmctZmx1dHRlci0zLTM4LWRhcnQtMy0xMC1idWlsZGluZy10aGUtZnV0dXJlLW9mLWFwcHMtNTAzNDI5ZWViNjg1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585498">Flutter 3.38 and Dart 3.10 are now available</a>, and the team says “they are HOT.” I’m not 100% sure what that means, so you might want to put your terminal in Incognito Mode just in case.</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug: Solution</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/reh8h9umwlvm9ku2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1805585485">Meticulous</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;">const</span> newsletter <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Bytes"</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> tagline <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Your weekly dose of JavaScript"</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>newsletter<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tagline<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;">forEach</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;">el</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>el<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;">You might be surprised to learn that this code doesn’t execute. If you try, you’ll get an error – <code style="font-size: 14px;">Uncaught ReferenceError: tagline is not defined</code>. But clearly it is, right? Wrongo.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This is the <em>very</em> rare scenario where not using semicolons can bite you. Because we have a string followed by <em>no</em> semicolon followed by an opening array bracket, JavaScript interprets our code like this, as if we’re trying to access elements from the string.</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 string" style="color: #f99157; font-size: 14px;">"Your weekly dose of JavaScript"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>newsletter<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tagline<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;">forEach</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;">This, of course, throws an error because tagline isn’t defined. To fix this, add a <code style="font-size: 14px;">+</code> sign before the array.</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> newsletter <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Bytes"</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> tagline <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Your weekly dose of JavaScript"</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>newsletter<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tagline<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;">forEach</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;">el</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>el<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;">That’s <em>mostly</em> a joke, but it does work…</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Instead, just use semicolons.</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> newsletter <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Bytes"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> tagline <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Your weekly dose of JavaScript"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>newsletter<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tagline<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;">forEach</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;">el</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>el<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>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/kkhmh2un602ndeil/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1805585499">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/58hvh8ugkdogvoc6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1805585500">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/25h2h9u34p03vei3/aHR0cHM6Ly91aS5kZXY=" url-id="1805585501">ui.dev</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://click.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96/qvh8h8udom2d76al/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1805585502">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://unsubscribe.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/qdux3x7pqqb7h4nd82kilh82dzdkki4hpe96" alt="">
</body>
</html>