<!DOCTYPE html>
<html>
<head>
<title>Bytes: ESLint 10 is making moves</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> Open source freemasons, agents replacing frameworks, and the only slop that ever mattered.</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/48hvh7umv5mk6xhx/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDYx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866884">#461</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/carl-baja.jpg" alt="Carl Wheezer saying, I am straight up not having a baja blast" 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;">Joining a team that still uses the ESLint Airbnb config in 2026<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">ESLint 10 is making moves</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You probably haven’t thought about ESLint for a while, but that doesn’t mean ESLint isn’t thinking about you <span role="img" aria-label="man in lotus position">🧘♂️</span>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They just shipped <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/wnh2h6uqn5q8xls7/aHR0cHM6Ly9lc2xpbnQub3JnL2Jsb2cvMjAyNi8wMi9lc2xpbnQtdjEwLjAuMC1yZWxlYXNlZC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866885">v10.0.0</a> last week, and it’s a big, opinionated step forward for the OG JavaScript linter, with breaking changes that finally lock in the patterns it’s been slowly rolling out for years.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The biggest one is that <code style="font-size: 14px;">eslintrc</code> is now officially dead. ESLint has already been nudging developers toward its flat config system for a while because it’s more explicit and avoids a lot of the hidden magic for merging and inheritance that made large monorepos extra confusing. And in v10, the transition is complete.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This means that <code style="font-size: 14px;">.eslintrc.*</code> files, <code style="font-size: 14px;">.eslintignore</code>, legacy CLI flags, and <code style="font-size: 14px;">/* eslint-env */</code> comments are no longer supported. There’s no opt-out and no environment variable to flip back. Flat config is the only path forward now.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here are a few more key changes from v10:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Config lookup is smarter</strong> – ESLint now resolves config files starting from each linted file instead of the current working directory, which makes multi-package repos less chaotic.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">JSX references are finally tracked correctly</strong> – <code style="font-size: 14px;"><Component /></code> now behaves like a real variable reference, eliminating long-standing false positives and false negatives in React projects. Hallelujah.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Built-in TypeScript types + stricter rule testing</strong> – Espree and ESLint Scope now ship their own type definitions, and <code style="font-size: 14px;">RuleTester</code> can now enforce message and location assertions so that tests don’t pass when they shouldn’t.</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> When there was one set of footprints in my editor, that was ESLint dragging me to dead variable hell and back.</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/reh8h9um42mnwpi2/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDYx" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1831866886"><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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/08hwhgu2vo2qg8hl/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NjE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1831866887"><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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/8ghqh3uoz0ok9ehk/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwYWxsJTIwdGhlJTIwYnJlYWtpbmclMjBjaGFuZ2VzJTIwaW4lMjBFU0xpbnQlMjB2MTAmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NjE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1831866888"><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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/vqh3hmuolxo8gxug/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwYWxsJTIwdGhlJTIwYnJlYWtpbmclMjBjaGFuZ2VzJTIwaW4lMjBFU0xpbnQlMjB2MTAlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDYxJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1831866889"><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/clerk-logo.png" alt="clerk-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/confused-cherub.jpg" alt="A Renaissance cherub looking confused and disappointed" 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;">Claude Code when I ask it to 'please just fix my auth' for the third time<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/l2heh6ule0lwrnb6/aHR0cHM6Ly9jbGVyay5jb20vY2hhbmdlbG9nLzIwMjYtMDEtMjktY2xlcmstc2tpbGxzP2R1Yl9pZD1kOWh3bjliR2JjUXg3S1NLJnV0bV9jYW1wYWlnbj1za2lsbHMmdXRtX2NvbnRlbnQ9MDItMTAtMjYmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866890">“clerk/skills” gives your coding agent specialized Clerk auth knowledge</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Clerk just launched <code style="font-size: 14px;">clerk/skills</code> – a new set of packages you can install with one command that teaches your coding agent how to use Clerk auth better:
<code style="font-size: 14px;">npx skills add clerk/skills</code></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Once installed, you can hand off auth tasks to your agent and get far more accurate, Clerk-aware results. Stuff like:</p>
<ul>
<li>“Add Clerk auth to my Next.js app”</li>
<li>“Build a custom sign-in form with email and password”</li>
<li>“Set up organizations for my B2B SaaS”</li>
<li>“Sync Clerk users to my Prisma database”</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/l2heh6ule0lwrnb6/aHR0cHM6Ly9jbGVyay5jb20vY2hhbmdlbG9nLzIwMjYtMDEtMjktY2xlcmstc2tpbGxzP2R1Yl9pZD1kOWh3bjliR2JjUXg3S1NLJnV0bV9jYW1wYWlnbj1za2lsbHMmdXRtX2NvbnRlbnQ9MDItMTAtMjYmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866890">Learn more here</a> or try it free with <code style="font-size: 14px;">npx skills add clerk/skills</code>.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/m2h7h6u3vg3we9sm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9zZWVyLWRlYnVnLXdpdGgtYWktYXQtZXZlcnktc3RhZ2Utb2YtZGV2ZWxvcG1lbnQvP3V0bV9jYW1wYWlnbj1zZWVyLWZ5MjdxMS1zZWVybGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYmxvZy1sYXVuY2gtbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866891">Sentry</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>This article breaks down how <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/m2h7h6u3vg3we9sm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9zZWVyLWRlYnVnLXdpdGgtYWktYXQtZXZlcnktc3RhZ2Utb2YtZGV2ZWxvcG1lbnQvP3V0bV9jYW1wYWlnbj1zZWVyLWZ5MjdxMS1zZWVybGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYmxvZy1sYXVuY2gtbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866891">Sentry’s Seer catches real bugs that could break production</a>, instead of styling nits that just add noise.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Python has a <code style="font-size: 14px;">range</code> function that generates a sequence of numbers starting at the first argument, incrementing by the third argument, and stopping at the second argument.</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 function" style="color: #9d7dce; font-size: 14px;">range</span><span class="token punctuation" style="color: #231F20; 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 number" style="color: #fcba28; font-size: 14px;">5</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;">// [0, 1, 2, 3, 4, 5]</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">range</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;">9</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// [3, 6, 9]</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">range</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 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;">10</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;">// [10, 20, 30, 40, 50]</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://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/dphehmuev4er5wtm/aHR0cHM6Ly9naXRodWIuY29tL21pdGNoZWxsaC92b3VjaA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866892">Vouch</a> is a new community trust management system, where trusted individuals can <em>vouch</em> for others, allowing them to contribute to a project. Like Freemasons, but for open source and with less secret handshakes (for now).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Maxime Heckel wrote another beautiful article, this time about <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/e0hph0u76p7542u8/aHR0cHM6Ly9ibG9nLm1heGltZWhlY2tlbC5jb20vcG9zdHMvc2hhZGVzLW9mLWhhbGZ0b25lLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866893">Shades of Halftone</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Only idiots write manual tests – modern engineering teams like Notion, Dropbox and LaunchDarkly use Meticulous to maintain e2e UI tests that <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/7qh7h2u9qk93z4hz/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPTI2cTEmdXRtX2NvbnRlbnQ9c2Vjb25kYXJ5JnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866894">cover every edge case</a> of your web app. [sponsored]</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/owhkhwuwpkw5o4sv/aHR0cHM6Ly9idW4uY29tL2Jsb2cvYnVuLXYxLjMuOQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866895">bun v1.3.9</a> shipped <code style="font-size: 14px;">bun run --parallel</code> and <code style="font-size: 14px;">--sequential</code>, letting you run multiple <code style="font-size: 14px;">package.json</code> scripts concurrently or sequentially with Foreman-style prefixed output.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Mitchell Hashimoto wrote about his <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/z2hgh7uen4e0w3bp/aHR0cHM6Ly9taXRjaGVsbGguY29tL3dyaXRpbmcvbXktYWktYWRvcHRpb24tam91cm5leQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866896">AI adoption journey</a>. As someone who’s been asking Mitchell to adopt me for years, it’s disappointing to see AI steal yet another dream away from me.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Datadog created this free solution brief on <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/p8hehqu4m348x4iq/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvc2hpZnQtbGVmdC10ZXN0aW5nLXNvbHV0aW9uLWJyaWVmLz91dG1fY2FtcGFpZ249ZGctY29yZXBsYXRmb3JtLXd3LXNoaWZ0LWxlZnQtYnJpZWYtYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866897">How to adopt Shift-Left Testing</a>, without any specialized tooling or training. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Mathis Van Eetvelde wrote <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/x0hph3ueorex39u5/aHR0cHM6Ly9ub3RpZm94LmNvbS9ibG9nL2Jhc2gtZXJyb3ItaGFuZGxpbmc=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866898">this guide to error handling in bash</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Microsoft open-sourced <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/6qhehoulzkl0oobo/aHR0cHM6Ly9naXRodWIuY29tL21pY3Jvc29mdC9saXRlYm94" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866899">LiteBox</a>, a minimal sandboxing OS that maximizes security by shrinking the interface to the host.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Kelly from the Expo team broke down <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/kkhmh2unrdn4m4fl/aHR0cHM6Ly9leHBvLmRldi9ibG9nL2hvdy10by1pbmNyZWFzZS1tb2JpbGUtYXBwLWRvd25sb2Fkcy1hbmQtcmV0ZW50aW9uP3V0bV9jYW1wYWlnbj0zNDkxMTE1Ni1ORFIlMjAtJTIwU3RhcnRlciUyMFBsYW4lMjBHcm93dGglMjAlMjYlMjBSZXRlbnRpb24mdXRtX2NvbnRlbnQ9YXBwX21hcmtldGluZyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866900">5 tips to increase mobile app downloads and retention in 2026</a>, so you can avoid the ASO mistakes that most indie developers make. [sponsored]</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/58hvh8ugqvgl73c6/aHR0cHM6Ly9naXRodWIuY29tL211dGF0aXZlanMvdHJhdmVscw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866901">Travels</a> is a framework-agnostic undo/redo library that only stores changes (not full snapshots), making it significantly faster than traditional systems.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Alain Di Chiappari wrote about how <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/25h2h9u36v3nd6b3/aHR0cHM6Ly9ibG9nLmFsYWluZGljaGlhcHBhcmkuZGV2L3Avc29mdHdhcmUtZW5naW5lZXJpbmctaXMtYmFjaw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866902">coding agents have replaced every framework he used</a>, and why he’s surprisingly ok with it.</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/qvh8h8udz7dqnwtl/aHR0cHM6Ly93YzN1aS5iYW50ZWcueHl6Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866903">WC3UI</a> is a themeable component library inspired by the Warcraft III interface. Just let the nostalgia wash over you and take you back to a time where the only slop you worried about was for feeding the pig farms to power your orc army.</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz: Answer</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/m2h7h6u3vg3we9sm/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9zZWVyLWRlYnVnLXdpdGgtYWktYXQtZXZlcnktc3RhZ2Utb2YtZGV2ZWxvcG1lbnQvP3V0bV9jYW1wYWlnbj1zZWVyLWZ5MjdxMS1zZWVybGF1bmNoJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItYmxvZy1sYXVuY2gtbGVhcm5tb3JlJnV0bV9tZWRpdW09cGFpZC1jb21tdW5pdHkmdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1831866891">Sentry</a>
</h4></div>
</div>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token function" style="color: #9d7dce; font-size: 14px;">range</span><span class="token punctuation" style="color: #231F20; 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 number" style="color: #fcba28; font-size: 14px;">5</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;">// [0, 1, 2, 3, 4, 5]</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">range</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;">9</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 comment" style="color: rgb(167, 167, 167); font-size: 14px;">// [3, 6, 9]</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">range</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 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;">10</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;">// [10, 20, 30, 40, 50]</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">How would you recreate this in JavaScript? There are a few ways, one of them is the following.</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;">const</span> <span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">range</span> <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 parameter" style="color: #f38ba3; font-size: 14px;">start<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> stop<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> step<span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span></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 punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> Array<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">from</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 literal-property property" style="color: #12b5e5; font-size: 14px;">length</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">:</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>stop <span class="token operator" style="color: #12b5e5; font-size: 14px;">-</span> start<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span> step <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 parameter" style="color: #f38ba3; font-size: 14px;">value<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> i</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> start <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> i <span class="token operator" style="color: #12b5e5; font-size: 14px;">*</span> step
<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 function uses <code style="font-size: 14px;">Array.from()</code> to generate an array of a specified <code style="font-size: 14px;">length</code> and fill it with values generated by the provided function. The <code style="font-size: 14px;">length</code> is calculated as <code style="font-size: 14px;">(stop - start) / step + 1</code>, which represents the number of elements in the desired range. The function passed to <code style="font-size: 14px;">Array.from()</code> generates each element by starting with <code style="font-size: 14px;">start</code>, adding an increment of <code style="font-size: 14px;">i * step</code>, where <code style="font-size: 14px;">i</code> is the index of the current element.</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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/g3hnhwumrdmxpwir/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1831866904">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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/9qhzhdud0qdn9ms9/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1831866905">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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/3ohphdu30o3vz5fr/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1831866906">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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl/n2hohquvm8verzt6/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1831866907">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/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/0vu0e0g2zzb9h9vdqzlilhv88r855snhnvdl" alt="">
</body>
</html>