Email: Bytes: A tale of two Reacts

Subject:
Bytes: A tale of two Reacts
Received:
12/13/2025, 2:57:11 PM
From:
"Tyler from ui.dev" <tyler@ui.dev>
To:
desert.legend.57@rss.andrealin.it
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Bytes: A tale of two Reacts&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;meta name="color-scheme" content="light dark"&gt;
&lt;meta name="supported-color-schemes" content="light dark"&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Outfit:wght@400;500;700;900&amp;family=Paytone+One" rel="stylesheet"&gt;
&lt;style&gt;@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;
  }
}&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;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%;"&gt;&lt;tbody&gt;&lt;tr&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"&gt;&lt;div style="max-width:600px;padding-top:80px"&gt;
&lt;div style="text-align:center"&gt;&lt;img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Today’s issue:&lt;/strong&gt; The Satoshi of web dev strikes again, HTML gateway drugs, and serenading your type checker with Raining Blood.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Welcome to &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/n2hohquvr7zm00h6/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDQ4" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422288"&gt;#448&lt;/a&gt;.&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;The Main Thing&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/luigi-drown.jpg" alt="Luigi drowning in a pool" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;Average React developer this week&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;A tale of two Reacts&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;It was the best of times (for React Native developers), it was the worst of times (for React developers).&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Let’s start with the worst:&lt;/strong&gt; Researchers discovered &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/48hvh7umgx4v8eux/aHR0cHM6Ly9yZWFjdC5kZXYvYmxvZy8yMDI1LzEyLzExL2RlbmlhbC1vZi1zZXJ2aWNlLWFuZC1zb3VyY2UtY29kZS1leHBvc3VyZS1pbi1yZWFjdC1zZXJ2ZXItY29tcG9uZW50cw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422289"&gt;two more critical vulnerabilities&lt;/a&gt; in React Server Components this week while trying to exploit the patches for last week’s React2Shell incident – a Denial of Service vulnerability and a Source Code Exposure vulnerability.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Yes we’re all in hell, but apparently it’s common for critical CVEs to uncover “follow‑up vulnerabilities” like this. The React team is promising that “just one more upgrade bro” will fix everything for good, and hopefully the latest patched version will let React developers feel joy again. Alternatively, you could just downgrade everything to React 15, dust off ye olde class components, and pretend that RSC was just one collective fever dream. Oh wait, I think Remix 3 is already working on that.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;In more positive news,&lt;/strong&gt; the React Native team is still cooking. They just shipped their &lt;em&gt;seventh&lt;/em&gt; release of 2025 with &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/wnh2h6uqg0en62h7/aHR0cHM6Ly9yZWFjdG5hdGl2ZS5kZXYvYmxvZy8yMDI1LzEyLzEwL3JlYWN0LW5hdGl2ZS0wLjgz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422290"&gt;React Native 0.83&lt;/a&gt; – which doesn’t introduce any user-facing breaking changes but &lt;em&gt;does&lt;/em&gt; come with some meaningful upgrades:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;React 19.2 support&lt;/strong&gt; — This brings the &lt;code style="font-size: 14px;"&gt;&lt;Activity&gt;&lt;/code&gt; and &lt;code style="font-size: 14px;"&gt;useEffectEvent&lt;/code&gt; APIs to React Native, which keeps it aligned with modern React while thankfully avoiding the current RSC mess.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Big DevTools upgrades&lt;/strong&gt; — New Network and Performance panels let you inspect requests and trace JavaScript execution, React renders, and user timings in a single timeline. It’s basically Chrome DevTools for React Native.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Web platform momentum&lt;/strong&gt; — Web Performance APIs are now stable, and &lt;code style="font-size: 14px;"&gt;IntersectionObserver&lt;/code&gt; landed in Canary as part of the RN team’s push to make our “write once, run anywhere” dreams come true across web and native.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Bottom Line:&lt;/strong&gt; If only Dickens could’ve lived to see our day and write generation-defining novels about Denial of Service vulnerabilities and &lt;code style="font-size: 14px;"&gt;useEffectEvent&lt;/code&gt;.&lt;/p&gt;
&lt;table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;"&gt;
&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/reh8h9umx6g4zgf2/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQ4" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1814422291"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/08hwhgu2zl3vrlul/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDg=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1814422292"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/8ghqh3uo9rmzn7fk/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9SXQlMjB3YXMlMjB0aGUlMjBiZXN0JTIwb2YlMjB0aW1lcyUyMCUyOGZvciUyMFJlYWN0JTIwTmF0aXZlJTIwZGV2ZWxvcGVycyUyOSUyQyUyMGl0JTIwd2FzJTIwdGhlJTIwd29yc3QlMjBvZiUyMHRpbWVzJTIwJTI4Zm9yJTIwUmVhY3QlMjBkZXZlbG9wZXJzJTI5JnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQ4" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1814422293"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/vqh3hmuogwzlr6tg/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBSXQlMjB3YXMlMjB0aGUlMjBiZXN0JTIwb2YlMjB0aW1lcyUyMCUyOGZvciUyMFJlYWN0JTIwTmF0aXZlJTIwZGV2ZWxvcGVycyUyOSUyQyUyMGl0JTIwd2FzJTIwdGhlJTIwd29yc3QlMjBvZiUyMHRpbWVzJTIwJTI4Zm9yJTIwUmVhY3QlMjBkZXZlbG9wZXJzJTI5JTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ0OCZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1814422294"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"&gt;&lt;/a&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="150" src="https://bytes.dev/images/content/coderabbit-logo.png" alt="CodeRabbit logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;&lt;span&gt;Our Friends &lt;br class="mobile-break"&gt;(With Benefits)&lt;/span&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/dog-utopia.jpg" alt="A bunch of dogs meditating" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;When your team’s code reviews finally evolve past ‘LGTM’&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/l2heh6ulrx8e7gb6/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422295"&gt;Unlock tribal Knowledge in teams. Make code reviews actually fun&lt;/a&gt;&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Most teams treat code review like a gate. Smart teams use it as a knowledge distribution system. With CodeRabbit, you turn your hidden “how we really do things here” into reusable learnings that make every PR clearer, faster, and less annoying.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Take logging. Maybe your team requires a custom logger, specific error tracking, and different log levels per environment. In practice, new code ships with random utilities, generic &lt;code style="font-size: 14px;"&gt;console.log&lt;/code&gt;s, or half-remembered conventions – especially under deadline pressure.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;CodeRabbit catches that drift automatically and creates learnings. You define the rule once: “For app/lib/components, use &lt;code style="font-size: 14px;"&gt;logError()&lt;/code&gt; from &lt;code style="font-size: 14px;"&gt;@/lib/error-tracking&lt;/code&gt;.” From then on, CodeRabbit flags violations in PRs, so human reviewers can focus on intent instead of nitpicks.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The result: tribal knowledge becomes searchable, standards become actually enforced, and reviews stop feeling like passive-aggressive checklists.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Free for open source projects. &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/l2heh6ulrx8e7gb6/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422295"&gt;Sign up today&lt;/a&gt;.&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Spot the Bug&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;
&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/m2h7h6u3e4dvpkfm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9maXgtbi1wbHVzLW9uZS1kYXRhYmFzZS1pc3N1ZXMtd2l0aC1zZW50cnktc2Vlci8_dXRtX2NhbXBhaWduPXNlZXItZnkyNnE0LWV2ZXJncmVlbiZ1dG1fY29udGVudD1uZXdzbGV0dGVyLW4xLXF1ZXJ5LWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422296"&gt;Sentry&lt;/a&gt;
&lt;/h4&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"&gt;&lt;em&gt;N+1 Queries are one of the most annoying performance issues out there, but &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/m2h7h6u3e4dvpkfm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9maXgtbi1wbHVzLW9uZS1kYXRhYmFzZS1pc3N1ZXMtd2l0aC1zZW50cnktc2Vlci8_dXRtX2NhbXBhaWduPXNlZXItZnkyNnE0LWV2ZXJncmVlbiZ1dG1fY29udGVudD1uZXdzbGV0dGVyLW4xLXF1ZXJ5LWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422296"&gt;this article&lt;/a&gt; shows how you can eliminate them with Seer’s (Sentry’s AI debugger) automated root cause analysis tool.&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;import&lt;/span&gt; db &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;from&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"./db"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;import&lt;/span&gt; admin &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;from&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"firebase-admin"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;import&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; getUserClaimsFromCookie &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;from&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"./claims"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; arrayUnion&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; arrayRemove &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; admin&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;firestore&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;FieldValue

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;export&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;default&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;async&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;function&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;updateLessonComplete&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;req&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; res&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;try&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; lessonId&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; completed &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; req&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;body

    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;if&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;!&lt;/span&gt;lessonId&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
      &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;throw&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Error&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"lessonId is a required parameter"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;if&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;!&lt;/span&gt;completed&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
      &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;throw&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Error&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"completed is a required parameter"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; claims &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;await&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;getUserClaimsFromCookie&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;req&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; res&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;if&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;!&lt;/span&gt;claims&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
      &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;throw&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Error&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;'user must be logged in'&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;await&lt;/span&gt; db&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;collection&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;'lessons'&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;doc&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;lessonId&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;update&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
        &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;completed&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; completed &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;===&lt;/span&gt; &lt;span class="token boolean" style="color: #9d7dce; font-size: 14px;"&gt;true&lt;/span&gt;
          &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;?&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;arrayUnion&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;claims&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;uid&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
          &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;arrayRemove&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;claims&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;uid&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;

    res&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;send&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;status&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"success"&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;catch&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;e&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    res&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;status&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;400&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
    res&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;send&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;error&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;message&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; e&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;message &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Cool Bits&lt;/h2&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;shadcn (the Satoshi of web dev) just launched &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/dphehmue5plvg4am/aHR0cHM6Ly91aS5zaGFkY24uY29tLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422297"&gt;shadcn/create&lt;/a&gt; – which lets you build your own shadcn/ui by picking your own component library, icons, base color, fonts, etc, so you can “build something that doesn’t look like everything else.”&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/e0hph0u74r86glt8/aHR0cHM6Ly9mYW5kZi5jby80b0RKOE5Y" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422298"&gt;MongoDB Skill Badges&lt;/a&gt; are free, focused courses and credentials that help you quickly learn and validate specific MongoDB skills – like Advanced Schema Design Patterns, CRUD Operations, Networking Security, and more. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Former React team member, Christoph Nakazawa just released &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/7qh7h2u9znrq78fz/aHR0cHM6Ly9naXRodWIuY29tL25renctdGVjaC9mYXRl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422299"&gt;fate&lt;/a&gt; – a modern data client for React and tRPC that’s inspired by Relay and GraphQL and will finally solve all of your data fetching problems forever. Probably.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Christian Ekrem wrote about &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/owhkhwuwoq2pvlsv/aHR0cHM6Ly9jZWtyZW0uZ2l0aHViLmlvL3Bvc3RzL3RhaWx3aW5kLXRhcmdldGluZy1jaGlsZC1lbGVtZW50cy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422300"&gt;targeting child elements in Tailwind CSS&lt;/a&gt;. The last time I “targeted a child” was with my water balloon launcher when I found those kids TP’ing my house on Halloween, so my expectations are high.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/z2hgh7uewlqnv8ip/aHR0cHM6Ly9kZW5vLmNvbS9ibG9nL3YyLjY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422301"&gt;Deno 2.6&lt;/a&gt; now lets you run package binaries with a new tool called &lt;code style="font-size: 14px;"&gt;dx&lt;/code&gt;, which is basically the Deno-rific version of &lt;code style="font-size: 14px;"&gt;npx&lt;/code&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Frederik Braun explained &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/p8hehqu4xqnm07tq/aHR0cHM6Ly9mcmVkZXJpa2JyYXVuLmRlL3doeS1zZXRodG1sLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422302"&gt;why the Sanitizer API is just &lt;code style="font-size: 14px;"&gt;setHTML()&lt;/code&gt; with better branding&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Jeff Escalante wrote &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/x0hph3ue3q5o6nt5/aHR0cHM6Ly9nby5jbGVyay5jb20vS3FCa3MzYQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422303"&gt;The Complete Guide to embeddable UIs for user management in 2025&lt;/a&gt; on the Clerk blog. It clocks in at almost 8,000 words and compares every single possible solution – so yeah, very complete. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/6qhehoulo9mzg7bo/aHR0cHM6Ly94LmNvbS9NaVR5cGVTY3JpcHQvc3RhdHVzLzE5OTg5NjE1MTkyMDg1OTU5MzM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422304"&gt;TypeSlayer&lt;/a&gt; is a TypeScript performance benchmarking and visualization tool that looks really useful for large TS codebases – but it features a disturbing lack of &lt;em&gt;Raining Blood&lt;/em&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Simon Willison wrote about &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/kkhmh2unmxkrqnhl/aHR0cHM6Ly9zaW1vbndpbGxpc29uLm5ldC8yMDI1L0RlYy8xMC9odG1sLXRvb2xzLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422305"&gt;useful patterns for building HTML tools&lt;/a&gt;. Just be careful because some of these sound suspiciously close to being gateway drugs for htmx.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Does your startup want to build on Convex’s type-safe, reactive database &lt;em&gt;for free?&lt;/em&gt; Apply for &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/58hvh8ug76rq8ks6/aHR0cHM6Ly93d3cuY29udmV4LmRldi9zdGFydHVwcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422306"&gt;Convex for Startups&lt;/a&gt; and see why dozens of YC companies have already done it. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Thiery Michel argues that &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/25h2h9u3dmk6zdc3/aHR0cHM6Ly9tYXJtZWxhYi5jb20vYmxvZy8yMDI1LzEyLzA0L3R5cGVzY3JpcHQtdHlwZS1hcy1hLXByb2dyYW1taW5nLWxhbmd1YWdlLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422307"&gt;TypeScript type system is its own programming language&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Someone got Gemini to generate/predict what the &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/qvh8h8udnk9z5qtl/aHR0cHM6Ly9kb3NheWdvLXN0dWRpby5naXRodWIuaW8vaG4tZnJvbnQtcGFnZS0yMDM1L25ld3M=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422308"&gt;front page of Hacker News would look like in 2035&lt;/a&gt;. Disturbingly accurate, but the overall tone wasn’t &lt;em&gt;quite&lt;/em&gt; condescending enough.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Spot the Bug: Solution&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/m2h7h6u3e4dvpkfm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9maXgtbi1wbHVzLW9uZS1kYXRhYmFzZS1pc3N1ZXMtd2l0aC1zZW50cnktc2Vlci8_dXRtX2NhbXBhaWduPXNlZXItZnkyNnE0LWV2ZXJncmVlbiZ1dG1fY29udGVudD1uZXdzbGV0dGVyLW4xLXF1ZXJ5LWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1814422296"&gt;Sentry&lt;/a&gt;
&lt;/h4&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;There’s a lot of misdirection here. The bug happens with our &lt;code style="font-size: 14px;"&gt;if (!completed)&lt;/code&gt; check. &lt;code style="font-size: 14px;"&gt;completed&lt;/code&gt; is a boolean, meaning when &lt;code style="font-size: 14px;"&gt;completed&lt;/code&gt; is &lt;code style="font-size: 14px;"&gt;false&lt;/code&gt; (making it falsy), our code will throw an error. Instead, we can check if &lt;code style="font-size: 14px;"&gt;completed&lt;/code&gt; is of type &lt;code style="font-size: 14px;"&gt;boolean&lt;/code&gt;, not if it’s falsy.&lt;/p&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;if&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;typeof&lt;/span&gt; completed &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;!==&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;'boolean'&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;throw&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Error&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"completed is a required parameter"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div style="text-align:center;padding-bottom:80px;padding-top:80px"&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"&gt;&lt;div style="margin-top:-40px"&gt;
&lt;img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"&gt;&lt;h5 style="font-size:18px;font-weight:400;margin-bottom:24px"&gt;Want us to say nice things &lt;br&gt; about your company?&lt;/h5&gt;
&lt;div style="margin-bottom:16px"&gt;&lt;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/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/g3hnhwumpq4r5gfr/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1814422309"&gt;Sponsor Bytes&lt;/a&gt;&lt;/div&gt;
&lt;div style="margin-bottom:20px"&gt;&lt;a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/9qhzhdud95o0m0s9/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1814422310"&gt;or share it&lt;/a&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Built with ❤️ by&lt;!-- --&gt; &lt;a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/3ohphdu3zpe0lmhr/aHR0cHM6Ly91aS5kZXY=" url-id="1814422311"&gt;ui.dev&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;"&gt;50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101&lt;/p&gt;
&lt;div style="font-family:Papyrus, cursive"&gt;&lt;a class="unsubscribe-link" href="https://click.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w/n2hohquvr7zmp0s6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1814422312"&gt;Unsubscribe from Bytes&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

&lt;span style="display: none"&gt;&lt;a href="https://unsubscribe.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w"&gt;Unsubscribe&lt;/a&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;img src="https://open.kit-mail6.com/n4ugqg6788hvhxe69wmc6h68xz5ggflho53w" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
Email Content
