<!DOCTYPE html>
<html>
<head>
<title>Bytes: Firebase steps into the Studio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 16px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> K Pop Demon Angular, using Expo to remember how to cry, and the societal power of proper lint rules.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/58hvh8ug5g2eqxt6/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDE5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885919">#419</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/guy-kiss.jpg" alt="Emoji with Guy Fieri hairstyle doing a chef's kiss" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">Vibe coders learning that Google will write their app for them<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Firebase steps into the Studio</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">A few months ago, we wrote about how <em>The-artist-formerly-known-as-Project-IDX</em> changed its name to <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/25h2h9u373w56wu3/aHR0cHM6Ly9maXJlYmFzZS5zdHVkaW8v" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885920">Firebase Studio</a> and went all in on the Google-maxxed version of vibe coding – highly structured, built on top of a bunch of other Google services, and geared towards professional developers instead of those broccoli-haired App Mafia kids.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">And they’ve continued to double down on that approach all summer by rolling out a steady stream of features designed to help you build “real” software faster and <del>better</del> <em>Googlier</em>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here are a few highlights:</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Gemini hits the terminal</strong> – Gemini CLI is now <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/qvh8h8ud8dpxz5ul/aHR0cHM6Ly9maXJlYmFzZS5ibG9nL3Bvc3RzLzIwMjUvMDcvZmlyZWJhc2Utc3R1ZGlvLWdlbWluaS1jbGk=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885921">built right into Firebase Studio</a>, so you can drop into the terminal and summon AI for debugging, refactoring, or spitting out docs without leaving your flow.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Tighter Firebase integrations</strong> – Instead of just scaffolding your UI, Firebase Studio can now wire up authentication, Firestore, and cloud storage from a single prompt so you can actually deploy and use the features it builds for you.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">MCP support</strong> – You can now <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/g3hnhwumemwvr8ir/aHR0cHM6Ly9maXJlYmFzZS5ibG9nL3Bvc3RzLzIwMjUvMDcvc3VwZXJjaGFyZ2UtZmlyZWJhc2Utc3R1ZGlvLXdpdGgtbWNw" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885922">extend</a> Gemini and Firebase Studio with external tools and data sources by creating a <code style="font-size: 14px;">.idx/mcp.json</code> file in your project and adding an MCP server’s config.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Show and share</strong> – <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/9qhzhdudgdr70of9/aHR0cHM6Ly9maXJlYmFzZS5ibG9nL3Bvc3RzLzIwMjUvMDcvZmlyZWJhc2Utc3R1ZGlvLXB1YmxpYy1wb3J0cw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885923">Public ports</a> let you expose a backend or preview running in Firebase Studio with a temporary public URL, so teammates (or clients) can click around without a deploy.</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> When this project first launched, lots of developers were quick to dismiss it as another hobbyist toy. But with Gemini getting baked deeper into the stack and more features for collaboration and extensibility being added, Google is clearly serious about trying to bring vibe coding to the enterprise. May the quarterly earnings be ever in their favor.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/3ohphdu3q3gw0pcr/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDE5" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1778885924"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/n2hohquvnv0dmls6/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTk=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1778885925"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/48hvh7um0m8ov3sx/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9QnJlYWtpbmclMjBkb3duJTIwYWxsJTIwb2YlMjAlNDBGaXJlYmFzZSUyMFN0dWRpbyUyN3MlMjByZWNlbnQlMjB1cGRhdGVzJnVybD1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDE5" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1778885926"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/wnh2h6uqrq6znzc7/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBQnJlYWtpbmclMjBkb3duJTIwYWxsJTIwb2YlMjAlNDBGaXJlYmFzZSUyMFN0dWRpbyUyN3MlMjByZWNlbnQlMjB1cGRhdGVzJTBBaHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQxOSZzdWJqZWN0PVlvdSUyMGxpa2UlMjBjb3JuYnJlYWQlM0Y=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1778885927"><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/alligator-hug.jpg" alt="Animated lady hugging her two alligators" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">I love all my AI agents equally<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/reh8h9umqmz8d9b2/aHR0cHM6Ly93d3cuY29udmV4LmRldi9jb21wb25lbnRzL2FnZW50" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885928">@convex-dev/agent is the easiest way to build AI agents</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">It’s an open-source Agent component that gives you simple building blocks for creating persistent, intelligent agents using <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/08hwhgu2m2r8eosl/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvYWdlbnRz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885929">just TypeScript</a>.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Here are the highlights</p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Persistent threads</strong> that remember context across conversations and are shareable between users and agents</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Hybrid vector/text search</strong> for fast, relevant lookups over your data (<a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/vqh3hmuonor504hg/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_dj10VUtNUFVsT0NIWQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885931">see YouTube tutorial</a>)</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Durable workflows</strong> that stream updates live to every connected client</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/08hwhgu2m2r8eosl/aHR0cHM6Ly9kb2NzLmNvbnZleC5kZXYvYWdlbnRz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885929">Check out the docs</a> to see how easy it is to build your own AI agents from scratch.</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="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/l2heh6ulol7g2va6/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvaW5mcmFzdHJ1Y3R1cmUtY29yZS1wbGF0Zm9ybS1zb2x1dGlvbi1icmllZi8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWluZnJhLWNvcmUtcGxhdGZvcm0tYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885932">Datadog</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>They created an <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/l2heh6ulol7g2va6/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvaW5mcmFzdHJ1Y3R1cmUtY29yZS1wbGF0Zm9ybS1zb2x1dGlvbi1icmllZi8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWluZnJhLWNvcmUtcGxhdGZvcm0tYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885932">Infrastructure Core Platform solution brief</a> that shows you how to efficiently scale systems with best practices for security and governance.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What gets logged?</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">url</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span> port <span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">URL</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>url<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>port <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token string" style="color: #f99157; font-size: 14px;">'80'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"You're using the default port"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>port <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token string" style="color: #f99157; font-size: 14px;">'443'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"You're using the default secure port"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">You are running on port "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>port<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">"</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">http://example.com:80</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">http://example.com:8080</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">https://example.com:443</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">https://example.com:3000</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Cassidoo Williams wrote about building <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/m2h7h6u3o3zr57cm/aHR0cHM6Ly9jYXNzaWRvby5jby9wb3N0L2R1Y3R0cy1idWlsZC1sb2cv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885933">Ductts</a>, a React Native + Expo app for tracking how often you cry. If you’re looking for a quick way to pump your numbers, I suggest watching the last 5 minutes of <em>Ratatouille</em> or thinking about how that one dude from your high school who wouldn’t shut up about crypto and ICOs back in 2017 is probably rich now.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/dphehmueqen367um/aHR0cHM6Ly9yc3BhY2sucnMvYmxvZy9hbm5vdW5jaW5nLTEtNQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885934">Rspack v1.5</a> comes with barrel file optimization, a faster file system watcher, improved browser support, and lots more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">QA Wolf is hosting a free webinar on <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/e0hph0u7k7oxvkh8/aHR0cHM6Ly9hdHRlbmQucWF3b2xmLmNvbS9ob3ctd2UtYnVpbHQtYS1yZWFsLWlwaG9uZS1kZXZpY2UtZmFybS1mb3ItaW9zLW1vYmlsZS10ZXN0aW5nL3JlZ2lzdGVyP3V0bV9jYW1wYWlnbj1BQ1FfQWxsX0V2ZW50JTIwUmVnaXN0cmF0aW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9pT1NEZXZpY2VGYXJtV2ViaW5hcl8yMDI1MDgyNi1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9aU9TRGV2aWNlRmFybVdlYmluYXJfTm9uZV9Ob25lX0hlYWRsaW5lJTNBTm9uZV9fX19OZXdzbGV0dGVyLVNlY29uZGFyeVBsYWNlbWVudF8yMDI1MDgyNl92MV8mdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885935">How they built a real iPhone device farm for iOS mobile testing</a> this Thursday. You’ll learn why simulators fail at e2e mobile testing and the crazy lengths they went to in order to achieve 80% coverage for iOS apps. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Sam Who wrote this fun, interactive post about <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/7qh7h2u9095gloiz/aHR0cHM6Ly9zYW13aG8uZGV2L2JpZy1vLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885936">Big O notation</a>, and he’s not talking about Oscar Robertson’s triple doubles.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Oxlint now has <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/owhkhwuw4wdz9wsv/aHR0cHM6Ly92b2lkemVyby5kZXYvcG9zdHMvYW5ub3VuY2luZy1veGxpbnQtdHlwZS1hd2FyZS1saW50aW5n" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885937">type-aware linting</a> and supports 40 long-awaited rules. Because lint rules are the only thing that separates us from the animals.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">A new <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/z2hgh7ueoexg6pcp/aHR0cHM6Ly9yZWFjdC1zcGVjdHJ1bS5hZG9iZS5jb20vcmVsZWFzZXMvMjAyNS0wOC0yNS5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885938">React Aria release</a> comes with origin-aware animations, GridList section support, and more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Stuart Dotson wrote about how his team at Calm <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/p8hehqu494ov6xfq/aHR0cHM6Ly93d3cuY2FsbS5jb20vYmxvZy9lbmdpbmVlcmluZy9ob3ctd2UtbWlncmF0ZWQtb3VyLXJ1c2hqcy1tb25vcmVwby10by1ub2RlLXR5cGUtc3RyaXBwaW5n" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885939">migrated their Rush.js monorepo to Node type stripping</a> – right after they completed their team sleep meditation with LeBron James.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/x0hph3uene0g2xa5/aHR0cHM6Ly9kZXZlbG9wZXIubW96aWxsYS5vcmcvZW4tVVMvZG9jcy9Nb3ppbGxhL0ZpcmVmb3gvUmVsZWFzZXMvMTQy" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885940">Firefox 142</a> introduces <code style="font-size: 14px;">URLPattern</code>, the Prioritized Task Scheduling API, and more.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Minko Gechev filmed this first-look demo of <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/6qhehoulpleqrxao/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_YWJfY2hhbm5lbD1NaW5rb0dlY2hldiZ2PTF2am52UFVON1FV" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885941">AngularAI</a>, a browser-first agent that provides “hyper-contextual” debugging and prototyping. Because context is everything – which is a lesson I learned the hard way after trying to jump into <em>K Pop Demon Hunters</em> with my nieces and nephews after they were already 45 minutes into it.</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Pop Quiz: Answer</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/l2heh6ulol7g2va6/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvaW5mcmFzdHJ1Y3R1cmUtY29yZS1wbGF0Zm9ybS1zb2x1dGlvbi1icmllZi8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWluZnJhLWNvcmUtcGxhdGZvcm0tYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1778885932">Datadog</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">What gets logged?</p>
<pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"><code class="language-js" style="font-size: 14px;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">url</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span> port <span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">new</span> <span class="token class-name" style="color: #12b5e5; font-size: 14px;">URL</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>url<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>port <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token string" style="color: #f99157; font-size: 14px;">'80'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"You're using the default port"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">if</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>port <span class="token operator" style="color: #12b5e5; font-size: 14px;">===</span> <span class="token string" style="color: #f99157; font-size: 14px;">'443'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token string" style="color: #f99157; font-size: 14px;">"You're using the default secure port"</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
console<span class="token punctuation" style="color: #231F20; font-size: 14px;">.</span><span class="token function" style="color: #9d7dce; font-size: 14px;">log</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">You are running on port "</span><span class="token interpolation" style="color: #12b5e5; font-size: 14px;"><span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">${</span>port<span class="token interpolation-punctuation punctuation" style="color: #231F20; font-size: 14px;">}</span></span><span class="token string" style="color: #f99157; font-size: 14px;">"</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">http://example.com:80</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// You are running on port ""</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">http://example.com:8080</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// You are running on port "8080"</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">https://example.com:443</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// You are running on port ""</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">getPort</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token template-string" style="font-size: 14px;"><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span><span class="token string" style="color: #f99157; font-size: 14px;">https://example.com:3000</span><span class="token template-punctuation string" style="color: #f99157; font-size: 14px;">`</span></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token comment" style="color: rgb(167, 167, 167); font-size: 14px;">// You are running on port "3000"</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">The <code style="font-size: 14px;">URL</code> constructor function in JavaScript strips the default port even if it’s explicitly provided. Since port <code style="font-size: 14px;">80</code> is the default for http and port <code style="font-size: 14px;">443</code> is the default for https, the port is stripped from the URL resulting in an empty string. File this one away under JavaScript quirks that you probably don’t need to know, but could save future you hours of debugging.</p>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/kkhmh2un8nv7wrbl/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1778885942">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/58hvh8ug5g2exxu6/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1778885943">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/25h2h9u373w59wa3/aHR0cHM6Ly91aS5kZXY=" url-id="1778885944">ui.dev</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://click.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3/qvh8h8ud8dpxw5al/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1778885945">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://unsubscribe.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3">Unsubscribe</a></span>
<!-- -->
<img src="https://open.convertkit-mail4.com/27uepe0gddioh82lgxqb3hgq3v344hghm2v3" alt="">
</body>
</html>