<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/tsa-puppet.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/atlassian-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/coffee-eyes.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/content/spot-the-bug.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: Making React Native actually native</title>
<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> Reblogging left-pad, the most illegal REPL, and getting fair compensation from Drizzle.</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/8ghqh3uozvvznnuk/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDY3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287184">#467</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/tsa-puppet.jpg" alt="TSA agent about to full body search a puppet" 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;">iOS devs checking if an app is *native* native<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Making React Native actually native</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">For years, the biggest compliment you could give a React Native app was to say it feels “basically native.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That eventually turned into a subtle diss from the mobile dev <del>masochists</del> purists, but last week’s <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/l2heh6ule99e7mh6/aHR0cHM6Ly9leHBvLmRldi9jaGFuZ2Vsb2cvc2RrLTU1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287186">SDK 55</a> comes with the stated goal of making React Native apps feel <em>actually</em> native and indistinguishable from apps built with Swift or Kotlin.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s a high bar, but here’s how they’re doing it:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Expo UI gets serious</strong> – The <code style="font-size: 14px;">@expo/ui</code> library now lets you use real SwiftUI and Jetpack Compose components directly from JavaScript. The Compose API graduated from alpha to beta with lots of new Material 3 components, and the SwiftUI component APIs were renamed to match SwiftUI conventions 1:1.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">More native features in <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/dphehmuevggvnpum/aHR0cHM6Ly9leHBvLmRldi9ibG9nL2V4cG8tcm91dGVyLXY1NS1tb3JlLW5hdGl2ZS1uYXZpZ2F0aW9uLW1vcmUtcG93ZXJmdWwtd2Vi" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287188">Expo Router v55</a></strong> – A new Apple Zoom transition brings shared element transitions via the native iOS zoom gesture, and a new <code style="font-size: 14px;">Stack.Toolbar</code> API gives you declarative control over <code style="font-size: 14px;">UIToolbar</code> on iOS. There’s also a new Colors API for dynamic Material 3 styles on Android and adaptive colors on iOS.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;"><code style="font-size: 14px;">expo-widgets</code> for iOS (alpha)</strong> – Lets you build iOS home screen widgets and Live Activities using just Expo UI components with zero native code. It also gives you JS API based on shared objects for creating widget timelines, live activity management, and more.</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> “Basically native” has already been good enough for thousands of Expo apps, but SDK 55 closes the gap to the point where even the most pretentious Swift developers won’t be able to tell the difference.</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/e0hph0u76gg6odu8/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDY3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1837287189"><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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/7qh7h2u9q77q5euz/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0Njc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1837287190"><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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/owhkhwuwpvvpdzhv/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9RGl2aW5nJTIwaW50byUyMHRoZSUyMHNlY3JldCUyMHNhdWNlJTIwdGhhdCUyMG1ha2VzJTIwUmVhY3QlMjBOYXRpdmUlMjBmZWVsJTIwbW9yZSUyMG5hdGl2ZSUyMHRoYW4lMjBldmVyJTIwd2l0aCUyMCU0MGV4cG8lMjBTREslMjA1NSZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ2Nw==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1837287191"><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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/z2hgh7uenvvnv9hp/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBRGl2aW5nJTIwaW50byUyMHRoZSUyMHNlY3JldCUyMHNhdWNlJTIwdGhhdCUyMG1ha2VzJTIwUmVhY3QlMjBOYXRpdmUlMjBmZWVsJTIwbW9yZSUyMG5hdGl2ZSUyMHRoYW4lMjBldmVyJTIwd2l0aCUyMCU0MGV4cG8lMjBTREslMjA1NSUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0Njcmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1837287192"><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/atlassian-logo.png" alt="Atlassian 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/coffee-eyes.jpg" alt="Wide eyed guy looking at coffee cup" 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;">Watching your agent hallucinate a whole new sprint<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/p8hehqu4m00m03iq/aHR0cHM6Ly9mYW5kZi5jby80Y1RBQWpH" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287193">Rovo Dev helps you automate the tedious stuff</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Atlassian designed their AI agent, <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/p8hehqu4m00m03iq/aHR0cHM6Ly9mYW5kZi5jby80Y1RBQWpH" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287193">Rovo Dev</a> to carry full Atlassian context into all the places you already work - like your terminal, IDE, GitHub and more.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That means you can use it to:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Plan, generate, and review code without context switching - including multi-file implementations, config changes, and migrations</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kick off code plans directly from Jira, and plug into Bitbucket and GitHub for review</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Enforce org-level standards across all repos with customizable reviews</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/p8hehqu4m00m03iq/aHR0cHM6Ly9mYW5kZi5jby80Y1RBQWpH" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287193">Try it out for free</a> – and stay in flow across your entire SDLC with Rovo Dev.</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/x0hph3ueo66o6pi5/aHR0cHM6Ly9nby5jbGVyay5jb20vcXZsWFA3Zw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287194">Clerk</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>Most coding agents suck at auth. <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/x0hph3ueo66o6pi5/aHR0cHM6Ly9nby5jbGVyay5jb20vcXZsWFA3Zw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287194"><code style="font-size: 14px;">clerk/skills</code></a> fixes that, so your agent can handle everything from basic Next.js auth to complex custom flows and user sync.</em></p>
</div>
</div>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">fetchPokemon</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">async</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">id</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> response <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fetch</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;">https://pokeapi.co/api/v2/pokemon/</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>id<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span>response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>ok<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;">throw</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Error</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;">Network response was not ok: </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>statusText<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> data <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">json</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> data<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">getStarterPokemon</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> ids <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> pokemon <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>
ids<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 keyword" style="color: #f38ba3; font-size: 14px;">async</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">id</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fetchPokemon</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>id<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
pokemon<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>result<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token 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> pokemon
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getStarterPokemon</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;"><a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/6qhehoulzggzgwho/aHR0cHM6Ly9idW4uY29tL2Jsb2cvYnVuLXYxLjMuMTA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287195">Bun v1.3.10</a> comes with a new native REPL that’s written in Zig and is officially illegal in all US states and territories.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Convex CEO, Jamie Turner wrote about <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/kkhmh2unrqqrq2ul/aHR0cHM6Ly9zdGFjay5jb252ZXguZGV2L29uLWNvbXBldGl0aXZlLWJlbmNobWFya3M=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287196">why he doesn’t care about database benchmarks</a> (and neither should you). [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jakub and Hassan wrote a <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/dphehmuevggvnpum/aHR0cHM6Ly9leHBvLmRldi9ibG9nL2V4cG8tcm91dGVyLXY1NS1tb3JlLW5hdGl2ZS1uYXZpZ2F0aW9uLW1vcmUtcG93ZXJmdWwtd2Vi" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287188">deeper dive on Expo Router v55</a> and how it provides more native navigation and more powerful web features.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/58hvh8ugq88q8zh6/aHR0cHM6Ly9naXRodWIuY29tL3NvbGlkanMvc29saWQvcmVsZWFzZXMvdGFnL3YyLjAuMC1iZXRhLjA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287197">Solid.js v2.0 beta</a> makes async first class, turns pending UI into an expression, and can make all your student loans disappear if you forward this email to six people before midnight.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Only idiots write manual tests – modern engineering teams like Notion, Dropbox and LaunchDarkly use Meticulous to maintain e2e UI tests that <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/25h2h9u36zz6zoh3/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXNlY29uZGFyeSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287198">cover every edge case</a> of your web app. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Chrome’s new <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/qvh8h8udz55z58ul/aHR0cHM6Ly9kZXZlbG9wZXIuY2hyb21lLmNvbS9ibG9nL3dlYm1jcC1lcHA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287199">WebMCP</a> is available for early preview. It brings two new APIs that allow browser agents to take action in HTML forms and complex JavaScript execution.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/g3hnhwumr55r53hr/aHR0cHM6Ly9ucG14LmRldi9ibG9nL2FscGhhLXJlbGVhc2U=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287200">npmx</a> just launched the first alpha of their “fast, modern browser for the npm registry” with social features. I’m gonna reblog <code style="font-size: 14px;">left-pad</code> so hard.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Shayon Mukherjee shared a deep dive on <a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/9qhzhdud0mm0mdf9/aHR0cHM6Ly93d3cuc2hheW9uLmRldi9wb3N0LzIwMjYvNTIvbGV0cy1kaXNjdXNzLXNhbmRib3gtaXNvbGF0aW9uLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287201">sandbox isolation</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/3ohphdu30ll0l4tr/aHR0cHM6Ly9wbGFuZXRzY2FsZS5jb20vYmxvZy9kcml6emxlLWpvaW5zLXBsYW5ldHNjYWxl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287202">PlanetScale just bought Drizzle</a> <span role="img" aria-label="money-mouth face">🤑</span>. And as someone who has written at least one newsletter story about the project, my disbarred lawyer uncle has informed me that I should be legally entitled to some compensation here.</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/x0hph3ueo66o6pi5/aHR0cHM6Ly9nby5jbGVyay5jb20vcXZsWFA3Zw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1837287194">Clerk</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><code style="font-size: 14px;">await</code>-ing inside of a <code style="font-size: 14px;">forEach</code> will only end in pain. There are a few different ways to fix this, but here’s one using a <code style="font-size: 14px;">for of</code> loop.</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">fetchPokemon</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">async</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">id</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> response <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fetch</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;">https://pokeapi.co/api/v2/pokemon/</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>id<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">!</span>response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>ok<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;">throw</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Error</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;">Network response was not ok: </span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>statusText<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> data <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> response<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">json</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> data<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">getStarterPokemon</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">async</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> ids <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">3</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> pokemon <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 keyword" style="color: #f38ba3; font-size: 14px;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> id <span class="token keyword" style="color: #f38ba3; font-size: 14px;">of</span> ids<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> result <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fetchPokemon</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>id<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
pokemon<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">push</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>result<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token 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> pokemon
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">await</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">getStarterPokemon</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/n2hohquvmppmpri6/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1837287203">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/48hvh7umveevektx/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1837287204">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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/wnh2h6uqnppnpmf7/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1837287205">Fireship</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://c5e21242.click.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6/reh8h9um4rr4r4s2/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1837287206">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://c5e21242.unsubscribe.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/mvu0g06rqqb5hq5gvrkamhr26vz00t3hekq6" alt="">
</body>
</html>