<!DOCTYPE html>
<html>
<head>
<title>Bytes: The htmx loophole</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> Cloudflare durable hernias, Node.js hair care, and Anders Hejlsberg’s new MCP course.</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/g3hnhwum6pp0k4ur/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDM5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366859">#439</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/angry-spiderman.jpg" alt="Spiderman with a disappointed look" 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;">When the laser horse betrays your trust (again)<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">The htmx loophole</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">When Carson Gross promised that he would never release a v3 of htmx, I enthusiastically marked myself as <code style="font-size: 14px;">Safe</code> on Facebook from <em>ever having to write about HTML libraries again.</em></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But it turns out the HTML chaos monkeys found a loophole on Monday, when they skipped right over v3 and released <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/9qhzhdudz99el5f9/aHR0cHM6Ly9odG14Lm9yZy9lc3NheXMvdGhlLWZldGNoZW5pbmcv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366860">htmx v4 (alpha)</a> to the world. We never saw it coming.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They’re calling this update <code style="font-size: 14px;">The fetch()ening</code>, because after five years of riding the <code style="font-size: 14px;">XMLHttpRequest</code> horse, htmx is finally switching to the native <code style="font-size: 14px;">fetch()</code> API for all AJAX requests. This is a welcome sight to everyone but the biggest IE stans, since it dramatically simplifies htmx’s internals while also enabling built-in streaming response support.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And since this required quite a few breaking changes, the htmx team decided to sneak in a few more updates to this release while they were at it:</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;">Explicit inheritance</strong> – Attribute inheritance is now <em>explicit</em>, using the <code style="font-size: 14px;">:inherited</code> modifier. This improves locality of behavior and provides a lot more clarity than the previous implicit approach.</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;">History storage upgrades</strong> – It no longer uses <code style="font-size: 14px;">localStorage</code> snapshots for history, and will now issue a full page refresh request on navigation. This provides “much, much more reliable history restoration,” while simplifying the entire htmx codebase.</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;">View transitions & streaming</strong> – Smooth animated transitions between DOM states and built-in streaming/SSE support mean your hypermedia apps can finally feel a little more SPA-ish (without actually being one).</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> Props to Carson and the htmx team for both putting in a ton of work (and mental gymnastics) to make htmx 4 happen. Long live the laser horse.</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/3ohphdu34zzknksr/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM5" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1803366861"><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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/n2hohquv6rrlk4b6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0Mzk=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1803366862"><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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/48hvh7um6gg7nocx/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwdGhlJTIwZm9yYmlkZGVuJTIwaHRteCUyMDQlMjByZWxlYXNlJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDM5" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1803366863"><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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/wnh2h6uqxgglo9b7/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwdGhlJTIwZm9yYmlkZGVuJTIwaHRteCUyMDQlMjByZWxlYXNlJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQzOSZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1803366864"><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/love-job.jpg" alt="Emily Blunt in Devil Wears Prada saying, I love my job" 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;">When my team has to wait two hours before they can deploy anything<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/reh8h9umwxxo52a2/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMTA3LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTExMDdfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWhlYWRsaW5lLVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzQmVmb3JlMjAyNUVuZHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366865">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/08hwhgu2gzzp79tl/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMTA3LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTExMDdfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWJvZHktUUFXb2xm" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366866">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/8ghqh3uoq99753sk/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9jYXNlLXN0dWRpZXMvcWEtd29sZi1wdXRzLXRoZS1tYWdpYy1pbi1tZW93LXdvbGZzLW1vYmlsZS10ZXN0aW5nP3V0bV9jYW1wYWlnbj1BQ1FfQWxsX0RlbW9fQ29udmVyc2lvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfQ3V0UUFDeWNsZXMtUTRfMjAyNTExMDctTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PUN1dFFBQ3ljbGVzLVE0X0dldEFQZXJzb25hbGl6ZWREZW1vX05vbmVfSGVhZGxpbmUlM0FTcGVlZFVwWW91clRlYW1zUmVsZWFzZUN5Y2xlc0JlZm9yZTIwMjVFbmRzX19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTEwN192MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS0zMDBLUGVyWWVhckluRW5naW5lZXJpbmdDb3N0cw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366867">$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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/vqh3hmuoeggqk3ag/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9ob3ctaXQtd29ya3M_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9DdXRRQUN5Y2xlcy1RNF8yMDI1MTEwNy1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9Q3V0UUFDeWNsZXMtUTRfR2V0QVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzQmVmb3JlMjAyNUVuZHNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMTA3X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVByaW9yaXRpemVkQnlOZWVkQW5kVmFsdWU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366868">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/l2heh6ul6rrdkzc6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzLVE0XzIwMjUxMTA3LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlcy1RNF9HZXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNCZWZvcmUyMDI1RW5kc19fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTExMDdfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWN0YS1HZXRBUGVyc29uYWxpemVkRGVtbw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366869">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/m2h7h6u3meelnnsm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9haS1jb2RlLXJldmlldy0zMGstYnVncy1saWdodGVyLTUwLWZhc3Rlci8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTQtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItMzBrLWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366870">Sentry</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>They wrote about how their new <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/m2h7h6u3meelnnsm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9haS1jb2RlLXJldmlldy0zMGstYnVncy1saWdodGVyLTUwLWZhc3Rlci8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTQtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItMzBrLWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366870">AI Code Review tool</a> has already caught more than 30,000 bugs, and how they’ve improved its latency by 50% since launch.</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;">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 keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">x</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>
i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</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 function" style="color: #9d7dce; font-size: 14px;">x</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>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); 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;">Thomas Ptacek made the case for why <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/dphehmue85527qam/aHR0cHM6Ly9mbHkuaW8vYmxvZy9ldmVyeW9uZS13cml0ZS1hbi1hZ2VudC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366871">you should write an agent</a>. But as my mom will tell you, telling me I “should” do something is a good way to make sure I don’t take a shower for 13 months.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/e0hph0u7q44dn0a8/aHR0cHM6Ly93d3cuY29udmV4LmRldi9oYWNrYXRob25zL3RhbnN0YWNr" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366872">The TanStack Start Hackathon</a> just kicked off, and you can compete to win $140k in cash, prizes, and credits by building the smoothest, butteriest, most interactive full-stack app with TanStack Start. Godspeed. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Yakko Majuri explained why his team <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/7qh7h2u9wzzx49sz/aHR0cHM6Ly9ibG9nLnlha2tvbWFqdXJpLmNvbS9ibG9nL3B5dGhvbi10by1ub2Rl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366873">migrated from Python to Node.js</a> one week after launching their app. But hey, I’d do it too if Matteo Collina personally offered me $250k worth of equity in his new hair care brand.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/owhkhwuwgoo08gfv/aHR0cHM6Ly9kZXZlbG9wZXIuYXBwbGUuY29tL2RvY3VtZW50YXRpb24vc2FmYXJpLXJlbGVhc2Utbm90ZXMvc2FmYXJpLTI2XzItcmVsZWFzZS1ub3Rlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366874">Safari 26.2 beta</a> comes with improved blur filter rendering, support for the <code style="font-size: 14px;">cursor</code> CSS property, and a ton more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Nathan Leung wrote about <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/z2hgh7uepwwmdwip/aHR0cHM6Ly9ydW5oYXJib3IuY29tL2Jsb2cvMjAyNS0xMC0yNi1pbXByb3ZpbmctZGVlcGx5LW5lc3RlZC1yZWFjdC1yZW5kZXItcGVyZm9ybWFuY2Utd2l0aC1qb3RhaS1hdG9taWMtc3RhdGU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366875">using atomic state to improve React performance in deeply nested component trees</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/p8hehqu4gxxp78hq/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPXE0JnV0bV9jb250ZW50PXNlY29uZGFyeSZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366876">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;">Someone keeps flagging Ripple’s website as being a <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/x0hph3ue93347kt5/aHR0cHM6Ly94LmNvbS90cnVlYWRtL3N0YXR1cy8xOTg2MDcyNDU1NzI3OTQwMDE2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366877">phishing/malicious domain</a>. And I’ve got to say, even I’m surprised that all twelve Web Components users would stoop this low.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Vadim Kotov and Travis Turner wrote about <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/6qhehoulnoo32zco/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL2Nocm9uaWNsZXMvd2h5LXN0YXJ0dXBzLWNob29zZS1yZWFjdC1hbmQtd2hlbi15b3Utc2hvdWxkLW5vdA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366878">when you shouldn’t choose React</a>. What did I literally just say about telling me things I should/shouldn’t do, guys?</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/kkhmh2un6mmo9wsl/aHR0cHM6Ly93d3cucm9ja2V0Lm5ldy8_dXRtX2NhbXBhaWduPTd0aG5vdnNlY29uZGFyeSZ1dG1fbWVkaXVtPWJ5dGVzJnV0bV9zb3VyY2U9bmV3c2xldHRlcg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366879">Rocket</a> is pioneering Vibe Solutioning, turning prompts or Figma designs into production-ready web and mobile apps. Use <code style="font-size: 14px;">/</code> and <code style="font-size: 14px;">@</code> commands to execute tasks with precision and context, making repetitive workflows fast, accurate, and effortless. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Anders Hejlsberg spoke about <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/58hvh8ugk77492u6/aHR0cHM6Ly9naXRodWIuYmxvZy9kZXZlbG9wZXItc2tpbGxzL3Byb2dyYW1taW5nLWxhbmd1YWdlcy1hbmQtZnJhbWV3b3Jrcy90eXBlc2NyaXB0cy1yaXNlLWluLXRoZS1haS1lcmEtaW5zaWdodHMtZnJvbS1sZWFkLWFyY2hpdGVjdC1hbmRlcnMtaGVqbHNiZXJnLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366880">TypeScript rise in the AI era</a>. It was really interesting, but I found it a little off-putting when he begged the interviewer to buy his MCP course.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Ollie Williams wrote about <a href="https://click.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/25h2h9u34ddqozb3/aHR0cHM6Ly9vbGxpZXdpbGxpYW1zLnh5ei9ibG9nL3Nhbml0aXplci8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366881">setHTML(), Trusted Types and the Sanitizer API</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/qvh8h8udonnl6mal/aHR0cHM6Ly9ib3Jpc3RhbmUuY29tL2Jsb2cvd2hhdC1hcmUtY2xvdWRmbGFyZS1kdXJhYmxlLW9iamVjdHMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366882">What even are Cloudflare Durable Objects?</a> Boris Tane wrote a very deep dive to try and find out. Now he just needs to write about “what causes ingunial hernia pain right after eating Del Taco” – and he will have answered the other I’ve always been afraid to ask.</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/m2h7h6u3meelnnsm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9haS1jb2RlLXJldmlldy0zMGstYnVncy1saWdodGVyLTUwLWZhc3Rlci8_dXRtX2NhbXBhaWduPWFpY29kZXJldmlldy1meTI2cTQtYWljb2RlcmV2aWV3bGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItMzBrLWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1803366870">Sentry</a>
</h4></div>
</div>
<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;">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 keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">x</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>
i<span class="token operator" style="color: #12b5e5; font-size: 14px;">++</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</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 function" style="color: #9d7dce; font-size: 14px;">x</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>i<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); 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;">The answer is <code style="font-size: 14px;">10</code>. Here’s how it works.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">For clarity, we can refactor <code style="font-size: 14px;">i += x()</code> to be <code style="font-size: 14px;">i = i + x()</code>. From there, the interpreter begins evaluating our code. Before it evaluates the function invocation, it seems that <code style="font-size: 14px;">i</code> evaluates to <code style="font-size: 14px;">0</code>, so now our code is <code style="font-size: 14px;">i = 0 + x()</code>. The invocation of <code style="font-size: 14px;">x</code> returns <code style="font-size: 14px;">10</code>, so now it’s <code style="font-size: 14px;">i = 0 + 10</code>, which gives us <code style="font-size: 14px;">i = 10</code>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Note that if you swap the order of <code style="font-size: 14px;">i</code> and <code style="font-size: 14px;">x()</code> like <code style="font-size: 14px;">i = x() + i</code> you get a different value - <span role="img" aria-label="people hugging">🫂</span>.</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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/g3hnhwum6pp0z4fr/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1803366883">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/9qhzhdudz99e25h9/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1803366884">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/3ohphdu34zzkdkfr/aHR0cHM6Ly91aS5kZXY=" url-id="1803366885">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3/n2hohquv6rrlo4c6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1803366886">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/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/27uepe0gddioh8dg4kmh3hgz3e344hghm2v3" alt="">
</body>
</html>