We Need Your Help With The Secret Sauce

Unlike, like a paid service or anything like that, there's no paid component. It's free. We're essentially loading up all that data, loading it in via a worker, and then it's available

and Svelte.

It's really, really slick. It helps you find things very quickly, Anything else? Yeah. Basic Basically,

you know, came from the SvelteKit M. You'd go to a show page, and it would give me an oopsie daisy page, Yeah.

Website. In fact, we have, like, a fuzzy finder for every episode on the entire site.

importing all of the data, the cron jobs that does all the transcription

is we're starting to use these like little short URLs syntax. Fmmeetup

And show note summarization.

the front end to the back end. It's all SvelteKit.

Connecting, And that error was difficult to find without century. So if you, have bugs, if you're shipping software, our database

was one of them, and I threw that in Cloudflare Worker rule, but like you got to pay $5 a month once you have more than 3 rules on Cloudflare. And I was like, we could we could throw that in an Edge function

And that is for things like the API, one of

the front end framework. SvelteKit has the full stack framework, so it's handling,

That's all in serverless functions.

and edge function instead of having to pay and and use some UI to do redirects.

Yeah. And it's an interesting bit of things. I mean, you're able to get those thrown up in 2 seconds, and it just works. Yeah. For for the framework, we're using the SvelteKit

We are the the listener, will help us find all these little bugs. Although maybe it's not. I think I think Vee inlines stuff

AI tools to identify who's talking when,

The Svelte kit, the way that they handle types, but also how Prisma generates our types and stuff. It's all just very, a. Very nice to work in. Services.

These are some things that I think you know a little bit more about considering you were doing a lot of this AI work. But we're using several things For our transcripts as well as, directly when you need it. In fact, most of the code of our implementation of FlexSearch,

Claude, and Deepgram. Do you want to dive into those? Yeah.

if the data is there or not. Yeah. You know what? And and it's one of those things that when I was working a lot in Graph q l. I felt like I was defining my types in 4 different places, and now it's like, alright.

a I OpenAI, function in or a, sorry. Not a yeah. There's a a,

You really just have 1 place, and it and It cascades the entire app using Yeah.

and then it's able to include the Wasm file,

instantly Obviously, that hits that content dot JSON with a fetch n. And then

Then we just have a worker

and then

throws it into FlexSearch, basically, and then we massage a little bit. Isn't that, like, loading every single show note on the client side then? so that we don't necessarily have to pay for that, as well as It's part of the the code. Right? Like Yeah. I would hate for someone to come along and be like, hey, where's this, like, your redirect happening? Oh, you have to log into the service and text layout, you know, the fonts, the colors,

if you're out there and you wanna take a look

f. Find mini

of data? I'll tell you exactly how many megs of data it is. Content dot JSON. It is,

in our implementation for this thing,

and then,

So it's this is similar to

And that's being loaded client side? Yeah. But isn't that, like like, 8 megs of Soup to nuts TypeScript, Node. Js. On the

we're going over our bandwidth because all of the guests, all of the transcripts.

creating essentially an array of all the shows. And then I'm I'm passing that into

It is happening here, but, Trailing comma none. Did you add that? Head on over to syntax.fm We're using MediaChrome,

have access to that pretty quickly.

f The tree,

Mhmm. But maybe that's a concern. Yeah. That's okay. Whatever.

We styling. Let's talk about that next, which is scope styles.

but, like, this JSON file.

it's not that many files, and so you could really go through it pretty quickly in terms of, like, what exactly with Svelte as the, What is the secret sauce behind your product? The stack. What types of tools are you using? What types of libraries. Where does it host? What what are the things that are practical

that explicitly especially when I'm using like a library. So I'm trying to figure out how to like get that Wasm file included in the build

creating it and using a a push to push it into the structure that we want it to have, And then that's sending it as a content dot JSON.

and

It creates the links and the breadcrumbs and everything and spits it out on the UI. So that way when I Start typing. It automatically a And we're doing so using something called flex search.

finds everything from that giant list. Oh, okay. So it it just it just sticks everything in memory,

FlexSearch, and and I'm creating an index there.

Is that huge? On the client side, it's been it's doing so in a worker, though, so it's not doing it on the main like, you're not nothing's being interrupted there. Okay. But Yes. But it's doing it in a service worker. So Yeah. I like Snake case. It's easy for me to read. It helps. I know people. Yeah. S. So that's not the JavaScript way. I get it. It's just easier for me to read.

m. You know, the the relevant stuff is there's a content dot JSON route, and that's essentially running just a normal Prisma client

is great. It's a web component that you can use for video players or audio players or anything you want, and it is extremely full featured.

or in general, Mux video, the whole Mux packages there for about

And I'm I'm somebody there who's used every video player on the block. And I gotta say MediaChrome

MediaChrome for a Full archive of all of our shows.

any type of playback

is they're just they're just lovely, and you don't have to use mux to use these. These work with any sort of video stream whether you're streaming or using audio or or anything. They're they're fantastic.

Takes in some of the importing stuff. Oh, no. The importing stuff that you did is pretty fast. Right? Like, how long does it take you to import all 600 shows? Like, a couple seconds? Yeah. A couple seconds. If you're on if you're on local, it takes define Autumn, it's a it's a bit of a different, like, way to to get used to it, and sometimes it's annoying when you hover over top of a type and it's just just vomit. I would I would prefer that it was just a show type, but

on Vercel, also has a relationship to a transcript. All of that stuff, right? And then

and been pretty happy with that. I'm Fighting And then I find out What speaker number that's associated with and that's how we know if it's Scott or I

For Vercel, tech of the

are we've been like kind of devin' on it is the platform. Fastify is

milliseconds. It's so fast on local.

transcript stuff

Boss and Scott

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, node modules, barbecue tips, get workflows, breakdancing,

episode of Syntax,

Monday. Monday. Monday.

soft skill, web development, the hastiest, the craziest, the tastiest web development ed treats coming in hot. Here is Wes Barracuda

website But we're using for, you know, more more classical testing. We're using Playwright for end to end testing, and that's the only testing that we're doing. We're not using any mocking. We're not using any of that kind of stuff. Basically, just fire up the site with the developer DB. And And the things that we're not testing, I'm not testing the,

This is not exhaustive

wasn't quite

the syntax secret sauce. But before we do so, let's Talk about one key component to this syntax secret sauce, and that's how we took, track our errors and exceptions because syntax is presented by Sentry. And Sentry is a A tool that we use that actually we didn't have in this outline here, but Sentry is a key tool for us to be able to track

which is our 500 level error.

at [email protected],

Just yesterday,

schema changes, and that's what was causing all the trouble.

errors and exceptions. Just which is from Mux for the audio player on the website, and the rendering of Google Docs, like, how wild that was.

or You could hit us up on any of the socials, And FlexSearch creates essentially

You wanna track those bugs? Sentry. Io. Alright. So let's start off.

And I was getting really frustrated with this, and luckily, we have Sentry. So I popped open Sentry. And guess what? to any sort of server side, stop dealing with actions or how we send things to and from, syntax.f m, check it out. Check out the repo. There's a ton of tasty stuff in the repo.

It should have reimported all of them. The import was successful.

where the database

an alternative runtime, maybe we don't have a show type. We just have A type of whatever is returned from a specific query that we've wanted, right? Like I might want a show with just the number and the name,

So Prisma hadn't gotten the,

to the markdown files.

is the max you can extend a serverless function on Vercel to.

So some of the stuff I'm doing, which is hitting APIs, takes Let's talk about database.

But then you also have the benefit of you're not paying for it

in a production environment, it's a it's a couple seconds. That's impressive.

30, 40, 50 seconds.

that sort of longer running processes, all of our logic, database saves, queries,

over,

Kind of neat because you can run like you could basically just spin up a 6 lines of JavaScript at it and like Added a little swoopy animation Then we also Another one called Anthropic Claude, and we could we could do that right in So I was just I had to make sure that Have some AI show notes, which are I'm very happy with. It will do really good summarization

would fit within the timeouts of a serverless

long running node process

running a longer running process. And Fly is kind of

but, I'm really, really impressed with FlexSearch. It's super fast. It works very well. And, again, you're not having to pay for an additional service there to get really nice and easy search going. Yeah. I'm I'm actually curious about that because I I haven't I don't think I've actually asked you questions about that.

Those those are the 2 things, I guess.

So that that's really quite it. Do you have to build like an index of all of the shows to go into the search? Like, I'm just curious, how does FlexSearch know about

of data. Yeah. And that data is is coming directly just from a database call.

and it could be anything that we tell it to. So it it's really like The the way it works is you you're kind of like building Working where I

And anything that I want to put into that tree can be used as a parameter on the search.

N. I think they call it site kit is what they they call it, but it it's what they use to build their own sites. It came directly from their code base, And there's a lot of nuggets in there. Obviously, we adapted it to our needs,

and the index is built by FlexSearch.

a tree

And, you know, maybe there's Some Easter eggs throughout the site as well. So real world applications? I saw that Part of the database sync wasn't running, and Prisma didn't run a DB push.

take take some time to check it out. I think, secret sauce.

I'm really proud of the code base, proud of the the work that we've done here, and it's it's pretty The,

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

The things you're expecting to be there are there, And the functionality that's important

I you could consider TypeScript

as being part of your testing infrastructure. I might Because it can help save you from potentially finding bugs.

We

Every time you you visit the page, the The specific header that you're supposed to expect to be there is there. So you're making sure that all of your pages are loading as expected.

is there and works fine. And for the most part, I've been liking Playwright just fine. I really like how

you can run a lot of tests in parallel, and it's just really fast. Hosting.

When you run it without the UI, making sure we're all on the same version of What are you working with? Yeah. And I think one of the best episodes we did n. For our separate club interviews was when we were talking about, I'm not testing a lot of database actions, really. I'm I'm using Playwright to jump through the site, Click the player. Make sure then the episode starts playing when you click the player.

that's not a thing because they're all scoped to what you need. Some utility classes specifically around deploy apps to their TV. You know, there's so much secret sauce there, and I want a single show The new site. We did a we did a show on that, and we'll do another one when we actually launch it. But,

Also, we've used a class of highlighted somewhere else. You know,

we had I forgot who wrote it down. Somebody wrote secret sauce on the whiteboard and we're like, why don't have something called secret sauce. Like, that sounds great.

When we met up in Toronto last week, That's it for today. Thank you so much for tuning in. We'll catch you later. Peace. Peace.

is there's still quite a bit of camel case in there that needs to be,

I had written a bunch of the some of the I think it's 300 seconds

But I would like all the time. Yeah. Snake case.

And then that, coupled with my default to just go camel case,

Added by Scott Talinsky. That's surprising. I love trailing comma. No. I didn't add that. I I thought we did have Yeah. There must have been a default. Trailing comma. But we did we did go semi colons.

like, we need a rule, and then we need to be able to list out where all the camel case because refactoring with TypeScript is easy. You can rename a function pretty pretty quickly,

And it it it's interesting because, like, Pretty much anytime you need to place anything on the site because we did some really,

And then you can now basically place anything anywhere Anywhere you want at any given point, and you can do so with a class nice and easily, or you can do so with straight up, named grid columns in CSS. So a lot of lot of fun stuff there. The Svelte animation API

light and dark mode So quick, just have a like a JSON file of redirects Long running node processes.

layout system. So using, like, grid specifically for vertical and horizontal layouts.

podcast. Yeah. There's a lot there.

really slick stuff with, like, a grid based the data loading, pulling from a database, Mhmm.

Prisma will then translate that over to a MySQL database for us, as well as give us the typed API You can quickly scroll down to

That allows us to query all of the data, which is really cool because, like,

on the client side like it's unreal how the types just ripple all the way through the entire thing.

So the way that the types Show notes, show titles.

you have a query on the server and it's returned from the server And populates the types And there's just a couple spots in the application where we've had to So when you use it, it searches through

to Prisma we are also using Cloudflare F. Oh, yeah. Yeah. So Then you start having to look at,

It has and then it has a relationship to guests Our API route currently For 2 minutes and then spin it down and you only pay for those 2 minutes. So it's kind of nice because you you get the benefit of how Sometimes you just need a global right utilities. No, you need a good baseline before you get in.

With a Prisma adapter, so Prisma allows us

to They do a very good job at To interact with it via serverless functions, it does connection pooling for us, so we just have to

And we defined all the relationships. We defined, all right, this is the show. A show has a show number. It has a title, has a description,

Flow from the schema Fastly. I always forget to mix those 2 up.

And, you, To worry about.

into the JavaScript, and it's like

For

Node. So that way we can always make sure that if you're firing up the site. You have the right version of node, and I'm key. Welcome to Syntax. In this 686th Yeah. Or is it a service or just a worker, not a service worker? Sorry. Those 2 always confuse me. Yeah. Oh, okay. Yeah. I'll I'll we'll have to go deep into this Because it's actually, hit our our supper club question form or our or what's it called? What's the, not the supper club question. Our pinxt. Fm forward slash potluck. Yeah. The potluck submission form. Either way, just get get in touch with us, or we will get in touch a. With you, our people will talk to your people, and we'll set something up. So let's dive into We're gonna be talking about the new syntax

Okay. We'll figure it out. Yeah. We got a fit we got fit and finish to worry about. And then Oh, yeah. For sure. We're just gonna launch it,

have have made Vite an actual front and center thing

running scripts, all that stuff with PNPM.

as our, I guess, you would say your your NPM replacement for fetching and storing your node modules 4 megs. Okay.

base 64 encoded Yeah. That's awesome. Everything else is just Every single show note ever? Yes.

the images is being give you like markers

newer CSS functionality where we can with largely not having to worry about it. We progressively enhanced some things, some things we're just waiting on. We're using PNPM

I think it's too big.

And then because we're using SvelteKit,

where you still have access to your Vite config. Right? They didn't obfuscate that. So If you wanna add Vite specific things or you wanna get into the Vite side of things, you could still do that with with no issues. I'm just, I'm on the website right now, And I realized and it like made it. It gave so much more context as to what was happening and it's so good. Very happy with that. Yeah. You you essentially just drop in a, like, a flip, just like a single directive on a DIV, and then it handled The flip animation, since everything was a keyed each block, it kind of knows where everything is and is able to do those flip style animations super easy,

I really like it. It works fast. It works well.

So we are using MySQL, We do not have any edge functions, but I specifically have A use case for them I don't see it. I don't see a big request, That when you click the next button, Server side, we did consider doing Yeah. Does it have or then you're like, well, the show might or might not have show notes, and you have to Do an if statement, and this way it knows tacking on a little

Post CSS, we're using post CSS with a preset ENV to basically s Give us access to

the whole thing is built on Vite. And one thing I really like about the SvelteKit version one changes that they made, they basically right now, it is just show notes or show titles, man, I was having a weird issue

as our,

when it knows that it's okay to inline it. So maybe it's not. We'll look into it.

So that was a name that didn't have Fastly I want to know what does it run on? What's their stack? What's? Yeah, what database do they use? You know, how does it all go together? What's what is specifically does Netflix used to a WASM issue right now because

any sort of Content behind it. The other day I was thinking I was like, you know, it's one thing I love to do is to talk to people there's 1 for adding grit to something. There's a couple around that are just like little handy utility classes if you want to change the font size.

like Netflix Deno, BUN, Cloudflare Workers, with WASM libraries they need to Serverless functions for all of the back end work.

that, put it together. You know? What's the secret sauce? who work at these companies to generate our schemasor we sorry, we define the schemas

Generally, like larger products

KAYAK or like any any one of these companies.

Fastly the Because as soon as you start getting into

The server.

One of the subheadings is see what we were talking about. I think that's gonna be extremely helpful Fastify

and that has been pretty consistent. But then I also have been playing with has when we hit that API endpoint, We need something to enforce Much to my dismay. We need an ESLint rule to enforce, And then there's lots are on layouts. Yeah, there's a whole, like, zones and layouts thing, which I think will save that For the

For the different topics throughout the episode, so if you're like, oh, I want to I want to know what Wes was talking about, it'll give you a really good like subheadings.

Testing. We use,

We are feeding those into OpenAI,

where you say, oh, what what did they just say? you don't explicitly, data types.

It doesn't tell you their names, and we can't train it on n I, which would be nice. But we fix that by

speaking.

wild and a little bit more hit and miss getting JSON from them, but I think it's worth it for the quality that we get. Yeah. Yeah. A lot of interesting stuff there.

the shows. We've we've talked about that in the past as well, but snake case. Because So for the transcripts, we're using Deepgram to transcribe

diatarization, But you also might want to show with the number, the name,

which is detecting who the speaker is.

and they have been fantastic.

I'm going to it's a little bit More That specific file is is pretty large.

I'm a cool guy who loves cheese. And then we did consider going to fly as well because

You know, what was that library they mentioned? I didn't catch it. Sometimes I'm on a podcast and I have to rewind 6 or 7 times, and I cannot understand what that One word that they're saying because I want to look it up. I think that the show notes will be very sorry. The AI notes will be really good for that.

as well as

Scott says specifically that weird sentence.

Yeah. Well well You can email me directly

And you work on something that could be interesting for this. Hit us up. Yeah. Or if you have a suggestion, like, Like, what do you what do you think about? Suggestion.

I wanna hear more stuff like that, and I I'm excited to dive more into this concept of secret sauce. So if you're out there

CSM. A lot of the transcript stuff. Word. Hosting planet scale, right? So it's MySQL, I built out the pagination for the show's page, and then

from the time you start it to the time Yes.

but we host on planet scale and that allows us So,

us. And then,

for some of the redirects, When we transcribe it, so it just says Scott says, like, I'm a I'm not gonna say it because I don't wanna screw up the actual Yeah. Our whole plan here, but font sizes hunk of audio that is known to the end of every episode Because all of the numbers shifted to the left by 1.

don't know. We're We're not sold on Verstylog just yet, but it's been been working really well for us, especially now that they have Cron jobs as well. It's in beta. That's one thing we've needed for

connect to PlanetScale and it handles all the Hard stuff for

Like until you shut the thing down, you're only paying for

With all the redirects, it'd be kinda neat. Word. Well, that is our secret sauce. This new site is gonna be launching, hopefully, by the time, you hear this episode.

I transcript stuff outside of the show, and I did it all in camel case.

although I talked Earlier, I would like to move those redirects into

and whatnot. I would love for the short URLs to be in the code, not even in the database, like a file

Inside of this, we use Prettier for our formatting, which, you know, did we didn't really change that much in the Prettier. You know, I haven't really touched it.

Very, very specific stuff, prettier plug in Svelte.

it just goes to the next page. It's already preloaded, so it's instant and it's a little bit it was a little bit disorienting

an on navigate a. Kind of life cycle method that just runs when the site is navigated.

like what,

which, h. Has gotten really easy inside of SvelteKit. It's not quite the same as what Astro is doing. I think people get confused there when they hear that Astro added the The page transitions API because they're actually polyfilling it back to older browsers where the way that SvelteKit is doing it is basically just,

n. Took no time, and then I just added an in and out transition as well. We also use the page transitions API,

there there's just a a Simply a call,

with the pagination. So

And then you can simply tap into that and then, therefore, take advantage of the new view transitions API using just straight CSS through the rest of the site. So we did that. It's progressively enhanced fully. Works really well. Love it. Some other cool stuff, tooling

and it's so fast Where we talked to somebody from we won't go in-depth on all the different tech, but I just want to know, like, what are the pieces JavaScript, full stack JavaScript. Well, it's all TypeScript, right?

So Scott threw

and all of the styles are then scoped for that. There is a number of

One thing about Svelte is you simply just Put the styles if we wanna Go any further. Actually, that's we get a message from Vercel every now and then that our

Sizes of everything. Global variables.

in style tags in the same file that you are creating your components,

We should let's tell how we got the name for it.

And we're gonna be kicking it off with the new syntax website. We're gonna be showing you our secret sauce.

is we want to know