<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/conclave.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/convex-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/lebron-locked.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: The Spiritual Successor to JSX</title>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 18px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> The Pierre boys get Steve Balmer’s attention, the correct pronunciation of “Pracht”, and Daniel Day Lewis learns product engineering.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/58hvh8ug2lkxqes6/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDgy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457319">#482</a>.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">The Main Thing</h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/conclave.jpg" alt="Conclave members smoking cigarettes" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">The TypeScript Conclave has convened<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">The spiritual successor to JSX</h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It has been a big year for religion. We have an American Pope, Russell Brand became a biblical scholar, and Dominic Gannaway just announced the spiritual successor to JSX, <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/25h2h9u3wn499rh3/aHR0cHM6Ly90c3J4LmRldi8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457320">TSRX</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You might be tempted to question the legitimacy of the TypeScript conclave, but Dominic has worked on both the React and Svelte core teams, and also created projects like Inferno and Ripple. And now, the Holy See of UI frameworks has decided that it’s time for an upgrade to JSX.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">TypeScript Render Expressions (TSRX) is a compiler exposed as a Vite plugin that transforms this new language into idiomatic React, Solid, or Ripple. But why do we need this at all?</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">According to the docs, it’s mostly because AI likes it better. But it also fixes a handful of JSX quirks that have been annoying human programmers for years.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Let’s take a closer look at some of the TSRX reforms.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Conditional Rendering for Hooks:</strong></p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">export</span> component <span class="token function" style="color: #9d7dce; font-size: 15px;">Profile</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 15px;"><span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> userId <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> <span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">userId</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> string <span class="token operator" style="color: #12b5e5; font-size: 15px;">|</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">null</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span></span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">if</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>userId<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> user <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">useUser</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>userId<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>h1<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span><span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>user<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>name<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>h1<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">else</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>a href<span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span><span class="token string" style="color: #f99157; font-size: 15px;">"/login"</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">></span><span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span><span class="token string" style="color: #f99157; font-size: 15px;">'Sign in'</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>a<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">TSRX lets <del>you</del> <em>your agent</em> write code like this. Under the hood, it transforms these calls into wrapper components producing valid React code.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Single File Components:</strong></p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">export</span> component <span class="token function" style="color: #9d7dce; font-size: 15px;">Button</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span> label<span class="token punctuation" style="color: #231F20; font-size: 15px;">,</span> onClick <span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">label</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> string<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token function-variable function" style="color: #9d7dce; font-size: 15px;">onClick</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=></span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">void</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>button <span class="token keyword" style="color: #f38ba3; font-size: 15px;">class</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span><span class="token string" style="color: #f99157; font-size: 15px;">"btn"</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>onClick<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>label<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>button<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>btn <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token literal-property property" style="color: #12b5e5; font-size: 15px;">padding</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> <span class="token number" style="color: #fcba28; font-size: 15px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">.</span>5rem 1rem<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
border<span class="token operator" style="color: #12b5e5; font-size: 15px;">-</span>radius<span class="token operator" style="color: #12b5e5; font-size: 15px;">:</span> 4px<span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>style<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">In JSX, you can only return React elements, but in this brave new world there are no returns, only statements. In practice, this allows you to encapsulate everything your UI needs to render.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Syntax Sugar:</strong></p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 15px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 15px;">const</span> UserProfile <span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 15px;">lazy</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">=></span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">import</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token string" style="color: #f99157; font-size: 15px;">'./UserProfile.tsrx'</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">export</span> component <span class="token function" style="color: #9d7dce; font-size: 15px;">App</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 15px;">try</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>UserProfile id<span class="token operator" style="color: #12b5e5; font-size: 15px;">=</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span><span class="token number" style="color: #fcba28; font-size: 15px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span> <span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span> pending <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span><span class="token string" style="color: #f99157; font-size: 15px;">"Loading..."</span><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span> <span class="token keyword" style="color: #f38ba3; font-size: 15px;">catch</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">(</span>e<span class="token punctuation" style="color: #231F20; font-size: 15px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 15px;">{</span>
<span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span><span class="token string" style="color: #f99157; font-size: 15px;">"Something went wrong."</span><span class="token operator" style="color: #12b5e5; font-size: 15px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 15px;">/</span>p<span class="token operator" style="color: #12b5e5; font-size: 15px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
<span class="token punctuation" style="color: #231F20; font-size: 15px;">}</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">TSRX supports if/else, lexical scoping of variables, and even has support for async boundaries that makes writing code like this possible.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> TSRX fixes most of the annoying issues we’ve had with JSX for the last decade. But its reign might be short lived since it’s only a matter of time before we’re <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/qvh8h8udpqoww7ul/aHR0cHM6Ly94LmNvbS96YW4yNDM0L3N0YXR1cy8yMDQ2OTgyMzgzNDMwNDk2NDQ0" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457321">streaming pixels</a> straight from the LLM.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/9qhzhdudrnzwwxf9/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDgy" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1851457323"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/3ohphdu3gv4mm9tr/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0ODI=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1851457324"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/n2hohquv0e6qqka6/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwVFNSWCUyQyUyMHRoZSUyMHNwaXJpdHVhbCUyMHN1Y2Nlc3NvciUyMHRvJTIwSlNYJTIwZnJvbSUyMHRoZSUyMGNyZWF0b3IlMjBvZiUyMEluZmVybm8mdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0ODI=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1851457325"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/48hvh7um8k6ll2ix/bWFpbHRvOj9zdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0YmYm9keT1UaG91Z2h0JTIweW91JTI3ZCUyMGxvdmUlMjB0aGlzJTIwd2VlayUyN3MlMjBCeXRlcyUwQS0tLSUwQUJyZWFraW5nJTIwZG93biUyMFRTUlglMkMlMjB0aGUlMjBzcGlyaXR1YWwlMjBzdWNjZXNzb3IlMjB0byUyMEpTWCUyMGZyb20lMjB0aGUlMjBjcmVhdG9yJTIwb2YlMjBJbmZlcm5vJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ4Mg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1851457326"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"></a>
</td></tr></tbody></table>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="150" src="https://bytes.dev/images/content/convex-logo.png" alt="convex-logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"><span>Our Friends <br class="mobile-break">(With Benefits)</span></h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/lebron-locked.jpg" alt="Lebron James looking locked in" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 17px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Your coding agent when you let it write Convex<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/wnh2h6uq68x77rf7/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1GNmdzaUlaek5JSQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457327">Why are AI agents good at writing Convex?</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">They’re <em>supposed</em> to be good at writing everything, but we all know that’s not true.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">But with Convex everything usually just works. And Jamie Turner (Convex CEO/co-founder) made <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/wnh2h6uq68x77rf7/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1GNmdzaUlaek5JSQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457327">this video</a> explaining the 3 big reasons why:</p>
<ol>
<li>Convex provides feedback</li>
<li>It enables “local reasoning”</li>
<li>It minimizes the meta layer</li>
</ol>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">I’d add a bonus 4th reason: it can scale super fast without breaking or charging you a bajillion dollars.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Seth Raphael wrote about how it helped ClawHub scale from <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/reh8h9umznwdd0h2/aHR0cHM6Ly9zdGFjay5jb252ZXguZGV2L29wdGltaXppbmctb3BlbmNsYXc=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457328">zero to 1 million weekly active users</a> in a week without crashing or running up a huge bill.</p>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/wnh2h6uq68x77rf7/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj1GNmdzaUlaek5JSQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457327">Watch Jamie’s full video</a> for more. It’s great.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Fat, MDO, and the Pierre boys just released <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/08hwhgu2rqgee2bl/aHR0cHM6Ly90cmVlcy5zb2Z0d2FyZS8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457329">Trees</a> a file tree rendering library. We heard Steve Ballmer has a thing for figurative trees and might be interested in investing.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Sentry is hosting <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/8ghqh3uonkqddqak/aHR0cHM6Ly9zZW50cnkuaW8vcmVzb3VyY2VzL2FnZW50LW1vbml0b3Jpbmctd29ya3Nob3AvP3V0bV9zb3VyY2U9Ynl0ZXMmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fY2FtcGFpZ249YWktZnkyN3ExLWFnZW50bW9uaXRvcmluZ3dvcmtzaG9wJnV0bV9jb250ZW50PW5ld3NsZXR0ZXItc2Vjb25kYXJ5LXJlZ2lzdGVy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457330">a free workshop on Agent Monitoring</a> to help you monitor cost, token usage, and model performance. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Chris Pojer wrote about <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/vqh3hmuor8e00gbg/aHR0cHM6Ly9jcG9qZXIubmV0L3Bvc3RzL21hc3RlcmluZy10ZWNoLWxlYWQtbWFuYWdlbWVudA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457331">tech lead management</a> a few years ago, not knowing that he was basically describing software engineering in 2026.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Warp terminal <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/l2heh6ul7w622ws6/aHR0cHM6Ly9naXRodWIuY29tL3dhcnBkb3RkZXYvd2FycA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457332">just got open sourced</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Former Github CTO, Jason Warner’s startup just released some fresh, artisanal, made in America<span role="img" aria-label="trade mark">™️</span> <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/m2h7h6u3zwm552tm/aHR0cHM6Ly9wb29sc2lkZS5haS9tb2RlbHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457333">agentic coding models</a>. Ballerina Farm approves.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Matt Pockock created some <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/dphehmuenr866vim/aHR0cHM6Ly9naXRodWIuY29tL21hdHRwb2NvY2svc2tpbGxz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457334">agent skills</a> for your slop cannon.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Clerk <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/e0hph0u7o5qvvvi8/aHR0cHM6Ly9nby5jbGVyay5jb20vcW1ubDRmMg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457335">created a CLI</a> to make it easy for your agent to spin up auth on your next project without leaving your terminal. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Jovi built a <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/7qh7h2u953wll5az/aHR0cHM6Ly9wcmFjaHQucmVzeW5hcHNlLmRldi8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457336">full stack Preact framework</a> called Pracht (pronounced “pracht”).</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Daishi Kato wrote <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/owhkhwuwd5g99vhv/aHR0cHM6Ly9uZXdzbGV0dGVyLmRhaXNoaWthdG8uY29tL3AvbXktdGhvdWdodHMtb24tcnNjLWlzLWl0LWp1c3Qtc2VyaWFsaXphdGlvbg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457337">some thoughts about RSC</a>, and whether or not it’s “just serialization”.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/z2hgh7uex0p662sp/aHR0cHM6Ly9zaWduYWwudHdpbGlvLmNvbS8yMDI2L3JlZ2lzdGVyP2NvZGU9REVWTkVUMjYmdXRtX2NhbXBhaWduPXNpZ25hbCZ1dG1fbWVkaXVtPWVtYWlsJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457338">Mark Rober will join Twilio SIGNAL on May 6–7 in San Francisco</a>. A former NASA engineer and one of the most recognizable creators in science, Mark will be sharing his perspective on curiosity, creativity, and building things that truly resonate. Grab your discounted developer ticket here. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Brandon Roberts just released <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/p8hehqu4o8g66nfq/aHR0cHM6Ly9kZXYudG8vYW5hbG9nanMvYW5hbG9nanMtMjUtcnVudGltZS1pMThuLWZhc3QtY29tcGlsYXRpb24tbW9kZS1oaWVyYXJjaGljYWwtY29udGVudC1hbmQtbW9yZS0zb2Nq" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457339">version 2.5 of Analog.js</a>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 19px; line-height: 1.5;">Kent wrote an article called <a href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/x0hph3ue0x922qb5/aHR0cHM6Ly93d3cuZXBpY3Byb2R1Y3QuZW5naW5lZXIvdGhlLWxhc3Qtc29mdHdhcmUtZW5naW5lZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1851457340">The Last Software Engineer</a>. It’s like <em>The Last of the Mohicans,</em> just a lot bloodier.</p>
</li>
</ol>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/6qhehoule0nrr3so/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1851457341">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/e0hph0u7o5qvvzh8/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1851457342">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/7qh7h2u953wllgcz/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1851457343">Fireship</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://c5e21242.click.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo/owhkhwuwd5g9d3av/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1851457344">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://c5e21242.unsubscribe.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/68uxdxk733b8h5gvd0zhohp4enm7dt9hlqvo" alt="">
</body>
</html>