<!DOCTYPE html>
<html>
<head>
<title>Bytes: React Native's new era</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> Singing about transpilation errors in high school choir, force-feeding your brain CSS knowledge against its will, and celebrating <code style="font-size: 14px;">.com</code> hitting the big 4-0.</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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/wnh2h6uqx5noqvb7/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDM2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082012">#436</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/finn-irl.jpg" alt="Creepy, smiling figurine of Finn from Adventure Time" 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 your app is slow but you get to use React<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">React Native’s new era</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Earlier this month, the cross-platform gods at <del>Meta</del> The React Foundation blessed us with <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/reh8h9umw245mef2/aHR0cHM6Ly9yZWFjdG5hdGl2ZS5kZXYvYmxvZy8yMDI1LzEwLzA4L3JlYWN0LW5hdGl2ZS0wLjgy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082013">React Native 0.82</a> – the first release to run entirely on the New Architecture.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">New Arch is a <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/08hwhgu2gov727tl/aHR0cHM6Ly9yZWFjdG5hdGl2ZS5kZXYvYmxvZy8yMDI0LzEwLzIzL3RoZS1uZXctYXJjaGl0ZWN0dXJlLWlzLWhlcmU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082014">full rewrite</a> of all the major systems that underpin React Native, which the RN team has been working on for the past <em>seven years</em>. That’s almost 38 years in JavaScript time, so why did they spend so much time working on it?</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;">Quick review:</strong> The old architecture used an asynchronous bridge that enabled React Native to communicate with the native platform via serialized JSON messages. This created performance issues, which stemmed from too many JSON messages needing to go through a single communication channel (among other things).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">So, the React Native team decided to build a New Architecture from the ground up that now consists of three main parts:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A new native module system allows JavaScript and the native layer to synchronously communicate via a new C++ API. This removes the need to JSON-ify data.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A new concurrent rendering system supports more responsive UIs and can handle multiple progress trees across multiple threads.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A new event loop can now process tasks on the JavaScript thread in a well-defined order, allowing React to interrupt rendering to process higher-priority user events.</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> Now that React Native 0.82 has shipped the New Arch in all its glory, along with a “new evolution” of their Hermes JavaScript engine with some big perf upgrades, it might finally be time for us to retire the meme we used at the top of this story (and for like three other React Native stories in the past).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Like the old React Native bridge, it served its purpose, but I think we’re all ready to move on.</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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/8ghqh3uoq0z5ogtk/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM2" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1800082015"><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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/vqh3hmuoexlkopcg/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1800082016"><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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/l2heh6ul60ekllf6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9VGhlJTIwc2FnYSUyMG9mJTIwUmVhY3QlMjBOYXRpdmUlMjdzJTIwTmV3JTIwQXJjaGl0ZWN0dXJlJTIwaXMlMjBmaW5hbGx5JTIwY29tcGxldGUmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1800082017"><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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/m2h7h6u3mgvn3mum/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBVGhlJTIwc2FnYSUyMG9mJTIwUmVhY3QlMjBOYXRpdmUlMjdzJTIwTmV3JTIwQXJjaGl0ZWN0dXJlJTIwaXMlMjBmaW5hbGx5JTIwY29tcGxldGUlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM2JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1800082018"><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/coderabbit-logo.png" alt="CodeRabbit 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/staring-mustache.jpg" alt="Animated guy with mustache staring at other guy" 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;">Waiting for my manager to give me the code review he promised 3 weeks ago<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/dphehmue84v7e5hm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082019">CodeRabbit cuts your code review time (and bugs) in half</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It instantly gives you senior engineer-level feedback every time you submit a pull request, so you can catch more errors and ship faster.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here’s how it works:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">It gets full context of your entire codebase, so it can catch major vulnerabilities and nuanced issues</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">It gives you one-click fixes to help you clean up mistakes fast, along with PR summaries for more complex changes</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">It learns from your PRs over time, so the more you use it, the smarter it gets</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">CodeRabbit has reviewed more than 13 million PRs, is currently installed on 2 million repos, and is the #1 most-installed AI App on GitHub & GitLab.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/dphehmue84v7e5hm/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082019">Get a free trial for your team</a> – or use it free forever on open-source projects.</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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/e0hph0u7qp6n75a8/aHR0cHM6Ly90dXBsZS5hcHAvP3V0bV9jYW1wYWlnbj1ieXRlc19wcmVzZW50aW5nXzIwMjUxMDI3JnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082020">Tuple</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>Tired of dictating code changes token by token? <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/e0hph0u7qp6n75a8/aHR0cHM6Ly90dXBsZS5hcHAvP3V0bV9jYW1wYWlnbj1ieXRlc19wcmVzZW50aW5nXzIwMjUxMDI3JnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082020">Tuple</a> is the least frustrating way to collaborate on code remotely. Preferred by developers at Shopify, Figma, and Stripe.</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;">logPropertyUpdates</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">target</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;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Proxy</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>target<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;">set</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> value<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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 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;">Property "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>property<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">" changed to "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>value<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">"</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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> Reflect<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>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> value<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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 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> user <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">logPropertyUpdates</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;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Lew"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">details</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 literal-property property" style="color: #12b5e5; font-size: 14px;">age</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">24</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">country</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"USA"</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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Kareem"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>details<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>age <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">25</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;">Anil Dash wrote about how ChatGPT Atlas is <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/7qh7h2u9wkq49duz/aHR0cHM6Ly93d3cuYW5pbGRhc2guY29tLzIwMjUvMTAvMjIvYXRsYXMtYW50aS13ZWItYnJvd3Nlci8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082021">the first browser that actively fights against the web</a>. But besides that, I hear it’s great.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ahmad Shadeed created this <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/owhkhwuwgkp8wpuv/aHR0cHM6Ly9pc2hhZGVlZC5jb20vYXJ0aWNsZS9tb2Rlcm4tY3NzLXNlY3Rpb24tbGF5b3V0Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082022">Section Layout masterclass</a> as part of his never-ending mission to force you to actually learn CSS before you retire.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Auth0 created <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/z2hgh7uep4nde6tp/aHR0cHM6Ly9hdXRoMC5jb20vZmVhdHVyZXMvdG9rZW4tdmF1bHQ_dXRtX2NhbXBhaWduPWdsb2JhbF9tdWx0X211bHRfYWxsX2NpYW0tZGV2X2RnLXBsZ19hdXRoMF9uYXRpdmVfYnl0ZXNfbmV3c2xldHRlcl9hdWRfQnl0ZXMtU2Vjb25kYXJ5LVRva2VuVmF1bHRfdXRtMiZ1dG1faWQ9YU5LS1owMDAwMDAwNHZMNEFRJnV0bV9tZWRpdW09Y3BjJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082023">Token Vault</a> to manage all the complexities of obtaining, storing, and refreshing API tokens when building AI agents. So now you can connect your agents to external services like Google and GitHub, <em>without</em> handling sensitive creds or API keys. [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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/p8hehqu4g3m74otq/aHR0cHM6Ly9iaW9tZWpzLmRldi9ibG9nL2Jpb21lLXYyLTMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082024">Biome 2.3</a> now provides full support for Vue, Svelte, and Astro files, so you can now format and lint JavaScript and TypeScript files inside script tags when using these frameworks.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/x0hph3ue9ro7e6u5/aHR0cHM6Ly9naXRodWIuY29tL2xwaWwvZ2xlZXNjcmlwdA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082025">gleescript</a> lets you bundle your Gleam-on-Erlang project into a single executable file. It also lets you sing about transpilation errors to the tune of <em>Don’t Stop Believin’</em> like nobody’s watching.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Sentry created this <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/6qhehoulnkz2l8fo/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL2hvbGlkYXktZS1jb21tZXJjZS1jaGVja2xpc3QvP3V0bV9jYW1wYWlnbj1mcm9udGVuZC1meTI2cTMtZWNvbW1lcmNlZ3VpZGUmdXRtX2NvbnRlbnQ9bmV3c2xldHRlci1lY29tbS1ob2xpZGF5LWxlYXJubW9yZSZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082026">Ecomm Developer’s Survival Guide to Black Friday</a>, so you can have comprehensive error and performance monitoring setup <em>before</em> something breaks on Nov 28th. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Panphora wrote a quick comparison of <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/kkhmh2un6dr9nkcl/aHR0cHM6Ly9iYWNrYm9uZW5vdGJhZC5oeXBlcmNsYXkuY29tLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082027">React vs Backbone</a> to question how much progress we’ve actually made in the last 15 years. Was web dev really better back then, or were we all just younger and enjoying our non-receding hairlines?</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/58hvh8ugkvq9g6b6/aHR0cHM6Ly9hc3Ryby5idWlsZC9ibG9nL2FzdHJvLTUxNTAv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082028">Astro 5.15</a> introduces Netlify skew protection and new adapter APIs, while the Fonts API now supports granular font preload filtering.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tanner Linsley (Creator of TanStack) and Jamie Turner (CEO & Co-founder of Convex) are hosting a livestream tomorrow called <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/25h2h9u34v6o3qf3/aHR0cHM6Ly9sdW1hLmNvbS9lMTlmcGh2MA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082029">Let’s Start Something</a>. They’ll talk about recent shifts in platform boundaries for developers, how these changes affect modern app design, and what’s next for full-stack frameworks. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Abramov wrote about <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/qvh8h8udo7z6d3tl/aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9ob3ctdG8tZml4LWFueS1idWcv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082030">how to fix any bug</a>, except for the one that broke your heart.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Pete Millspaugh wrote this <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/g3hnhwum6drzmvfr/aHR0cHM6Ly93d3cuZG90Y29tLnByZXNzL2hpc3Rvcnktb2YtZG9tYWlucw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082031">brief history of domains</a> to celebrate <code style="font-size: 14px;">.com</code> turning 40. It still looks great for its age, but I heard that it’s been dual-wielding Ozempic and TRT for a while now.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Loren Stewart wrote about <a href="https://click.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/9qhzhdudzq02zks9/aHR0cHM6Ly93d3cubG9yZW5zdGV3LmFydC9ibG9nLzEwLWthbmJhbi1ib2FyZHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082032">building the same app 10 times to evaluate frameworks for mobile performance</a>. It’s like how I soft-launched 10 different Halloween costumes before finally deciding to go as the dead tapeworm in RFK Jr’s brain.</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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/e0hph0u7qp6n75a8/aHR0cHM6Ly90dXBsZS5hcHAvP3V0bV9jYW1wYWlnbj1ieXRlc19wcmVzZW50aW5nXzIwMjUxMDI3JnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1800082020">Tuple</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">ES6 Proxies are not recursive by default. In the above example, the <code style="font-size: 14px;">user</code> object is wrapped in a Proxy, but the <code style="font-size: 14px;">details</code> property is not. Therefore, when the <code style="font-size: 14px;">user.details.age</code> property is updated, the Proxy is not triggered.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">To fix this, we can make the Proxy recursive:</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">logPropertyUpdates</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">target</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 keyword" style="color: #f38ba3; font-size: 14px;">typeof</span> target <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> target <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>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Proxy</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>target<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;">get</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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> value <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> Reflect<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>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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 function" style="color: #9d7dce; font-size: 14px;">logPropertyUpdates</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>value<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;">set</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> value<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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 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;">Property "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>property<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">" changed to "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>value<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">"</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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> Reflect<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>target<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> property<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> value<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> receiver<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 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> target<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> user <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">logPropertyUpdates</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;">name</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Lew"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">details</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 literal-property property" style="color: #12b5e5; font-size: 14px;">age</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token number" style="color: #fcba28; font-size: 14px;">24</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 14px;">country</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token string" style="color: #f99157; font-size: 14px;">"USA"</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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token string" style="color: #f99157; font-size: 14px;">"Kareem"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
user<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>details<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>age <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">25</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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/3ohphdu34o0d4oar/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1800082033">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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/n2hohquv68mo6xf6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1800082034">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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/48hvh7um65v269fx/aHR0cHM6Ly91aS5kZXY=" url-id="1800082035">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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26/wnh2h6uqx5noxvc7/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1800082036">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/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/r8u3l3erqqhoh3wld4eb2hdevlm66s7h4n26" alt="">
</body>
</html>