Email: Bytes: Wtf is Remix 3? - Email to RSS Admin

Subject:
Bytes: Wtf is Remix 3?
Received:
10/17/2025, 10:11:59 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: Wtf is Remix 3?&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; Lit follows React, your boss’s greatest AI fears, and the millennial urge to rewatch &lt;em&gt;Brink&lt;/em&gt;.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/p8hehqu446oe56fq/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDMz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801007"&gt;#433&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/skinner.jpg" alt="Principal Skinner from Simpsons meme" 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;Remix Jam TLDR&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Wtf is Remix 3?&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;Turns out, it’s a lot like Remix 2 – except instead of declarative React components and hooks, you now get manual event dispatching, &lt;code style="font-size: 14px;"&gt;this.update()&lt;/code&gt;, and no React at all.&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;Ok, so it’s actually nothing like Remix 2. Which begs the question, &lt;em&gt;why call it Remix at all?&lt;/em&gt;&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;Hard to say. Maybe Shopify wanted to keep the goodwill of the brand they bought three years ago, or maybe the Remix team was inspired by the Angular.js &lt;span role="img" aria-label="right arrow"&gt;➡️&lt;/span&gt; Angular 2 rebranding masterclass from 2016? I’ll leave that up to OSS marketing experts, because the next question is a lot more interesting…&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;Why did they get divorced from React?&lt;/strong&gt; The answer, according to Ryan and Michael, is that React itself has drifted away from its original promise of simplicity by embracing compilers, RSC, and transitions that Remix never fully believed in. &lt;em&gt;(It’s not me, it’s you.)&lt;/em&gt;&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;It looks like a React framework from an alternate timeline that forked off before React started introducing hooks in 2018.&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;Here’s what else Remix 3 includes:&lt;/strong&gt;&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;State without React&lt;/strong&gt; — You hold variables in closures and manually call &lt;code style="font-size: 14px;"&gt;this.update()&lt;/code&gt; to re-render.&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;Events over props&lt;/strong&gt; — Instead of passing callbacks, you dispatch native &lt;code style="font-size: 14px;"&gt;CustomEvent&lt;/code&gt;/&lt;code style="font-size: 14px;"&gt;EventTarget&lt;/code&gt; signals.&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;Frames instead of RSC&lt;/strong&gt; — Server-rendered HTML “islands” with their own URLs that can reload independently, like iframes reimagined as a rendering primitive.&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;It’s bold and opinionated, and Michael and Ryan even pitched it as more “LLM-friendly” — because a framework without hidden magic is supposedly easier for AI to generate. Whether that’s actually meaningful, or just something meant to appease Tobi and the rest of the AI maxxers at Shopify is up for debate&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;Bottom Line:&lt;/strong&gt; If it works out, Remix 3 could become the purest “web-native” framework that powers the next decade of web dev. And if it doesn’t, the good news is that Remix 4 will probably look completely different.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/x0hph3uee20md0b5/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDMz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1796801008"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/6qhehoullre46gbo/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MzM=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1796801009"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/e0hph0u77vozw3b8/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QW5zd2VyaW5nJTIwYWxsJTIwdGhlJTIwcXVlc3Rpb25zJTIweW91JTI3cmUlMjB0b28lMjBhZnJhaWQlMjB0byUyMGFzayUyMGFib3V0JTIwUmVtaXglMjAzJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDMz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1796801010"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/7qh7h2u99l5eprtz/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQW5zd2VyaW5nJTIwYWxsJTIwdGhlJTIwcXVlc3Rpb25zJTIweW91JTI3cmUlMjB0b28lMjBhZnJhaWQlMjB0byUyMGFzayUyMGFib3V0JTIwUmVtaXglMjAzJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQzMyZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1796801011"&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/saint-francis.jpg" alt="Painting of Saint Francis holding some doves" 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;Tfw you can use AI to catch all the AI slop code&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/owhkhwuww9delqhv/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801012"&gt;Cut code review time &amp; bugs in half&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;AI is generating more code than ever – which is great, until it starts shipping a bunch of slop to production.&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;Thankfully, CodeRabbit’s AI code review platform is purpose-built to speed up your code reviews and catch AI codegen errors.&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;It integrates seamlessly into git workflows and your existing toolchain, so it can deliver codebase-aware reviews and support all programming languages.&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;And developers love it – it’s the #1 most installed AI app on GitHub and GitLab (used in over 2 million repos), and it’s used by OSS projects like Vue, Nuxt, and 70k others.&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;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/owhkhwuww9delqhv/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801012"&gt;Try it out for free&lt;/a&gt; – they’ve got over 30+ tools to help you catch bugs wherever they’re hiding in your codebase.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/z2hgh7uee6xzrmtp/aHR0cHM6Ly96ZWQuZGV2L2Jsb2cvemVkLWZvci13aW5kb3dzLWlzLWhlcmU_dXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801013"&gt;Zed&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;They finally just launched on Windows (!!) and it’s a real native app (not Electron). &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/p8hehqu446oe5euq/aHR0cHM6Ly96ZWQuZGV2L2Rvd25sb2FkP3V0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801014"&gt;Download it now&lt;/a&gt; and see if everyone’s favorite editor lives up to the hype.&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;const&lt;/span&gt; &lt;span class="token function-variable function" style="color: #9d7dce; font-size: 14px;"&gt;getCapitalizedInitials&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 parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&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;=&gt;&lt;/span&gt;
  name
    &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;trim&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 function" style="color: #9d7dce; font-size: 14px;"&gt;split&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;" "&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;forEach&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 parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&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;=&gt;&lt;/span&gt; name&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;charAt&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;0&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 function" style="color: #9d7dce; font-size: 14px;"&gt;join&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;""&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;toUpperCase&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;Lit announced that it’s &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/x0hph3uee20mdgs5/aHR0cHM6Ly9saXQuZGV2L2Jsb2cvMjAyNS0xMC0xNC1vcGVuanMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801015"&gt;joining the OpenJS Foundation&lt;/a&gt;, two weeks after React established the React Foundation. Sounds about right.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/6qhehoullre4dvso/aHR0cHM6Ly9naXRodWIuY29tL1ZFUlQtc2gvVkVSVA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801016"&gt;VERT&lt;/a&gt; is an open-source file converter that supports 250+ formats and runs fully local for everything but video. And suddenly, I have the urge to rewatch &lt;em&gt;Brink.&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;&lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/kkhmh2unnwvp3dhl/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXNlY29uZGFyeSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801017"&gt;Only idiots write manual tests&lt;/a&gt; – modern engineering teams like Notion, Dropbox and Wiz use Meticulous to maintain e2e UI tests that cover every edge case of your web app. [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;Boyd Kane has figured out &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/58hvh8uggx2wznh6/aHR0cHM6Ly9ib3lka2FuZS5jb20vZXNzYXlzL2Jvc3M=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801018"&gt;why your boss isn’t worried about AI&lt;/a&gt;, even though he’s a late-stage techno-capitalist being used as a vassal of the state to keep you down.&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;Jake Archibald wrote about &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/25h2h9u339wxegs3/aHR0cHM6Ly9qYWtlYXJjaGliYWxkLmNvbS8yMDI1L3ByZXNlbnQtYW5kLWZ1dHVyZS1vZi1wcm9ncmVzc2l2ZS1pbWFnZS1yZW5kZXJpbmcv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801019"&gt;the present and potential future of progressive image rendering&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;Tuple is a &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/qvh8h8uddwp302ul/aHR0cHM6Ly90dXBsZS5hcHAvbC9wYWlyLXByb2dyYW1taW5nP3V0bV9jYW1wYWlnbj1ieXRlc19zZWNvbmRhcnlfMjAyNTEwMTcmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801020"&gt;native remote pair programming app for discerning developers&lt;/a&gt;. If you’re sensitive to miscommunication or tools messing with your flow, Tuple is the tool for you. Shared control by default, intuitive annotations, and no persistent UI elements that block the IDE. [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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/g3hnhwumm9w2kkir/aHR0cHM6Ly9naXRodWIuY29tL2NhbGxzdGFja2luY3ViYXRvci9yZWFjdC1uYXRpdmUtaGFybmVzcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801021"&gt;Harness&lt;/a&gt; is a lightweight framework that lets you execute Jest-like tests in a React Native runtime, directly on a device or emulator.&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;The &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/9qhzhduddwr8l2f9/aHR0cHM6Ly9naXRodWIuY29tL2Nsb3VkZmxhcmUvc2FuZGJveC1zZGs=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801022"&gt;Cloudflare Sandbox SDK&lt;/a&gt; lets you run secure, sandboxed environments on Cloudflare so your AI agents can execute code, run services and manage files in isolation without the risk of bricking your whole application.&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;Sentry is hosting a free workshop on &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/3ohphdu33mg8nqur/aHR0cHM6Ly9sdW1hLmNvbS9zdm1yeW4zZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801023"&gt;Best Practices for Monitoring your Frontend&lt;/a&gt;. Sergiy Dybskiy will dive deep into distributed tracing, optimizing site performance with Web Vitals, and lots more in this hands-on session. [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;ESBuild has implemented Evan Wallace’s &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/n2hohquvvq04k3i6/aHR0cHM6Ly9naXRodWIuY29tL2V2YW53L2VzYnVpbGQvcmVsZWFzZXMvdGFnL3YwLjI1LjEx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801024"&gt;TC39 Stage 2.7 Import Bytes proposal&lt;/a&gt;, allowing you to import raw bytes as a readonly Uint8Array. You can use it right now in Deno and Webpack.&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;Astro released &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/48hvh7umml83nmsx/aHR0cHM6Ly9kb2NzLmFzdHJvLmJ1aWxkL2VuL2d1aWRlcy92aWV3LXRyYW5zaXRpb25zLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801025"&gt;View Transitions Level 1&lt;/a&gt; with support in all major browsers.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/wnh2h6uqq76d3xi7/aHR0cHM6Ly96ZXJvLnJvY2ljb3JwLmRldi9kb2NzL3JlbGVhc2Utbm90ZXMvMC4yMw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801026"&gt;Zero 0.23&lt;/a&gt; adds synced aka &lt;em&gt;custom&lt;/em&gt; queries and React Native support, enabling custom server code on the read path. Now I need to go listen to that whole Yeah Yeah Yeah’s &lt;a href="https://click.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/reh8h9ummdzpexb2/aHR0cHM6Ly9vcGVuLnNwb3RpZnkuY29tL3RyYWNrLzVtZkEyQ0J6UWVHaVRrOXdGSXRDc1M_c2k9ZjBiMzdhMjEyNGEyNGQxNg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801027"&gt;album&lt;/a&gt; with the broken egg on the cover and remeber what it’s like to be 18.&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/z2hgh7uee6xzrmtp/aHR0cHM6Ly96ZWQuZGV2L2Jsb2cvemVkLWZvci13aW5kb3dzLWlzLWhlcmU_dXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1796801013"&gt;Zed&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;We’re treating &lt;code style="font-size: 14px;"&gt;forEach&lt;/code&gt; as if it returned an array, when it actually returns &lt;code style="font-size: 14px;"&gt;undefined&lt;/code&gt;. Instead, we want to use &lt;code style="font-size: 14px;"&gt;map&lt;/code&gt;, which works similar to &lt;code style="font-size: 14px;"&gt;forEach&lt;/code&gt;, but also creates and returns a new array.&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;const&lt;/span&gt; &lt;span class="token function-variable function" style="color: #9d7dce; font-size: 14px;"&gt;getCapitalizedInitials&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 parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&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;=&gt;&lt;/span&gt;
  name
    &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;trim&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 function" style="color: #9d7dce; font-size: 14px;"&gt;split&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;" "&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;map&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 parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&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;=&gt;&lt;/span&gt; name&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;charAt&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;0&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 function" style="color: #9d7dce; font-size: 14px;"&gt;join&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;""&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;toUpperCase&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/08hwhgu22er4kqul/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1796801028"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/8ghqh3uoodn8xwak/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1796801029"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/vqh3hmuoo0r6dlbg/aHR0cHM6Ly91aS5kZXY=" url-id="1796801030"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86/l2heh6ull27pz2f6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1796801031"&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/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86"&gt;Unsubscribe&lt;/a&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;img src="https://open.kit-mail6.com/92u4m46p33tnh6zd7dnh9hzpxl933iwhgx86" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
Email Content
