<!DOCTYPE html>
<html>
<head>
<title>Bytes: Base UI (Taylor's Version)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 16px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> Using TypeScript to con your local government, Bun’s unethical red shell usage, and the Mariana Trench of GPU topics.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/6qhehoul050dm4ao/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDUw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311070">#450</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/gladiator-shades.jpg" alt="Gladiator Russell Crowe with sunglasses on" 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;">It's called fashion, sweetie. Look it up.<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Base UI (Taylor’s Version)</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">As someone who’s worn the same Bytes t-shirt and jorts to every major life event for the past four years, you could say I appreciate the simple beauty of being “unstyled.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">So I was pretty excited to see <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/kkhmh2un4543k7al/aHR0cHM6Ly9naXRodWIuY29tL211aS9iYXNlLXVpP3RhYj1yZWFkbWUtb3YtZmlsZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311071">Base UI</a> launch v1 of their unstyled React component library last week, which is built by the creators of Material UI and Radix UI.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Which leads me to my next question – <strong style="font-weight: 600;">How is this different from Radix UI again?</strong></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Short answer: It’s not really <em>that</em> different, at least today. The team wrote that “both libraries are very similar” in terms of API design, and they both provide high-quality React components that are:</p>
<ul>
<li>
<strong style="font-weight: 600;">Headless</strong> – No bundled CSS, so you can style with Tailwind or whatever you want</li>
<li>
<strong style="font-weight: 600;">Accessible</strong> – WAI-ARIA compliant and tested across devices/platforms</li>
<li>
<strong style="font-weight: 600;">Composable</strong> – Full control over each node so you can wrap/extend/remove freely</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Base UI <em>does</em> ship a few more complex components and has deeper a11y and edge-case coverage than Radix. It also has a pretty stacked team of seven full-time developers and designers actively working on it, so it should improve quickly.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">So why not just continue improving Radix UI?</strong> Money and control, probably. WorkOS acquired Modulz (the company behind Radix UI) back in 2022 and now controls the project. My theory is that Base UI quietly went into development the day after someone’s non-compete finally expired.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> Base UI does feel a little bit like <em>Radix UI (Taylor’s Version)</em> right now, but I don’t think it will forever. The team is shipping fast, they’re already getting 350k weekly downloads, and shadcn just added <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/58hvh8uglnlz6pf6/aHR0cHM6Ly94LmNvbS9zaGFkY24vc3RhdHVzLzE5OTk1MzA0MTU2NTMxMTM4NzE=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311072">Base UI support</a>. 2026 should be big.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/25h2h9u3n8nemvt3/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDUw" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1816311073"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/qvh8h8udq4q0k4ul/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NTA=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1816311074"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/g3hnhwumxlxkqnur/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9V2hhdCUyMGFyZSUyMHRoZSUyMGFjdHVhbCUyMGRpZmZlcmVuY2VzJTIwYmV0d2VlbiUyMCU0MGJhc2VfdWklMjBhbmQlMjAlNDByYWRpeF91aSUzRiZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ1MA==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1816311075"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/9qhzhdudn6nl53f9/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBV2hhdCUyMGFyZSUyMHRoZSUyMGFjdHVhbCUyMGRpZmZlcmVuY2VzJTIwYmV0d2VlbiUyMCU0MGJhc2VfdWklMjBhbmQlMjAlNDByYWRpeF91aSUzRiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NTAmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1816311076"><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/convex-logo.png" alt="Convex 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/toad-santa.jpg" alt="Toad with a Santa hat on" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Me winning a little holiday cash from Convex<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/3ohphdu3v2vnpnbr/aHR0cHM6Ly93d3cuY29udmV4LmRldi9jb21wb25lbnRzL2NoYWxsZW5nZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311077">Win prizes in the Convex Components Authoring Challenge</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Convex just launched the ability to build reusable components – and they’re giving away thousands of dollars to developers who build the best ones before Jan 23rd.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here’s how it works:</p>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Start with the Convex Component Template or fork an existing component with <code style="font-size: 14px;">npx create-convex@latest --component</code></p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Follow the <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/n2hohquvexek7oa6/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvY29tcG9uZW50cy9hdXRob3Jpbmc=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311078">Authoring Components docs</a> to package functions, schemas, and persistent state into a reusable module</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Submit your custom Component to <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/48hvh7umkpknx0cx/aHR0cHM6Ly93d3cuY29udmV4LmRldi9jb21wb25lbnRzL3N1Ym1pdA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311079">the directory</a> for review before Jan 23rd</p>
</li>
</ol>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You can build components for storage, API usage, third-party sync, analytics, and lots more. <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/3ohphdu3v2vnpnbr/aHR0cHM6Ly93d3cuY29udmV4LmRldi9jb21wb25lbnRzL2NoYWxsZW5nZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311077">Check it out</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="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/wnh2h6uq8k830wa7/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9USEhSWUtTUVRUVFRUVERFUFlSQ0xUVFRUVFRETEVKWTI2VFRUVFRUTFRGSUNCVlRUVFRUVEVMRVFNQ1VMSjdVSzJMQ0NKREIyUkpDNldJVzJNTFU1RVNGMlJURQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311080">AppSignal</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>Get the APM insights you need, without the enterprise price tag. Built for dev teams, not Fortune 500s. <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/wnh2h6uq8k830wa7/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9USEhSWUtTUVRUVFRUVERFUFlSQ0xUVFRUVFRETEVKWTI2VFRUVFRUTFRGSUNCVlRUVFRUVEVMRVFNQ1VMSjdVSzJMQ0NKREIyUkpDNldJVzJNTFU1RVNGMlJURQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311080">Try AppSignal</a>.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What gets logged?</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> myObject <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;">const</span> key <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Symbol</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'key'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>key<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 string" style="color: #f99157; font-size: 14px;">'this is the value for the key'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token function" style="color: #9d7dce; font-size: 14px;">Symbol</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'key'</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>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token constant" style="color: #12b5e5; font-size: 14px;">JSON</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">stringify</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jack LaFond wrote about how he <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/reh8h9umn3ne6ma2/aHR0cHM6Ly93d3cuamFjay5iaW8vYmxvZy9saWNlbnNlcGxhdGU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311081">used TypeScript to obtain one of the rarest license plates in the state of Florida</a>. It’s Florida Man in his final form.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Abramov created <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/08hwhgu2q9qklgtl/aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9pbnRyb2R1Y2luZy1yc2MtZXhwbG9yZXIv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311082">RSC explorer</a> to show you how the magic works under the hood. Thanks again for inventing React, Dan.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/8ghqh3uok2kxr9ck/aHR0cHM6Ly9mYW5kZi5jby80NHA1THlw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311083">The 90-day AI Readiness Playbook</a> is a free guide from Postman that shows exactly how engineering leaders can transform APIs into AI-ready tools that agents can discover, understand, and execute reliably. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Sebastian Aaltonen published a Mariana Trench-level deep dive on <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/vqh3hmuo8v8dw8sg/aHR0cHM6Ly93d3cuc2ViYXN0aWFuYWFsdG9uZW4uY29tL2Jsb2cvbm8tZ3JhcGhpY3MtYXBp" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311084">simplifying the way we interact with GPUs</a> with the concept of a “No Graphics API.”</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Chrome DevTools MCP server can now <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/l2heh6ulwnwzxqt6/aHR0cHM6Ly9kZXZlbG9wZXIuY2hyb21lLmNvbS9ibG9nL2Nocm9tZS1kZXZ0b29scy1tY3AtZGVidWcteW91ci1icm93c2VyLXNlc3Npb24=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311085">directly connect with active browser sessions</a> for live debugging.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Clerk just released their <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/m2h7h6u3wqw74vbm/aHR0cHM6Ly9nby5jbGVyay5jb20vQ0RvVUhhRQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311086">API Keys public beta</a>, so you can easily allow your users to create API keys that delegate access to your application’s API on their behalf. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kate Holterhoff created <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/dphehmuerormp6bm/aHR0cHM6Ly9yZWRtb25rLmNvbS9raG9sdGVyaG9mZi8yMDI1LzEyLzE2L2phdmFzY3JpcHQtYnVuZGxlci1ncmFuZC1wcml4Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311087">The JavaScript Bundler Grand Prix</a>, and I must say that I was disappointed to see Jarred Sumner’s unethical use of the red shell on the final lap.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Alice Moore wrote about <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/e0hph0u75l52ros8/aHR0cHM6Ly93d3cuYnVpbGRlci5pby9ibG9nL2FpLXNvZnR3YXJlLWVuZ2luZWVy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311088">The AI software engineer in 2026</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/7qh7h2u9363mn7iz/aHR0cHM6Ly9uZXh0anMub3JnL2Jsb2cvbmV4dC0xNi0x" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311089">Next.js 16.1</a> comes with an experimental bundle analyzer, easier debugging, and “transitive external dependencies” – or <em>Big TEDs</em>, as Tim Neutkens likes to call them.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/owhkhwuw5657qmuv/aHR0cHM6Ly93d3cuc2hvcGlmeS5jb20vbmV3cy93aW50ZXItMjYtZWRpdGlvbi1kZXY_dXRtX2NhbXBhaWduPXdpbnRlcjI2ZWRpdGlvbi1sYXVuY2hfUTQyNUJBQ0FETyZ1dG1fY29udGVudD1ieXRlcy12MSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1jb21tc19wYWlk" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311090">Shopify’s Winter ‘26 Edition</a> just dropped with 150+ new product updates and enhancements. AI is now a fundamental part of the Shopify platform, with a Dev Dashboard for Agents to build agentic commerce flows with Shopify Catalog, and checkout to enable agents to search products, and render checkouts, AI native dev platform and Shopify Catalog MCP or REST API that enable AI agents to search across billions of products. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Simon Willison wrote about how he <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/z2hgh7ue0k08lqfp/aHR0cHM6Ly9zaW1vbndpbGxpc29uLm5ldC8yMDI1L0RlYy8xNS9wb3J0aW5nLWp1c3RodG1sLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311091">ported JustHTML from Python to JavaScript in 4.5 hours</a> using Codex CLI and GPT-5.2. It was either that or watch Wicked 1 and 2 back to back for the third time this week.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/p8hehqu4828lqqiq/aHR0cHM6Ly9yZWFjdC1hcmlhLmFkb2JlLmNvbS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311092">React Aria v1.14.0</a> shipped some shiny new docs with interactive, real-world examples and MCP server support. They also shipped <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/x0hph3uexpxlq4c5/aHR0cHM6Ly9yZWFjdC1zcGVjdHJ1bS5hZG9iZS5jb20vcmVsZWFzZXMvdjEtMC0w" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311093">Spectrum 2 v1.0</a> because Devon Govett is a machine that runs on G Fuel and style macros. Just like Santa.</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="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz: Answer</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/wnh2h6uq8k830wa7/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9USEhSWUtTUVRUVFRUVERFUFlSQ0xUVFRUVFRETEVKWTI2VFRUVFRUTFRGSUNCVlRUVFRUVEVMRVFNQ1VMSjdVSzJMQ0NKREIyUkpDNldJVzJNTFU1RVNGMlJURQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311080">AppSignal</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What gets logged?</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> myObject <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;">const</span> key <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Symbol</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'key'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>key<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 string" style="color: #f99157; font-size: 14px;">'this is the value for the key'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token function" style="color: #9d7dce; font-size: 14px;">Symbol</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'key'</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>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token constant" style="color: #12b5e5; font-size: 14px;">JSON</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">stringify</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>myObject<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">undefined</code> - The <code style="font-size: 14px;">Symbol</code> function creates a unique value, so the <code style="font-size: 14px;">Symbol</code> used to set the value of <code style="font-size: 14px;">myObject[key]</code> is not the same as the <code style="font-size: 14px;">Symbol</code> used to get the value of <code style="font-size: 14px;">myObject[key]</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><code style="font-size: 14px;">{}</code> - <code style="font-size: 14px;">JSON.stringify</code> ignores <code style="font-size: 14px;">Symbol</code> properties when stringifying an object.</p>
</li>
</ol>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This is useful for creating private properties on objects that can’t be accessed or modified outside of the object. You can read more about Symbols <a href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/6qhehoul050d94uo/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9XZWIvSmF2YVNjcmlwdC9SZWZlcmVuY2UvR2xvYmFsX09iamVjdHMvU3ltYm9s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1816311094">here</a>.</p>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/58hvh8uglnlz4ph6/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1816311096">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/25h2h9u3n8neqvu3/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1816311097">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/qvh8h8udq4q0l4al/aHR0cHM6Ly91aS5kZXY=" url-id="1816311098">ui.dev</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://click.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl/g3hnhwumxlxk0nar/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1816311099">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://unsubscribe.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/0vu0e0g2zzb9h9qep0gulhvzgdx55snhnvdl" alt="">
</body>
</html>