<!DOCTYPE html>
<html>
<head>
<title>Bytes: React Conf Rapid Fire</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> React Native’s 10th birthday, Vite’s first documentary, and the poison pill for LLMs (and Redditors).</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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/m2h7h6u33385x0um/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDMx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696148">#431</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/hotdog-guy.jpg" alt="A guy holding a hot dog with text that says, bad news for hot dogs, I woke up" 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 but for React updates<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">React Conf Rapid Fire</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">I get it. You have a “life” and a “real job” and “people that care about you” – so you probably didn’t want to spend 17 hours and 18 minutes watching every second of React Conf over the past two days. That’s what you’re paying me for.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But despite the unprecedented levels of React yapping, this year’s React Conf didn’t pack quite as much drama as you might guess. React 19.2 had already dropped last week, and most of the other announcements had already been in the works for months.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This conf felt more like a culmination of long-term initiatives than a bunch of bombshell releases, with a few nice surprises sprinkled in. Here’s a speedrun of the biggest announcements from the React side. We’ll save React Native for another day to keep things moving.</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;">React Compiler hits v1.0</strong> – The build-time tool that auto-memoizes your React code is now <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/dphehmueee06xmcm/aHR0cHM6Ly9yZWFjdC5kZXYvYmxvZy8yMDI1LzEwLzA3L3JlYWN0LWNvbXBpbGVyLTE=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696149">fully stable</a> and ready to speed up your initial loads and navigations. It’s still implemented as a Babel plugin for now, but is “largely decoupled” from Babel and can even memoize values <em>conditionally</em> (which isn’t possible through manual memoization).</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;"><code style="font-size: 14px;"><ViewTransition /></code> API (Canary)</strong> – Lets you <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/e0hph0u7770vznt8/aHR0cHM6Ly9yZWFjdC5kZXYvcmVmZXJlbmNlL3JlYWN0L1ZpZXdUcmFuc2l0aW9u" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696150">animate elements</a> that change inside a transition, without any janky re-renders. Think of it like the browser-native version of Framer Motion for route updates that’s built right into React.</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;">Fragment refs (Canary)</strong> – A relatively minor but long-requested change that lets you attach refs directly to Fragments instead of awkwardly wrapping things in <code style="font-size: 14px;"><div></code>s. Praise Kier.</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;">React Foundation</strong> – Meta is officially <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/7qh7h2u999ole0tz/aHR0cHM6Ly9yZWFjdC5kZXYvYmxvZy8yMDI1LzEwLzA3L2ludHJvZHVjaW5nLXRoZS1yZWFjdC1mb3VuZGF0aW9u" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696151">handing over the keys</a> to a new nonprofit that’s hosted under the Linux Foundation. It’ll be funded and stewarded by Vercel, Meta, Callstack, Microsoft, and others to provide an independent home and governance model that should outlive any one company’s roadmap.</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;">Bottom Line:</strong> Love it or hate it, React’s place in the web dev ecosystem is arguably stronger than it’s ever been. And as LLMs increasingly treat it as the default JavaScript framework, it’s probably a smart move for the React team to prioritize longterm stability like this.</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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/owhkhwuwwwr9ersv/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDMx" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1794696152"><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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/z2hgh7ueee36zehp/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1794696153"><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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/p8hehqu444z6eghq/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9RXZlcnl0aGluZyUyMHdvcnRoJTIwa25vd2luZyUyMGFib3V0JTIwUmVhY3QlMjBDb25mJTIwMjAyNSUyMHRoYXQlMjBpc24lMjd0JTIwUmVhY3QlMjBOYXRpdmUmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1794696154"><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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/x0hph3ueeew2m3i5/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBRXZlcnl0aGluZyUyMHdvcnRoJTIwa25vd2luZyUyMGFib3V0JTIwUmVhY3QlMjBDb25mJTIwMjAyNSUyMHRoYXQlMjBpc24lMjd0JTIwUmVhY3QlMjBOYXRpdmUlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDMxJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1794696155"><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/wanda-buffering.jpg" alt="Wanda from Wandavision with the buffering sign" 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;">My manager pretending to read my PR<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/6qhehoulll7r40fo/aHR0cHM6Ly9zZW50cnkuaW8vcHJvZHVjdC9haS1jb2RlLXJldmlldy8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTMtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktY29kZS1yZXZpZXctYmV0YS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696156">Sentry’s new AI Code Review catches bugs before they hit prod</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It reads your code, commit history, and error data to tell you exactly what’s about to break (and how to fix it) before you merge.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They’re hosting a <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/kkhmh2unnnlwpzhl/aHR0cHM6Ly9sdW1hLmNvbS9rMm5wNGh0ag==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696157">free workshop</a> next Tuesday to walk through exactly how it works, but here’s a quick preview:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Predicts errors</strong> – Uses your real Sentry data to spot issues and suggest fixes before they reach prod (<a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/58hvh8ugggmxwqa6/aHR0cHM6Ly9kb2NzLnNlbnRyeS5pby9wcm9kdWN0L2FpLWluLXNlbnRyeS9haS1jb2RlLXJldmlldy8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTMtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktY29kZS1yZXZpZXctYmV0YS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696158">see the docs</a>).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Gives instant PR feedback</strong> – Flags typos, logic issues, and other nits right in your PR.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Writes tests for you</strong> – Maps your repo and spins up runnable tests in a separate branch.</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.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/kkhmh2unnnlwpzhl/aHR0cHM6Ly9sdW1hLmNvbS9rMm5wNGh0ag==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696157">RSVP for the workshop</a> – and try out AI Code Review for free during the <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/6qhehoulll7r40fo/aHR0cHM6Ly9zZW50cnkuaW8vcHJvZHVjdC9haS1jb2RlLXJldmlldy8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTMtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYWktY29kZS1yZXZpZXctYmV0YS1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696156">open beta</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="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.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/25h2h9u33329x9f3/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696159">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 maintain an exhaustive suite of <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/25h2h9u33329x9f3/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696159">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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">processUserData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">userId<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> options <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><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 string" style="color: #f99157; font-size: 14px;">"use strict"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">User ID: </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>userId<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">\n</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>includeEmail<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Email: user@example.com\n"</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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>includeAge<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Age: 25\n"</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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>verbose<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Processing mode: Verbose\n"</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> processedData<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> userData <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">processUserData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">12345</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;">includeEmail</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">verbose</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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>
<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;">CultRepo’s new <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/qvh8h8udddrw3ptl/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1ibVdRcUFLTGdUNA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696160">Vite documentary</a> just dropped, and I must say that all of the love scenes were very tastefully done.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tuple created the <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/g3hnhwummm3925ar/aHR0cHM6Ly90dXBsZS5hcHAvbC9wYWlyLXByb2dyYW1taW5nP3V0bV9jYW1wYWlnbj1ieXRlc19zZWNvbmRhcnlfMjAyNTEwMDkmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696161">screen sharing tool for developers</a> that Shopify, Stripe, and Tailwind use for pair programming, getting unblocked, and making technical decisions. Shared control by default, intuitive annotations, and no persistent UI elements that block the IDE. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">React Native turned 10 years old and celebrated at React Conf by releasing <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/9qhzhdudddpw8vs9/aHR0cHM6Ly9yZWFjdG5hdGl2ZS5kZXYvYmxvZy8yMDI1LzEwLzA4L3JlYWN0LW5hdGl2ZS0wLjgy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696162">React Native 0.82</a>, which ends support for the old architecture and introduces DOM Node APIs. It was a lot like my 10th birthday, just with less cigarettes and more father figures present.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/3ohphdu3337m8ear/aHR0cHM6Ly9uZXh0anMub3JnL2Jsb2cvbmV4dC0xNi1iZXRh" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696163">Next.js 16 beta</a> came out yesterday, because the triangle mafia couldn’t wait to upstage all the React Native speakers.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/n2hohquvvv3q47t6/aHR0cHM6Ly9idW4uY29tL2Jsb2cvYnVuLXYxLjM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696164">Bun v1.3</a> just dropped today and it’s their “biggest release yet.” My eyes are still glazed over from running the React Conf marathon, but we’ll dig into this next week.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/48hvh7ummmrl37ix/aHR0cHM6Ly9naXRodWIuY29tL3NpbmRyZXNvcmh1cy9jc3MtZXh0cmFz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696165">css-extras</a> is a WIP collection of CSS custom functions that leverage the new native CSS <code style="font-size: 14px;">@function</code> rule.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Convex just released this <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/wnh2h6uqqqw7dds7/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvcXVpY2tzdGFydC90YW5zdGFjay1zdGFydA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696166">TanStack Start Quickstart</a> page in their docs to help you get setup quickly with Convex and TanStack Start v1.0 – the new React framework that all the kids are talking about. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kix Panganiban wrote a quick post about <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/reh8h9ummm0dp8t2/aHR0cHM6Ly9raXguZGV2L3R3by10aGluZ3MtbGxtLWNvZGluZy1hZ2VudHMtYXJlLXN0aWxsLWJhZC1hdC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696167">two things LLM coding agents are still bad at</a>. Without looking, I’m going to guess they’re referring to</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Chun Fei Lung wrote about how <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/08hwhgu222de80hl/aHR0cHM6Ly9jaHVuaXZlcnNpdGVpdC5ubC9wYXBlcnMvc3ZlbHRlLWlzLWZhc3Q=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696168">Svelte really is that fast</a>. I think it’s because they used the Svelte Runes to cast a speed spell.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">CarbonQA provides <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/8ghqh3uooold40ak/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2JpdHMmdXRtX2NvbnRlbnQ9b2N0MTAmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696169">high-quality QA services for dev teams</a>, so your engineers will never have to waste time doing QA ever again. Their US-based testers work directly 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;">Yasmin Teles wrote this <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/vqh3hmuooop05vbg/aHR0cHM6Ly95YXNtaW50ZWxlcy5jb20vYmxvZy9naXQtc3Vydml2YWwta2l0LWVzc2VudGlhbC1jb21tYW5kcy1mb3ItdHJvdWJsZWQtdGltZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696170">Git Survival Kit</a> to give us essential commands for our troubled times.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Anthropic wrote a pretty interesting paper on how <a href="https://click.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3/l2heh6ulll32g4h6/aHR0cHM6Ly93d3cuYW50aHJvcGljLmNvbS9yZXNlYXJjaC9zbWFsbC1zYW1wbGVzLXBvaXNvbg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696171">a small number of samples can poison LLMs of any size</a>. It’s similar to the paper I’m writing about how a small number of neck-beards on Reddit already have poisoned LLMs of various sizes.</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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/25h2h9u33329x9f3/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXByZXNlbnRpbmcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1794696159">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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">processUserData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">userId<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> options</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 string" style="color: #f99157; font-size: 14px;">"use strict"</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 keyword" style="color: #f38ba3; font-size: 14px;">typeof</span> options <span class="token operator" style="color: #12b5e5; font-size: 14px;">!==</span> <span class="token string" style="color: #f99157; font-size: 14px;">"object"</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">||</span> options <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">null</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
options <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 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;">let</span> processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">User ID: </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>userId<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">\n</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>includeEmail<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Email: user@example.com\n"</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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>includeAge<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Age: 25\n"</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>options<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>verbose<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
processedData <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Processing mode: Verbose\n"</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> processedData<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> userData <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">processUserData</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">12345</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;">includeEmail</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">verbose</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token boolean" style="color: #9d7dce; font-size: 14px;">true</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>
<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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/m2h7h6u33385r0am/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1794696172">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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/dphehmueee063mim/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1794696173">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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/e0hph0u7770vxnu8/aHR0cHM6Ly91aS5kZXY=" url-id="1794696174">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/27uepe0gddioh840ov3i3hgq5n744hghm2v3/7qh7h2u999olg0uz/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1794696175">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/27uepe0gddioh840ov3i3hgq5n744hghm2v3">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/27uepe0gddioh840ov3i3hgq5n744hghm2v3" alt="">
</body>
</html>