Email: Bytes: Cloudflare rebuilt Next.js on Vite

Subject:
Bytes: Cloudflare rebuilt Next.js on Vite
Received:
2/27/2026, 8:57:11 PM
From:
"Tyler from Fireship" <tyler@ui.dev>
To:
desert.legend.57@rss.andrealin.it
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/heated-rivalry.jpg"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/coderabbit-logo.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/corvette-guy.jpg"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/spot-the-bug.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png"&gt;
&lt;link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png"&gt;
&lt;title&gt;Bytes: Cloudflare rebuilt Next.js on Vite&lt;/title&gt;
&lt;meta name="color-scheme" content="light dark"&gt;
&lt;meta name="supported-color-schemes" content="light dark"&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Outfit:wght@400;500;700;900&amp;family=Paytone+One" rel="stylesheet"&gt;
&lt;style&gt;@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;
  }
}&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;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%;"&gt;&lt;tbody&gt;&lt;tr&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"&gt;&lt;div style="max-width:600px;padding-top:80px"&gt;
&lt;div style="text-align:center"&gt;&lt;img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Today’s issue:&lt;/strong&gt; The Charles Dickens of systems engineering, setting React free, and fun new ways to pretend you’re helping your coding agent.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Welcome to &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/6qhehoulzx9mnnto/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDY2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004282"&gt;#466&lt;/a&gt;.&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;The Main Thing&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/heated-rivalry.jpg" alt="Heated Rivalry guys with the Cloudflare and Vercel logos on their heads" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;You'll never guess what happens Next&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Cloudflare rebuilt Next.js on Vite&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The Winter Olympics might’ve just ended, but the Petty Olympics kicked off again on Tuesday when Cloudflare announced that they “rebuilt Next.js in one week” using $1,100 in tokens.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;They call it &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/kkhmh2unrzxk6mtl/aHR0cHM6Ly9naXRodWIuY29tL2Nsb3VkZmxhcmUvdmluZXh0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004283"&gt;vinext&lt;/a&gt; (“vee-next”) because it’s built on Vite, and because they apparently didn’t want to burn any more tokens generating a catchier name. And even though it’s still experimental, Cloudflare says that some customers are already running it in production, kind of.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Why did Cloudflare do this?&lt;/strong&gt; Besides the years-long blood feud, they say it’s about solving Next’s well-known &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/58hvh8ugq36rklc6/aHR0cHM6Ly9ibG9nLmNsb3VkZmxhcmUuY29tL3ZpbmV4dC8jdGhlLW5leHQtanMtZGVwbG95bWVudC1wcm9ibGVt" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004284"&gt;deployment problem&lt;/a&gt; that makes running a Next app on any non-Vercel serverless platform clunky and difficult.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;(I’m pretty sure Vercel views this as a deployment &lt;em&gt;solution&lt;/em&gt;, but beauty’s in the eye of the &lt;del&gt;beholder&lt;/del&gt; shareholder.)&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The root of that problem is Next’s bespoke Turbopack toolchain, which forces you to reshape the Next build output into something your target platform can actually run. That’s why adapters like OpenNext (which only cover build and deploy) are still limited.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;So instead of adapting the Next.js output, Cloudflare decided to “reimplement the Next.js API surface directly on top of Vite”. A bold strategy, but suddenly viable for one engineering manager armed with an army of code agents and the Next.js test suite to use as a spec.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Let’s take a closer look at how vinext stacks up so far:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Features&lt;/strong&gt; – It reimplements routing, SSR, RSC, server actions, middleware, caching, plus both the App Router and Pages Router. It passes ~94% of the 2,000+ tests covering the Next 16 API surface, but it is upfront about still &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/25h2h9u36lmk4lu3/aHR0cHM6Ly9naXRodWIuY29tL2Nsb3VkZmxhcmUvdmluZXh0I3doYXRzLW5vdC1zdXBwb3J0ZWQtYW5kLXdvbnQtYmU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004285"&gt;missing some features&lt;/a&gt; like static pre-rendering at build time.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Performance&lt;/strong&gt; – Cloudflare claims it can build production apps up to 4x faster and produce client bundles up to 57% smaller on their &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/qvh8h8udzek9ozal/aHR0cHM6Ly9iZW5jaG1hcmtzLnZpbmV4dC53b3JrZXJzLmRldi8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004286"&gt;public benchmarks&lt;/a&gt;. But they did at least have the self awareness to describe these results as “directional, not definitive.”&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Migration&lt;/strong&gt; – vinext comes with an agent skill that promises to migrate your Next app for you. It handles compatibility checks, dependency installation, config generation, and dev server startup, and it flags anything that needs human attention.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Bottom Line:&lt;/strong&gt; I always knew I had a valid strategic reason for never writing unit tests.&lt;/p&gt;
&lt;table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;"&gt;
&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/g3hnhwumrgq469ir/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDY2" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1836004287"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/9qhzhdud045ozrh9/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NjY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1836004288"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/n2hohquvm27z69f6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwdmluZXh0JTIwYW5kJTIwdGhlJTIwbGF0ZXN0JTIwY2hhcHRlciUyMGluJTIwdGhlJTIwQ2xvdWRmbGFyZS1WZXJjZWwlMjBibG9vZCUyMGZldWQmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NjY=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1836004290"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/48hvh7umvwx464sx/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwdmluZXh0JTIwYW5kJTIwdGhlJTIwbGF0ZXN0JTIwY2hhcHRlciUyMGluJTIwdGhlJTIwQ2xvdWRmbGFyZS1WZXJjZWwlMjBibG9vZCUyMGZldWQlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDY2JnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1836004291"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"&gt;&lt;/a&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="150" src="https://bytes.dev/images/content/coderabbit-logo.png" alt="CodeRabbit logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;&lt;span&gt;Our Friends &lt;br class="mobile-break"&gt;(With Benefits)&lt;/span&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/corvette-guy.jpg" alt="" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;When your PM finally understands your PR without needing to schedule a meeting&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/wnh2h6uqnm0ex0s7/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004292"&gt;Your PR descriptions are a lie and everyone knows it&lt;/a&gt;&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;code style="font-size: 14px;"&gt;“Updated stuff”&lt;/code&gt; is not a PR summary. Neither is pasting the Jira ticket title and calling it a day. But writing real summaries for every PR? That’s a collective lie we’ve all agreed to tell ourselves between standups.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;That’s why CodeRabbit auto-generates custom PR summaries tailored to your team’s exact specs. Tell it “show API changes with endpoint details” or “list every package bump with version numbers” — and it does that on every PR, without anyone needing to think about it.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Drop your instructions in &lt;code style="font-size: 14px;"&gt;.coderabbit.yaml&lt;/code&gt; once at the org level, and every PR across every repo starts speaking the same language. Stakeholders get context. Reviewers get focus. Nobody has to write &lt;code style="font-size: 14px;"&gt;“Updated stuff”&lt;/code&gt; ever again.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/wnh2h6uqnm0ex0s7/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYnl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004292"&gt;Free for open source. Sign up today.&lt;/a&gt;&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Spot the Bug&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;
&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/reh8h9um4k6gwob2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPTI2cTEmdXRtX2NvbnRlbnQ9cHJlc2VudGluZyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004293"&gt;Meticulous&lt;/a&gt;
&lt;/h4&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"&gt;&lt;em&gt;Meticulous generates and &lt;strong style="font-weight: 600;"&gt;maintains&lt;/strong&gt; an exhaustive suite of &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/reh8h9um4k6gwob2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPTI2cTEmdXRtX2NvbnRlbnQ9cHJlc2VudGluZyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004293"&gt;e2e UI tests&lt;/a&gt; that covers every edge case of your web app. See why CTOs at Notion, Dropbox and LaunchDarkly rely on them.&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;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: 14px; 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;"&gt;&lt;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: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;class&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Person&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  #name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;constructor&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token template-string" style="font-size: 14px;"&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;Hello, my name is &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;class&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Student&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;extends&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Person&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  #grade&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;constructor&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; grade&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;super&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#grade &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; grade&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
      &lt;span class="token template-string" style="font-size: 14px;"&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;Hello, my name is &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt; and I am in grade &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#grade&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; student &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Student&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"John"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;5&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
student&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Cool Bits&lt;/h2&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Meta officially transferred control of React and all related projects &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/08hwhgu2vnl3g4sl/aHR0cHM6Ly9yZWFjdC5kZXYvYmxvZy8yMDI2LzAyLzI0L3RoZS1yZWFjdC1mb3VuZGF0aW9u" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004294"&gt;into the React Foundation&lt;/a&gt; on Tuesday, freeing the company to refocus on its core mission of inducing mass AI psychosis in all your relatives over 50.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;TkDodo wrote about &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/8ghqh3uozwrmq4ck/aHR0cHM6Ly90a2RvZG8uZXUvYmxvZy9jcmVhdGluZy1xdWVyeS1hYnN0cmFjdGlvbnM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004295"&gt;creating query abstractions&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;The Sentry team broke down &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/vqh3hmuolmwzg2sg/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9zZXR0aW5nLXVwLW5leHQtanMtc291cmNlLW1hcHMtc2VudHJ5Lz91dG1fY2FtcGFpZ249bmV4dGpzLWZ5MjdxMS1uZXh0anMmdXRtX2NvbnRlbnQ9bmV3c2xldHRlci1zZWNvbmRhcnktYmxvZy1zb3VyY2VtYXBzLWxlYXJubW9yZSZ1dG1fbWVkaXVtPXBhaWQtY29tbXVuaXR5JnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004296"&gt;how to wire up Next.js source maps&lt;/a&gt; so you can translate minified stack traces into real file names and line numbers. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;The VoidZero team just released the beta of &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/l2heh6uleqx8r0u6/aHR0cHM6Ly9veGMucnMvYmxvZy8yMDI2LTAyLTI0LW94Zm10LWJldGE=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004297"&gt;Oxfmt&lt;/a&gt;, their Rust-powered, Prettier-compatible code formatter. I can’t decide if coding agents mean we’ll see more JavaScript tooling rewritten in Rust – or less, now that it’s not as big of a flex as it used to be.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/dphehmuevdpl5ksm/aHR0cHM6Ly9leHBvLmRldi9jaGFuZ2Vsb2cvc2RrLTU1" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004299"&gt;Expo SDK 55&lt;/a&gt; just dropped with a revamped default template, Hermes v1 support and new CLI tooling inside the Expo MCP Server.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Rohan S. Puranik wrote about how &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/e0hph0u76mr84wc8/aHR0cHM6Ly9zcGVjdHJ1bS5pZWVlLm9yZy9qaW1pLWhlbmRyaXgtc3lzdGVtcy1lbmdpbmVlcg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004300"&gt;Jimi Hendrix was a systems engineer&lt;/a&gt;. Kind of like how Charles Dickens was basically a newsletter writer in his day, if you think about it.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/7qh7h2u9qdnrzmcz/aHR0cHM6Ly93d3cuc3BlZWNobWF0aWNzLmNvbS9iZXN0LWVhcnMtaW4tYWk_dXRtX2NhbXBhaWduPXZvaWNlLWFnZW50cyZ1dG1fY29udGVudD1uZXdzbGV0dGVyJnV0bV9tZWRpdW09cGFpZC1tZWRpYSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004301"&gt;Speechmatics lets you build voice agents with speed you can trust&lt;/a&gt;. Its speech API delivers ~250ms latency, built real-time first, with support for 55+ languages. LiveKit, Pipecat, Vapi ready. &lt;span role="img" aria-label="backhand index pointing right"&gt;👉&lt;/span&gt; &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/7qh7h2u9qdnrzmcz/aHR0cHM6Ly93d3cuc3BlZWNobWF0aWNzLmNvbS9iZXN0LWVhcnMtaW4tYWk_dXRtX2NhbXBhaWduPXZvaWNlLWFnZW50cyZ1dG1fY29udGVudD1uZXdzbGV0dGVyJnV0bV9tZWRpdW09cGFpZC1tZWRpYSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004301"&gt;Start with $200 free credits&lt;/a&gt;. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/owhkhwuwpxq2o8hv/aHR0cHM6Ly9lbmRvd21lbnQuZGV2Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004302"&gt;endowment.dev&lt;/a&gt; is a new fund started by some prolific open-source creators (who also happen to be rich now) to create “truly sustainable funding for critical OSS.”&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Aurora Scharff wrote about &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/z2hgh7uen5lqwoup/aHR0cHM6Ly9hdXJvcmFzY2hhcmZmLm5vL3Bvc3RzL2J1aWxkaW5nLWRlc2lnbi1jb21wb25lbnRzLXdpdGgtYWN0aW9uLXByb3BzLXVzaW5nLWFzeW5jLXJlYWN0Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004303"&gt;building design components with action props using Async React&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;You can now feed your coding agents &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/p8hehqu4mrqnxzsq/aHR0cHM6Ly9naXRodWIuY29tL2FuYWxvZ2pzL2FuZ3VsYXItc2tpbGxz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004304"&gt;Angular Skills&lt;/a&gt; to give them modern defaults for writing Angular apps. Do all these agent skills actually do anything? Unclear. But they do make humans feel like we’re helping.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Spot the Bug: Solution&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/reh8h9um4k6gwob2/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX2NhbXBhaWduPTI2cTEmdXRtX2NvbnRlbnQ9cHJlc2VudGluZyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1836004293"&gt;Meticulous&lt;/a&gt;
&lt;/h4&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Private fields are not inherited by subclasses. The &lt;code style="font-size: 14px;"&gt;#name&lt;/code&gt; field is not accessible in the &lt;code style="font-size: 14px;"&gt;Student&lt;/code&gt; class, so the &lt;code style="font-size: 14px;"&gt;introduce&lt;/code&gt; method will throw an error. To fix this, you can add a getter method to the &lt;code style="font-size: 14px;"&gt;Person&lt;/code&gt; class that returns the value of the &lt;code style="font-size: 14px;"&gt;#name&lt;/code&gt; field.&lt;/p&gt;
&lt;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: 14px; 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;"&gt;&lt;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: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;class&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Person&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  #name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;constructor&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token template-string" style="font-size: 14px;"&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;Hello, my name is &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;_getName&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;return&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;class&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Student&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;extends&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Person&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  #grade&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;constructor&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; grade&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;super&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;name&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#grade &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; grade&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

  &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    console&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
      &lt;span class="token template-string" style="font-size: 14px;"&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;Hello, my name is &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;_getName&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt; and I am in grade &lt;/span&gt;&lt;span class="token interpolation" style="color: #12b5e5; font-size: 14px;"&gt;&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;${&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;this&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;#grade&lt;span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token template-punctuation string" style="color: #f99157; font-size: 14px;"&gt;`&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; student &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;new&lt;/span&gt; &lt;span class="token class-name" style="color: #12b5e5; font-size: 14px;"&gt;Student&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;"John"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;5&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
student&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;introduce&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div style="text-align:center;padding-bottom:80px;padding-top:80px"&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"&gt;&lt;div style="margin-top:-40px"&gt;
&lt;img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"&gt;&lt;h5 style="font-size:18px;font-weight:400;margin-bottom:24px"&gt;Want us to say nice things &lt;br&gt; about your company?&lt;/h5&gt;
&lt;div style="margin-bottom:16px"&gt;&lt;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/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/x0hph3ueokq53ef5/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1836004305"&gt;Sponsor Bytes&lt;/a&gt;&lt;/div&gt;
&lt;div style="margin-bottom:20px"&gt;&lt;a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/6qhehoulzx9monuo/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1836004306"&gt;or share it&lt;/a&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Built with ❤️ by&lt;!-- --&gt; &lt;a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/kkhmh2unrzxkmmul/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1836004307"&gt;Fireship&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;"&gt;50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101&lt;/p&gt;
&lt;div style="font-family:Papyrus, cursive"&gt;&lt;a class="unsubscribe-link" href="https://c5e21242.click.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl/25h2h9u36lmkdla3/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1836004309"&gt;Unsubscribe from Bytes&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

&lt;span style="display: none"&gt;&lt;a href="https://c5e21242.unsubscribe.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl"&gt;Unsubscribe&lt;/a&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;img src="https://c5e21242.open.convertkit-mail.com/0vu0e0g2zzb9h9vpv0eslhv84r0eqhnhnvdl" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
Email Content
