<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/chestnut-eating.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/qa-wolf-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/vince-grateful.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/content/spot-the-bug.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: Claude Fable 5</title>
<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: 18px; 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: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> npm makes a breaking change, a win for the Vuebies, and paying homage to 4 lines of code.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/qvh8h8ud5kxoodtlhk/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDk1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250873">#495</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/chestnut-eating.jpg" alt="Joey Chestnut eating hot dogs" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Choking down as many Fable 5 credits as I can before June 23<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Claude Fable 5</h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Four days after frantically warning the world to stop building AI because it’s becoming too powerful and dangerous (again), Anthropic dropped <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/g3hnhwum5qv666arh9/aHR0cHM6Ly93d3cuYW50aHJvcGljLmNvbS9uZXdzL2NsYXVkZS1mYWJsZS01LW15dGhvcy01" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250874">Claude Fable 5</a>: a Mythos-class model they were able to “make safe” for us normies <span role="img" aria-label="man bowing">🙇♂️</span>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">I assume they chose to name it <code style="font-size: 15px;">Fable</code> because Dario is a real-life incarnation of <em>The Boy Who Cried Wolf,</em> except he also owns the wolf and charges the villagers billions of dollars to use it.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Fable is just Mythos with a bunch of safety classifiers bolted on, so any time a task touches cybersecurity, bio/chem, or distillation, your prompt gets silently handed off to Opus 4.8 instead.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Lots of developers are complaining that this feels like another example of Anthropic’s overly performative “terrorism-as-marketing” strategy. But even with the training wheels, it’s clear that Fable 5 is the real deal (for the most part). Here’s what people are saying:</p>
<ul>
<li>
<strong style="font-weight: 600;">It’s <strong style="font-weight: 600;">really</strong> smart:</strong> The general consensus is that Fable needs less direction and can accomplish complex tasks without losing context. When benchmarking the model, <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/9qhzhdudm57zz9s9h3/aHR0cHM6Ly94LmNvbS9WaWN0b3JUYWVsaW4vc3RhdHVzLzIwNjQ0NDg0MjU5MzY5OTQ3NDI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250875">Fable found a 1700% speedup</a> for Victor Taelin’s algorithm that GPT 5.5 and Opus 4.8 were unable to find.</li>
<li>
<strong style="font-weight: 600;">It’s <strong style="font-weight: 600;">really</strong> expensive:</strong> Priced at $50/m tokens (roughly 2x as expensive as Opus and GPT 5.5-pro), developers are racking up huge bills and complaining about how token-hungry the model is.</li>
<li>
<strong style="font-weight: 600;">It’s <strong style="font-weight: 600;">really</strong> slow:</strong> The last piece of feedback is that the model is very slow. One benchmark clocked it as 4-5x slower than Opus 4.8 at generating responses, meaning this probably isn’t the right model for quick edits or rapid iteration.</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> Maybe Dario was hoping he could convince everyone to “pause” AI research long enough so Anthropic could lick their wounds and burn <em>slightly</em> less cash ahead of their IPO. But he should’ve known that in the prisoner’s dilemma, it’s always the smart move to defect.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Sadly, the rest of us are also the prisoners who are just along for the ride at this point. But hey, at least Fable 5 was able to hit 80.3% on SWE-Bench-Pro.</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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/3ohphdu3lpw44vhrhn/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDk1" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1862250876"><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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/n2hohquvp7d662c6hg/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0OTU=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1862250877"><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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/48hvh7umexo66vixh7/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9RmFibGUlMjA1JTJDJTIwYSUyME15dGhvcy1jbGFzcyUyMG1vZGVsJTIwc2FmZSUyMGVub3VnaCUyMGZvciUyMG5vcm1pZXMuJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDk1" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1862250878"><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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/wnh2h6uqp0zxx7t7hx/bWFpbHRvOj9zdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0YmYm9keT1UaG91Z2h0JTIweW91JTI3ZCUyMGxvdmUlMjB0aGlzJTIwd2VlayUyN3MlMjBCeXRlcyUwQS0tLSUwQUZhYmxlJTIwNSUyQyUyMGElMjBNeXRob3MtY2xhc3MlMjBtb2RlbCUyMHNhZmUlMjBlbm91Z2glMjBmb3IlMjBub3JtaWVzLiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0OTU=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1862250879"><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/vince-grateful.jpg" alt="Vince Carter looking grateful" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Me finding out I don't have to maintain our e2e test suite anymore<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/reh8h9umr68wwzh2h6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9tYXBwaW5nLWFpP3V0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9jYW1wYWlnbj1BQ1FfQWxsX1Byb2R1Y3RTaWdudXBfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfTWFwcGluZ0FJXzIwMjYwNjEyLU5vbmVfRXhwZXJpbWVudC1UUlVFJnV0bV90ZXJtPWhlYWRsaW5lLVRoaXNNYXBwaW5nQUlDYW5NYXBPdXQyMDBQbHVzVGVzdENhc2VzRm9yWW91ckFwcEluTWludXRlcyZ1dG1fY29udGVudD1NYXBwaW5nQUlfVHJ5SXRPdXRGb3JGcmVlX05vbmVfSGVhZGxpbmUlM0FUaGlzTWFwcGluZ0FJQ2FuTWFwT3V0MjAwUGx1c1Rlc3RDYXNlc0ZvcllvdXJBcHBJbk1pbnV0ZXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjYwNjEyX3YxXw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250880">This Mapping AI can map out 200+ test cases for your app in minutes</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">QA Wolf built a self-directed agent that plans its own approach, explores your app autonomously, then gives you a detailed map of how your product really works.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Just prompt it to map out your app, and it will get started:</p>
<ul>
<li>It explores the app on its own and switches between user roles and devices to create a detailed map of every feature in your app with test cases.</li>
<li>As you ship new features, it automatically adjusts existing tests and writes new ones.</li>
<li>You can train it on your team’s internal docs, test plans, and product requirements to make sure it does what you need.</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/reh8h9umr68wwzh2h6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9tYXBwaW5nLWFpP3V0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9jYW1wYWlnbj1BQ1FfQWxsX1Byb2R1Y3RTaWdudXBfX05ld3NsZXR0ZXJBdWRpZW5jZV8tX05ld3NsZXR0ZXJfTWFwcGluZ0FJXzIwMjYwNjEyLU5vbmVfRXhwZXJpbWVudC1UUlVFJnV0bV90ZXJtPWhlYWRsaW5lLVRoaXNNYXBwaW5nQUlDYW5NYXBPdXQyMDBQbHVzVGVzdENhc2VzRm9yWW91ckFwcEluTWludXRlcyZ1dG1fY29udGVudD1NYXBwaW5nQUlfVHJ5SXRPdXRGb3JGcmVlX05vbmVfSGVhZGxpbmUlM0FUaGlzTWFwcGluZ0FJQ2FuTWFwT3V0MjAwUGx1c1Rlc3RDYXNlc0ZvcllvdXJBcHBJbk1pbnV0ZXNfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjYwNjEyX3YxXw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250880">Try it out for free</a> to see it in action.</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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Spot the Bug - Presented by <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/08hwhgu25l8gg5tlh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtdGVzdGluZy1iZXN0LXByYWN0aWNlcy8_dXRtX3NvdXJjZT1ieXRlc2RldiZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX2NhbXBhaWduPWRnLWNvbnRlbnQtZWJvb2stZnJvbnRlbmR0ZXN0aW5nYmVzdHByYWN0aWNlcy1kZW0tbXVsdGktd3ctZW4tNzAxdnkwMDAwMGN1a2F3eWFqLWZyb250ZW5kLXRlc3RpbmctZ3VpZGUtYnl0ZXMtMDYxMjI2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250881">Datadog</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 18px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>Datadog made a <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/08hwhgu25l8gg5tlh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtdGVzdGluZy1iZXN0LXByYWN0aWNlcy8_dXRtX3NvdXJjZT1ieXRlc2RldiZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX2NhbXBhaWduPWRnLWNvbnRlbnQtZWJvb2stZnJvbnRlbmR0ZXN0aW5nYmVzdHByYWN0aWNlcy1kZW0tbXVsdGktd3ctZW4tNzAxdnkwMDAwMGN1a2F3eWFqLWZyb250ZW5kLXRlc3RpbmctZ3VpZGUtYnl0ZXMtMDYxMjI2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250881">guide for frontend testing best practices</a> that covers creating and maintaining tests, CI/CD, and testing private internal applications.</em></p>
</div>
</div>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">name<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> type</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> name<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>type <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> type<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token class-name" style="color: #12b5e5; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>prototype<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function-variable function" style="color: #9d7dce; font-size: 15px;">birthday</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age<span class="token operator" style="color: #12b5e5; font-size: 15px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> winston <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token string" style="color: #f99157; font-size: 15px;">"Winston"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Dog"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</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: 19px; line-height: 1.5;">George Zahariev wrote about how to do <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/8ghqh3uovr4qq6skh9/aHR0cHM6Ly9tZWRpdW0uY29tL2Zsb3ctdHlwZS9qYXZhc2NyaXB0LXBhdHRlcm4tbWF0Y2hpbmctd2l0aC1mbG93LWEyYTE0MzEwODg5Nw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250882">pattern matching in JavaScript using Flow</a>. TIL people are still using Flow.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Apple announced <code style="font-size: 15px;">container</code>, a <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/vqh3hmuo7w5eezaghl/aHR0cHM6Ly9naXRodWIuY29tL2FwcGxlL2NvbnRhaW5lcg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250883">tool for running containers on your Mac</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Dominic Gannaway is already <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/l2heh6ul9xg66xi6h0/aHR0cHM6Ly90c3J4LmRldi9ibG9nL3JldGhpbmtpbmctdHNyeA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250884">rethinking TSRX</a>, getting rid of implicit returns and making it look a lot more like JSX but also somehow more like Angular?</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">The Sentry team wrote a detailed walkthrough on <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/m2h7h6u3p4rmmlhmhq/aHR0cHM6Ly9zZW50cnkuaW8vY29va2Jvb2svdmVyY2VsLWFpLXNkay1vdGVsLXNlbnRyeS8_dXRtX3NvdXJjZT1ieXRlcyZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9jYW1wYWlnbj1haS1meTI3cTItY29va2Jvb2smdXRtX2NvbnRlbnQ9bmV3c2xldHRlci1zZWNvbmRhcnktdmVyY2VsLWFpLW90ZWwtbGVhcm5tb3Jl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250885">routing your AI SDK spans into Sentry</a> without ripping out OpenTelemetry. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Hayden Bleasel just released <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/dphehmuegp388xhmh4/aHR0cHM6Ly9naXRodWIuY29tL2hheWRlbmJsZWFzZWwvZmlsZXMtc2Rr" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250886">version 1.8 of <code style="font-size: 15px;">files-sdk</code></a>, which gives you one API to search, monitor, and operate on remote file systems like S3 or R2.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">The GitHub team is working on <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/e0hph0u7grxqqxb8h2/aHR0cHM6Ly9naXRodWIuYmxvZy9jaGFuZ2Vsb2cvMjAyNi0wNi0wOS11cGNvbWluZy1icmVha2luZy1jaGFuZ2VzLWZvci1ucG0tdjEyLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250887"><code style="font-size: 15px;">npm</code> version 12</a> to fix some of the security issues in the ecosystem. Unfortunately, it also includes breaking changes.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Christian and Cosmin created <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/7qh7h2u97ngwzvfzh6/aHR0cHM6Ly9tYWl6emxlLmNvbS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250888">Maizzle</a>, a framework that lets you build email templates with Vue and Tailwind. Let the Vuebies rejoice.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; 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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/owhkhwuwvqzgoktvhr/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX3NvdXJjZT1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX2NhbXBhaWduPTI2cTImdXRtX2NvbnRlbnQ9c2Vjb25kYXJ5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250889">cover every edge case</a> of your web app. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Lauren Tan released <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/z2hgh7uevlgpwktph0/aHR0cHM6Ly9wb3RldG8uZ2l0aHViLmlvL25vb2RsZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250890">Noodle</a> a skills-based agent orchestrator that “runs itself”. If you can’t get it to work, it’s likely a skill issue (sorry).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Expo figured out <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/p8hehqu40qvgxdsqh3/aHR0cHM6Ly9leHBvLmRldi9ibG9nL3RhbGtpbmctdG8tanNpLWluLXN3aWZ0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250891">how to talk to JSI in Swift</a>. It sounds similar to what got me banned from the Eras Tour.</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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Presented by <a href="https://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/08hwhgu25l8gg5tlh5/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtdGVzdGluZy1iZXN0LXByYWN0aWNlcy8_dXRtX3NvdXJjZT1ieXRlc2RldiZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX2NhbXBhaWduPWRnLWNvbnRlbnQtZWJvb2stZnJvbnRlbmR0ZXN0aW5nYmVzdHByYWN0aWNlcy1kZW0tbXVsdGktd3ctZW4tNzAxdnkwMDAwMGN1a2F3eWFqLWZyb250ZW5kLXRlc3RpbmctZ3VpZGUtYnl0ZXMtMDYxMjI2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1862250881">Datadog</a>
</h4></div>
</div>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">name<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> type</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> name<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>type <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> type<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token class-name" style="color: #12b5e5; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>prototype<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function-variable function" style="color: #9d7dce; font-size: 15px;">birthday</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age<span class="token operator" style="color: #12b5e5; font-size: 15px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> winston <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token string" style="color: #f99157; font-size: 15px;">"Winston"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Dog"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Inside our <code style="font-size: 15px;">Animal</code> constructor function, we’re relying on JavaScript to create a <code style="font-size: 15px;">this</code> object for us. But constructor functions only get that new object when we invoke them with the <code style="font-size: 15px;">new</code> keyword.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Without <code style="font-size: 15px;">new</code>, <code style="font-size: 15px;">this</code> will either be <code style="font-size: 15px;">undefined</code> in strict mode or point to the global object in sloppy mode. Either way, <code style="font-size: 15px;">winston</code> won’t be the animal object we wanted.</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;">name<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> type</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>name <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> name<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>type <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> type<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token class-name" style="color: #12b5e5; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>prototype<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span><span class="token function-variable function" style="color: #9d7dce; font-size: 15px;">birthday</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">function</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>age<span class="token operator" style="color: #12b5e5; font-size: 15px;">++</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> winston <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 15px;">Animal</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token string" style="color: #f99157; font-size: 15px;">"Winston"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> <span class="token string" style="color: #f99157; font-size: 15px;">"Dog"</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</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://c5e21242.click.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/6qhehoulg9qnodbohk/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1862250893">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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/kkhmh2unqx76m9ulh7/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1862250894">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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/58hvh8ug86ek75b6h4/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1862250895">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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o/25h2h9u3zm54d2i3h4/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1862250896">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/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/v8u5q54200irhv9re6dtghvkgx4z6a9hq32o" alt="">
</body>
</html>