<!DOCTYPE html>
<html>
<head>
<title>Bytes: shadcn spooky szn</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> Robert Frost’s thoughts on Remix vs React, reverse JavaScript framework fatigue, and using cutting edge CSS features to pay my rent.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to the late-night special Halloween edition of <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/kkhmh2un62w976ul/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDM3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091506">#437</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/nic-cage-vampire.jpg" alt="Nicolas Cage as a vampire with a raised eyebrow" 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 watching the vibe-coders turn shadcn/ui into the new Bootstrap<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">shadcn spooky szn</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It’s already one of the most popular open-source projects of all time, but <code style="font-size: 14px;">shadcn/ui</code> keeps pumping out hit after hit anyway.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And since today is Halloween, we thought it’d be the perfect time to highlight all the tricks and treats coming from the mysterious, pseudonymous, and possibly immortal <code style="font-size: 14px;">shadcn</code> over the past couple months.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Let’s dive in:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">shadcn CLI 3.0</strong> – This update from back in August gave the CLI a total overhaul. It now supports namespaced and private registries, improved error handling, and much faster dependency resolution. You can also search, preview, and install components right from your terminal, which makes it feel like a mini package manager for your entire design system.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Registry Directory</strong> – They just launched this on Tuesday, and it’s basically a Craigslist for UI components, with hopefully fewer weirdos. It provides a public index that lists every official <em>and</em> community-made component, hook, and layout pattern — all installable with the CLI. Teams can even host their own internal registries, which turns <code style="font-size: 14px;">shadcn/ui</code> into a kind of open-source distribution platform for design systems.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Forms</strong> – A flexible new <code style="font-size: 14px;">Form</code> primitive with built-in validation helpers, schema integration, and compatibility with React Hook Form, TanStack Form, and Zod. It makes handling complex form logic feel smoother, simpler, and less cursed than ever.</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> <code style="font-size: 14px;">shadcn/ui</code> has quietly evolved into a full-blown component platform that’s loved by humans and AI codegen tools. Yes, this is part of the reason why every new site these days has that same <del>Bootstrap</del> <code style="font-size: 14px;">shadcn/ui</code> look and feel – but that’s the price you pay for winning.</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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/58hvh8ugkox9e7s6/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1801091507"><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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/25h2h9u3409o5ns3/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0Mzc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1801091508"><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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/qvh8h8udo2w6xeal/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMCU0MHNoYWRjbiUyRnVpJTIwaGFzJTIwYmVlbiUyMHNoaXBwaW5nJTIwbGF0ZWx5JnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1801091509"><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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/g3hnhwum6o9zvrtr/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwZXZlcnl0aGluZyUyMCU0MHNoYWRjbiUyRnVpJTIwaGFzJTIwYmVlbiUyMHNoaXBwaW5nJTIwbGF0ZWx5JTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQzNyZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1801091510"><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/qa-wolf-logo.png" alt="QA Wolf 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/scream-heart.jpg" alt="Scream holding up heart hands in a field of flowers" 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;">My team after I make our QA cycles twice as fast<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/9qhzhdudz3w27wh9/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMDMxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTEwMzFfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWhlYWRsaW5lLVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzQmVmb3JlMjAyNUVuZHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091511">Speed up your team’s release cycles – before 2025 ends</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">If you want to get one big productivity win for your team before the end of Q4, you need to check out <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/3ohphdu349mdwgur/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMDMxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTEwMzFfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWJvZHktUUFXb2xm" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091512">QA Wolf</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Their AI-native testing service saved Meow Wolf <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/n2hohquv65qodpu6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9jYXNlLXN0dWRpZXMvcWEtd29sZi1wdXRzLXRoZS1tYWdpYy1pbi1tZW93LXdvbGZzLW1vYmlsZS10ZXN0aW5nP3V0bV9jYW1wYWlnbj1BQ1FfQWxsX0RlbW9fQ29udmVyc2lvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfQ3V0UUFDeWNsZXMtUTRfMjAyNTEwMzEtTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PUN1dFFBQ3ljbGVzLVE0X0dldEFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0FTcGVlZFVwWW91clRlYW1zUmVsZWFzZUN5Y2xlc0JlZm9yZTIwMjVFbmRzX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTAzMV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS0zMDBLUGVyWWVhckluRW5naW5lZXJpbmdDb3N0cw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091513">$300k per year in engineering costs</a>, while also saving them 40+ hours of testing time per release cycle.</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;">Here’s how:</strong></p>
<ul>
<li>Their engineers build out a full outline of your app, with test cases prioritized by <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/48hvh7um6ql2odbx/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9ob3ctaXQtd29ya3M_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9DdXRRQUN5Y2xlcy1RNF8yMDI1MTAzMS1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9Q3V0UUFDeWNsZXMtUTRfR2V0QVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzQmVmb3JlMjAyNUVuZHNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMDMxX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVByaW9yaXRpemVkQnlOZWVkQW5kVmFsdWU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091514">need and value</a>
</li>
<li>They write out tests in plain English for you to review and approve</li>
<li>They run all your tests in 100% parallel, and they maintain all tests as your product changes</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/wnh2h6uqxv7ozea7/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMDMxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTEwMzFfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWN0YS1HZXRBUGVyc29uYWxpemVkRGVtbw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091515">Get a personalized demo</a> to see how they can cut your team’s QA cycles down to 15 minutes or less.</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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/reh8h9umwvd586u2/aHR0cHM6Ly9iaXQubHkvM0o2TkE5bQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091516">Depot</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>It’s a remote container build service that lets you run GitHub Actions 40x faster for half the cost, and they just launched <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/reh8h9umwvd586u2/aHR0cHM6Ly9iaXQubHkvM0o2TkE5bQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091516">GitHub Job Details</a> to provide observability for your whole CI/CD pipeline too.</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;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">var</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> <span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<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 function" style="color: #9d7dce; font-size: 14px;">setTimeout</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 operator" style="color: #12b5e5; 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>i<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 number" style="color: #fcba28; font-size: 14px;">1000</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;">Chrome announced that it’ll connect to <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/08hwhgu2gwe78pal/aHR0cHM6Ly9zZWN1cml0eS5nb29nbGVibG9nLmNvbS8yMDI1LzEwL2h0dHBzLWJ5LWRlZmF1bHQuaHRtbA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091517">HTTPS by default</a> starting a year from now, so every visit to a non-HTTPS site will trigger a permission prompt. Somebody please warn <code style="font-size: 14px;">addictinggames.com</code> before the firewall blocks City Jumper.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tanner Linsley wrote about <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/8ghqh3uoqpd548uk/aHR0cHM6Ly90YW5zdGFjay5jb20vYmxvZy9kaXJlY3RpdmVzLWFuZC10aGUtcGxhdGZvcm0tYm91bmRhcnk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091518">Directives and the Platform Boundary</a>, stressing the need for clearer boundaries between framework behavior and platform semantics. I only wish he could’ve given this same advice about boundaries to my college roommates about 15 years ago.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/vqh3hmuoe30k55ig/aHR0cHM6Ly9iaXQubHkvNHFscFB1Rw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091519">Kilo Code</a> is an open-source, multi-agent coding system that lets you connect to 500+ LLMs and run them wherever you want. It’s #1 on OpenRouter, and can handle agent orchestration, architecture, and coding – with open and transparent pricing. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Brendan McLoughlin wrote about the <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/l2heh6ul6v2o55h6/aHR0cHM6Ly9sYWNvbmljd2l0LmNvbS9yZWFjdC1hbmQtcmVtaXgtY2hvb3NlLWRpZmZlcmVudC1mdXR1cmVzLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091520">diverging futures of React and Remix</a>. “Two frameworks diverged in a wood and I took the one less toxic, and that has made all the difference.”</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Should you write code that runs in the browser or code that the browser runs? Jim Nielsen shares <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/m2h7h6u3m05okgum/aHR0cHM6Ly9ibG9nLmppbS1uaWVsc2VuLmNvbS8yMDI1L21vcmUtY29udHJvbC1lcXVhbHMtbGVzcy1wZXJmb3JtYW5jZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091521">his thoughts</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tessa Mero explored why developers are <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/e0hph0u7qwvk9ea8/aHR0cHM6Ly9hcHB3cml0ZS5pby9ibG9nL3Bvc3Qvd2h5LWRldmVsb3BlcnMtbGVhdmluZy1uZXh0anMtdGFuc3RhY2stc3RhcnQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091523">bailing on Next.js for TanStack Start</a>, besides a mild case of Reverse Framework Fatigue.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/7qh7h2u9wpl0vptz/aHR0cHM6Ly93d3cuY2FsbHN0YWNrLmNvbS9ibG9nL2dldHRpbmctc3RhcnRlZC13aXRoLWV4cG8tb24tbWV0YS1xdWVzdD91dG1fY2FtcGFpZ249bWV0YSZ1dG1fY29udGVudD1nZXR0aW5nLXN0YXJ0ZWQtd2l0aC1leHBvLW9uLW1ldGEtcXVlc3QmdXRtX21lZGl1bT1tYWlsJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091524">Meta Quest now supports React Native</a> and you don’t need to learn anything new to get started. See how to set up, build and run apps on Meta Quest in this hands-on guide for React Native developers. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The DevTools team released <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/owhkhwuwgl9437bv/aHR0cHM6Ly9kZXZlbG9wZXIuY2hyb21lLmNvbS9ibG9nL25ldy1pbi1kZXZ0b29scy0xNDI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091525">Chrome 142</a>, bringing AI code suggestions, MCP server upgrades, and Gemini-powered performance trace debugging. Just in case Chrome didn’t already come with enough AI features you avoid like the plague.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/z2hgh7uepr6o9dsp/aHR0cHM6Ly9yc3BhY2sucnMvYmxvZy9hbm5vdW5jaW5nLTEtNg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091526">Rspack 1.6</a> adds better tree-shaking for dynamic imports, JSX preservation, and support for JavaScript’s new <code style="font-size: 14px;">import defer</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/p8hehqu4g569k9uq/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXNlY29uZGFyeSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091527">Only idiots write manual tests</a> – 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]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/x0hph3ue9d2n8wb5/aHR0cHM6Ly90dXJib3JlcG8uY29tL2Jsb2cvdHVyYm8tMi02" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091528">Turborepo 2.6</a> just dropped with faster caching, better pipelines, and yet another attempt to convince us that monorepos aren’t a giant psy-op.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Preethi shared this tutorial on <a href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/6qhehouln6rpvlho/aHR0cHM6Ly9jc3MtdHJpY2tzLmNvbS9jc3MtYW5pbWF0aW9ucy10aGF0LWxldmVyYWdlLXRoZS1wYXJlbnQtY2hpbGQtcmVsYXRpb25zaGlwLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091529">CSS animations that leverage the Parent-Child relationship</a>. Leveraging the parent-child relationship is the only way my brother has been able to pay his rent since 2015.</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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/reh8h9umwvd586u2/aHR0cHM6Ly9iaXQubHkvM0o2TkE5bQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1801091516">Depot</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;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">var</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> <span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<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 function" style="color: #9d7dce; font-size: 14px;">setTimeout</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 operator" style="color: #12b5e5; 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>i<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 number" style="color: #fcba28; font-size: 14px;">1000</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>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">A little throw back for all you old heads. This used to be everyone’s favorite JavaScript interview question.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This code will log <code style="font-size: 14px;">5</code> 5 times.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The reason for this is because we declared our variable with <code style="font-size: 14px;">var</code>, which is function scoped. By the time our functions given to <code style="font-size: 14px;">setTimeout</code> run, <code style="font-size: 14px;">i</code> will already be <code style="font-size: 14px;">5</code> and every function will reference that same variable. To fix this, use <code style="font-size: 14px;">let</code> which is block scoped and will give each iteration of our for loop its own <code style="font-size: 14px;">i</code>.</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;">for</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span> <span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> i<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 function" style="color: #9d7dce; font-size: 14px;">setTimeout</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 operator" style="color: #12b5e5; 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>i<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 number" style="color: #fcba28; font-size: 14px;">1000</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/kkhmh2un62w8g6il/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1801091530">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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/58hvh8ugkox5p7f6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1801091531">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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/25h2h9u34097rnf3/aHR0cHM6Ly91aS5kZXY=" url-id="1801091532">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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3/qvh8h8udo2w8getl/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1801091533">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/27uepe0gddioh84qnzdi3hgq5n744hghm2v3">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/27uepe0gddioh84qnzdi3hgq5n744hghm2v3" alt="">
</body>
</html>