<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/asparagus.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/qa-wolf-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/dwight-recorder.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/content/pop-quiz.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: pnpm 11 cuts the npm umbilical cord</title>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 18px; 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: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> Bun slander, Jim Croce’s GitHub, and sending my agents to work in a trap house.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/z2hgh7uexv4p0lap/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDg0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988852">#484</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/asparagus.jpg" alt="Asparagus from Veggie Tales lying on the ground" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Accidentally looked too deep at my dependencies again<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">pnpm 11 cuts the npm umbilical cord</h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><em>Performant Npm</em> has never been shy about marketing itself as the faster, more disk-efficient alternative to npm.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And it’s worked. The content-addressable store, hard links, and shared packages across projects make pnpm significantly faster and leaner than npm, which is why it’s so beloved.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But behind the scenes, it was still outsourcing core commands like <code style="font-size: 15px;">publish</code>, <code style="font-size: 15px;">login</code>, and <code style="font-size: 15px;">dist-tag</code> to the npm CLI. That arrangement finally ended last week with <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/p8hehqu4o03g8pcq/aHR0cHM6Ly9wbnBtLmlvL2Jsb2cvcmVsZWFzZXMvMTEuMA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988853">pnpm 11</a>, which ships a native implementation of the entire publish workflow and allowed it to move out of mom’s basement for good.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">pnpm v11 also ships as pure ESM now and added a few more cool features:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><strong style="font-weight: 600;">SQLite store index</strong> — millions of tiny per-package JSON files are now replaced by a single SQLite database, which means fewer syscalls and faster cold installs</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><strong style="font-weight: 600;">Supply-chain protection on by default</strong> — newly published packages now have a 1-day minimum release age before pnpm will resolve them</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><strong style="font-weight: 600;">Isolated global installs</strong> — <code style="font-size: 15px;">pnpm add -g</code> now gives each package its own directory, lockfile, and <code style="font-size: 15px;">node_modules</code>, so global tools stop fighting over peer dependencies</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><strong style="font-weight: 600;"><code style="font-size: 15px;">allowBuilds</code> unifies five build settings</strong> — <code style="font-size: 15px;">onlyBuiltDependencies</code>, <code style="font-size: 15px;">neverBuiltDependencies</code>, and friends collapse into a single allow/deny map</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> This was a maturity release for pnpm, which now has a cleaner architecture, better security defaults, and fewer dependencies on the npm toolchain.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Hopefully they remember how to do their own laundry.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/x0hph3ue06r9xmh5/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDg0" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1852988854"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/6qhehoulegkn0qco/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0ODQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1852988855"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/kkhmh2unvqd6zgbl/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwdGhlJTIwbmV3JTIwcG5wbSUyMHYxMSUyMHJlbGVhc2UmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0ODQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1852988856"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/58hvh8ug28vk3vi6/bWFpbHRvOj9zdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0YmYm9keT1UaG91Z2h0JTIweW91JTI3ZCUyMGxvdmUlMjB0aGlzJTIwd2VlayUyN3MlMjBCeXRlcyUwQS0tLSUwQUJyZWFraW5nJTIwZG93biUyMHRoZSUyMG5ldyUyMHBucG0lMjB2MTElMjByZWxlYXNlJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ4NA==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1852988857"><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/dwight-recorder.jpg" alt="Dwight Schrute playing the recorder by a trash can" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">When I think about writing tests for all the AI generated code in my app<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/25h2h9u3wzv4l8b3/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyXzgwUGVyY2VudEF1dG9tYXRlZFRlc3RDb3ZlcmFnZV8yMDI2MDUwNS1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX3Rlcm09aGVhZGxpbmUtR2V0ODBQZXJjZW50QXV0b21hdGVkVGVzdENvdmVyYWdlSW40TW9udGhzJnV0bV9jb250ZW50PTgwUGVyY2VudEF1dG9tYXRlZFRlc3RDb3ZlcmFnZV9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBODBQZXJjZW50QXV0b21hdGVkVGVzdENvdmVyYWdlSW40TW9udGhzX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI2MDUwNV92MV8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988858">Get 80% automated test coverage in 4 months</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">…with zero effort from your team.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/qvh8h8udp57oevul/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyXzgwUGVyY2VudEF1dG9tYXRlZFRlc3RDb3ZlcmFnZV8yMDI2MDUwNS1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX3Rlcm09Ym9keS1RQVdvbGYmdXRtX2NvbnRlbnQ9ODBQZXJjZW50QXV0b21hdGVkVGVzdENvdmVyYWdlX0dldEFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0E4MFBlcmNlbnRBdXRvbWF0ZWRUZXN0Q292ZXJhZ2VJbjRNb250aHNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjYwNTA1X3YxXw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988859">QA Wolf</a> provides white glove automation that guarantees coverage for your entire app. Here’s how:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">They embed with your team and design a bespoke test strategy for your product and goals</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">They automate complex coverage to help teams release 2-10x more often, on average</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">They maintain your test suite, so it scales with your application as it grows and evolves</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/g3hnhwumw5d6gobr/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyXzgwUGVyY2VudEF1dG9tYXRlZFRlc3RDb3ZlcmFnZV8yMDI2MDUwNS1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX3Rlcm09Y3RhLUdldEFQZXJzb25hbGl6ZWREZW1vRm9yWW91clRlYW0mdXRtX2NvbnRlbnQ9ODBQZXJjZW50QXV0b21hdGVkVGVzdENvdmVyYWdlX0dldEFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0E4MFBlcmNlbnRBdXRvbWF0ZWRUZXN0Q292ZXJhZ2VJbjRNb250aHNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjYwNTA1X3YxXw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988860">Get a personalized demo for your team</a> – and see why Drata’s Sr. Manager of QA said, “QA Wolf has given us full confidence on each release and we’re very happy.”</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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/9qhzhdudrmqz4lf9/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9pbnRyb2R1Y2luZy1zZWVyLWFnZW50Lz91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX2NhbXBhaWduPXNlZXItZnkyN3EyLXNlZXJhZ2VudCZ1dG1fY29udGVudD1uZXdzbGV0dGVyLXByZXNlbnRpbmctbGF1bmNoLWJsb2ctbGVhcm5tb3Jl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988861">Sentry</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 18px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>They just launched <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/9qhzhdudrmqz4lf9/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9pbnRyb2R1Y2luZy1zZWVyLWFnZW50Lz91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX2NhbXBhaWduPXNlZXItZnkyN3EyLXNlZXJhZ2VudCZ1dG1fY29udGVudD1uZXdzbGV0dGVyLXByZXNlbnRpbmctbGF1bmNoLWJsb2ctbGVhcm5tb3Jl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988861">Seer Agent in beta</a>, which lets you ask questions about your application and get detailed answers based on everything Sentry knows about it.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What color is the <code style="font-size: 15px;"><p></code> tag’s text?</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>p <span class="token keyword" style="color: #f38ba3; font-size: 15px;">class</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span><span class="token string" style="color: #f99157; font-size: 15px;">"hello"</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>Hello<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
body <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> red<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
p <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> green<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>hello <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> unset<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></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: 19px; line-height: 1.5;">Jarred Sumner added a <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/3ohphdu3glo4xdfr/aHR0cHM6Ly9naXRodWIuY29tL292ZW4tc2gvYnVuL2NvbW1pdC80NmQzYmMyOWYyNzBmYTg4MWRkNTczMGVmMTU0OWU4ODQwNzcwMWE1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988862">Zig <span role="img" aria-label="right arrow">➡️</span> Rust porting guide</a> to the Bun repo, which led to rampant speculation on HN about how this was all part of Dario’s master plan to ruin everything developers love – until Jarred chimed in saying <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/n2hohquv0p862nf6/aHR0cHM6Ly9uZXdzLnljb21iaW5hdG9yLmNvbS9pdGVtP2lkPTQ4MDE2ODgw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988863">the whole thread was an overreaction</a> to a small experiment. Never change, HN.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/wnh2h6uq6p5xmqu7/aHR0cHM6Ly9ibGFja3NtaXRoLnNoP3V0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988865">Blacksmith is a drop-in replacement for GitHub runners</a> that costs 60% less and is 2x faster because it runs on bare metal gaming CPUs. And all your actions are fully observable. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Ahmad Shadeed wrote another great interactive article, this time about <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/reh8h9umzr2wkwc2/aHR0cHM6Ly9pc2hhZGVlZC5jb20vYXJ0aWNsZS9yYW5nZS1zeW50YXgv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988866">why you should use range queries</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">A Vitest maintainer shared a proposal for a <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/08hwhgu2r5ognzcl/aHR0cHM6Ly9naXRodWIuY29tL3ZpdGVzdC1kZXYvdml0ZXN0L2Rpc2N1c3Npb25zLzEwMjcx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988867">framework-agnostic Vitest</a>. That would be great for the web, but probably <em>less great</em> for VoidZero’s shareholders.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/vqh3hmuor7xemmug/aHR0cHM6Ly9yZWFjdHVuaXZlcnNlLmNvbS8_dXRtX2NhbXBhaWduPWFydGlmaWNpYWxfaW50ZWxsaWdlbmNlJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1lbWFpbCZ1dG1fY29udGVudD1lYXJseQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988869">React Universe Summit</a> is coming to New York City on June 23, hosted by the <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/l2heh6ul7906qei6/aHR0cHM6Ly93d3cuY2FsbHN0YWNrLmNvbS8vP3V0bV9jYW1wYWlnbj1hcnRpZmljaWFsX2ludGVsbGlnZW5jZSZ1dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09ZW1haWwmdXRtX2NvbnRlbnQ9ZWFybHk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988870">Callstack</a> team. You’ll hear from speakers at Amazon, Expo, and JPMorgan Chase about how enterprise teams are applying AI in real-world React Native workflows. Early Bird pricing ends May 14. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Mat Duggan longingly penned an article called <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/m2h7h6u3zpgm25fm/aHR0cHM6Ly9tYXRkdWdnYW4uY29tL2lmLWktY291bGQtbWFrZS1teS1vd24tZ2l0aHViLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988871">If I could make my own GitHub</a>. It’s best read to the tune of “Time in a Bottle” by Jim Croce.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Julia Evans wrote a deep dive on <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/dphehmueng48dnhm/aHR0cHM6Ly9qdm5zLmNhL2Jsb2cvMjAyNi8wNS8wMi90ZXN0aW5nLXZ1ZS1jb21wb25lbnRzLWluLXRoZS1icm93c2VyLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988872">testing Vue components in the browser</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/e0hph0u7ogpqmgu8/aHR0cHM6Ly9naXRodWIuY29tL29wZW4tY2lyY2xlL2Zvcm1pc2No" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988873">formisch</a> is a modular, type-safe, and framework-agnostic form library. Aka a form library.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/7qh7h2u957kwd2hz/aHR0cHM6Ly9ub2RlanMub3JnL2VuL2Jsb2cvcmVsZWFzZS92MjYuMC4w" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988874">Node.js 26</a> comes with the Temporal API enabled by default, updates to the V8 JavaScript engine, and other goodies.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Lars Faye wrote about how <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/owhkhwuwdvkgx2tv/aHR0cHM6Ly9sYXJzZmF5ZS5jb20vYXJ0aWNsZXMvYWdlbnRpYy1jb2RpbmctaXMtYS10cmFw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988875">Agentic coding is a trap</a>. Fortunately I work from home, so I’ve been grinding in a trap house for years.</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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/9qhzhdudrmqz4lf9/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9pbnRyb2R1Y2luZy1zZWVyLWFnZW50Lz91dG1fc291cmNlPWJ5dGVzJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX2NhbXBhaWduPXNlZXItZnkyN3EyLXNlZXJhZ2VudCZ1dG1fY29udGVudD1uZXdzbGV0dGVyLXByZXNlbnRpbmctbGF1bmNoLWJsb2ctbGVhcm5tb3Jl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1852988861">Sentry</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What color is the <code style="font-size: 15px;"><p></code> tag’s text?</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>p <span class="token keyword" style="color: #f38ba3; font-size: 15px;">class</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span><span class="token string" style="color: #f99157; font-size: 15px;">"hello"</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>Hello<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
body <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> red<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
p <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> green<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>hello <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">color</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> unset<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The answer is <code style="font-size: 15px;">red</code> since <code style="font-size: 15px;">unset</code> “unsets” the style of the <code style="font-size: 15px;">p</code> tag, so it inherits from its parent – <code style="font-size: 15px;">body</code>.</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://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/z2hgh7uexv4p5ltp/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1852988876">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/p8hehqu4o03grpiq/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1852988877">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/x0hph3ue06r9kms5/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1852988878">Fireship</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://c5e21242.click.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l/6qhehoulegknxqio/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1852988879">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://c5e21242.unsubscribe.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/o8uqeqor33bqh6v7ewwhvhqee377vuoh4g6l" alt="">
</body>
</html>