<!DOCTYPE html>
<html>
<head>
<title>Bytes: Angular's glow up</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> Vite takes a stand, how to hack a credit card terminal, and things that taste like JavaScript.</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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/6qhehoul6k297vfo/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvMzk3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203712">#397</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/mathis-weed.jpg" alt="Judge Greg Mathis pretending to smoke weed from his gavel" 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 LLM when I tell it to upgrade my app from Angular.js to Angular 20<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Angular’s glow up</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You know that annoying feeling when your plastic surgeon refuses to let you schedule any more cosmetic procedures, because they’re concerned that you’ve become “borderline unrecognizable” to your friends and family?</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">We’ve all been there – and so has Angular.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But even though the framework looks a <em>lot</em> different than it did a couple years ago, most developers are pretty happy with the transformation, which includes new-and-improved approaches to SSR, hydration, and reactivity. And with last week’s <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/kkhmh2un2d9xldbl/aHR0cHM6Ly9ibG9nLmFuZ3VsYXIuZGV2L2Fubm91bmNpbmctYW5ndWxhci12MjAtYjVjOWMwNmNmMzAx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203713">Angular v20</a> release, it’s safe to say that the ng-vibes have never been higher.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">This release is less about flashy new features and more about adding some polish to the new stuff they’ve previously shipped – improving the DX, stabilizing APIs, and getting everything ready for prime time. 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;">Signals get extra stable</strong> – Angular’s Signals-powered reactivity model promoted <code style="font-size: 14px;">effect</code>, <code style="font-size: 14px;">linkedSignal</code>, and <code style="font-size: 14px;">toSignal</code> to stable, which should improve performance and DX even more. They also introduced a new experimental <code style="font-size: 14px;">httpResource</code> API for making reactive HTTP requests the Angular way.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Modern SSR gains</strong> – Incremental hydration and route-level rendering modes are now stable, bringing noticeable improvement gains and finally making Angular feel like a real option for modern SSR.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">DX polish</strong> – Angular-specific insights now show up directly in Chrome DevTools, host bindings get proper type checking, and <code style="font-size: 14px;">template literals</code> finally just work without needing any weird hacks.</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> Angular’s glow up isn’t just some cheap hair plugs, botox, and lip filler from that online “lab” in Turkey – it’s a multi-year architectural rework that’s already producing some real performance wins in the wild.</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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/58hvh8ugov96mnt6/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGMzk3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1752203714"><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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/25h2h9u30vom2gs3/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkYzOTc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1752203715"><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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/qvh8h8ud276kr2tl/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9UmVwb3J0aW5nJTIwbGl2ZSUyMGZyb20lMjB0aGUlMjBBbmd1bGFyJTIwZ2xhbSUyMHJvb20lMjBvbiUyMEFuZ3VsYXIlMjB2MjAmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkYzOTc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1752203716"><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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/g3hnhwumodzq3kcr/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBUmVwb3J0aW5nJTIwbGl2ZSUyMGZyb20lMjB0aGUlMjBBbmd1bGFyJTIwZ2xhbSUyMHJvb20lMjBvbiUyMEFuZ3VsYXIlMjB2MjAlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGMzk3JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1752203717"><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/datadog-logo.png" alt="datadog 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/hulk-buscemi.jpg" alt="The Hulk with Steve Buscemi's face looking concerned" 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;">You mean we're supposed to be testing the code that Copilot writes too?<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/3ohphdu39odp7qur/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203719">Learn how the best software teams monitor their front ends</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Front-end codebases are getting more complex than ever, and chances are, your team’s monitoring situation hasn’t kept up.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s why Datadog created their <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/3ohphdu39odp7qur/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203719">Front-end Developer Kit</a> – a free collection of resources that’ll help you better understand user activity and catch front-end issues early.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It gives you instant access to:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/3ohphdu39odp7qur/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203719">Best Practices Guide</a> that details key strategies for monitoring and testing used by top front-end teams</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A Solution Brief with a step-by-step walkthrough for proactively catching and resolving issues</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">An on-demand livestream on how to optimize front-end applications</p>
</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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/3ohphdu39odp7qur/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203719">Get it for free</a> – and protect your frontend before it’s too late.</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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/n2hohquv58o733t6/aHR0cHM6Ly9hcHJ5c2UuY29tL2NhcGFiaWxpdGllcy9yZWRhY3Rpb24_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMDYmdXRtX2NvbnRlbnQ9ZW1haWxfdGV4dGxpbmsmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203720">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>Their <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/n2hohquv58o733t6/aHR0cHM6Ly9hcHJ5c2UuY29tL2NhcGFiaWxpdGllcy9yZWRhY3Rpb24_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMDYmdXRtX2NvbnRlbnQ9ZW1haWxfdGV4dGxpbmsmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203720">PDF Redaction SDK</a> lets you enable users to securely delete sensitive data from PDFs, images, documents, and more.</em></p>
</div>
</div>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Animal</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">name<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> energy</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;">let</span> animal <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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
animal<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name
animal<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>energy <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> energy
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> animal
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token class-name" style="color: #12b5e5; font-size: 14px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>prototype<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function-variable function" style="color: #9d7dce; font-size: 14px;">eat</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">amount</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 template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span><span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;"> is eating.</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>energy <span class="token operator" style="color: #12b5e5; font-size: 14px;">+=</span> amount
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> leo <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'Leo'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
leo<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">eat</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>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/48hvh7umq52xrmhx/aHR0cHM6Ly9naXRodWIuY29tL3ZpdGVqcy92aXRlL2Jsb2IvbWFpbi9wYWNrYWdlcy92aXRlL0NIQU5HRUxPRy5tZCM3MDAtYmV0YTAtMjAyNS0wNi0wMg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203721">Vite v7.0 beta is out</a>, and it drops support for Node 18 so that Vite is now distributed as ESM only. Because sometimes you have to be the change you wish to see in the world.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Jim Nielsen wrote an article called <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/wnh2h6uqv5o0wxt7/aHR0cHM6Ly9ibG9nLmppbS1uaWVsc2VuLmNvbS8yMDI1L2lzLWl0LWphdmFzY3JpcHQv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203722">Is it JavaScript?</a> But you’ll have to take a bite to be 100% sure.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/reh8h9umv2560xi2/aHR0cHM6Ly9nbGVhbS5ydW4vbmV3cy9nbGVhbS1qYXZhc2NyaXB0LWdldHMtMzAtcGVyY2VudC1mYXN0ZXIv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203723">Gleam v1.11</a> makes Gleam compiled to JavaScript 30% faster – which I’m guessing hits really hard if you know what Gleam is.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A team of Sentry engineers are hosting this <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/08hwhgu2wo7ldqsl/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL3NlbnRyeS1idWlsZC8_dXRtX2NhbXBhaWduPWRlYnVnZ2luZy1meTI2cTItYnVpbGQmdXRtX2NvbnRlbnQ9bmV3c2xldHRlci1idWlsZC1kZWJ1Z2dpbmctcnN2cCZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203724">Full-stack Performance and Debugging Workshop</a> on June 10th – it’s a 90-minute, hands-on walkthrough that’ll show how to use tracing to actually understand what your code is doing across backend, frontend, and mobile. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Abramov wrote about <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/8ghqh3uop05rlwtk/aHR0cHM6Ly9vdmVycmVhY3RlZC5pby9wcm9ncmVzc2l2ZS1qc29uLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203725">Progressive JSON</a>, and why it’s significantly more fair and equitable than flat JSON or regressive JSON.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/vqh3hmuo3xkwplcg/aHR0cHM6Ly92aXRlc3QuZGV2L2Jsb2cvdml0ZXN0LTMtMi5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203726">Vitest 3.2</a> comes with a new Annotations API, Scoped Fixtures, and better TypeScript support.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/l2heh6ulv0kx32h6/aHR0cHM6Ly9uZXhmYXN0ZXIucmRzeC5kZXYv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203727">NexFaster</a> is a minimal template that integrates React Router within Next.js to produce <del>world peace</del> intuitive, Type-safe client-side routing. It’s 2025 – anything goes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Matt Palmer wrote about how <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/m2h7h6u30gn48zum/aHR0cHM6Ly9tYXR0cGFsbWVyLmlvL3Bvc3RzL0NWRS0yMDI1LTQ4NzU3Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203728">it’s very easy to hack vibe-coded apps</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Stefan Gloor wrote about how he accidentally-on-purpose <a href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/dphehmuew47p0ghm/aHR0cHM6Ly9zdGVmYW4tZ2xvb3IuY2gveW9tYW5pLWhhY2s=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203729">got access to the root shell of a credit card terminal</a>. And now we’re all flagged in a Palantir database somewhere.</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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/n2hohquv58o733t6/aHR0cHM6Ly9hcHJ5c2UuY29tL2NhcGFiaWxpdGllcy9yZWRhY3Rpb24_dXRtX2NhbXBhaWduPWJ5dGVzXzIwMjVfMDYmdXRtX2NvbnRlbnQ9ZW1haWxfdGV4dGxpbmsmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1752203720">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;">Our call to <code style="font-size: 14px;">leo.eat</code> is going to fail. The reason for this is because the object returned from <code style="font-size: 14px;">Animal</code> isn’t delegating to <code style="font-size: 14px;">Animal.prototype</code> so <code style="font-size: 14px;">leo.eat</code> will be undefined.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">To fix this, we can use <code style="font-size: 14px;">Object.create</code> or a combination of the <code style="font-size: 14px;">this</code> keyword with <code style="font-size: 14px;">new</code>.</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;">Animal</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">name<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> energy</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;">let</span> animal <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> Object<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">create</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token class-name" style="color: #12b5e5; font-size: 14px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>prototype<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
animal<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name
animal<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>energy <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> energy
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> animal
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// or</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Animal</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">name<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> energy</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;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>energy <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> energy
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> leo <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'Leo'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">7</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You’ll never stop me from spreading the great <code style="font-size: 14px;">this</code> keyword.</p>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/e0hph0u7wpnr03b8/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1752203730">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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/7qh7h2u9pk4nortz/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1752203731">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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/owhkhwuwlk8qrquv/aHR0cHM6Ly91aS5kZXY=" url-id="1752203732">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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg/z2hgh7uer4dl3mtp/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1752203733">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.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/27uepe0gddioh8epl5pb0ig6nx444hg" alt="">
</body>
</html>