<!DOCTYPE html>
<html>
<head>
<title>Bytes: There's no place like Chrome</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> JavaScript cryptids, “not smart enough for Rust,” and the undeniable beauty of fixed-width.</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/8ghqh3uo962d9wak/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDQ3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524181">#447</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/hover-priest.jpg" alt="A priest in church on a hoverboard" 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;">Preaching the gospel of the platform in 2025<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">There’s no place like Chrome</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The Chrome team just released <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/vqh3hmuog9v0glbg/aHR0cHM6Ly9jaHJvbWUuZGV2L2Nzcy13cmFwcGVkLTIwMjUv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524182">CSS Wrapped 2025</a>, which is a lot like <em>Spotify Wrapped</em> – but instead of revealing that you’re still a late-2000s indie sad boi who can’t stop listening to Paramore, it shows off all the new CSS and UI features that landed in Chrome this year.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And there’s a <em>lot</em>. The team shipped 22 new features in 2025, and most of them are genuinely useful and interesting. All killer, no filler.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here’s a quick look at our top 5:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Customizable <code style="font-size: 14px;"><select></code></strong> – A new <code style="font-size: 14px;">appearance: base-select</code> property lets you fully style native HTML <code style="font-size: 14px;"><select></code> dropdowns with CSS. This lets you customize the select button, the dropdown list, and the options (even with HTML content and <code style="font-size: 14px;"><selectedcontent></code>).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Native CSS carousels and scroll navigations</strong> – <code style="font-size: 14px;">::scroll-button()</code> and <code style="font-size: 14px;">::scroll-marker()</code> let you build functional, accessible slideshows and carousels with pure CSS + HTML. The browser automatically generates “previous/next” buttons (scroll buttons), handles enabling/disabling when you reach the ends, and supports all the keyboard and accessibility semantics.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Invoker Commands</strong> – <code style="font-size: 14px;">commandfor</code> and <code style="font-size: 14px;">command="show-modal"</code> allow buttons to declaratively control dialogs and popovers, without JavaScript or event listeners.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;"><code style="font-size: 14px;">shape()</code> for fancy clipping</strong> – The new <code style="font-size: 14px;">shape()</code> function lets you define responsive clipping paths in pure CSS for more complex, responsive shapes in CSS. It also plays nicely with custom properties, so you can animate the control points and build “CSS blob” avatars and other funky stuff without needing to mess with SVGs.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;"><code style="font-size: 14px;">if()</code> statements in CSS</strong> – Lets you write ternary-style conditionals right in your properties, like <code style="font-size: 14px;">flex-direction: if(media(orientation: landscape): row; else: column);</code> instead of juggling a bunch of tiny @media blocks for one rule. Hallelujah.</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> I know you think that music peaked when Arcade Fire released <em>Neon Bible</em> in 2007 – but thankfully, CSS keeps getting better and better.</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/l2heh6ulrmn2r2s6/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQ3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1813524183"><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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/m2h7h6u3e6q5ezum/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1813524184"><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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/dphehmue59o65gfm/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9Q1NTJTIwV3JhcHBlZCUyMGlzJTIwbGlrZSUyMFNwb3RpZnklMjBXcmFwcGVkJTIwJUUyJTgwJTkzJTIwYnV0JTIwaW5zdGVhZCUyMG9mJTIwcmV2ZWFsaW5nJTIwdGhhdCUyMHlvdSUyN3JlJTIwc3RpbGwlMjBhJTIwbGF0ZS0yMDAwcyUyMGluZGllJTIwc2FkJTIwYm9pJTIwd2hvJTIwY2FuJTI3dCUyMHN0b3AlMjBsaXN0ZW5pbmclMjB0byUyMFBhcmFtb3JlJTJDJTIwaXQlMjBzaG93cyUyMG9mZiUyMHRoZSUyMG5ldyUyMENTUyUyMGZlYXR1cmVzJTIwdGhhdCUyMGxhbmRlZCUyMGluJTIwQ2hyb21lJTIwdGhpcyUyMHllYXIuJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQ3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1813524185"><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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/e0hph0u743lv43t8/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQ1NTJTIwV3JhcHBlZCUyMGlzJTIwbGlrZSUyMFNwb3RpZnklMjBXcmFwcGVkJTIwJUUyJTgwJTkzJTIwYnV0JTIwaW5zdGVhZCUyMG9mJTIwcmV2ZWFsaW5nJTIwdGhhdCUyMHlvdSUyN3JlJTIwc3RpbGwlMjBhJTIwbGF0ZS0yMDAwcyUyMGluZGllJTIwc2FkJTIwYm9pJTIwd2hvJTIwY2FuJTI3dCUyMHN0b3AlMjBsaXN0ZW5pbmclMjB0byUyMFBhcmFtb3JlJTJDJTIwaXQlMjBzaG93cyUyMG9mZiUyMHRoZSUyMG5ldyUyMENTUyUyMGZlYXR1cmVzJTIwdGhhdCUyMGxhbmRlZCUyMGluJTIwQ2hyb21lJTIwdGhpcyUyMHllYXIuJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ0NyZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1813524186"><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/grinch-smile.jpg" alt="Grinch smiling mischievously" 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 you realize AI can do the worst part of your job<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/7qh7h2u9z26lzraz/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9wbGF0Zm9ybT91dG1fY2FtcGFpZ249QUNRX0FsbF9XYWl0bGlzdF9fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9BSVdhaXRsaXN0XzIwMjUxMjA5LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1BSVdhaXRsaXN0X0pvaW5FYXJseUFjY2Vzc1RvVHJ5SXRPdXRfTm9uZV9IZWFkbGluZSUzQUp1c3RMYXVuY2hlZEFuQUlUaGF0QnVpbGRzU3VycHJpc2luZ2x5Q29tcGxleFRlc3RzRm9yWW91X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTIwOV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09aGVhZGxpbmUtSnVzdExhdW5jaGVkQW5BSVRoYXRCdWlsZHNTdXJwcmlzaW5nbHlDb21wbGV4VGVzdHNGb3JZb3U=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524187">Just launched: an AI that builds surprisingly complex tests for you</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Now you can prompt the brand new <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/owhkhwuwom69oqbv/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9wbGF0Zm9ybT91dG1fY2FtcGFpZ249QUNRX0FsbF9XYWl0bGlzdF9fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9BSVdhaXRsaXN0XzIwMjUxMjA5LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1BSVdhaXRsaXN0X0pvaW5FYXJseUFjY2Vzc1RvVHJ5SXRPdXRfTm9uZV9IZWFkbGluZSUzQUp1c3RMYXVuY2hlZEFuQUlUaGF0QnVpbGRzU3VycHJpc2luZ2x5Q29tcGxleFRlc3RzRm9yWW91X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTIwOV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS1RQVdvbGZBSQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524188">QA Wolf AI</a> to test anything you want, like “verify login works” – and it builds production-grade Playwright & Appium tests for you <span role="img" aria-label="exploding head">🤯</span>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And unlike other AI tools, it can handle the deepest, most complex parts of your app <em>without flaking</em>, because it breaks each step into deterministic code with specialized agents:</p>
<ul>
<li>
<strong style="font-weight: 600;">Mapping Agents</strong> explore your app and learn every surface</li>
<li>
<strong style="font-weight: 600;">Automation agents</strong> write and run deterministic tests</li>
<li>
<strong style="font-weight: 600;">Maintenance Agents</strong> debug failures and suggest fixes</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/z2hgh7uew2k6wmap/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9wbGF0Zm9ybT91dG1fY2FtcGFpZ249QUNRX0FsbF9XYWl0bGlzdF9fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9BSVdhaXRsaXN0XzIwMjUxMjA5LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1BSVdhaXRsaXN0X0pvaW5FYXJseUFjY2Vzc1RvVHJ5SXRPdXRfTm9uZV9IZWFkbGluZSUzQUp1c3RMYXVuY2hlZEFuQUlUaGF0QnVpbGRzU3VycHJpc2luZ2x5Q29tcGxleFRlc3RzRm9yWW91X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTIwOV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Y3RhLUpvaW5FYXJseUFjY2Vzc1RvVHJ5SXRPdXQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524189">Join early access to try it out</a> – and see why Doordash, OpenAI, and hundreds of other teams already trust QA Wolf.</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="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/x0hph3ue3vp23gh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524191">Datadog</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 created this <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/x0hph3ue3vp23gh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524191">The Front-end Developer Kit</a> with a best practices guide for front-end testing strategies, a solutions brief showing how to catch and resolve issues proactively, and more.</em></p>
</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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">shouldAlert</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">durationInWarehouse<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> temperature</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_TEMPERATURE</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">30</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// °C</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">SECONDARY_TEMPERATURE</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">25</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// °C</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_DURATION</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Days</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> temperature <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_TEMPERATURE</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">&&</span> durationInWarehouse <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_DURATION</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">||</span> temperature <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">SECONDARY_TEMPERATURE</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;"><a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/6qhehoulo85r0vso/aHR0cHM6Ly90YW5zdGFjay5jb20vYmxvZy90YW5zdGFjay1haS1hbHBoYS15b3VyLWFpLXlvdXItd2F5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524192">TanStack AI (alpha)</a> promises to be a framework-agnostic AI toolkit for developers who want full control of their stack. It comes with server support across multiple languages, adapters for all the LLM providers, and more. Because you can’t spell, “I am <del>Lord Voldemort</del> TanStack” without AI.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Our very own Lynn Fisher just released her annual <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/e0hph0u743lv5pi8/aHR0cHM6Ly9seW5uYW5kdG9uaWMuY29tLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524193">personal site update</a>, and you’ve never seen a tiny, fixed-width website this beautiful in your life.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/7qh7h2u9z26l36cz/aHR0cHM6Ly9zcnYuYnV5c2VsbGFkcy5jb20vYWRzL2xvbmcveC9USEgyWUtTUVRUVFRUVDQ1UFlSQ0xUVFRUVFRERUVKWTI2VFRUVFRUTFRGSUNCVlRUVFRUVEVCRFZSV0lLV0RVVjdRRktPTEhLNzRNUDVERUNSSzZOSjRJUEo3VA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524194">AppSignal</a> gives you logs, metrics, traces, and all the observability tools you need – without the enterprise price tag. Built for dev teams, not Fortune 500s. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Cassidoo Williams has been participating in the <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/owhkhwuwom695nsv/aHR0cHM6Ly9jYXNzaWRvby5jby90YWcvdGVjaG5pY2FsLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524195">technical blogvent calendar for blogmas</a>, just like the ancient Gregorian monks who came before her.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Oxlint’s type-aware linting has reached <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/z2hgh7uew2k60rcp/aHR0cHM6Ly92b2lkemVyby5kZXYvcG9zdHMvYW5ub3VuY2luZy1veGxpbnQtdHlwZS1hd2FyZS1saW50aW5nLWFscGhh" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524196">alpha status</a>, so type-aware rules can now be manually configured, disabled with comments, and fixed automatically.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/p8hehqu4xw268lfq/aHR0cHM6Ly9hdXRoMC5jb20vYWk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524197">Auth0 for AI Agents</a> is now Generally Available (GA)! You can now securely connect your AI agents to apps and data, control critical actions that agents can perform plus the data they can access, and enable human in the loop confirmation for agent actions. It includes the guardrails you need to empower your AI agent, in one single place. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Francis Bouvier shared why his team <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/x0hph3ue3vp2x7a5/aHR0cHM6Ly9saWdodHBhbmRhLmlvL2Jsb2cvcG9zdHMvd2h5LXdlLWJ1aWx0LWxpZ2h0cGFuZGEtaW4temln" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524198">built Lightpanda in Zig</a>. TLDR: “we’re not smart enough for C++ or Rust” (their words). 10/10 for honesty.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Giles Thomas wrote about <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/6qhehoulo85r0pto/aHR0cHM6Ly93d3cuZ2lsZXN0aG9tYXMuY29tLzIwMjUvMTIvbGxtLWZyb20tc2NyYXRjaC0yOC10cmFpbmluZy1hLWJhc2UtbW9kZWwtZnJvbS1zY3JhdGNo" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524199">training a base model from scratch on an RTX 3090</a>, which is part 28 of his “Writing an LLM from scratch” series. Thank goodness for people who don’t have hobbies.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Sergiy Dybskiy wrote on the Sentry blog about <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/kkhmh2unm05w4lul/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9maXgtbi1wbHVzLW9uZS1kYXRhYmFzZS1pc3N1ZXMtd2l0aC1zZW50cnktc2Vlci8_dXRtX2NhbXBhaWduPXNlZXItZnkyNnE0LWV2ZXJncmVlbiZ1dG1fY29udGVudD1uZXdzbGV0dGVyLW4xLXF1ZXJ5LWJsb2ctbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524200">Eliminating N+1 Queries with Seer’s automated root cause analysis feature</a>. What’s an N+1 Query, you ask? It’s a performance problem where your app makes a bunch of unnecessary database queries in a loop, which can be very painful to fix – until now. Thanks Sergiy. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Andrew Nesbitt wrote a nice, cheery article called <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/58hvh8ug7dnxlgf6/aHR0cHM6Ly9uZXNiaXR0LmlvLzIwMjUvMTIvMDYvZ2l0aHViLWFjdGlvbnMtcGFja2FnZS1tYW5hZ2VyLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524201">GitHub Actions has a package manager, and it might be the worst</a>. I guess that explains why $MSFT has been down this month.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/25h2h9u3dp89n4u3/aHR0cHM6Ly92YWxpYm90LmRldi9ibG9nL3ZhbGlib3QtdjEuMi1yZWxlYXNlLW5vdGVzLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524202">Valibot 1.2</a> comes with powerful transformation actions for type coercion, new metadata features to improve AI tool integration, and more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Erik Thorsell published his take on <a href="https://click.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/qvh8h8udnm4wqnul/aHR0cHM6Ly90aG9yc2VsbC5pby8yMDI1LzEyLzA3L2VzdGltYXRlcy5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524203">why estimates are the bane of every dev team’s life</a>. That’s true, although the current bane of <em>my</em> team’s life is the cryptid that lives in our office parking garage and follows us to our cars at night.</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="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug: Solution</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/x0hph3ue3vp23gh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1813524191">Datadog</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;">console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">shouldAlert</span><span class="token punctuation" style="color: #231F20; 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> <span class="token number" style="color: #fcba28; font-size: 14px;">26</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// true (should be false)</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">shouldAlert</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">8</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">26</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// true</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token function" style="color: #9d7dce; font-size: 14px;">shouldAlert</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">8</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">32</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// true</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">In JavaScript, <code style="font-size: 14px;">&&</code> has higher precedence than <code style="font-size: 14px;">||</code>, so the expression is grouped as
<code style="font-size: 14px;">(A && B) || C</code> even though JavaScript still evaluates left-to-right.
That grouping means the final <code style="font-size: 14px;">|| C</code> part gets applied more broadly than intended, causing the <code style="font-size: 14px;">true</code> result.</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;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">shouldAlert</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">durationInWarehouse<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> temperature</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_TEMPERATURE</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">30</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// °C</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">SECONDARY_TEMPERATURE</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">25</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// °C</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_DURATION</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// Days</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> temperature <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_TEMPERATURE</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">||</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>
durationInWarehouse <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">CRITICAL_DURATION</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;">&&</span> temperature <span class="token operator" style="color: #12b5e5; font-size: 14px;">></span> <span class="token constant" style="color: #12b5e5; font-size: 14px;">SECONDARY_TEMPERATURE</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>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Or you can just avoid ternaries altogether and spare your teammates and your future self pain by using a proper if/else statement <span role="img" aria-label="upside-down face">🙃</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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/g3hnhwump8l9xxbr/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1813524204">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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/3ohphdu3z52mv0cr/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1813524206">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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/n2hohquvr9xqeqb6/aHR0cHM6Ly91aS5kZXY=" url-id="1813524207">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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov/wnh2h6uqg2k78ph7/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1813524209">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/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/5quqzqpw00b7hnlm96ra6h9286v44bnhxdov" alt="">
</body>
</html>