Lessons Learned & Bugs Fixed from Launching Syntax.fm

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 about it a couple of times, So we're not going to go through all of the tech that we use, but we thought we'd do an episode on the bugs that we hit and how we fix them, 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.

This doesn't work the same as it does on my computer versus in production. There's limitations of where you're hosting it, limitations of a database, 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

on launching our new site, Scott. Hey. Thanks for congratulating me, and congratulations, 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, 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 and, gosh, it feels good 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, 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, 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, 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 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.

And some of the stuff I had fixed, like 6 minutes in and some of like, we'll talk about playback bug in just a sec, but That would have been impossible

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 And monitor the site.

And just don't don't wait because this thing could have been added 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 at some point, You just have to launch and accept that where it's at is good enough, and you can add on to all of the lovely things that you want to add on to it later.

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, guys, pick a date.

Get it out.

And that date was September, Like the September 28th or something the end of September. And guess what? We missed that date because we were both still working on stuff.

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

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

And, rid. We got it out. I think every single week after that, we were like, alright, 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,

because 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 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 similar episodes right now, But where at launch, I'm very happy with both the feature set as well as, like, the look and feel of the website.

Rid.

So the first, we're going to go through one of the problems I specifically had, which was When we were doing the transcripts, the way that it works is we send the MP3 off to a service That will transcribe it for us. It's called Deepgram. So Deepgram isn't like an AI based read speech to text.

And it also does diatorization, which will detect Scott and I and the different speakers that are on the podcast.

And when that data comes back, it's pretty big because if you take a look at our database, we have a transcript, which is a data type. So every show will have a transcript script related to it.

And then in each of those In a transcript, you have multiple utterances, which is 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.

And it also has other information about how confident the AI is that that is the correct word 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 A little like player that shows what word is currently being spoken at the moment. And that was huge because you have 1 transcript that might have 102 100 utterances.

And then every single utterance has, 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 these rid. Orms.

The thing about GraphQL thing about Prisma, we don't use GraphQL, but any time you put something on top of your data layer And you could just use it.

Sometimes you forget that there's an actual database under the hood. And I was rid I I figured out that, oh, you probably can't create many thousands of records in a single request, Especially so we are using MySQL, but we're using 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 and be able to handle it. And they have hard limits on how big and how long your it's called a transaction, right? How much data you can send them at once, because Otherwise, you're going to lock up the database and slow things down. And there's potential issues that you could have there.

So I 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 rid. Actual database timeout is just too big, right? So what I had to do is I took the Nested create basically was like create a transcript and then but also create these utterances. And then for each utterance, create these words.

And I just wrote like a very simple little for nested for loop that stepped through the transcript, then step through each of the utterances 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, like a nested create in Prisma. If, like, If you're 14 documents in and something borks, Prisma will roll back all those documents.

Rid. I had to give that up, but it's fine. You know? It's probably fine.

It's probably fine. Yeah.

Yeah.

Man, it it is 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, where 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 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.

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

But, gosh, I'm not just talking about, like, logging your errors into a a log.

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 such a power tool in this situation.

For instance, We had a really obnoxious bug where some folks were getting a black screen on iOS.

Now 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? So When the operating system has been out for a month, people are hitting the site with a last month's operating system.

I'm, like, shocked. Shocked Pikachu face. What? What are you talking about? But if you look in in the century, you know, 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 or lower.

So it wasn't just teen. It was 16.3

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.

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 Had happened 50 or 60 times, and there was one that had happened, I don't know, probably about 50 or 60 times as well. And it was like a weird, like, regex issue.

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.

Yeah.

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, I wonder.

And then I Googled the actual error message and can I use popped up and it said Ios rejects look behind, which is a special part of regex where it can match items that it's previously found, something like that? And it said it only came out in Ios 16.4, which is like I'm not sure how usually That type of stuff can be either transpiled or polyfilled. But that was literally a language feature that you just cannot use rid until you're doing it. And you probably just, like, Googled regex to match path.

I gotta say, yeah. I I just 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.

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

But, yeah, luckily, we did it. I deployed it, 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.

So we're pretty happy about that. We also had another one, which was people were going to the show notes, looking at the show note timestamps, 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.

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 An episode.

Yeah. I'm raising my hand because I did think of that, and we had tested it, and it was working. But We 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 is that the, video the audio player would mount 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, 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

a bug, which was you cannot call pause before it is playing.

And usually when I see that bug, I say, oh, someone's trying to ready. Call pause before play has been run.

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 where this was possibly happening.

And it was because it was a weird situation.

So we went into the century session replay. And you can literally watch the browser as the user was interacting with it, and it shows you a timeline of the events.

So they went to the home page, they navigated to the Brad Frost episode and they scrolled down and then they clicked on a time stamp 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.

Yeah. And I was like, oh, no. Like, this is the perfect, like, use case. If they were interested, they found it. The error got thrown.

It didn't work for whatever reason. And they said, screw it. And that person, 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? Rid. So luckily I was able to say, oh, that's what they were doing.

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

And see exactly what happened to fix something.

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.

Next one is, black text on a black background might hide things.

We we switched a lot of things around. Things turned different colors. And next thing you know, 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.

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, and I was like, it's it's definitely there somewhere. So I I start looking around. Oh, it's there. It is a, SVG that's a a fill bat fill black on a black background completely hidden. So,

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, but it's probably I didn't. It wasn't in our board. It probably passed. And then When we switched up, we were trying to fix the player thing that was all black.

It's not light or dark mode. It's always black and something in there got messed up and certainly should have caught that. But that was a good one. Ready. Yep. Next one we have here was the WASM file. So I used a FFmpeg library that has been riled to Wasm.

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.

We tack on a sentence that Scott and I say that are unique.

And by doing that, we're able to like who the speakers are.

That's what you go to the transcript. It will say Wes said this and Scott said this because The transcription only tells us speaker 1 and speaker 2. It doesn't it doesn't learn our voices.

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 I deployed it to Vercel, and the thing about serverless functions, 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 that they need to run.

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 are rid They're they're just loaded at runtime via reference to the file path. And the file system on Vercel is a little bit funky, And there was no way for me to tell it literally include this file.

So when you did like dir name or FS.read folder, rid The WASM file never got bundled with the serverless function. There's a difference between your assets folder, which is like a CDN, and The actual serverless function. So I had such a hard time trying to get the WASM file into the serverless function.

And in Next. Js, this isn't really an issue because they have a lot of really smart Tooling that tries to statically analyze paths and find those files.

And rid. I think it's a bug in SvelteKit, which it will get fixed. Luckily, the SvelteKit guys work at Vercel, so they're aware of it now. But the fix Somebody on Twitter luckily said I had this exact issue after like 2 days of struggling.

He showed me he wrote the script With ZedX, which is something I added or yeah, ZedX is a script writing tool from Google. And basically it just at the end of the build, we just copy and pasted 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, hopefully, they that will be fixed in the future.

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

because they're build time, meaning that you try something, you commit the thing, you deploy it, you sit on your hands. Luckily, our builds are only about a minute long.

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

It breaks. You try something else 6 or 7 minutes like there's the feedback loop is so slow 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.

It sucks.

It sucks. Totally. Alright. Next one is, things have gotten easier overall to launch. You know what? Hi. I don't 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, especially because one build times have gotten faster, 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 It is much, much easier to launch. We have staging URLs.

You have everything ready to go. You switch a couple of values. You change the DNS 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

via some fat pipe.

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 Go in and change the URL on Vercel and and then it tells you to like add a record to Cloudflare to show that you own this domain name, so I added that. And then by the time I like tabbed back.

Versal had already generated the SSL certificate, and 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.

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

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?

Yeah.

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 generation, and it is so good. Like, go to the spooky coding episode, Go to the transcripts and look at all of the titles for each of the transcripts.

Like those are all AI generated. Cleaning duplicate JSON data caused education issues.

Disallowed search engine crawling rid Tanked rank 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, JSON to me because with OpenAI, you can say just give me JSON or you can use their function calling API and it will 100% of the time give you JSON, 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 video 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.

But I was DMing with Mark Shust, 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 I want Jason at the very end. And I did that.

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 so apparently he said it values the commands later more. And because it was such a big prompt, rid. So putting it at the end, boom, fixed it. Wild.

What a wild thing. You know? 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.

You know, with tools like Veep specifically, 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 is still king. I I have often opted for having a development database that is on the network. Why? Because it feels like, oh, you can share it with other people. You can access it from anywhere.

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, Just having a straight up local MySQL database 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

once we actually got this thing online and I was moving around different pages, I realized I would click a show 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, rid. There's a network in between me and the website. You know? It's the same thing with the the database is that when doing dev locally, Sometimes you forget a lot about the UX of loading pages, because on a network like Svelte Or sorry, on a framework like Svelte, when you when you click something, it first loads the page.

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.

But when it goes on an actual website, that's not instant. So there was no feedback Or something is happening when you click on a page.

So wait. There was. Was there?

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

I wasn't getting any feedback on it. What is the Loading? Because I didn't even tell you this. I added a whole loader bar.

If you go to any page and click on a link, There is a little loader bar that goes at the top of the screen.

When somebody starts navigation, it starts moving.

And then when they finish navigation, it's

it finishes moving. Right? Like, you added a loader bar. Interesting.

That's funny. I I might have not pushed merged my loader into because I'm looking at it right now.

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

I am maintaining rid. I have, like, a default for how long a a page load should take.

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.

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 Every subsequent page load is the mean or median number from those page loads so that the sometimes you go to a website and it loads faster than you think it's going to be, or 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 now it's using real

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

So my approach is different. My approach is putting that That same syntax that pops up when you click an action and you wait for the database to retrieve, and there's a little spinning 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,

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.

But if it does take a certain amount of time to do it, I don't love the like Loaders that Jack the whole screen.

There's a 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, let me at least read something. You know? Give me a reader's digest while I'm waiting for this to load.

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

A puzzle. Oh, and I while I was looking into this, 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 URL and it goes to a new page, then your browser has a little spinner in it, right? And there is a proposal still an experimental stage For a navigation API, which will allow you to turn that on and off when you are changing. So like ideally, you shouldn't have to make your own UI to show somebody that something's loading, Especially a lot of these websites are now single page apps, so hopefully that becomes a thing.

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

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

I I another the reason also why I found out it was so slow was I was loading 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.

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, it was 3 megs of JSON to load a transcript for a single episode.

Way too big. Way too big. So I I next loading the words and it went from like 3 and a half megs down to like 250 ks per for the transcripts page. So 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.

Next one would be, GitHub milestones are really great for tracking specific features. We mentioned earlier on, it's like rid Just launch, 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 all kinds of things, rid. It's important to sort them, and one of the things that I used to sort them was milestones.

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 anything that I felt was Beyond the scope of what we could have for launch, I would put it in v 2.1.

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 rid 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.

Bugs can be classified by, you know, when you should be taking care of them, to what release works really well. Oh, another thing we forgot,

Luckily caught before we launched was robots. TXT.

We had Disallow forward slash.

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

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.

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 there was a couple of episodes I was searching for, and they didn't come up reliably or where they should.

And rid. I'm pretty sure it was because the old website had every single episode listed on every single page because the Sidebar Had a list of every episode, and that was fine when we had 30 episodes, but scrubbed to 680 episodes later.

Apparently, that's too many links, And Google will see that as like you're trying to make a link farm or something like that.

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

I'm pretty happy about that.

Yeah. We took off the the robots txt

that the robots dot txt is is one of those things that, you know, you put in your your what's it called? Your, 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

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

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.

We used a host of of new fancy things, And I gotta say, very impressed with all the new stuff. Cron Jobs,

time out. So one thing That Serverless is not ideal with is longer running jobs or processes, and The process of fetching the transcript is pretty long because we need to download the latest episode. We need to use FFmpeg to concatenate them together. We need to upload that buffer to the AI transcription, And then we need to wait for that to come back. Mhmm. And that usually takes about anywhere between 2 4 minutes.

And 2 4 minutes is generally too long for 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.

But I was like, you know, I don't feel like getting into running a separate server for these long running tasks.

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

So for the Cron jobs, what happens is every 10 minutes The CronJob fires up.

Hits our database, says, is there any episodes that either need a transcript 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 Do it for that episode and and come back. So I had increased the time out to the max, which Vercel allows, which is 300 milliseconds on a paid account, which is 6 minutes. That's plenty, plenty long enough for this. A lot of these other solutions where a lot of other serverless will only let you go 10, 15, 20 seconds, 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, I n n g e s t, which is a service That you simply just wrap your functions in 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 for you with all of your memory.

You know, if you have a variable and whatever.

So this looks really cool if you are doing things that are like longer running processes.

Wow. But you don't want to have to fire up a A DigitalOcean droplet or Fly. Io or something like that.

This is a pretty cool service, especially if you're doing something that your code. Literally, if you want to wait 3 days, you can just code it in a way that waits for 3 days and it will come back instead of having to mess with, like, a queue.

So I haven't tried it myself, but was very impressed, yeah, at how this this looks. And a lot of people that I trust on On Twitter, we're doing it seems pretty expensive.

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

50,000 steps, 25 concurrent, free tier.

That seems pretty reasonable.

Cool. Cool. So that's ingest.com.

Yeah. Interesting. Yeah.

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.

Like, what do you do? Well, I do, server queues, background jobs. You know?

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 with TypeScript errors.

Hey.

That's okay. You know what? I could have just as easily thrown in any on some of these or something like that, but I'm aware 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 are not essential, 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, deployed on a Friday. Right? But we could have waited till that Monday to launch to fix these TypeScript errors.

But why? 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.

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 annoying type of TypeScript errors that are gonna be the type that, hey. You gotta dive into some types a little bit rid just a little bit to make it make it work perfectly.

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 Sometimes, 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.

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

Yeah, I know. But In that case, I was bothering you asking about a thing. And if I had taken 5 minutes to read the type error 7 lines above, I rid I probably would've figured it out, so be careful becoming blind to those little squiggles when maybe they are trying to tell you

rid. Oh, by all accounts, yes.

Understand the squiggles, 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, our tests weren't passing on GitHub actions, but they weren't not passing because the tests weren't passing.

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

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.

It's clearly an issue with the pipeline.

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.

Next is basic tests will do. Rid. You know, a lot of people like to test everything hardcore, 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.

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.

Those are tested. But am I testing 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, and Playwright was good for a few things. It was fast. It ran things in parallel.

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

Like, you install Cypress on an e s m based website, it starts complaining right away. So Playwright was good from those aspects, 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 was mostly in the configuration and getting it running and working.

Other than that, the experience of writing the tests, same. Also, last 1 here on my end of things, 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.

And the thing that I think I learned about myself 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 like it doesn't have that flair to it.

And Wes comes in, and he just starts he he looks at the room, and he goes, alright. This this room looks like, 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 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

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

And There wasn't a lot of stuff I had to undo. It was all just like, okay, well, let's take this 20% further and put a a little bit of spice on it, you know, and it made it look good.

And for some people, that doesn't rid. Doesn't scale well because Ben said it well. He's like he's like, so I feel like you just keep adding CSS until it looks good.

Rid. Yeah. That's pretty much it.

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

Rid. But, yeah, I had a lot of fun

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 something that is super artistic while at the same time remaining rid Useful. I can create artistic, and it's gonna be, on the brutalist side or ugly side of things.

If I'm going, like, creative with it, I I'll just, like, 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.

And to me, I understand what you mean when you say that, but it's so hard for me to, rid Aesthetically translate that in the type of way that you were able to. So yeah. Also,

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 any of the attention that the Syntax website did because we kind of stole a show there. So I want to apologize to Purcell

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?

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

No. Vercel design is one thing. Weird thing.

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? Yeah. You you can't?

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.

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

I do agree with you because there are times when I want to go to Sentry's website 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.

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.

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 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 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

if I'm putting this out here in the world, I do prefer that it automatically sends me. It's just that, 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

I'm not driving crazy.

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.

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

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.

Adjusts

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 I I both use Airbase as a I use it as a vendor. So, like, I will bill companies with Airbase And get paid with it. And I also use it as a like employee. So if I need to get money to pay for something, rid. I can request 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.

Oh, Bill. Of

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

Yes. Yes.

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 rid. Let's get to the part of the show where we talk about sick picks, things that we pick that are sick.

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 resistance bands. So this is something you can it's pretty straightforward. I've been to like a physical therapist Few times over the years, and they always give you this like, like, really thin one that they just cut off of a roll and they can send you home with it.

And I never realized, like, you can buy really nice ones.

So you see these companies like Rogue or whatever, selling rid. A single resistance band for $60. And then I realized these are all made in the same place.

And I went on Amazon and found some set of 6 of them.

Who knows? It's called Ace POW.

And they are exactly I went I looked up the like the ratings of the the bands and how many pounds they feel like.

And I got a really nice set and they've been it's been nice to have a whole bunch of different sizes for different exercises that I'm doing, different stretches that I'm doing, And I'm surprised at how much I enjoy

using resistance bands. Yeah. Yeah. Resistance bands are those one of those things that feel like 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 Overall, when you're trying to, like, I I'm thinking, like, face pulls or any of these things that are, like, tuning Small muscles, they allow you to, like, really build stabilization without, you know, fatiguing out your your bigger muscles or not making 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,

I don't know what this is, but basically, 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 away from your body. Every now and then I get a little, you know, and that's the Apparently, working that is the the trick to get rid of that. I have a sick pick,

that It's kinda funny here. This if this is a sick dick. If you have a if you have a dog, 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.

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

$7 for a pack of 20, $11

for a pack of 40. 40 rolls and not Not bags. 40 Hundreds of bags.

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

And if you buy the 60 pack, which is $16.

The 60 pack, $16. If you buy that, you will always have one because let me tell you, these rolls of poop bags, they will just find themselves into every corner 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

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.

Rid. I

know. The worst thing about these bags, though, is if you drop it, it will unroll like a kilometer, and 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.

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.

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.

Rid Head on over to syntax.fm for a full archive of all of our shows.

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

Rid.