<!DOCTYPE html>
<html>
<head>
<title>Bytes: CSS Panda-monium goes stable</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> Microsoft Teams + GitHub, pnpm + Bun, and Dan Abramov + Lil’ Wayne. It’s officially crossover week.</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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/9qhzhdud2v8gd0f9/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDE1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982886">#415</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/jersey-ears.jpg" alt="Pauly D covering girl's ears" 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;">When someone tries to tell my girl that CSS-in-JS is dead<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">CSS Panda-monium goes stable</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">CSS-in-JS is kind of like MTV’s <em>Jersey Shore:</em> lots of people still love it, but that’s not usually something you brag about publicly in 2025.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Because even though CSS-in-JS makes it easy to build dynamic UI components, it often comes with some pretty expensive performance tradeoffs. And since most libraries also don’t play nicely with RSC, it seemed like the CSS-in-JS glory days were firmly behind us – until one panda changed everything.</p>
<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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/3ohphdu3d58q3msr/aHR0cHM6Ly9wYW5kYS1jc3MuY29tLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982887">Panda CSS</a> first launched back in 2023 with the goal of combining the DX of CSS-in-JS with the performance of atomic CSS in a way that’s built for the server-first era. It’s grown steadily since then to over 125k weekly downloads, and last week they finally released <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/n2hohquvo94nv0u6/aHR0cHM6Ly9naXRodWIuY29tL2NoYWtyYS11aS9wYW5kYS9kaXNjdXNzaW9ucy8zMzIx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982888">Panda v1</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Now that they’re fully stable and ready to take the CSS-in-JS comeback tour to the next level, let’s take a closer look under the hood:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Static analysis + PostCSS</strong> – Parses your styles at build time and outputs optimized, human-readable atomic CSS</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Lightweight runtime</strong> – No browser-generated styles or <code style="font-size: 14px;"><head></code> injection</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Type safety baked in</strong> – Auto-generated typings for every property, token, and pattern</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Modern CSS and DX</strong> – Cascade layers, variables, and JSX style props, plus new v1 goodies like <code style="font-size: 14px;">bgLinear</code>/<code style="font-size: 14px;">bgRadial</code>/<code style="font-size: 14px;">bgConic</code> gradient props, and a new <code style="font-size: 14px;">createStyleContext</code> API for cross-framework design systems</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> Pedro Duarte (creator of Stitches and Radix UI) <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/48hvh7um2d30mesx/aHR0cHM6Ly94LmNvbS9wZWR1YXJ0ZS9zdGF0dXMvMTY3MDcxODQyMTAwNzIyODkyOA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982889">put it best</a> when he said that Panda is “like Stitches, Tailwind, Vanilla Extract, CVA, Styled System and Linaria had a child.”</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">A love child from six different parents? This really is like <em>Jersey Shore.</em></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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/wnh2h6uqo2drq2i7/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDE1" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1773982890"><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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/reh8h9um5lpqmgb2/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTU=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1773982891"><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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/08hwhgu2764m2lbl/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9Q2FuJTIwUGFuZGFDU1MlMjB2MSUyMGxlYWQlMjBhJTIwQ1NTLWluLUpTJTIwY29tZWJhY2slM0YlMjBXZSUyMGludmVzdGlnYXRlZCZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQxNQ==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1773982892"><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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/8ghqh3uo568go7sk/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQ2FuJTIwUGFuZGFDU1MlMjB2MSUyMGxlYWQlMjBhJTIwQ1NTLWluLUpTJTIwY29tZWJhY2slM0YlMjBXZSUyMGludmVzdGlnYXRlZCUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTUmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1773982893"><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/convex-logo.png" alt="Convex 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/veggie-keyboard.jpg" alt="Veggie Tales character playing the keyboards" 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;">My AI agent getting ready to cook<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/vqh3hmuok96no6ag/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvYWdlbnRz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982894">Convex’s new Agent component lets you build AI agents easily</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Building an AI agent usually means duct-taping together half a dozen services and praying your vector DB doesn’t choke.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Thankfully, Convex’s new, open-source <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/l2heh6ulkmpolgb6/aHR0cHM6Ly93d3cuY29udmV4LmRldi9jb21wb25lbnRzL2FnZW50" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982895">Agent component</a> fixes that. It gives you simple building blocks for creating persistent, intelligent agents that are fully integrated into your Convex backend – so you can build everything in TypeScript.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here’s what it gives you:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Persistent threads</strong> that remember context across conversations and are shareable between users and agents</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Hybrid vector/text search</strong> for fast, relevant lookups over your data (<a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/m2h7h6u3n6xomksm/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj10VUtNUFVsT0NIWQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982896">see YouTube tutorial</a>)</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Durable workflows</strong> that stream updates live to every connected client</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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/vqh3hmuok96no6ag/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvYWdlbnRz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982894">Check out the docs</a> – and see how easy it is to build AI agents that just work.</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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/dphehmue79xq84bm/aHR0cHM6Ly9nby5jbGVyay5jb20veGFBMWcxNQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982897">Clerk</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>They made <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/dphehmue79xq84bm/aHR0cHM6Ly9nby5jbGVyay5jb20veGFBMWcxNQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982897">this video</a> showing how they made it easier to customize Clerk UI components with new theming via CSS variables and a dedicated shadcn/ui theme.</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;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Person</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">firstName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> lastName</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>firstName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> firstName<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>lastName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> lastName<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;">get</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fullName</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</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>firstName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token 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>lastName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">set</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fullName</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">name</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</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 punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">split</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">' '</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name<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 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>lastName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Employee</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">extends</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Person</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">firstName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> lastName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> title<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> salary</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;">super</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>title <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> title<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>salary <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> salary<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;">get</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">employeeInfo</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</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>fullName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token 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>title<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">, earns $</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>salary<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;"> annually.</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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> employee <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Employee</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'Jane'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">'Doe'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">'Software Developer'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">90000</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">This season of <em>Better Call Dahl</em> just took a twist: Oracle responded to Deno’s petition by <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/7qh7h2u942e0w8fz/aHR0cHM6Ly94LmNvbS9yb3VnaF9fc2VhL3N0YXR1cy8xOTUzMzM1MjQ1NDEyOTQ2MzI3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982899">denying that the term “JavaScript” is generic</a> and insisting their trademark should stand. I guess we have to pay Larry a quarter every time we <del>sing Happy Birthday</del> publish a Bytes issue.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/owhkhwuw8me4glhv/aHR0cHM6Ly9kZXZibG9ncy5taWNyb3NvZnQuY29tL3R5cGVzY3JpcHQvYW5ub3VuY2luZy10eXBlc2NyaXB0LTUtOS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982900">TypeScript 5.9</a> comes with an updated <code style="font-size: 14px;">tsc --init</code>, actual summaries in more DOM APIs, and more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/z2hgh7ued2zop8fp/aHR0cHM6Ly9lbWJyYWNlLmlvL2Jsb2cvdXNlci1qb3VybmV5cy13YWxrdGhyb3VnaC8_dXRtX2NhbXBhaWduPWJ5dGVzLTgtMTEtMjAyNSZ1dG1fY29udGVudD11c2VyLWpvdXJuZXlzJnV0bV9tZWRpdW09cGFpZCZ1dG1fc291cmNlPW5ld3NsZXR0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982901">User Journeys</a> is a new observability feature from Embrace that shows you how technical performance impacts user engagement with your app’s features. It’s like zooming out one level from logs and spans to include <em>*actual user behavior*</em> as a signal. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/p8hehqu47we9g7cq/aHR0cHM6Ly93d3cudGhldmVyZ2UuY29tL25ld3MvNzU3NDYxL21pY3Jvc29mdC1naXRodWItdGhvbWFzLWRvaG1rZS1yZXNpZ25hdGlvbi1jb3JlYWktdGVhbS10cmFuc2l0aW9u" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982902">GitHub is moving into Microsoft’s CoreAI team</a> and will no longer operate as a separate company. Personally, I can’t wait for Microsoft Teams to be integrated into every single repo. #Synergy</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Andrey Sitnik wrote about <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/x0hph3ue7vmn9nc5/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL2Nocm9uaWNsZXMvd2hhdC13ZS1sZWFybmVkLWZyb20tY3JlYXRpbmctcG9zdGNzcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982903">what they learned from creating PostCSS</a>, and what it’s like to maintain an OSS project with 100 <em>million</em> weekly downloads.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Leerob wrote some <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/6qhehoul284pn7bo/aHR0cHM6Ly9sZWVyb2IuY29tL3JlZmxlY3Rpb25z" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982904">reflections on the React community</a>, now that he made it out alive (barely).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Learn how to stand up AI agents in 20 minutes with Postman’s <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/e0hph0u7n3zkq7h8/aHR0cHM6Ly9iaXQubHkvNDV3M2E1eg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982905">AI Agent Playbook webinar series</a> – where each 20-minute session walks through real AI agents you can deploy for engineering, support, and sales workflows using your existing APIs and tools. You’ll walk away with usable templates that’ll help your team save time on day 1. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Manish wrote about how he <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/7qh7h2u942e0wwuz/aHR0cHM6Ly9pbnN0YXZtLmlvL2Jsb2cvYnVpbGRpbmctbXktb2ZmbGluZS1haS13b3Jrc3BhY2U=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982906">built an entirely offline AI workspace</a>. But if the entire Microsoft Office suite doesn’t come built in, I’m not interested, Manish.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The V8 team wrote about <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/z2hgh7ued2zop0up/aHR0cHM6Ly92OC5kZXYvYmxvZy9qc29uLXN0cmluZ2lmeQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982908">how they made <code style="font-size: 14px;">JSON.stringify</code> more than twice as fast</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/p8hehqu47we9grfq/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2JpdHMmdXRtX2NvbnRlbnQ9YXVnMTEmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982909">CarbonQA</a> provides high-quality QA services for dev teams, so you’ll never have to test your own app again. Their US-based testers work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/x0hph3ue7vmn9of5/aHR0cHM6Ly9wbnBtLmlvL2Jsb2cvcmVsZWFzZXMvMTAuMTQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982910">pnpm 10.14</a> adds support for JS runtime installation – so you can pick Node, Deno, or Bun and have pnpm download and pin it for you.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Dan Abramov wrote an article called <a href="https://click.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/6qhehoul284pnrfo/aHR0cHM6Ly9vdmVycmVhY3RlZC5pby90aGUtbWF0aC1pcy1oYXVudGVkLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982911">the math is haunted</a> where he answers the question, “So what does using Lean feel like?” But I feel like I’ve already listened to enough Lil’ Wayne songs to have a pretty good idea.</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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/dphehmue79xq84bm/aHR0cHM6Ly9nby5jbGVyay5jb20veGFBMWcxNQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1773982897">Clerk</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 keyword" style="color: #f38ba3; font-size: 14px;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Person</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">firstName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> lastName</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>firstName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> firstName<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>lastName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> lastName<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;">get</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fullName</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</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>firstName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token 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>lastName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">set</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">fullName</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">name</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</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 punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">split</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">' '</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>firstName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name<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 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>lastName <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> name<span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span><span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">class</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Employee</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">extends</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">Person</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">constructor</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">firstName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> lastName<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> title<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> salary</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;">super</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">this</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span>title <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> title<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>salary <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> salary<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;">get</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">employeeInfo</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</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>fullName<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token 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>title<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">, earns $</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>salary<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;"> annually.</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 punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> employee <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Employee</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">'Jane'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">'Doe'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token string" style="color: #f99157; font-size: 14px;">'Software Developer'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> <span class="token number" style="color: #fcba28; font-size: 14px;">90000</span><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;">There’s a bunch of issues (and probably some others I don’t mention).</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">First, we’re not validating any types (yes, I hear TypeScript fixes this). Second, it’s probably not a great idea to mutate our <code style="font-size: 14px;">name</code> parameter in <code style="font-size: 14px;">set fullName</code>. Third, we need to pass <code style="font-size: 14px;">firstName</code> and <code style="font-size: 14px;">lastName</code> to <code style="font-size: 14px;">super</code> inside of our <code style="font-size: 14px;">Employee</code> <code style="font-size: 14px;">constructor</code>. Fourth, because of automatic semicolon insertion, our <code style="font-size: 14px;">employeeInfo</code> will return <code style="font-size: 14px;">undefined</code> instead of our string. And last (I think), when we create a new instance of <code style="font-size: 14px;">Employee</code>, we need to do so with the <code style="font-size: 14px;">new</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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/kkhmh2un90p86vfl/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1773982912">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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/58hvh8ug9dw5k8u6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1773982913">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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/25h2h9u3opx74ps3/aHR0cHM6Ly91aS5kZXY=" url-id="1773982914">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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw/qvh8h8ud6m38o9ul/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1773982915">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/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/lmu4943dvvtmhn35g6wt6h83v7v00bgh2xvw" alt="">
</body>
</html>