<!DOCTYPE html>
<html>
<head>
<title>Bytes: Angular 21 Savage</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> Beating <em>Crash Bandicoot 3</em> with JavaScript, going full squircle, and launching a new VS Code fork every day until we get the Epstein Files.</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/25h2h9u3dvrpg5c3/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDQz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857887">#443</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/fish-glasses.jpg" alt="A fish from spongebob with glasses looking smug" 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;">The Angular team watching everyone complain about React in 2025<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Angular 21 Savage</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Google’s market cap increased by $170,000,000,000 this week, and I think we can all agree that yesterday’s <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/qvh8h8udn7gm2gal/aHR0cHM6Ly9hbmd1bGFyLmRldi9ldmVudHMvdjIx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857888">Angular 21</a> release is <em>probably</em> the biggest reason why.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It comes with a <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/g3hnhwumpd78odsr/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1EREFIT1JWelE1Zw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857889">launch video</a> where Mark Techson gets sucked into a video game like <em>Jumanji</em>, a new MCP server that makes it easier for agents to write better Angular code, and a new Angular mascot that kind of looks like the Hamburger Helper logo had a baby with one of those thumb bad guys from <em>Spy Kids.</em> The Goog is back, baby!</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But this release also ships a bunch of long-awaited features that continue to transform Angular into a surprisingly hip and modern framework in 2025. Let’s take a closer look:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Signal Forms (experimental)</strong> – A new library that lets you manage form state in a fully type-safe way using Signals to provide automatic synchronization between your data model and the UI.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Angular Aria</strong> – A new component library that prioritizes accessibility and provides 8 UI patterns with 13 unstyled components that all use modern Angular directives and are signal-based and easily customizable.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Default Zoneless</strong> – With Signals handling state management duties in Angular now, Zone.js and all of its features are no longer included by default in v21. This is a big W for Angular developers looking for better performance in large applications, and a big L for Angular developers who want to pretend it’s still the good old days of 2017 before their hairline betrayed them.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Vitest as the new test runner</strong> – It’s now stable and ready to use with the <code style="font-size: 14px;">ng test</code> command. Vite ecosystem supremacy increases.</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> A few years ago, it felt like Angular was getting left behind by the newer cool-kid frameworks on the block. But now, you could argue that it’s more cutting edge than ever thanks to its embrace of Signals, AI tooling, and Vite. Never bet against the Goog.</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/9qhzhdud9qkv36h9/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1807857890"><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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/3ohphdu3zo659rhr/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDM=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1807857891"><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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/n2hohquvr8w955i6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwYWxsJTIwdGhlJTIwYmVzdCUyMHN0dWZmJTIwaW4lMjBBbmd1bGFyJTIwMjEmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NDM=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1807857892"><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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/48hvh7umg5zdqnux/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwYWxsJTIwdGhlJTIwYmVzdCUyMHN0dWZmJTIwaW4lMjBBbmd1bGFyJTIwMjElMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDQzJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1807857893"><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/red-devil.jpg" alt="A guy in a devil costume talking to a little kid" 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;">The devil tempting me to ship without running my team's janky test suite<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/wnh2h6uqg592vob7/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS9zaGlwLWZhc3Rlci1zdHJhdGVnaWVzLWZvci11cHNraWxsaW5nLXFhLWZvci1haS1pbi0yMDI2L3JlZ2lzdHJhdGlvbj91dG1fY2FtcGFpZ249QUNRX0FsbF9FdmVudCUyMFJlZ2lzdHJhdGlvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfVXBza2lsbGluZ0ZvckFJXzIwMjUxMTIxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1VcHNraWxsaW5nRm9yQUlfUlNWUEZvclRoZVdvcmtzaG9wX05vbmVfSGVhZGxpbmUlM0FTdHJhdGVnaWVzVG9IZWxwWW91clRlYW1TaGlwRmFzdGVyV2l0aEFJSW4yMDI2X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTEyMV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09aGVhZGxpbmUtU3RyYXRlZ2llc1RvSGVscFlvdXJUZWFtU2hpcEZhc3RlcldpdGhBSUluMjAyNg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857894">Strategies to help your team ship faster with AI in 2026 (webinar)</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Capgemini found that 70% of teams don’t have the skills needed to actually benefit from AI tools – especially when it comes to E2E testing and QA automation.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s why Sebastian Antonucci, <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/reh8h9umx29lvqf2/aHR0cHM6Ly9xYXdvbGYuY29tP3V0bV9jYW1wYWlnbj1BQ1FfQWxsX0V2ZW50JTIwUmVnaXN0cmF0aW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9VcHNraWxsaW5nRm9yQUlfMjAyNTExMjEtTm9uZV9FeHBlcmltZW50LUZBTFNFJnV0bV9jb250ZW50PVVwc2tpbGxpbmdGb3JBSV9SU1ZQRm9yVGhlV29ya3Nob3BfTm9uZV9IZWFkbGluZSUzQVN0cmF0ZWdpZXNUb0hlbHBZb3VyVGVhbVNoaXBGYXN0ZXJXaXRoQUlJbjIwMjZfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUxMTIxX3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVFBV29sZg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857895">QA Wolf</a> Staff Engineering Lead is hosting a <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/8ghqh3uo90e6posk/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS9zaGlwLWZhc3Rlci1zdHJhdGVnaWVzLWZvci11cHNraWxsaW5nLXFhLWZvci1haS1pbi0yMDI2L3JlZ2lzdHJhdGlvbj91dG1fY2FtcGFpZ249QUNRX0FsbF9FdmVudCUyMFJlZ2lzdHJhdGlvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfVXBza2lsbGluZ0ZvckFJXzIwMjUxMTIxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1VcHNraWxsaW5nRm9yQUlfUlNWUEZvclRoZVdvcmtzaG9wX05vbmVfSGVhZGxpbmUlM0FTdHJhdGVnaWVzVG9IZWxwWW91clRlYW1TaGlwRmFzdGVyV2l0aEFJSW4yMDI2X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTEyMV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Ym9keS1GcmVlV29ya3Nob3A=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857897">free workshop</a> next month for engineering leaders on the key strategies QA teams need to upskill with AI.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You’ll learn:</p>
<ul>
<li>How the “automation cliff” affects test coverage for your team</li>
<li>How to implement prompt-driven test design and AI code review</li>
<li>How to train your team to use these tools to be more effective</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/l2heh6ulr05mvri6/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS9zaGlwLWZhc3Rlci1zdHJhdGVnaWVzLWZvci11cHNraWxsaW5nLXFhLWZvci1haS1pbi0yMDI2L3JlZ2lzdHJhdGlvbj91dG1fY2FtcGFpZ249QUNRX0FsbF9FdmVudCUyMFJlZ2lzdHJhdGlvbnNfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfVXBza2lsbGluZ0ZvckFJXzIwMjUxMTIxLU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1VcHNraWxsaW5nRm9yQUlfUlNWUEZvclRoZVdvcmtzaG9wX05vbmVfSGVhZGxpbmUlM0FTdHJhdGVnaWVzVG9IZWxwWW91clRlYW1TaGlwRmFzdGVyV2l0aEFJSW4yMDI2X19fX05ld3NsZXR0ZXItUHJpbWFyeVBsYWNlbWVudF8yMDI1MTEyMV92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXMmdXRtX3Rlcm09Y3RhLVJTVlBGb3JUaGVXb3Jrc2hvcA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857899">RSVP for the workshop</a> – and learn how to build a human + AI testing workflow that actually helps your team ship faster.</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/m2h7h6u3egk60whm/aHR0cHM6Ly9hcHJ5c2UuY29tL2RvY3gtZWRpdG9yLXNkay1idXlpbmctZ3VpZGU_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMTFfMjAmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857900">Apryse</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/m2h7h6u3egk60whm/aHR0cHM6Ly9hcHJ5c2UuY29tL2RvY3gtZWRpdG9yLXNkay1idXlpbmctZ3VpZGU_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMTFfMjAmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857900">DOCX editor SDK buying guide</a> that explains the technical challenges of working with DOCX, and how to implement editing with JavaScript.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Criteria:</p>
<ol>
<li>Sort the array in numerical order</li>
<li>If the array has an even number of elements, return the average of the two middle elements</li>
<li>If the array has an odd number of elements, return the middle element</li>
</ol>
<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;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">sort</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 parameter" style="color: #f38ba3; font-size: 14px;">a<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> b</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> a <span class="token operator" style="color: #12b5e5; font-size: 14px;">-</span> b<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;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; font-size: 14px;">%</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> mid1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span> <span class="token operator" style="color: #12b5e5; 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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> mid2 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; 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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>mid1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> mid2<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;">2</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;">else</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>Math<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">floor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; 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;">1</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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> numbers1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token 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;">3</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;">4</span><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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> numbers2 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">40</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">20</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">60</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">80</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 number" style="color: #fcba28; font-size: 14px;">30</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><span class="token function" style="color: #9d7dce; font-size: 14px;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers1<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;">// 4</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;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers2<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;">// 45</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;">Kyle Petroski and Matthew Frail wrote about <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/dphehmue54z9wdcm/aHR0cHM6Ly9zaG9waWZ5LmVuZ2luZWVyaW5nL2JmY20tcmVhZGluZXNzLTIwMjU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857901">How their team prepares Shopify for BFCM</a> – beyond just the typical burning of sage and all-night seances at Tobi’s penthouse in Toronto.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Here are <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/e0hph0u74p93w6f8/aHR0cHM6Ly93d3cuY2FsbHN0YWNrLmNvbS9ibG9nL3doYXQteW91LWNhbi1idWlsZC13aXRoLXJlYWN0LW5hdGl2ZS1vbi1tZXRhLXF1ZXN0P3V0bV9jYW1wYWlnbj1tZXRhJnV0bV9jb250ZW50PXdoYXQteW91LWNhbi1idWlsZC13aXRoLXJlYWN0LW5hdGl2ZS1vbi1tZXRhLXF1ZXN0JnV0bV9tZWRpdW09ZW1haWwmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857902">4 React Native app ideas</a> to get you into the Meta Horizon Start Dev Competition. Submit by Dec 9, 2025 and take home $25k. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Bramus wrote a tutorial on <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/7qh7h2u9zkv2plfz/aHR0cHM6Ly93d3cuYnJhbS51cy8yMDI1LzExLzE3L2Zha2luZy10d28tcGhhc2Utdmlldy10cmFuc2l0aW9ucy13aXRoLXRoZS1uYXZpZ2F0aW9uLWFwaXMtcHJlY29tbWl0aGFuZGxlci8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857903">faking two-phase View Transitions with the Navigation API</a>. “They’re illusions, Michael.”</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/owhkhwuwok3mldcv/aHR0cHM6Ly9hbnRpZ3Jhdml0eS5nb29nbGUv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857904">Google launched Antigravity</a>, and unlike all the other VS Code forks out there, this one is made by Google.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Adam Pietrasiak made <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/z2hgh7uew492rvhp/aHR0cHM6Ly9jaHJvbWV3ZWJzdG9yZS5nb29nbGUuY29tL2RldGFpbC9zcXVpcmNsZS1ldmVyeXRoaW5nL2VscGlha2JrZmxubWpsZGxsZWZibmhmYmptbWJuZ2RrP3BsaT0x" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857905">this Chrome plugin</a> that adds squircle corners to all elements on every website. Thank you for your service.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">CSS Grid has been <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/p8hehqu4x3kw5wcq/aHR0cHM6Ly9naXRodWIuY29tL2ZhY2Vib29rL3lvZ2EvcHVsbC8xODY1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857906">implemented into Yoga</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/x0hph3ue3r8vd5i5/aHR0cHM6Ly9ibGF6aXR5LmNvbS9vcGVuLXNvdXJjZS9uZXh0anMtZW50ZXJwcmlzZS1ib2lsZXJwbGF0ZT91dG1fY2FtcGFpZ249b3NzJnV0bV9tZWRpdW09c3BvbnNvcmVkJnV0bV9zb3VyY2U9bmV3c2xldHRlciZ1dG1fdGVybT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857907">Next.js Enterprise Boilerplate</a> is a ready-to-deploy Next.js boilerplate for enterprise projects and fast-iterating teams. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Firefox 145 introduces <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/6qhehoulokv869io/aHR0cHM6Ly9ibG9nLm1vemlsbGEub3JnL2VuL2ZpcmVmb3gvZmluZ2VycHJpbnRpbmctcHJvdGVjdGlvbnMv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857908">expanded fingerprint protections</a> to shield users from hidden tracking techniques. Yes of course it’s a losing battle, but it’s still good to try.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/kkhmh2unmdg02ohl/aHR0cHM6Ly9naXRodWIuY29tL0hhbnMtSGFsdmVyc29uL2JyaW1zdG9uZQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857909">Brimstone</a> is a new JavaScript engine written in Rust.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">You already tuned your AI agents with .cursorrules, CLAUDE.md, Agents.md, and Copilot-instructions. <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/58hvh8ug7vpdowc6/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857910">CodeRabbit</a> reads those guideline files and uses them to enforce code quality in every PR review, so comments line up with the rules you have already written. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/25h2h9u3dvrp05i3/aHR0cHM6Ly93d3cuc3BlYWtlYXN5LmNvbS9kb2NzL2dyYW0vZ3JhbS1mdW5jdGlvbnMvZnVuY3Rpb25zLWZyYW1ld29yaw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857911">The Gram Functions Framework</a> provides a streamlined way to build MCP tools with TypeScript. Now we just need someone to make a streamlined way to <em>use</em> MCP tools and we’ll be set.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">You can <a href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/qvh8h8udn7gm0gtl/aHR0cHM6Ly9qc2xlZ2VuZGRldi5zdWJzdGFjay5jb20vcC95b3UtY2FuLW5vdy1tYWtlLXBzMi1nYW1lcy1pbi1qYXZhc2NyaXB0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857912">make PS2 games in JavaScript</a> now, which means I can finally find that hidden gem in <em>Crash Bandicoot 3</em> by simply rebuilding the entire game myself.</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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/m2h7h6u3egk60whm/aHR0cHM6Ly9hcHJ5c2UuY29tL2RvY3gtZWRpdG9yLXNkay1idXlpbmctZ3VpZGU_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMTFfMjAmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1807857900">Apryse</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This is a classic example of an off by one error. Let’s step through the logic:</p>
<ol>
<li>
<code style="font-size: 14px;">numbers1</code> gets sorted to be <code style="font-size: 14px;">[2, 3, 4, 5, 8]</code> (an odd number of elements)</li>
<li>To get the middle element we need to divide the <code style="font-size: 14px;">length</code> of the array by <code style="font-size: 14px;">2</code> (5 / 2 = 2.5)</li>
<li>Since <code style="font-size: 14px;">2.5</code> is not a valid index, we need to round down to the nearest whole number, <code style="font-size: 14px;">2</code>
</li>
<li>However subtracting <code style="font-size: 14px;">1</code> gives us the second element in the array, <code style="font-size: 14px;">3</code>, instead of the middle element, <code style="font-size: 14px;">4</code>
</li>
</ol>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The <code style="font-size: 14px;">Math.floor</code> effectively did the same thing as subtracting 1, so removing it fixes the bug.</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;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">arr</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">sort</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 parameter" style="color: #f38ba3; font-size: 14px;">a<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> b</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> a <span class="token operator" style="color: #12b5e5; font-size: 14px;">-</span> b<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;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; font-size: 14px;">%</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> mid1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span> <span class="token operator" style="color: #12b5e5; 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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> mid2 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; 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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>mid1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> mid2<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;">2</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;">else</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>Math<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">floor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>arr<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>length <span class="token operator" style="color: #12b5e5; 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 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;">// remove -1</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> numbers1 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token 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;">3</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;">4</span><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 punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> numbers2 <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">40</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">20</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">60</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">80</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 number" style="color: #fcba28; font-size: 14px;">30</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><span class="token function" style="color: #9d7dce; font-size: 14px;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers1<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;">// 4</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;">getMiddleValue</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>numbers2<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;">// 45</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/9qhzhdud9qkvl6s9/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1807857914">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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/3ohphdu3zo65nrsr/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1807857915">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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/n2hohquvr8w9k5b6/aHR0cHM6Ly91aS5kZXY=" url-id="1807857916">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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml/48hvh7umg5zdnnax/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1807857917">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/38u909o4rrakh2zm4rlurh4qpepnns7h4oml">Unsubscribe</a></span>
<!-- -->
<img src="https://open.kit-mail6.com/38u909o4rrakh2zm4rlurh4qpepnns7h4oml" alt="">
</body>
</html>