Email: Bytes: 100 years of htmx - Email to RSS Admin

Subject:
Bytes: 100 years of htmx
Received:
9/1/2026, 8:03:35 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/bicentennial-man.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/beyonce-flood.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: 100 years of htmx&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: 18px; 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: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Today’s issue:&lt;/strong&gt; Durable love notes, LSD-inspired science fiction, and Ozempic for your memory footprint.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Welcome to &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/6qhehoul9oezg2hohk/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNTE3" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058462"&gt;#517&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/bicentennial-man.jpg" alt="Robin Williams standing behind his robot character from Bicentennial Man" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;"&gt;Knowing your robot should be good running htmx for at least the next century&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;100 years of htmx&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/e0hph0u7r4o6gkt8h2/aHR0cHM6Ly9mb3VyLmh0bXgub3JnL2Fubm91bmNlbWVudHMvMjAyNi0wOC0yOC1odG14LTQuMC4wLWlzLXJlbGVhc2Vk" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058463"&gt;htmx 4.0 was released this week&lt;/a&gt; &lt;em&gt;only&lt;/em&gt; 8 months after they announced the alpha, so as any &lt;del&gt;impatient developer&lt;/del&gt; good journalist would do, I’m asking what took so long?&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;To start, this version of our beloved hypertext media system was rewritten on top of the &lt;code style="font-size: 15px;"&gt;fetch&lt;/code&gt; API to enable support for streaming, SSE and other modern browser features that hipsters didn’t care about in 2020. But the main thing that this enabled was a new extension system which the team spent a lot of time iterating and refining. That… and building an &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; Game Boy game. Who’s to say which one got more attention but that’s neither here nor there.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The important thing is that it’s stable and ready to serve humanity for &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/z2hgh7uelwxnvpsph0/aHR0cHM6Ly9mb3VyLmh0bXgub3JnL2Fubm91bmNlbWVudHMvMjAyNi0wOC0yOC1odG14LTQuMC4wLWlzLXJlbGVhc2VkIzp-OnRleHQ9aGF2ZSUyMG1hZGUlMjBleHBsaWNpdCUyMGNob2ljZXMlMjB0aGF0JTIwd2UlMjBmZWVsJTIwd2lsbCUyMHB1dCUyMGh0bXglMkRiYXNlZCUyMGFwcGxpY2F0aW9ucyUyMGluJTIwYSUyMGdvb2QlMjBzcG90JTIwZm9yJTIwYmVpbmclMjAxMDAlMkR5ZWFyJTIwd2ViJTIwc2VydmljZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058466"&gt;the next 100 years&lt;/a&gt;. And since this is what your great-grandchildren are going to be writing, let’s do a quick review of how &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; works.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;How &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; 4.0 works:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Events:&lt;/strong&gt; In your HTML templates, special &lt;code style="font-size: 15px;"&gt;hx-*&lt;/code&gt; attributes declare which events to listen for, what requests to make, and how responses should be handled. The &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; client processes these attributes and attaches the necessary event listeners.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Requests:&lt;/strong&gt; When a declared event occurs, the &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; client collects the relevant values and sends an HTTP request to the server using &lt;code style="font-size: 15px;"&gt;hx-get&lt;/code&gt;, &lt;code style="font-size: 15px;"&gt;hx-post&lt;/code&gt;, or another &lt;code style="font-size: 15px;"&gt;hx-*&lt;/code&gt; action.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Responses:&lt;/strong&gt; The server handles the request and returns an HTML fragment. &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; then selects the element declared by &lt;code style="font-size: 15px;"&gt;hx-target&lt;/code&gt;, then applies the fragment using the &lt;code style="font-size: 15px;"&gt;hx-swap&lt;/code&gt;, replacing, inserting, deleting, or morphing that region of the DOM.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;&lt;strong style="font-weight: 600;"&gt;Extensions:&lt;/strong&gt; Optional client-side plugins hook into the request-response lifecycle to add capabilities such as streaming, WebSockets, preloading, and custom swaps—keeping specialized JavaScript reusable and out of your application logic.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Bottom line:&lt;/strong&gt; If developers are using &lt;code style="font-size: 15px;"&gt;htmx&lt;/code&gt; 100 years from now, I’ll take back everything bad I’ve ever said about HTML.&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/p8hehqu4qxom0xuqh3/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNTE3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1883058467"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/x0hph3ueq30o6xb5hl/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY1MTc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1883058468"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/6qhehoul9oezgxaohk/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9RHVyYWJsZSUyMGxvdmUlMjBub3RlcyUyQyUyMExTRC1pbnNwaXJlZCUyMHNjaWVuY2UlMjBmaWN0aW9uJTJDJTIwYW5kJTIwT3plbXBpYyUyMGZvciUyMHlvdXIlMjBtZW1vcnklMjBmb290cHJpbnQuJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNTE3" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1883058469"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/kkhmh2unxmvrqrulh7/bWFpbHRvOj9zdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0YmYm9keT1UaG91Z2h0JTIweW91JTI3ZCUyMGxvdmUlMjB0aGlzJTIwd2VlayUyN3MlMjBCeXRlcyUwQS0tLSUwQUR1cmFibGUlMjBsb3ZlJTIwbm90ZXMlMkMlMjBMU0QtaW5zcGlyZWQlMjBzY2llbmNlJTIwZmljdGlvbiUyQyUyMGFuZCUyME96ZW1waWMlMjBmb3IlMjB5b3VyJTIwbWVtb3J5JTIwZm9vdHByaW50LiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY1MTc=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1883058470"&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/beyonce-flood.jpg" alt="Beyoncé opening doors as a flood of water rushes out" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;"&gt;Turn on Triage and let the PRs flow&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/58hvh8ug672q8xc6h4/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYWQtYnl0ZXMtMDA2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058471"&gt;Prioritize your PR flood with CodeRabbit Triage&lt;/a&gt;&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Stop reviewing PRs in the order they arrived, and review them in the order that matters.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/58hvh8ug672q8xc6h4/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYWQtYnl0ZXMtMDA2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058471"&gt;CodeRabbit Triage&lt;/a&gt; is a reviewer-first prioritization layer for the PR queue: a self-updating, cross-repository inbox that tells you which pull request to review next, how deeply to review it, and which ones may be safe to close.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Start reviewing the right PRs or tackle low-hanging fruits without leaving the queue.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/58hvh8ug672q8xc6h4/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYWQtYnl0ZXMtMDA2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058471"&gt;Find it under &lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/58hvh8ug672q8xc6h4/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYWQtYnl0ZXMtMDA2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058471"&gt;&lt;code style="font-size: 15px;"&gt;Review&lt;/code&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/58hvh8ug672q8xc6h4/aHR0cHM6Ly9jb2RlcmFiYml0LmxpbmsvYWQtYnl0ZXMtMDA2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058471"&gt; in the CodeRabbit web interface&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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Spot the Bug – Sponsored by &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/25h2h9u3mdw6zwu3h4/aHR0cHM6Ly9nby5jbGVyay5jb20vQ3FKaWpUNA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058472"&gt;Clerk&lt;/a&gt;
&lt;/h4&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 18px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"&gt;&lt;em&gt;Clerk created &lt;strong style="font-weight: 600;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/25h2h9u3mdw6zwu3h4/aHR0cHM6Ly9nby5jbGVyay5jb20vQ3FKaWpUNA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058472"&gt;a new biometric sign-in for Expo, iOS and Android&lt;/a&gt;&lt;/strong&gt; that lets your returning users use Face ID, Touch ID or Android biometrics to sign in to your app.&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: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"&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: 15px; 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: 15px;"&gt;const&lt;/span&gt; &lt;span class="token function-variable function" style="color: #9d7dce; font-size: 15px;"&gt;enrichEvents&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 15px;"&gt;events&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; metadata &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;usr_789&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;tier&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"premium"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;joined&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"2023-04-01"&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; enriched &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; events&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;map&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 15px;"&gt;event&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&gt;&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;id&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;time&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;time&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;user&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; metadata&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;[&lt;/span&gt;event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;userId&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;value&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;properties&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;totalValue
    &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;return&lt;/span&gt; enriched&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; events &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;[&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;id&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"evt_123"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;time&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"2024-12-10T10:00:00Z"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;userId&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"usr_789"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;properties&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;totalValue&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 15px;"&gt;99.99&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

console&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;enrichEvents&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;events&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&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: 19px; line-height: 1.5;"&gt;Dwarkesh Patel &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/qvh8h8udknpz55ulhk/aHR0cHM6Ly93d3cuZHdhcmtlc2guY29tL3Avb3BlbmFpLWh1Z2dpbmdmYWNl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058473"&gt;chronicled the rise and fall of the 3 agent civilizations that hacked Hugging Face&lt;/a&gt;. If you read this sentence 10 years ago, it would be safe to assume that I was writing some LSD-inspired science fiction.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;GitLab’s CEO Bill Staples channeled his inner Mark Twain and wrote about how &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/g3hnhwumqpwr58urh9/aHR0cHM6Ly9hYm91dC5naXRsYWIuY29tL2Jsb2cvd2hlbi1jb2RlLWlzLWFidW5kYW50Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058474"&gt;&lt;del&gt;talk&lt;/del&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/g3hnhwumqpwr58urh9/aHR0cHM6Ly9hYm91dC5naXRsYWIuY29tL2Jsb2cvd2hlbi1jb2RlLWlzLWFidW5kYW50Lw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058474"&gt; code is cheap&lt;/a&gt; but that trusting it is not.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Only idiots write manual tests – modern engineering teams like Notion, Dropbox and LaunchDarkly use Meticulous to maintain e2e UI tests that &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/9qhzhdud59r0mof9h3/aHR0cHM6Ly93d3cubWV0aWN1bG91cy5haS8_dXRtX3NvdXJjZT1ieXRlcyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX2NhbXBhaWduPTI2cTMmdXRtX2NvbnRlbnQ9c2Vjb25kYXJ5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058475"&gt;cover every edge case of your web app&lt;/a&gt;. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Colin McDonnell &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/3ohphdu3pzg0lpcrhn/aHR0cHM6Ly96b2QuZGV2L2Jsb2cvcmVkdWNpbmctbWVtb3J5LWZvb3RwcmludA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058476"&gt;wrote about how &lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/3ohphdu3pzg0lpcrhn/aHR0cHM6Ly96b2QuZGV2L2Jsb2cvcmVkdWNpbmctbWVtb3J5LWZvb3RwcmludA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058476"&gt;&lt;code style="font-size: 15px;"&gt;zod 4.5&lt;/code&gt;&lt;/a&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/3ohphdu3pzg0lpcrhn/aHR0cHM6Ly96b2QuZGV2L2Jsb2cvcmVkdWNpbmctbWVtb3J5LWZvb3RwcmludA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058476"&gt; reduces its memory footprint&lt;/a&gt; by “an order of magnitude” using method memoization.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Ry &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/n2hohquv7r0mplu6hg/aHR0cHM6Ly9naXRodWIuY29tL2Rlbm9sYW5kL2NlbGxkL3JlbGVhc2VzL3RhZy92MC40LjA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058477"&gt;released version 0.4 of celld&lt;/a&gt;, which now supports pretty much every Cloudflare feature including KV, Queues, Workflows and R2 bindings.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Luke Edwards &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/48hvh7umxg8ve3cxh7/aHR0cHM6Ly9naXRodWIuY29tL2x1a2VlZC9sYW5l" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058478"&gt;created lane&lt;/a&gt;, a git worktree manager that preserves your build cache and lets you leave durable love notes for your agents.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;&lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/wnh2h6uq0g6npzs7hx/aHR0cHM6Ly9haS1kZXZjcmFmdC5jb20vP3V0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1wYWlkX2FkJnV0bV9jYW1wYWlnbj1haV9kZXZfY3JhZnQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058479"&gt;AI Dev Craft 2026&lt;/a&gt; is an Oct. 27–28 conference featuring speakers like Kent C. Dodds, Victor Savkin, and Marina Wyss, designed to help you become your team’s AI expert. &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/wnh2h6uq0g6npzs7hx/aHR0cHM6Ly9haS1kZXZjcmFmdC5jb20vP3V0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1wYWlkX2FkJnV0bV9jYW1wYWlnbj1haV9kZXZfY3JhZnQ=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058479"&gt;Register today&lt;/a&gt;. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Devon Govett &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/reh8h9um6xz4l9a2h6/aHR0cHM6Ly9yZWFjdC1hcmlhLmFkb2JlLmNvbS9yZWxlYXNlcy92MS0yMS0w" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058480"&gt;released React Aria 1.21.0&lt;/a&gt; which has a new navigation tree component.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;Anthropic &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/8ghqh3uor9nz62bkh9/aHR0cHM6Ly93d3cuYW50aHJvcGljLmNvbS9jbGF1ZGUtZmFibGUtYW5kLW15dGhvcy01LTE=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058482"&gt;released Fable 5.1&lt;/a&gt; which does some extra caching to “save you” some tokens. Caching? More like “cha-ching” #amirite.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"&gt;The &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/vqh3hmuowgrl94hghl/aHR0cHM6Ly9yZW1peC5ydW4vYmxvZy9yZW1peC0zLXJlbGVhc2UtY2FuZGlkYXRl" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058483"&gt;release candidate for Remix 3 is now available&lt;/a&gt; with the full release coming Oct 2. Can’t wait to watch Ryan Florence type some LLM prompts live on stage.&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: 20px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Spot the Bug – Sponsored by &lt;a href="https://c5e21242.click.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/25h2h9u3mdw6zwu3h4/aHR0cHM6Ly9nby5jbGVyay5jb20vQ3FKaWpUNA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1883058472"&gt;Clerk&lt;/a&gt;
&lt;/h4&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Most likely your IDE would catch this one for you, but there is a syntax error. The &lt;code style="font-size: 15px;"&gt;map&lt;/code&gt; function is an arrow function that implicitly returns the result of the expression inside the block. In this case, the block is not a valid expression, so the code will throw a syntax error. To fix this, you can wrap the object in parentheses to make it an expression.&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: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"&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: 15px; 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: 15px;"&gt;const&lt;/span&gt; &lt;span class="token function-variable function" style="color: #9d7dce; font-size: 15px;"&gt;enrichEvents&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 15px;"&gt;events&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; metadata &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;usr_789&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;tier&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"premium"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;joined&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"2023-04-01"&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; enriched &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; events&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;map&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 15px;"&gt;event&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;id&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;time&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;time&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;user&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; metadata&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;[&lt;/span&gt;event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;userId&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;value&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; event&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;properties&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;totalValue&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;return&lt;/span&gt; enriched&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 15px;"&gt;const&lt;/span&gt; events &lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;[&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;id&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"evt_123"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;time&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"2024-12-10T10:00:00Z"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;userId&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 15px;"&gt;"usr_789"&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;properties&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;{&lt;/span&gt;
      &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 15px;"&gt;totalValue&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 15px;"&gt;:&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 15px;"&gt;99.99&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
    &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;,&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;;&lt;/span&gt;

console&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;log&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 15px;"&gt;enrichEvents&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;(&lt;/span&gt;events&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 15px;"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/l2heh6ulxr7emvt6h0/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1883058484"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/m2h7h6u34ezv67cmhq/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1883058485"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/dphehmuep5nv97bmh4/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1883058486"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96/e0hph0u7r4o63ku8h2/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1883058487"&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/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96"&gt;Unsubscribe&lt;/a&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;img src="https://c5e21242.open.convertkit-mail.com/qdux3x7pqqb7h4l5m4kilh8n0lmnob4hpe96" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
Email Content
