<!DOCTYPE html>
<html>
<head>
<title>Bytes: TanStack Hotkeys near me</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> What two Pikachus can teach us about advanced web styling, Wasm comes to Hermes, and trying to figure out if Larry Ellison owns TikTok’s React libraries now.</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://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/7qh7h2u9qodom9fz/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDY0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242177">#464</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/sama-dario.jpg" alt="Sam Altman and Dario standing next to each other with hands raised" 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;">Cmd and Ctrl being forced to work interchangeably<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">TanStack Hotkeys near me</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Abraham Maslow famously stated that, “When you’re a TanStack hammer, every part of web dev looks like a nail that needs type-safety and a smoother developer experience.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">So we shouldn’t have been surprised last week when Kevin Van Cott & friends released <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/owhkhwuwprxr7gbv/aHR0cHM6Ly90YW5zdGFjay5jb20vaG90a2V5cy9sYXRlc3Q=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242178">TanStack Hotkeys (alpha)</a>, which provides a complete toolkit for handling keyboard shortcuts in your applications.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Hotkeys might seem like unlikely territory for TanStack’s 15th library, but it comes with enough small gotchas that can add up to a lot of annoying complexity when dealing with multiple keyboard layouts, operating systems, custom shortcuts, and more.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And it turns out that applying the TanStack approach to these problems should save a lot of time and headaches. <strong style="font-weight: 600;">Here’s how:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Type safety</strong> – You define keyboard shortcuts with a fully type-safe Hotkey <code style="font-size: 14px;">string type</code> that validates key combinations at the type level and gives you autocomplete for valid modifiers like <code style="font-size: 14px;">Alt+S</code> and <code style="font-size: 14px;">Shift+D</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Cross platform compatibility</strong> – The <code style="font-size: 14px;">Mod</code> modifier automatically maps to <code style="font-size: 14px;">Cmd</code> on macOS and <code style="font-size: 14px;">Ctrl</code> on Windows/Linux, so your shortcuts work everywhere without platform checks.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Better defaults</strong> – Including automatic <code style="font-size: 14px;">preventDefault</code> and <code style="font-size: 14px;">stopPropagation</code>, smartly ignoring shortcuts when input fields are focused, and automatic cleanup on <code style="font-size: 14px;">unmount</code>. Scoping hotkeys to refs or elements is also easy, so you can define context-aware keyboard shortcuts without unexpected side-effects.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Sequences and recording</strong> – Lets you build multi-step keyboard sequences like Vim-style commands or cheat codes with configurable timeouts. And you can let users record and customize their own shortcuts with a built-in hotkey recorder.</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> If type safety and sensible DX features can indeed fix anything, maybe Tanner can ship a library that’ll help those of us with IBS enjoy Crunchwrap Supremes like we’re 15 again <span role="img" aria-label="">🫠</span>.</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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/6qhehoulz7x7dzio/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGdW5kZWZpbmVk" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1834242182"><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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/58hvh8ugqm3mz2t6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkZ1bmRlZmluZWQ=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1834242184"><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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/g3hnhwumr3g3k4ar/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9V2h5JTIwJTQwdGFuX3N0YWNrJTIwaG90a2V5cyUyMGlzJTIwYWN0dWFsbHklMjBhJTIwcHJldHR5JTIwYmlnJTIwZGVhbCZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRnVuZGVmaW5lZA==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1834242187"><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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/48hvh7umvrwrnoix/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBV2h5JTIwJTQwdGFuX3N0YWNrJTIwaG90a2V5cyUyMGlzJTIwYWN0dWFsbHklMjBhJTIwcHJldHR5JTIwYmlnJTIwZGVhbCUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkZ1bmRlZmluZWQmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1834242191"><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="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/chicken-run.jpg" alt="Claymation chicken looking scared" 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;">Manual debugging is my passion<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/8ghqh3uozlwl53fk/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlZXItd29ya3Nob3Atc2VyaWVzLz91dG1fY2FtcGFpZ249c2Vlci1meTI3cTEtc2VlcndvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItd29ya3Nob3AtcHJpbWFyeS1yZWdpc3RlciZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242195">Free Workshop: Debugging with Sentry’s Seer</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Everyone knows manual debugging is the worst. That’s why Sentry is hosting a workshop series diving deep on how to set up their Seer agent and use it throughout your workflow.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The four sessions will cover:</p>
<ul>
<li>Feb 24 – Full end-to-end demo of debugging with Seer</li>
<li>Mar 3 – Root cause and fix production bugs with Seer</li>
<li>Mar 10 – Find bugs before they ship with Seer code review</li>
<li>Mar 17 – Debug while you build with Seer via MCP</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://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/8ghqh3uozlwl53fk/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlZXItd29ya3Nob3Atc2VyaWVzLz91dG1fY2FtcGFpZ249c2Vlci1meTI3cTEtc2VlcndvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItd29ya3Nob3AtcHJpbWFyeS1yZWdpc3RlciZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242195">RSVP here</a> to claim your spot.</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://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/m2h7h6u3v828nnsm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242198">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>Their <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/m2h7h6u3v828nnsm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242198">Front-end Developer Kit</a> comes with multiple free resources to help you improve your front-end monitoring and testing strategies.</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;">calculateTotalCost</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">mealCost<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> taxRate <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0.1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tip <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0.15</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> totalCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> mealCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> mealCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">*</span> taxRate <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> tip<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> totalCost<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;">let</span> total <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">calculateTotalCost</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">50</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">undefined</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</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>total<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;">Christoph Nakazawa wrote about <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/dphehmuev0d07qcm/aHR0cHM6Ly9jcG9qZXIubmV0L3Bvc3RzL2Zhc3Rlc3QtZnJvbnRlbmQtdG9vbGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242199">how to get the fastest front-end tooling for humans and AI</a>. Because only the blazingest will survive the AI revolution.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/z2hgh7uen353dwhp/aHR0cHM6Ly9mYW5kZi5jby8zTWdMOGk2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242203">Trigger.dev</a> lets you build resilient AI agents and workflows that scale automatically without hitting a timeout. Debug faster in Cursor and Claude using the custom MCP server and deep observability built directly into the <code style="font-size: 14px;">Trigger.dev</code> platform. <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/z2hgh7uen353dwhp/aHR0cHM6Ly9mYW5kZi5jby8zTWdMOGk2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242203">Deploy your first task today</a>. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">TikTok just released the first stable, open-source version of <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/x0hph3ueowkw7ki5/aHR0cHM6Ly90aWt0b2suZ2l0aHViLmlvL3NwYXJrbGluZy8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242205">Sparkling</a>, which provides the infrastructure to easily spin up a new Lynx app from scratch. I don’t <em>think</em> Larry Ellison technically owns this, but you might wanna turn on your VPN just in case.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Right on cue, <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/kkhmh2unrlzl9wcl/aHR0cHM6Ly9seW54anMub3JnL2Jsb2cvbHlueC0zLTY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242207">Lynx 3.6</a> comes with Lynx for AI, enhanced CSS capabilities, and hooks for ReactLynx because time is a flat circle.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/qvh8h8udzrer6mul/aHR0cHM6Ly93d3cuYWdlbnQuc2gvP3V0bV9jYW1wYWlnbj1hZ2VudCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242210">Agent Conf</a> is happening in Warsaw, Poland this September and is being hosted by Callstack (same team behind React Universe Conf). Speakers like Kent C Dodds and Kitze will be teaching how to design and orchestrate agents in modern software dev. And they built a very cool <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/qvh8h8udzrer6mul/aHR0cHM6Ly93d3cuYWdlbnQuc2gvP3V0bV9jYW1wYWlnbj1hZ2VudCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242210">landing page</a> for it. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tanstack Start just added <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/9qhzhdud0p4p25f9/aHR0cHM6Ly90YW5zdGFjay5jb20vc3RhcnQvbGF0ZXN0L2RvY3MvZnJhbWV3b3JrL3JlYWN0L2d1aWRlL2ltcG9ydC1wcm90ZWN0aW9u" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242212">import protection</a>, which prevents server-only code from leaking into client bundles and vice versa.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Eric Bailey wrote about how <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/3ohphdu307x7dkfr/aHR0cHM6Ly96ZXJvaGVpZ2h0LmNvbS9ibG9nL2Rlc2lnbi1zeXN0ZW1zLWNhbnQtYXV0b21hdGUtYXdheS1hbGwtb2YteW91ci1hY2Nlc3NpYmlsaXR5LWNvbnNpZGVyYXRpb25zLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242213">design systems can’t automate away all of your a11y considerations</a>. Unfortunately.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Chris Lattner wrote a deep dive on <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/n2hohquvm323o4c6/aHR0cHM6Ly93d3cubW9kdWxhci5jb20vYmxvZy90aGUtY2xhdWRlLWMtY29tcGlsZXItd2hhdC1pdC1yZXZlYWxzLWFib3V0LXRoZS1mdXR1cmUtb2Ytc29mdHdhcmU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242214">what the Claude C Compiler reveals about the future of software</a>, and how he managed to learn so much about compilers while being the most hated college basketball players of the 90s.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Convex engineers made a YouTube video breaking down <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/48hvh7umvrwr2obx/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1xUE9ZSThNYUFEbw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242215">exactly what happens when you push to Convex</a>, from a technical perspective. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Tzvetan Mikov from the React Native team wrote about how <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/wnh2h6uqnwmwr9c7/aHR0cHM6Ly90bWlrb3YuYmxvZ3Nwb3QuY29tLzIwMjYvMDIvd2ViYXNzZW1ibHktY29tZXMtdG8taGVybWVzXzAxODI5ODc0NTIwLmh0bWw=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242216">Wasm has come to Hermes</a> and why that’s a very big deal.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Mihir Koshti wrote a detailed breakdown of <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/reh8h9um40k0q2u2/aHR0cHM6Ly9zaGFkY25zcGFjZS5jb20vYmxvZy9yYWRpeC11aS12cy1iYXNlLXVp" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242217">Radix UI vs Base UI</a> that had better conform to all of my previously held biases, or I will be very upset.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Matthew Verive compared two official images of Pikachu to demonstrate <a href="https://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/08hwhgu2vdndm9fl/aHR0cHM6Ly9tYXR0aGV3LnZlcml2ZS5tZS9ibG9nL2NvbG9yLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242218">how color spaces mess with design</a>. Personally, I haven’t learned this much from two Pikachus since I bawled my eyes out during the climactic clone fight scene in <em>Pokémon: The First Movie</em>.</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://c5e21242.click.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/m2h7h6u3v828nnsm/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1834242198">Datadog</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The answer is 65. MDN explains “Non-strict functions that are passed rest, default, or destructured parameters will not sync new values assigned to parameters in the function body with the arguments object.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">If we remove the default parameters we get a different answer:</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;">calculateTotalCost</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">mealCost<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> taxRate<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> tip</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0.15</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arguments<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">2</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">5</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">let</span> totalCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> mealCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> mealCost <span class="token operator" style="color: #12b5e5; font-size: 14px;">*</span> taxRate <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> tip<span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> totalCost<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;">let</span> total <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">calculateTotalCost</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">50</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">undefined</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">10</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>total<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;">The answer with no default params is <code style="font-size: 14px;">72.5</code> (<code style="font-size: 14px;">50</code> + <code style="font-size: 14px;">7.5</code> + <code style="font-size: 14px;">15</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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/8ghqh3uozlwlg3fk/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1834242219">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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/l2heh6ule3q3ozc6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1834242221">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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/owhkhwuwprxr4gsv/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1834242226">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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86/x0hph3ueowkwnkb5/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1834242229">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/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/92u4m46p33tnh60w8d0c9hzdw8rg2uwhgx86" alt="">
</body>
</html>