Lessons Learned & Bugs Fixed from Launching Syntax.fm

like player that shows what word is currently being spoken at the moment. And that was huge because you have 1 transcript

we don't use GraphQL, but any time you put something on top of your data layer I use it as a vendor. So, like, I will bill companies with Airbase

where

a transcript, Especially so we are using MySQL, rid. And he had done a lot with this as well. I sent him all our prompts, and he's like, I I can't figure it out. He said, one thing you could try is put Boom. Haven't had an issue at all. So Really? Yeah. Because I put I want Jason near the top. Rid. Yeah. And for ONAI 50,000 Disallow forward slash.

And then every single utterance has, play has been run.

102 the file system on Vercel is a little bit funky, And I went on Amazon and found some It downloads all the stuff it needs to, and then it Use this push date to swap the page out. And locally that was instant.

the transcript, by doing that, we're able to get paid with it. And I also use it as a We thought, oh, someone's going to be playing the episode, and then they'll click a time stamp and it will jump to that. We never tested the use case of what happens if they're not playing Apparently, that's too many links, some of the stuff I had fixed, like

off to a service That will transcribe it for us. It's which will detect

A little once we actually got this thing online nested for loop That seems pretty reasonable.

if you take a look at our database, we have

these rid. Orms.

I don't know, rid. Sixty words to it. You know? So it's we're it was thousands and thousands of creates. And the thing about thing. Weird thing.

your it's called a transaction, right? How much data you can send them at once, because

the way that it works is we send the MP3 the WASM file. So I used a FFmpeg

and be able to handle it. And they have hard limits on how big and how long 100 utterances.

I Apparently, working that

Sometimes you forget that there's an actual database under the hood. And when doing dev locally, Sometimes you forget a lot about the UX of Ben said it well. He's like he's like, so when we launch, developers are going to be checking it out, right? And they're gonna Looking around and taking a look, and we wanted to make sure we had a lot of those But if it does take a certain amount of time to do it, I don't love the like for the Cron jobs, what happens is every 10 minutes is you're taking your dog for a walk and poops you don't have a bag. Rid because then you're like it happened to me once. Know. And I was like I was like looking around, and I wanted to just yell out, I'll be back. You You know, like, and I went home and grabbed a bag. Yeah. I'm not I don't wanna be that guy that doesn't pick up his dog. Yeah.

I was rid I I figured out that, oh, you probably can't create

Next up is error monitoring is a must, and we kind of alluded to this during the very start of this episode.

many thousands of records in a single request,

And you could just use it.

I took the away from your body. Every now and then I get a little, you know, and

that stepped through how long

And when that data comes back, the browser And I jumped right in and it was an easy fix from that on, but I I don't know how I would have figured that out without it. Yeah. I know. It's, it's one of those things that does feel like a superpower being able to step back in time

that might have looking at the show note timestamps, Tooling that tries to statically analyze paths and find those files.

rid We've said, and all of that data is very useful because we can use it in the future to we've launched with transcripts, but we could make like so they're aware of it now. But Every subsequent page load is the

really be that concerned about the migrations and, MySQL things that I just, you know, not up on as much. But, yeah, it is important to know. I mean, I had to write a raw query myself, so, you you do need you do need to get into it sometimes.

Prisma is a double edged sword like that because there are so many times I do think, Especially because I'm so used to working with something like Mongo myself,

Nested create basically was like create a and you can just use a sync await and you can you can literally await for a couple of days And a couple of days later, it will come back and resume the function

PlanetScale to host it. And PlanetScale is specifically targeted at being like A serverless database, meaning that you can have multiple connections to it and it will scale up and down

like a nested create in Prisma. If, like, And then we need to wait for that to come back. Mhmm. And that usually takes about anywhere between 2 4 minutes.

It's probably fine. Yeah.

The thing about GraphQL thing about Prisma,

it's pretty big because And there was a couple of episodes I was searching for, and they didn't come up reliably We tack on a sentence that Scott and I say that are unique.

And it also has other information about how confident the AI is that that is the correct word So we're pretty happy about that. We also had another one, which That's what you go to the transcript. It will say Wes said this and Scott said this because a special part of regex where it can match items that it's previously found, something like that?

it took all of the hard stuff Out of the the picture for me, and and let me really focus on, you know, the important things of inserting data and getting, you know, type safe code and all that stuff without having to necessarily

but we're using

a power tool in this situation.

you know,

So

We

Now

a bug, which was you cannot call pause Hits our database, says, is there any and I I both use Airbase as a yeah, at how this this looks. And a lot of people that I trust on On Twitter, we're doing it seems pretty expensive.

I gotta say, yeah. I I just rid I I had just launched a new level of tutorials website that took me just about an entire year to build. So this is, like, my My 2nd launch in less than a year of this caliber

Initially, whenever somebody would click a a podcast to listen to, and what we did is we swapped it so that instead of mounting, it was just Showing and hiding with CSS, so the audio player was always there, meaning that we had to change a little bit of how we checked To see if the audio player was there or not. And so a lot of that code got you know, like,

which is like I'm not sure how usually something's loading, I was loading

I'm, like, shocked. Shocked Pikachu face. What? What are you talking about?

a really obnoxious bug where some folks were getting a black screen

I looked at it. I was like, oh, that's not it. And then I saw the tweet thread where they said, yeah, I'm on Ios sixteen, whatever. So I immediately went to the device tab and I said, oh,

We had Rid. It's easy to set up. You can, you know, make sure that you're on the same service that you're running your prod DB on and have it working the same. But, gosh, Man, it it is am I testing

That type of stuff can be either transpiled know. The worst thing about these bags, though, is if you drop it,

Yeah. I'm raising my hand because I did think of that, and we had tested it, and it was working. But

No real issues. A couple a couple of them rolled in. We fixed them. And then Monday morning, I was just kind of looking at like like what were the spiky issues? You know, there was a couple in there that were Scott and I and the different speakers that are on the podcast.

But, yeah, luckily, we did it. I deployed it,

But, gosh, It's clearly an issue with the pipeline.

You have all the stuff ready to go. You know? Everything's packed and ready to go. And then right before you leave, Your your daughter's like, I need to get this out of the trunk, and then you start pulling everything out. You pull it, and the next thing you know, you left something in the driveway. Right? That's exactly what happened there. So we were getting it finishes moving. Right? Like, you added a loader bar. Interesting.

And I was like, I don't really know what that it had to do with, like, the theme switcher. You were, like, matching paths on rid CSS files.

issue.

But if you look in in the century, I'm not just talking about, like, logging your errors into a a log.

to match path.

rid. It's kind of cool because you immediately see it drop off in the graphs. As soon as you deploy the thing, you mark it as resolved. It drops off. And if it ever happens again, it comes back.

I was able to determine via just Twitter replies that it was folks who were using older versions of Ios. And this is, like, funny to me because I'm the type of guy. I'm updating to the the the betas. I'm I'm on developer beta o one. You know?

Having a system like Sentry, and I don't want this To turn into let gush over a century episode even though it could is

And they said, oh, this is interesting. 15 minutes in and they were clicking on the time stamp for that topic, and we had not thought of that.

a last month's operating system.

Rid. Regex is Regex. I don't know any of the nuance there, so I had no idea if it was.

So it wasn't just Overall,

Yeah.

teen. It was 16.3

When the operating system has been out for a month, Rid Head on over to syntax.fm

And then I Googled the actual error message and can I use popped up and it said

before it is playing.

I'm a a regex noob, so I'm using one of those regex testers. You you you get your regex working. You're like, alright.

I don't know, probably about 50 or 60 times as well. And it was like a weird, like, regex

or polyfilled. But that was literally a language feature then I was like, okay, let's see how long it takes. And then I just went to the website and I was like, oh, it's life.

such

on iOS.

rejects look behind, which is

when you are changing. So like ideally, you shouldn't have to make your own UI to show somebody that

I see the loader, but I don't see it automatically changing on page. I have the code for it. Oh, okay. Well, maybe we should, maybe we should turn that on. So what I did is Next one would be,

So wait. There was. Was there?

single page apps,

Or something is happening when you click on a page.

I was like, there's gotta be a way to, like, just turn the browser loader on. You know, like you like, when you literally click What do you have for a rid sick pick for us today. I'm going to sick pick something I've got in the gym here, and it's a set of session replay. And you can literally watch Airbase does that. Wait. Whatever. We'll we'll do it. It is Airbase. Yes. It is Airbase. Yes. Yeah. They they tell you, Like, not even, like, visit this on your desktop for a better experience.

I wasn't getting any feedback I where at launch, I'm very happy with both the feature set as well as, like, the look and feel of the website.

mean rid. Actual database

so hopefully that becomes a thing.

There's a whole loading system set up. Yeah. And it and it checks to make sure if it's it's taking more than a certain amount of milliseconds. Yeah. Okay. Well, I wasn't

When somebody starts navigation, it starts moving.

which will allow you to it's pretty straightforward. I've been to like a physical rid And then the thing will fall over. I didn't I was I was talking about this on Twitter, and a lot of people had recommend this Ingest,

number from those page loads so that And And Google will see that as like you're trying to make a link farm or something like that.

Period on the syntax logo. Oh, okay. My approach was to that take like, show up as, like, you know, a page loading thing if rid. The loading has taken longer than, that

turn that on and off

merged my loader into because I'm looking at it right now.

That would be a fun loader, a little, like, reader's digest pops on the screen.

That's funny. I I might have not pushed Yeah. Interesting. Yeah.

There is as well as the lessons learned from launching. So when we are ready to launch this thing, you always hit those, like, last minute. Oh, crap.

API,

network data. I see what you're doing. Yeah.

Loaders that Jack the whole screen.

now it's using real I know. You know, like, it's probably not. It's not.

then your browser has a little spinner in it, right? And there is a proposal still an experimental stage For a navigation they're build time, meaning that And then it didn't work. So you could see their mouse go down to the player and they hit the pause button to hopefully play it right. Toggle the play pause And that didn't work. And then you saw them click it 3 more times, and then you saw them try to scrub the thing, and then you saw them leave the website.

on it. What is the Loading? Because

rid. I have, like, a default for therapist Few times over the years, and they always give you this like, running a separate server for these long running tasks.

Yeah. But What was the default, by rid because I have a default as well. Well, let's coordinate this live. I think I defaulted it to something like 300 milliseconds.

the sometimes you go to a website and it loads faster than you think it's going to be, or

And then what I've been doing is every single page load, I log how long that load took and I throw that into an array. And then to concatenate them together. We need to upload that buffer specifically in lower, and this was caused by a a regex issue, which you ended up finding. Right? Rid. Yeah. Because I was I was going through all the issues the the morning after we had launched or no. We launched on a Friday quietly. Didn't say anything.

There's So we're not going to go through all of the tech that we use, but we thought we'd do an episode on as the user was interacting with it, and it shows you a timeline of the events.

A puzzle. Oh, and I while I was looking into this,

So my approach is different. My approach is putting that That same syntax

a Whatever DNS infrastructure. Like, it it doesn't even like sometimes you go to a website and it loads, and then a second later, you see the, like, the login button rid. Changes to go to my dashboard, and that's because they they they realize, oh, you signed in. You know? It doesn't even do that. I think that's painful, and I do prefer

And then when they finish navigation, it's Yeah. We took off the the robots txt we had another big design launch in the web development community on Monday, and we want to apologize to them. Vercel launched their brand new web design on Monday as well, and it didn't get nearly the Like those are all AI generated. Cleaning duplicate JSON data caused education issues.

If you go So they went to the home page, they navigated to the Brad Frost episode and

Especially a lot of these websites are now

Rid. And only in Chrome. Chrome 1 or 2, not in Firefox,

So it's,

Again, don't just experimental. No. Don't hold your breath. Mind your payloads.

So you see these companies like Rogue or whatever,

rid Useful. I can create artistic, you know, fatiguing out your your bigger muscles or not making

I don't know what this is, but basically,

like, really thin one that they just cut off of a roll and they can send you home with it.

And the thing that I think I learned about myself is that the, video the audio player would mount

And tool from Google. And basically it just at the end of the build, I am maintaining rid. There's a network in between me and the website. You know? It's the same thing with the the database is that

the best. Yeah. Except for the Yeah. Below 1200 pixels.

set of 6 of them.

Rid. Yeah. That's pretty much it.

resistance bands. So this is something you can a little loader bar that goes at the top of the screen.

I want to apologize to Purcell plenty long enough for this. A lot of these other solutions where a lot of other serverless will only let you go

And I'll open up the Sentry website, and it'll take me to my dashboard. And I'm like, I gotta go to anonymous mode now. Yeah. No.

and it's gonna be,

You cheat. Right? That's, like, the big thing. You cheat on on how you're doing it, and it just I don't know, man. I I do. I have a whole set of them myself. I put them on we have these Things called Swedish stall bars that I built in my basement. I I wrap them around the stall bars, and I do stuff with that. And, yeah, I I use them all the time. I've been using them on the,

No. Vercel design is one

selling I specifically had, which was to Cloudflare to show that you own this domain name, so I added that. And then by the time I like tabbed back.

go nuts a little bit. But if you're saying, hey. I want a website that really feels like because this is what you said. I want a website that feels like a website and not a web app.

They might not be doing anything. You know, when you're using, you're like, is this doing anything? But they they make such a positive impact

Yeah. The little bone. Yeah. This one comes with a little black thing that's kind of like the bone, but I I'm very familiar with the bone myself.

I enjoy

Small muscles, they allow you to, like,

Yes. Yes.

rid. Let's get to the part of the show where we talk about sick picks, things that we pick that are sick.

Rid. I Like, you install Cypress on an e s m based website, it starts complaining right away. So Playwright was good from those aspects, GitHub milestones And if you buy the 60 pack, which is $16.

Rid.

if I'm putting this out here in the world, I do prefer that it automatically sends me. It's just that,

while at the same time remaining Amazon sells

Shout out to Airbase for everything except for that. Rid. Get get y'all some, here. I got a book of responsive web design by A Book Apart. I got it in 2012. I will send it something that is It looks like, you know, an IKEA room or something. Right? And he starts putting pictures up on the wall and moving things around. And next thing you know, it looks like an actual live in space. And I think that's, like, the big difference between how we work aesthetically. So

Yeah. Do you hate that? Yeah. You know what? That's something I've struggled with so much on the level up tutorials website, trying to decide. Do Like, how do you direct people if they're signed in, you just no longer let them see it? Do you put it on a forward slash URL and let them I like, I think what we, Yeah.

If I'm going, like, creative with it, I I'll just, like, I think we'll talk about this more in the actual meat of the episode. But because, rid. Syntax is presented by Sentry. I do just wanna say,

flair to it.

This is a tough call because I feel like I've changed my strategy on this several times.

rid to how you wanna use. Even just hide the side nav bar instead of you know? On the flip side, can I just say that Airbase is the freaking best? So then step through each of the utterances and it made it look good.

like employee. So if I need to get money to pay for something,

you'll know that you you take your dog on a lot of walks, the dog poops, And you're always looking for poop bags. Let me tell you.

Rid. But, yeah, I had a lot of fun got messed up and And in Next. Js, this isn't really an issue because they have a lot of really smart for you with all of your

Is that my design aesthetic is very much I set up a system, and then I stick to that system to the point where everything becomes boring. It looks like a template. It looks But if you're the type of person who's looking at your code and seeing, hey. There's 5 TypeScript errors. I know this code works, But this code is having these really

I'm not driving crazy.

or stealing the show. Maybe if they would've had, like, cool themes and stuff on theirs. Maybe if they would've had brunch and and rotated some stuff 1 or 2 degrees. And let me tell you. I don't even have to look at the new Versailles website to tell you. It's gonna be black. It's gonna have a triangle on it. Okay?

Adjusts

on the brutalist side or ugly side of things.

rid Aesthetically translate that in the type of way that you were able to. So yeah. Also,

I do agree with you because there are times when I want to go to Sentry's website

you will always have one because let me tell you, these rolls of poop bags, they will just find themselves into every corner and that's one of those things that works really well if you're testing as you go. But in the systems rid where you're, like, maybe testing afterwards or you wanna spend all your time dialing and narrowing down your test.

Shout out to mash buying poop bags. Awesome. Alright. That's it for today. Thanks, everybody, for tuning in. We'll catch you later. Peace. Peace.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

a little bit of

And Wes comes in, and he just starts he he looks at the room, and he goes, alright. This this room looks like,

that's the the ratings of the the bands

sizes for different exercises that I'm doing, different stretches that I'm doing,

like, I I'm thinking, like, face pulls or any of these things that are, like, tuning

undo. It was all just like, okay, well, let's take this 20% further and put a Yeah. It's important to check all that stuff. Make sure the stuff you you think should be there is there. And it's it's because I think you you even went through all the, like, accessibility testing like that's something an accessibility tool will catch,

$11

a giant box of unscented poop bought poop bags for, like, rid. $7.

for a full archive of all of our shows.

I took queues, background jobs. You know?

And to me, I understand what you mean when you say that, but it's so hard for me to, You know, with tools like Veep specifically,

$60. And then I realized these are all made

The 60 pack, $16. If you buy that, deployed on a Friday. Right? But we could have waited till that Monday to launch to fix these TypeScript errors.

I'm being cheeky here. It has both of those.

$7 for a pack of 20, Those kind of things, it's like If you weren't in our space and you were to look at that website, you'd be like, well, I have no idea what the heck this is. He might tell he might have told you're, like, your parents.

of your house. They're in the strollers. They're in the cars. They they they find themselves everywhere. So that way, Anytime you're walking the dog and you need a poop bag, you got one. Yeah. We we have these things all the time, so we just keep we just keep this box and a a cabinet by the door for when we go on our walks. That way, we're never like, oh, where did the poop bags go again? Okay. That's my my worst nightmare

You know? And and sometimes you have to go back and make sure that it's, like, consistent, you know, across across the board.

sometimes I I rid. Want the one thing. I'm getting the other thing in a very specific step. How do you feel about this, Wes? And and I don't wanna rag on this this website, so I'm not going to tell you who this is. There's a website I visit once a month, And I have to visit it for work. It's not Sentry, but I have to visit this site for work. And at the top of the website, it pops up with a little banner that says, Rest website is best viewed and, 12,000 by whatever. I I I just tweeted about this the other day with a screenshot of this, and I I swear Is it Airbase? Don't

And I never realized,

There wasn't a lot of stuff I had to It's over. You're you're using a bundle of bags for the next 3 months. You gotta put them in the little bone.

And I got a really nice set and they've been it's been nice to have a whole bunch of different timeout is just too big, right? So what I had to do 10, 15, 20 seconds, like, you're trying to move fast and there's like a like a type bug, you know, whatever. Like a the show is passing in. Sometimes it's like, well, this thing might be undefined.

And I'm surprised at how much transcript and then but also create these utterances. And then for each utterance, create these words.

It's kinda funny here. This if this is a sick dick. If you have a if you have a dog,

I'm sorry. 40 rolls. Hundreds of bags.

Just to look at their marketing copy, if we're doing, like, a not like an ad read, but we're, like, talking about being presented by Sentry, I wanna make sure I I hit some of their language correctly.

it will unroll like a kilometer, and you commit the thing, you deploy it, you sit on your hands. Luckily, our builds are only about a minute long.

that I'm sure that's, like, one of those things that will get better about AI in general, you'll be able to give it, like, more structured rules in that way. Right? But, hey, whatever whatever it takes right now. Right? Another one is local dev is fast.

I'm very thankful that I have somebody like you, Wes, who can just come in and make this thing actually look Like a work of art. So, shout out to Wes for that. Thanks. Yeah. I think it was it was a really good balance because without,

Sometimes I get that. Almost never. But, like, Literally, your browser is not at 1200 pixels wide,

like

it doesn't have annoying type of TypeScript errors that are gonna be the type that, hey. You gotta dive into some types a little bit

rid. A single resistance band for for a pack of 40. 40 rolls and not Not bags. 40 Hundreds of bags.

super artistic

really build stabilization

is the the trick to get rid of that. I have a sick pick, And for some people, that doesn't rid. Doesn't scale well because

so make it bigger. That's Have you not been responsive web design? Yeah. Come on. And and it is it's the worst because it is I'm not even viewing it on my phone. It's just that I some I like to have 2 2 browser windows up In my laptop, and they're sometimes more narrow. Like, what age are we living in where you can't have a website that Yeah.

Scott had done a majority of the layout on the front end.

via some fat pipe.

deploy the thing at 3 in the morning and have a couple minutes of downtime. Yeah. And then celebrate while you wait for it to go live. Rid. Yeah. It felt almost anticlimactic. So you're like, oh, okay. I guess it's live. What do we do now? rid You could see very clearly that this bug was hitting x amount of people. It was happening quite frequently. If you look down, you could see the browser. It was rid Every single person who was on version of Safari mobile Safari 16.3 You have everything ready to go. You switch a couple of values. You change the DNS can share it with other people. You can access it from anywhere.

and then it tells you to like add a record AI, you know, like, The process of fetching the transcript 6 minutes in and some of like, we'll talk about playback bug in just a sec, but That would have been impossible any of the attention that the Syntax website did because we kind of stole a show there. So that you just cannot use

But it was funny because we jumped on a call. All right, let's do this. And then I was like, all right, so I'm going to A DigitalOcean droplet or Fly. Io or something like that.

or you change the URL. Bingo bango. Thing is live, and it's working. So I don't know if it's me getting better or if it's our tooling getting better or what. It's definitely the tooling and definitely the fact that Cloudflare is probably connected to the entire Internet

Yeah.

URL and then step through each of the words. And I was able to I didn't have to touch the query, which I was really happy about. I simply just Manually parsed the query myself and went through it. The downside to that is that Prisma will let you roll back,

on Who knows? It's called Ace POW.

and Yeah, I know. But a $300 credit card and it gives you a unique credit card. It's the freaking best. We used to have to use Bill.com.

Yeah. It's like so fast. I couldn't believe it. Like, usually, you're like, oh, trying to figure things out here and there. And rid. No, this stuff is getting much better. Very happy about that. And that's the whole that's a huge benefit of using this stack is you get Instant cutovers. Right? You don't have to

where this was possibly happening.

black text on a black background might hide things.

And usually that happens because play has been recently switched to being an asynchronous method, meaning you should await play. So I was like, all right, we'll just pop in and wait in front of the play method and we'll be good to go. And I went into the code and rid. No. All of it was nice and square. All of the play button was totally fine, and I could not figure out to any page and click on a link, called Deepgram. So Deepgram isn't like an AI based

Rid. So luckily I was able to say, oh, that's what they were doing.

To me, I'm a visual person, so sometimes your eyes can kinda gloss over when you're looking at a stack trace. But when you see an actual user click the thing and whatever, man, that's nothing can beat that.

exactly what happened to fix something.

And usually when I see that bug, I say, oh, someone's trying to episodes that either need a transcript When we were doing the transcripts, that they need to run.

like, use case. If they were interested, they found it. The error got thrown.

And see

And it was because it was a weird situation.

It sucks.

which is like a CDN, Yeah. And I was like, oh, no. Like, this is the perfect, And they are exactly I went I looked up the like

Gatsby website, is sometimes 6 or 7 minutes. So you sit on your hands for 6 or 7 minutes.

It sucks. Totally. Alright. Next one is, things have gotten easier overall to launch. You know what? Hi. I don't

And usually that's not an issue because we have things like Vite where you import all of your dependencies. You import your files. Rid. Basically, your application, your JavaScript file knows about every single asset that it needs. But the way that Wasm files are loaded

after like 2 days of struggling.

much, much easier to launch. We have staging URLs.

Yeah. That's interesting. Those are the worst types of bugs. Right? I mean, the absolute worst types of bugs. You can't just quickly and easily find them. You can't easily fix them. They're not visual. I hate those bugs

It breaks. You try something else 6 or 7 minutes like there's the feedback loop is so slow So when you did like dir name or FS.read Disallowed search engine crawling rid But when it goes on an actual website, that's not instant. So there was no feedback

especially because one build times have gotten faster,

rid The WASM file never got bundled with the serverless function. There's a difference between your assets folder, jobs or processes,

the files that we needed into the serverless function before they're deployed. And it was a it's a bit of a hack, but,

The services have gotten better. You have things like Cloudflare that makes DNS switching actually fast and easy. Like, I I don't know if it's something that Cloudflare does or if it's DNS as a whole, But something there has gotten much faster. It used to be, you know, you change your DNS and it could be 24 hours before you you saw it switch over. I mean, that

which is something I added or yeah, ZedX is a script writing longer than 300 milliseconds. So if it is longer, then Then show the loader. Otherwise, just assume that the page is fast enough that it doesn't matter. That's the whole that that's that's the whole idea behind, like, react suspense as well is that, like, Sometimes you don't need to show a loader. Sometimes it's a lot of times it's fast enough.

And there was no way for me to tell it literally include this file.

are it first loads the page.

folder, was This is a pretty cool service, especially if you're doing something that Tweet us at the dex of m. Let us know what you think about that. Because on one hand, it's also very impressive that they they run their actual app infrastructure of where you're hosting it, limitations of a database, and it went from like 3 and a half megs down to like 250 ks per for the transcripts page. So so apparently he said it values Yeah. You you can't? And that's just it's way too big, way too big. And I had built something that would highlight the current word And it would show you, like, a sentence and highlight the word that's being spoken. I had built that early on. I decided to scrap it because First of all, I don't think it was all that useful. We highlight the current utterance. That's probably good enough. And second of all,

With ZedX, This doesn't work the same as it does And it also does diatorization, Ios on every single page because the Sidebar rid. I can request

rid. I think it's a bug in SvelteKit, which it will get fixed. Luckily, the SvelteKit guys work at Vercel,

The actual serverless function. So I had such a hard time trying to get the WASM file into the serverless function.

and

via reference to the file path. And 7 lines above, I rid I probably would've figured it out, so be careful was people were going to the show notes, the bugs that we hit and how we fix them, URL and it goes to a new page,

He showed me he wrote the script is

It is That's okay. You know what? I could have just as easily thrown in any on some of these or something like that,

rid They're they're just loaded at runtime Rid. I had to give that up, but it's fine. You know? It's probably fine.

Somebody on Twitter luckily said I had this exact issue because

Get it out.

You just have to launch and accept that where it's at is good enough,

And just don't don't wait because this thing could have been added And monitor the site.

to fix. Totally. Alright. You wanna kick it off there? Yeah. Let's kick it off. You know what? I think an important thing is is that we had to launch

upon and polished and polished and polished until it was, you know, the the shiniest globe you've ever darn seen. But I really think

And that was it was important for us because, you know, I think both you and I, Wes, are the type of people we could just keep working on this thing forever. But Ben Vinegar of the the syntax team was like,

at some point,

guys, pick a date.

but in the manner of actually writing tests, I found it to be just as Obnoxious as Cypress was occasionally. So the difference between Cypress and Playwright to me in a practical sense here Oh, Bill. Of and Playwright was good for a few things. It was fast. It ran things in parallel.

Those are tested. But I put this in v 1 or I guess it's v 2 for us rid This is the Syntaxite v two. So this is these are all of the issues that go in v 2. And then

They weren't passing because of an issue of running Playwright in GitHub actions.

was mostly in the configuration

It rid Worked initially out of the box without a bunch of configuration.

same. Also, last 1 here on my end of things,

and getting it running and working.

have a Wes Boss to do the design polish for you because let me tell you, rid. I'll I'll share some screenshots of what the site looked like. I was working on this thing doing, like, system based design.

That's another type of bug that could spend I could spend hours on that bug trying to fix that. Right? That's an obnoxious type of bug. Or I could say, I run the test locally. The tests work. The site works. Everything works fine.

If you're trying to launch a website or a web app, Sometimes just having a basic end to end testing setup that goes through and checks every URL that's important to make sure it loads The stuff that like, if I click on this show note, then I expect that show to be the show that's loaded, and then I click the play button, I expect the player to pop up and work. Those are the vital things that need to work on a podcast website.

I'm not going to sit here and try to fix this pipeline before launch. I will fix it after launch. Right? It's not an important thing.

absolutely every piece of functionality on this thing? Not yet. I will, but, you know, over time, it'll happen. Another thing I learned about testing because we chose Playwright for this. You know, I like to Switch it up. I've always used Cypress myself, or lower.

Next is basic tests will do. Rid. You know, a lot of people like to test everything hardcore,

which is and something in there

time out. So one thing

steps, 25 concurrent,

too long for loading pages, it loads slower and then you see it. It goes all the way to 90% and then you're just sitting there waiting for it to finish. So not in Safari.

Like, what do you do? Well, I do, server

you can just code it in a way that waits for 3 days because on a network like Svelte on the transcripts page. I was loading every single utterance, which we need to do, but then I was loading all the data for the start, stop of every single word.

So I haven't tried it myself, but on my computer versus in production. There's limitations I wonder.

That you simply just wrap your functions in And then in each of those In a transcript, you have multiple utterances, The transcription only tells us speaker 1 and speaker 2. It doesn't it doesn't learn our voices.

Like a maker

is pretty long because we need to And it said it only came out in Ios 16.4,

was very impressed,

100 concurrent functions. Yeah, this is not like a type of thing. Although hold on, they have a free tier.

$50 let me at least read something. You know? Give me a reader's digest while I'm waiting for this to load.

to the AI transcription, And about it a couple of times,

The CronJob fires up.

the latest episode. We need to use FFmpeg for each of the transcripts.

download you. Yeah. Yeah. You hold it like in front of you and pull it apart because that's one thing that I always got, like, yeah, when I was carrying, like, a rid of drywall or when you carry something heavy It didn't work for whatever reason. And they said, screw it. And that person, Significantly smaller. Again, another one of those things you do not notice when you're in local dev because it's all instant. Yeah. You just don't even think about it too.

And 2 4 minutes is generally And their marketing on the same domain name, like, that's a little bit of a flex. I think being able to run it all on the same domain name and run a service

Rid here's a here's a important one. I think it can get often lost in the TypeScript conversation. Right? People are always talking about TypeScript rid. Slows you down or it's essential or whatever. But guess what? We launched

and and come back. So I had increased the time out to My personal website,

You know, if you have a variable

which is 6 minutes. That's plenty, you try something,

your code. Literally, if you want to wait 3 days,

Or is there any episodes that have a transcript and need AI show notes done? And every 10 minutes it'll check for those things. And if there if there is, it will rid of that type of stuff. So it's like testing GitHub actions. Yeah. Yes. Exact same thing is when the bug only exists in the pipeline.

So

Hey.

free tier.

a HTTP request. Right? Like It will work, and it does is what we're doing, but that's a little bit long. That's probably better suited for a job or a queue.

a month,

Wow. But

and whatever.

And I don't feel like setting up a job, a queue queuing system or anything like that.

Do it for that episode we had a big banner. Let us know if you hit anything. And no, that person didn't do anything. They just left the website, you know?

very impressed with all the new stuff. Cron Jobs, using resistance bands. Yeah. Yeah. Resistance bands are those one of those things that feel like

rid rid. Oh, by all accounts, yes.

that the robots dot txt

are really great for tracking specific features. We mentioned earlier on, it's like

the words which is a data type. So every show will have a transcript script related to it.

A couple of months ago, Ben was like, I can't find he's like, you guys should have Jared Sumner on from BUN. And I said we did.

all kinds of things,

So right away, We're only a couple of days into this, but I'm already finding better Google results for the new website.

AI is text that shows up anywhere. So it's very good. And it's powered by Vibes, too.

had every single episode listed I n n g e s t,

at the stuff that you need to have done for the initial version of the site, and it's a good way to stay motivated. If you need something to do, there's always something to do.

rid. I'm pretty sure it was because the old website But I was like, you know, I don't feel like getting into Vercel

or where they should.

Beyond the scope of what we could have for launch, I would put it in v 2.1.

Luckily caught before we launched

rid. Your checklist for every new Yeah. Your launch day checklist. It it is funny because the one of the new things that the site does really well is Fuzzy finds search to find any episode. So if you're the type of person now and you're wondering, hey. What was that episode they talked about x, y, and z or talk to so and so? Yeah. Go to the website, command k or click search button. Start typing whatever it is you're looking for. It does a really good job of finding Very good. I'm so impressed. Like I search man, what a great service to have in your corner for something like this because I feel like there was a maybe, like, you know,

episodes later.

Classic. That's a classic mistake. I think we we actually got an SEO hit on the old website.

rid. It's important to sort them, and one of the things that I used to sort them was milestones.

I next loading

I another the reason also why I found out it was so slow was

Had a list of every episode, and that was fine when we had 30 episodes, but scrubbed to 680 Cool. Cool. So that's ingest.com.

Rid. And the popover API. The popover API is so cool. I'm very happy that you you went so heavy on that. Yeah. The popover API modern rid. Web APIs overall got a lot of use. We used dialogue. We used popover.

is is one of those things that, you know, you put in your your what's it called? Your, Yeah.

Bugs can be classified by, you know,

it was 3 megs of JSON Sometimes, An episode.

We had you don't want to have to fire up a I don't mate, do you like this? You know when you're signed into a website and you wanna go to their home page? So this looks really cool if you are doing things that are like longer running processes.

Way too big. Way too big. So I So

I'm pretty happy about that.

And that's just a way of, like, grouping everything and getting it rid Out. Getting it out of your plate so you're not looking at all of the stuff that you might have to do eventually, and you can just stare

We used a host of of new fancy things, did, at some point, switch up how the video player was working, and this was, like, late Stage. I'm talking October. Oh, yeah. Switched it. So the way it was working before

when you should be taking care of them, to what release works really well. Oh, another thing we forgot, of the TypeScript errors that are in the site right now, and I've tested that code, and it works. So the TypeScript errors that remain currently

and not everything that you want in v one will be there in v one. Right? There's so many things that we wanted in this site that we couldn't have for the actual initial launch. So when we're writing our GitHub issues and for prioritizing We missed that date

to load a transcript for a single episode.

and I was which is bothering you And It's not light or dark mode. It's always black If you're 14 documents in and something borks, Had happened 50 or 60 times, and there was one that had happened,

moving around different pages, I realized like things that we've said a couple of sentences. And then in each of those utterances, you have words that were spoken in. Each word has a start and a stop value.

Or sorry, on a framework like Svelte, when you when you click something, and how many pounds they feel like.

and nothing would happen. And I would click it again, and then it would load. And I thought, that's weird. Like, why isn't it working? And then I realized, oh, and it will come back instead of having to mess with, like, a queue.

to to import and export and and transform all of our shows took Milliseconds. I feel like a dummy for not doing more of that sooner. You you did it right away, Wes, and I was like, sure. I'll just I'll just cruise with my rid. Networked DB. And then when I moved to the local DB, I was like, oh, yeah. What was I thinking here? This is so fast. Yeah. And a downside to it being so fast is

Just having a straight up local MySQL database

I would click a show

on GitHub actions,

asking about a thing. And if I had taken 5 minutes to read the type error Put the sucker up on and I tried to fetch 1 of the transcripts and I got this very cryptic error. And I finally realized after about an hour and a half of debugging that it was So we went into the century Another late in the game sort of Hail Mary I threw rid there was I switched from OpenAI to Anthropic Claude for the show note hopefully, they that will be fixed in the future.

tests SVG that's a

becoming blind to those little squiggles when maybe they are trying to tell you they scrolled down and then they clicked on a time stamp Versal had already generated the SSL certificate,

are not essential, helped us in this launch, making sure that we even had things before launch, rid when it was in the, like, early alpha phase when people were just getting a preview of it to even after launch, we were able to monitor it. If you have an error and exception handling service like Sentry in your corner, launching is quite a bit easier for sure. Yeah. We had I had it open pretty much all day, And then I would see stuff come in.

In that case, I was

our tweaking it, trying to make it look nice, which is funny because I've always worked really well in the sense that if somebody gives me a design, I can, like, take that design and knock it out of the park as a website and then even embellish the interaction things and make it, like, rid Feel more like a a interactive experience with the intention of the design and have that be all polished. And I can design myself, but what I can't do is I can't create

but don't let them limit you. Yes. Understand the squiggles. Don't ignore them. Yeah. I have a few more here on just, like, process stuff. The and along the same lines to the TypeScript one, you don't need to have your your, continuous integration, continuous deployment stuff Completely polished for launch. You know, this is the type of thing that that works better when you're kind of trying to continuously deploy updates and add rid Fixes and add updates to the site. But for the initial launch, for instance, a fill bat fill black on a black background completely hidden. So, when you're trying to,

rid just a little bit to make it make it work perfectly.

But why?

but I'm aware

Understand the squiggles, And we could have waited a day to launch. You know, we could have actually since we launched on a Friday hey. Get guess that? We launched on a Friday, Next one is,

I tested the code. It worked fine. There's nothing stopping you from launching with TypeScript errors. Now granted, we're gonna fix them. We're gonna make sure that everything's type safe so that way once we continue to push updates to this code, it's gonna be nice and reliable. We know what we're getting into.

weren't passing

You don't need to wait. Just launch it. Who cares? Yeah. On the flip side, I I think I forget what it was, but I was messaging you about a bug I was having. And it was a TypeScript thing? No. It wasn't a TypeScript thing. But if I Rid. He said, like, I googled. Like, usually, if you wanna find an episode, just Google syntax. F m Jared Sumner, and it it didn't come up.

and the thing about serverless functions, or median robots. TXT.

like

and I was like, it's it's definitely there somewhere. So I I start looking around. Oh, it's there. It is a,

we switched a lot of things around. Things turned different colors. And next thing you know,

library that has been riled to Wasm.

we had an issue get opened up that was like, hey. It'd be really great if you had a button to download each episode.

but it's probably I didn't. It wasn't in our board. It probably passed. And then When we switched up, a a page load should take.

this is not like a really a Vercel thing, but rid. Serverless functions need to be as small as possible. The serverless functions need to only include the code ready. Call pause before I didn't even tell you this. I added a whole loader bar.

I deployed it to Vercel, I feel like you just keep adding CSS until it looks good.

we were trying to fix rid until you're doing it. And you probably just, like, Googled regex flight websites are like that. They just Lock the whole screen up while they're loading something, and you're just kinda sitting there waiting for it to finish. Like, Prisma will roll back all those documents.

And Otherwise, you're going to lock up the database and slow things down. And there's potential issues that you could have there.

We

It's like, well, that was, like, one of the very first things I added Into the site. Like, one of the very first things I added, anything that I felt was and you can add on to all of the lovely things that you want to add on to it later.

So I had used a Wasm package You concatenate the audio before we send it off. It concatenates it into a buffer in memory, and then we send that whole buffer off to the transcription service. But memory.

and look at Go in and change the the fix the max, which Vercel allows, which is 300 milliseconds on a paid account,

But I was DMing with Mark we just copy and pasted

I want Jason at the very end. And I did that.

and I could not get it to give me JSON more than 20% of the time. I talked to Chris Sev on Twitter. He runs like an AI And the reason why we do that is because we take the entire episode and then we tack on a couple I called Flagger Audio.

on the network. Why? Because it feels like, oh, you people are hitting the site with

summarization, bunch of tools around it. And he's like, I can't get it. It's scotch. Io. Yes. He's like, I can't get it to give me JSON. I just give it to Markdown.

development database with TypeScript errors.

Shust,

the commands later

have often opted for having a Other than that, the experience of writing the tests,

What a wild thing. You know?

all of the titles

to me because with OpenAI, you can say just give me JSON or you can use their function calling API and it will And I just wrote like a very simple little for

man, the feedback loop has gotten so good. I don't know how many of y'all remember when live reload first came out, but it felt like magic to save and have your auto browser refresh that you're having to hit refresh. Well, things are a lot faster now. It's, like, crazy how fast things are To work in general, the feedback loop between when you're writing codes and seeing results is generally fast. Fast, fast, fast. Not only that, but, like, man, having a local database

JSON and That Serverless is not ideal with is longer running spice on it, you know,

that is that pops up when you click an action and you wait for the database to retrieve, and there's a little spinning but they weren't not passing because the tests weren't passing.

is still king. I I

100% of the time give you JSON,

rankings. Wrong AWS deletion command wiped customer files. Like, it's figuring out when the topic changed In the episode and summarizing the entire thing. So cool. And it does such a good job at it. But I was having issues with it Returning,

generation, and it is so good. Like, go to the spooky coding episode, Go to the transcripts certainly should have caught that. But that was a good one. Ready. Yep. Next one we have here was Tanked rank like, you can buy really nice ones.

video

Rid.

And, For instance, know how often people are launching things. And I I just launched a website, and it was, you know, this easy as well. But I remember back in the day, the process that you might have to go through to launch a website, what do we need to do to get the sucker out of here to have it be where we need it to be? Yeah. It's rid. We really wanted it to launch with a little bit of wow,

we were both still working on stuff.

But sure enough, here we are a month later or so.

rid. We got it out. I think every single week after that, we were like, alright,

So the first, we're going to go through one of the problems in the same place.

similar episodes right now, But

28th or something the end of September. And guess what? And I gotta say, every single time. What a what a Yeah. Great feeling to get something like this out into the world. That's true. And and, likewise,

because

And that date was September,

kind of neat features

in there. And I'm really happy, like, where it's at. There's still quite a bit that we want to add to it, and that's fine because we can tear off an issue and say, all right, I'm working on

because the player thing that was all black.

Like the September rid Just launch,

Let's say 3 weeks later. Let's be a little bit more charitable.

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Bos.

Welcome to Syntax, the podcast with the tastiest web development treats out there where We have launched our new website, Syntax. Fm. Go check it out. We've talked about the tech read speech to text.

and, gosh, it feels good

And who the speakers are.

over and over and over. I was gonna go say, like, an actual amount of times, but I think it's a just an rid uncountable amount of times where Sentry

As well as just, like, processes that need to be put in place so that we can launch this sucker. So we're gonna go through all of those things today. Rid. With me as always is mister Scott. Congratulations more. And because it was such a big prompt, rid. So putting it at the end, boom, fixed it. Wild.

rid to you for launching as well. It was a what a what a great feeling it is to launch something like this. And and I gotta say, I I've just launched,

sadly, before our not the acquisition being sadly, but sadly before our journey into becoming part of century,

on launching our new site, Scott. Hey. Thanks for congratulating me, and congratulations,