Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

Welcome to Syntax. We Scott a potluck for you today. This is where you bring the questions. We bring the answers some really cool topics today about web components, UIs made from web tech, some stuff around OpenAI, switching to Svelte. Lots of really interesting stuff. My name is Wes Bos. I'm a developer from Canada. With me as always is Scott. How are you doing today, Scott?

Hey.

I'm doing good.

My whole family is just trading pink eye back and forth, which is great. Like, Landon got it, and he gave it to Node of his friends at school. And then Node of the friends at school gave it back to him, who gave it to our wife, and now our daughter has it.

I have luckily avoided pink eye. I'm doing my very Wes. Washing my hands. I'm not touching my eyes, all that good stuff. And I've avoided pink eye, this this pink eye apocalypse that's happening over here. So this this podcast is presented by Sanity, and Sentry is a wonderful way track how your application, your website, your stuff is working at any given time. Yeah. Sentry is the perfect tool to help you fix those errors, especially if they're in production before your users have to send you an email saying, hey. The thing's broken. You already know it's broken. You wrote it, but you know it's broken because Sentry told you it's broken. Head on over to century.i0forward/syntax.

Sign up and get 2 months for free.

Alright. Let's get into the first question here from Anan.

When should I use light DOM or shadow DOM? I like the idea of a template and a slot that's part of web components, but I also like access to my styles globally use case.

So maybe we should clarify real quick. A light DOM is the regular DOM. Right? You just have a div in your page, and it's rendered out in the DOM. A shadow DOM is when you create a separate instance of the DOM via a web component, and you sort of stick every everything is isolated in its own DOM, and it's just made into a single component. Like, for example, the video element in the browser is the shadow dom. So if you ever inspect element on a video element, it's just a video tag.

But if you were I think in Firefox, if you open up a video just directly, you can expect that you can see there's a play button is actually just a button. Like, the the track is a progress. You know, there's all these elements and all these CSS values in there that have sort of been like, alright. We're just gonna pack that into its own thing, and you actually Sanity access any of the parts of the video element unless they surface them via, like, variables or something like that. Right?

Yeah. Yeah. And that's true. You Node, in my mind, you use the light DOM, the regular DOM templates for maybe just things that are part of your own UI, things that your whole application is owning.

And you might use the shadow DOM for things that might be consumed by other apps, other people, or even other main areas of your website.

Or you could just use shadow dom for everything is maybe like a good opportunity to take that, like, highly scoped approach JS to use Shadow DOM for everything and only expose what you want to expose via CSS variables.

That's a a good opportunity to maybe open up some of those those, maybe more targeted scoping.

But if it were me and I had, like, a lot of global CSS that was going to be styling just generalized things like buttons and whatever, and I'm using web components that then consume those global styles, then I would definitely just keep it open personally.

And then if I'm writing, like, maybe a component library that needs to be more flexible or used elsewhere, then I would reach to more of the Shadow DOM territory.

And so it don't take that JS, like, the word of anything. You could probably get far with either approach. I think it's just all trade offs. Next question here from Jay. Do you know any good tools for extracting data or content from markup or HTML or markup slash HTML? Looking for something beyond hand rolling regex if possible. Yes, Jay. You do not have to reach for regex to get content from your HTML.

With HTML, you have the document object model, the DOM.

And with that, you have a host of APIs that allow you to do all kinds of things with the DOM, from reaching in and looking at children, to getting the text content or the HTML or the the like, you can get anything with those DOM APIs.

In fact, one of the well, it was, like, not Coursera, but one of those types of things. They had, like, a, a course on building a web scraper Vercel, And it's like, how you can step through every item on the DOM and put it into category categories or data structures that you want and manipulate that and look for links and things like that. So in my mind, you shouldn't have to reach for any tools. You can just use browser Dom APIs to look for what you're looking for, extract it the way you need to extract it, and then manipulate it from there. What what are your thoughts, Wes? Yeah.

So I am I'm gonna call myself mister scraping or the scrape king because I have written dozens of scrapers in in my day. And we should probably do a whole show on scraping because we've we did it many years ago, but it it certainly changed how to get around limitations and whatnot. So scraping for me, I use a package called link link e dom, and it's a server side. So I think part of the problem people have is they say, yeah, but I'm use I'm running a server side. You don't have the document. You don't have the window available to you on the server. So how do how do I do that? So linked dom. It's l I n k e d o m. I'll link it up in the show notes. I'll link it.

And this is an implementation of the Dom on the server and allows you to use query selector. So I used to use, like, Cheerio, used to use JS DOM. Those things JS DOM is not nearly as good. If you know vanilla JavaScript, you know linked DOM, and it's so good because I use it for all of my scraping because you can simply just query selector through all of your elements, look for things with specific tags. A lot of times like, I specifically I have a Chrome extension called, tweak deck, which fixes some of the things I don't like about tweet deck.

And tweet deck has just random generated IDs and classes on everything except, like, sometimes you have to, like, find stuff based on data dash test IDs. And if that's not the case, you can get into 1 step further, something called x path.

Because the one thing that you can't do with query selector is you can't select items based on their text. You can select elements based on their children Node with CSS has.

Super handy. But you cannot do that with actually, I don't know if you can use has in a query selector.

I have not even thought about that. If you if you have know what you gotta do instead of CSS has, you gotta you gotta find the element and you gotta use dot closest. And that's, like, clear selector, but the opposite. It goes up the DOM tree until it finds what you're looking for. But XPath will allow you to select elements based on its text. XPath is like super old. It's part of XML. Mhmm. It's actually how a lot of the original jQuery was written.

But one kind of cool thing about XPath is you can select elements based on their text content. And that's what I've I've had to do in tweet tweet deck or tweak deck because I wanna hide the, like, related tweets. You know? They always try to, like, show you a bunch of Bos underneath it. I, like, wanted to hide that. So I found h tags, any h tag with the text of you might also like. And then I went Node level up, found the parent div, and add a class to that, and then I could use CSS to hide it or fade it out, something like that.

Yeah. By the way, if you Google linked DOM, Google says yeah. Do you did you mean LinkedIn? No. I didn't.

It's it's so hard to to find. Every time I'd I'd search for, like, how do you do this in LinkedIn? It's it's like, did you mean LinkedIn?

No.

Stop.

That's actually the worst about trying to, like, on Apple Computers that do, like, the, you know, automatic spell correction. If you try to write anything that's, like, tech or web related, you're, like, writing web, you know, nonsense words, and it's always auto correcting them to whatever.

Question from Emile b.

Hey, guys. Love the podcast. I wanted to ask your opinion on the state of Gatsby in 2024. Netlify bought them a few months ago.

There are rumors and a lot of discussion about the future of Gatsby. I know Wes built his website in Gatsby, and I've built many Gatsby websites.

I learned everything I know from Wes' Gatsby course.

So it'd be interesting to hear your thoughts on this. Yes. I have I have lots of thoughts on this.

Get I don't think that Gatsby has too much of a feature.

They have it's kinda funny because Gatsby started as static site generation, and then Next. Js caught up to them and added static site generation.

And then everybody realized, oh, maybe maybe static site is is is not all that great. Maybe just cache it. Server rendering and cache it is a little bit better. So Gatsby added that as well.

Between that and the thrashing of ecosystem. There was, like, 20,000,000 plugins built by just random people, and Gatsby does a good job at trying to maintain the big ones so that your upgrade path is smooth, but I think it's at a point now where it's just it's it's too much. It's too frustrating.

I have a personal Gatsby website, and it it takes 20 minutes to build because it's get it's gotten so huge over the Yarn, and I need to move it over. But I've I've started moving it over to React Vercel components because I think that's gonna be a a much better approach to this type of thing. So, unfortunately, as much as I love Gatsby, I don't think that it's the move anymore. I know Netlify is still being a good steward of it and and still working on it, but I kinda have a feeling that and I don't know if this is true. I love Netlify for for everything they do, but I. My personal thought is that I bet Netlify got it because there are lots of big corporations that bet on Gatsby, and Netlify hosts all of those websites.

And that was the other funny thing is that, like, Gatsby could never make money because Netlify is such a good host for them. That was the big moneymaker.

So poor Gatsby couldn't couldn't, make it work with their own hosting solution because Nelify did a much better job at it, and everybody JS already over there. So I think they're like, you know what? We don't want you moving off of Gatsby because you're paying us a a pretty penny to host your website.

So we're going to continue to maintain it. And also, like, another another cool thing about Gatsby is that the whole idea of, like, a single GraphQL layer is one of the best things that came out of Gatsby. It wasn't necessarily the static site React generation. It was a single GraphQL API where you can pipe in data from literally anywhere and normalize it on a single API. And that's what they're they're pushing out via it was called Valhalla.

What's it called now? We had them on the podcast.

Yeah. They had a a name for it, a newer name for it.

It was a better name. Content hub. Yes. They used content something. Yeah. And, like, again, Netlify is probably big customers, big companies that built on that. And also what we hear over and over and over again from people that love GraphQL, it's always huge companies that have lots and lots of data sources and being able to simplify that into a single endpoint of GraphQL.

So all the different teams can do whatever they want, but you all surface it via 1 GraphQL API is is huge. So that's probably the best thing that came out of out of Gatsby JS this beautiful API for a single, single GraphQL API.

Yeah. It's it's funny. I have a lot of thoughts here. One, I think that one of the big reasons why Gatsby doesn't have much of a future is that Kyle Matthews is you know? I think he I think he exited when when it was acquired. And if you remember, Wes, I don't know if you ever remember this, but especially early days of Gatsby before there was much of a community behind it, Gatsby still had a massive amount of plugins.

Like, when I first picked up Gatsby, which is before it was even version 1, there was a ton of plugins for it. And if you looked, the author of every single one of those was Kyle. Kyle Yeah. Is like a one of those prolific devs who make so many things and is is very, very talented.

And so, you know, Kyle, I think, to me Wes was Gatsby in many of those ways. So, you know, I I don't know. I'm sure Netlify will keep this thing running and keep it updated. So people who are on it and not going to be not on it anymore, will be able to continue pushing out software. But that to me is is like the big thing. I I think a lot about meteor. Right? Meteor here in 2024 still exists as a company, still exists as a hosting provider simply because a lot of people built good applications on Meteor.

And what? Are they gonna rewrite them on something else? You know, I did that, but, I don't think most people would want to do that. So, you know, they're still hosting. They're still making a lot of money off of that. And because of that, they're able to support and keep it going. So Mhmm. You know, we could be, like, 2030 in Gatsby sites. We'll we'll still be up and running, and I'm sure Netlify will still be hosting all of those. So Yeah. I think that's the future. I think it's gonna be a similar future to what Meteor has.

I was just looking at this year since January, there's been 7 commits to to main or master. So Yep. Not a whole lot. I think it's it's sort of just like maintenance mode. They did release a bunch of features at one point. They probably said, alright. We got this thing. Let's let's roll out what we want, and then that's that's kind of it. So I also should say, like, it's not that big of a deal because my website, it's built and react, you know, CSS, it's not a big deal to move it over to another framework because 90% of it is still works. It's just how the how does the data get to where it needs to go JS is the thing I need to change. And the actual components that make up the entire website is is not, they they're not changing at all.

Yeah. And, also, I do wanna shout out in a topic that we've talked about recently on the show, Local First, Kyle of Gatsby, did a really great episode on local first Scott f m very recently. So give that a listen. I'll have it linked up in the show notes. But he seems to be on some local first stuff now, which is really cool to see.

Next, question here is from Noah. Noah says, please get the GoodHertz creator on the pod would be a great show. We've we I actually dropped I don't know. I think at the potluck with CJ or a little bit a while ago, I I dropped that.

The creator of goodhurts.com, I'll have the link to this in the show, is a good friend of mine. I've known him since middle school. We we, we've been friends for a very, very long time, and we went to college together and all sorts of stuff. He started Good Hertz with his buddy, Rob.

And what it is, it's a really high end audio plug in company, and they make audio plug ins that, you know, like Flying Lotus and, like, major producers use. Like, this stuff is really next level. But what's really cool about Goodhertz beyond that is that there's a lot of web tech involved in the layouts and UIs for these things. And the UIs are pretty interesting and unique, but they're also like theme. They have light Yarn mode. They're built with web tech, so there's a lot of SVG going on. And so we're gonna get them on the show. We we've sent them the booking. They're just kind of trying to find time in their schedule. And we will get to, ask all about the Wes tech used in these audio plug ins. So if you have any questions for us in regards to that, I know the, the audio processing of it is all done in c plus plus. So it's it's probably interesting to know, like, what that bridge connection looks like between Webtech and c plus plus and, how they all managed to make this work. But really cool stuff going on there. Give them a check out if you want to see that, but they will be on the show for anybody who's interested.

Next question from MCB. I often have clients that want some sort of effect that involves the JavaScript wheel event.

Usually, it's something where there are slides that fill up the entire window within height, and they want the slides to be locked in place as you do a scroll gesture up or down almost like a vertical carousel. There's a really cool website that does this. Go to runway.com in your browser and sort of just scroll on through it.

And beautiful example of of this type of thing. It can be really poorly done and also can be really nicely done. I have heard from a few people that the wheel event does not work for some types of mouses and is unreliable across browsers, but I can't seem to find any good information on this. I personally don't love to build these types of components, and I find they limit my user's ability Yarn outweighs the slickness of the animation. Again, I'm looking for a good reason to dissuade people from asking us. Yes.

So there the mouse wheel is a really funny one because on a Mac, when you use, like, a Mac touchpad or you use a Mac Apple mouse and you scroll it, you get this beautiful, buttery Mhmm. Nice easing on it. And then you use, like I use the MX Master 2, and you scroll something. And it works it works okay. But it's it's not the nice the nice scrolling that that you're used to because it just it's it's incremental.

And the browser tries to, like, smooth it out a little, but it's not as nice as is the Apple one.

And then you go even further. Like, I'm I'm doing this on my my new TypeScript website is I have this little as you scroll, it has this little bar that sort of swizzles around and follows you as you scroll down. And I've noticed, like, I had to add my own easing to the end of it just to make it look good. Otherwise, it just goes to the spot and and stops. It's kind of frustrating, but you can't just put a CSS easing on it all the time because then it it lags behind. So you gotta, like, almost Deno bounce it or wait for the mouse to stop scrolling and then add the the easing on top of it. So that's really frustrating. And then also, like, freaking have you ever used Google Maps with Scott, Apple mouse? It's awful. You, like I have not. Even look at the mouse wheel, and it's like, oh, do you wanna see the entire world? And they're like, no. No. No. Go back in. It's Africa.

In the middle of Africa. And then it comes in and out, in and out, in and out. And it's just like, you can't even use the scroll wheel on Google Maps because it is so frustrating.

Same thing with the Google Calendar. If you even just try to scroll a Google Calendar, it's, like, 70 years in the future.

You know? Oh my god.

What I found is that most people will write their own libraries for this. I think G Sapp has it. I think 3 JS has a bunch of libraries in it as Wes, where they will basically take over the entire scroll bar and implement their entire new scrolling thing. And that can be very frustrating if not done well because how many times have you gone through one of these stupid websites? You know, like, I get it. Like, you can fade something in from the Node. But let me get to the bottom of the website.

So I say don't do it. It's dumb.

I, I think there is some nuance there because people do there are some good examples of this. I also think it's dumb. Is this considered scrolljacking? Yes. Is it yeah. So people often refer to this as scrolljacking. It's like you're messing with the user's scroll to give them fancy effects. It is does kinda feel like the next step up from, like, a parallax situation Wes now you've, like, you're controlling the animations based on everything on the screen. My advice is if you are going to do this kind of thing, look for libraries.

Look look for frameworks that do this for you instead of trying to worry about the lower level things yourself.

The thing that I'm most interested about in this space, and I I'm sorry. This isn't really super practical answer for you today, is the scroll driven animations API that's coming to the browser Yes. Is is gonna make all of this so much better.

So, like, if you can delay your project by, like, 2 years, then you can use scroll driven animations to solve it. Again, not super practical. But I I do think that this JS, like, an area where scroll driven animations will shine because you're gonna have to use less, custom stuff to step in the way of there. But yeah. If if you can if you can kinda talk them out of it, maybe do that. But, again, I I I do sometimes use websites like that. Like, even Apple does stuff like that, and it works really well.

So Yeah. Yeah. Yeah. I, you know, I I think you're gonna wanna be looking for for libraries and frameworks that do this for you. I think even, like, Framer Motion, if you're using React, can can do this in a in nice ways. But, yeah, you're probably not going to want to worry about the the scroll event itself.

And, it's the best advice I can give you here. Sorry. I'm just trying to find the library that runway.com uses because they do it they do it really well.

It it's a Gatsby site, actually. So there you go.

I just took a look into it, and they have a div of the idea of smooth wrapper, and it is GSAP.

GSAP.

So smooth scroller or scroll smoother JS a vertical smooth scrolling effect to the scroll trigger event page. Unlike most scrolling libraries, so the scroller leverages native scrolling and it doesn't add fake scroll bar. So that that's another really frustrating one JS that people just throw out the entire overflow scroll and and just reimplement scroll bars entirely, which is is it can be done nicely. That's what Versus Code does it, but it can also be done poorly. So certainly check out GSAP and their scroll smoother.

Yeah. Yeah. Shout out to Cassie Evans at GSAP. She's been doing a lot of cool demos over there. GSAP is one of those libraries that doesn't get enough love. So we we should have Cassie on the show sometime. I know we've messaged her about that before, but we've Scott make The redesign

makes me feel so much better about them.

Oh, yeah. Because I know it's like a like a superhero superhero for a long time. Yeah. Now it's like Yeah. Yeah. This is nice.

Yeah. I know. It's exactly that's exactly my thought. I know it's it's such a weird superficial thing, but you're, like, looking at an animation library, and it looks kind of, I I don't know, not designed Wes. And you're just like, I don't know. Yeah. I don't know. For meanwhile, framer motion looks very pretty. Alright. I'll use framer motion instead. Alright. Very, very superficial of me. Next 1 is Penny, from Penny. Penny says, first of all, you guys rule thank you. We are creating a software agency from the ground up. We want to create a UI as rapidly and efficiently as possible.

I'm curious to know what do you feel is the right tool for this component libraries, custom component libraries, AI.

I tried using Figma to builder Scott I o plug in, but wasn't impressed. Any suggestions would be appreciated.

Now this is interesting because we just did a big, big show on this, episode 751.

So you could check it out at syntax.fm forward slash 751.

And we talked a lot about the different approaches here because there's a number of different approaches you can take to this depending Or, if you want, basically, just UI components that you can skin for every site and doesn't matter what framework it's gonna be on right, then something like shoelace is a good option for you because it's very bare bones. It works with anything because it's web components and you can just drop it in and you can become very familiar with that system.

But if you want something a little bit more skinned, there's a ton more different UI elements out there of which we talked in that episode. So we talked in-depth and at length about that. So give, 751 a listen, But it all depends on what you actually Node, how style do these things need to be, how flexible do they need to be, do they just need to be, like, component that you use? Maybe you even take something like shoelace and build out your own set of personalized tools that are like, here's what we think a Yarn is using these tools or here's what we think this is using these tools.

But like Brad Frost said when he was on the show that he thought web components were the best use case here because with web components, they can be used no matter what the technology behind the actual front end of the site is.

So in my mind, that's the best way to go. But obviously, if you're only building React sites,

you can go with React. You know? Yeah. I think if you are going to be doing the type of agency where you're doing lots of of work over and over again, you wanna really invest on your tooling that can help you get up and running. When I did a lot of WordPress, I had a WordPress thing called WP hit the ground running, meaning that from start of the project to actually writing some CSS should be minutes. You know? It should be as fast as possible because you're doing these things over and over again. So invest in your tooling, invest in building reusable and updatable components that can be shared amongst many projects. You're going to find yourself saying, we've built this already. And how do I how do I build these things whether it's monorepo, whether you are publishing them to Npm? How do you share those amongst multiple projects, and how do you make them skinnable so that they look they don't look exactly the same in every single project? Because you're gonna find Vercel, oh, wow. We built this entire I always use store picker. I had built a store picker. It took me forever in one of them, but I just made it reusable so that I could and I sold it to 3 or 4 different clients even though I I did the work once, and then I only needed to implement it over and over again. Certainly make sure that your contracts are in place that you are allowed to do that, But I would also say check out Thinkmill. So Thinkmill is a web development Wes agency in Australia, and they open source a lot of their stuff. And I know specifically that they do a lot of, oh, we built a website for this rugby team. Oh, we've Mhmm. We're working with this large company, and they look at what they have open sourced. They've open sourced Keystone, which is a GraphQL API back end.

It's like a CMS. Right? They have a key static, which is a, TypeScript API, no database CMS. They have React select, which is a multi drop down, some automatic style guides.

If you look at what they've open source, you can clearly see, okay, they obviously need those tools in a lot of their projects. So they figured out how do we make it reusable across many projects? Word.

Oh, Node.

What's up with the frame rate on the new video Node? Scott All Right Wes is bad. The camera quality is great. Inconsistent framework. It throws it off. I have been hopefully this one's better, but like we've I've been going like through the weirdest possible thing, trying to figure out why I am dropping frames.

So we use Riverside to record, and it would just randomly drop frames, like like, lots. Like, 1 in every 10 or 8 frames, it will drop a frame. And that's it leads me to being kinda like jaggedy and and janky. And I don't have that issue recording locally, and I've been on the call with them many times. And I've tried the desktop app, and we even tried we tried another one which is Zencast.

Zencastr, and it would just put a whole bunch of black at the end of it. And what we're thinking is that the frames are being dropped somehow, and it's it's not accounting for those drop frames. So Riverside is just freezing them.

Zencastr JS just putting like, slamming them together somehow and then putting a whole bunch of black at the end because it can't can't count the amount of frames.

So I've been recording locally, like, it's not a it's not a bandwidth issue. It's not a I I initially thought, oh, maybe it's like a a bandwidth issue because I'm running monitors and running it through a hub. It's not that. It's not a a that replaced all the cables.

I don't know. I don't know what the the actual issue is. I tried a different Cam Link, I believe.

To and to be clear here for all the things we tried, Wes and I are using the same capture card. We are using the same camera, the same USB hub, the same literal computer. We're using Scott like the actual same computer, like, era specs, everything.

Yeah. And mine is not

you know, the I don't know what it could possibly be beyond the fact that I I you know, maybe it's a cable, but it doesn't happen locally. So that doesn't make a ton of sense. Yeah. Or maybe it's Internet. The cable last week. And that's the other thing is that we have to wait a week for Randy to edit it, and then Randy tells me if it because I I tried recording and then, like, comparing them and, like, I've spent, like, 20 hours on this thing, and I I cannot figure it out. And I just recording locally right now because it doesn't happen. I'm lucky. I have a feeling that it's, like, some way the way that Chrome exposes the thing. Like, I tried multiple versions of Chrome, and it's still happening.

And it's kind of weird. It's like when my Chrome was, like, not seeing my audio device or something. You know what? There it feels like sometimes there's just gremlins in the in the browser or something that are are preventing things from working. So Yeah. It is very bizarre. Do you think it could possibly be your your upload speed of your Internet? I know it shouldn't be. It's no chance. Deno chance. Node chance. Because because I'm not hitting

the whole idea with Riverside is that it records locally, and it uploads it after the fact. Right? So I was trying to, like, build a recorder in the browser Mhmm. So that I could I could run 1 locally and record it in the browser. And then that way, it's it has nothing to do with Internet. I shouldn't say no chance because I've said no chance on a few of these other things. And I think I said no chance to the caching thing that we did an episode on in in Slither. It was cached. You never I've learned to say no chance. But, like, right now, I'm using 22 megabits upload right now, and I have 50 megabits upload. So it's not even grazing.

I'm hardwired. You know? The one thing I haven't tried is stick a no. Stick a card in the camera and make sure it's not the camera, but it's not. Because if I record if I record a QuickTime, it's it's totally fine. So I don't know. I'm ready to throw everything in the in the river and just buy all new and and pray that that switches it, changing my name. You know?

Yeah. We should even check, Wes. We should check your, your camera's, we should check your camera's settings more indefinitely to make sure that we're on the desktop. I had Randy come here, and, like,

he he did all the knobs and and turned the settings. But yeah.

Yeah. Who knows if there's, like, a a frame rate mismatch somewhere? It kills me. It kills me because I see the clips go up, and it looks like garbage.

And it's it's not the fault of anybody, but, like, there's there was a couple we recorded, like, 6 of them without us realizing it.

And there's nothing you can do because the the actual recorded is is thrown out. It's garbage.

So Yep. Alright. Next question here from Hosem.

Hey there. Longtime listener and big fan. I really appreciate all the time and effort you put into the show. Thank you so much. My big question is, is there any way to host a whole website on my PC at home? Like, is it really expensive considering all the financial changes that happened recently? Things are getting out of hand. So what databases are easy to be hosted hassle free on my PC? I mean, like, host my data on a local net local database instead of things like MongoDB, but still accessible through the whole Internet. Specifically, I wanna make small apps for my personal use, but I have no idea of free services that are self hostable.

Okay. So this is this is something that, you know, comes up occasionally. And I wanna say, first off, you're probably best off just paying for a VPS. In fact, CJ just released a video on setting up a VPS.

I talked about on this show Coolify as being an option to host all sorts of stuff from, like, a one click spin up of a a database to, like a Vercel like experience for hosting your websites on your own VPS. And you can host tons of stuff on Node VPS if you want. So those can get cheap. They can be you Node? It depends on what you're trying to host, but they can be, you know, anywhere from $10 a month to, you know, $20 a month to host as many things as you want. That's that's fairly cheap in my mind, especially considering that you're not gonna have to worry about the the price increases there if you're hosting it yourself.

So, check it out. CJ has a video, self host 101.

You that'll that'll help you out there. If you want to actually host it on your own machine, which is probably not something you should be doing for, like, things that a lot of people are using.

You can do it just by exposing that like, you can run an application on your machine the same way you would run a production application on your machine. It has a port. It's assigned to that IP address.

By opening up that port to the general Internet, which is risky, you don't wanna do that. Or you can use something like a CloudFlare tunnel or an engrok to expose that port to the Internet itself and, therefore, allow people to access this thing outside of your own personal network.

So if you really wanna do that, you can use Cloudflare Tunnels. I've posted a, get started to Cloudflare Tunnels or ngrok to do this for you as well. But Mhmm. If it were me,

I would I would cough up the $10 a month to host a VPS. That's what I would You Node? I know we hate DigitalOcean because of what they did to our baby CSS tricks, but they're, like, 500 like, a half gig memory CPU.

Like, VPS is $4 a month. It used to be 5. Like like, 10 years ago, it was 5.

And and now it's 4. And even CJ has some options in that video that he did, the self hosting one zero one Wes I think they start at, like, 2.99 a month. So, like, I mean, it can get cheap. Pretty good. Way cheaper than and and he's saying he mentioned the financial changes.

What he's talking about there is that, what's it called? The zerp Deno interest rate phenomenon. Yeah. All of these companies that do hosting are getting squeezed by their investors, and they're saying, alright. So I'm just Scott actually making money. And we all got used to these cheap posts that were being funded by venture capitalists. And now is the time where they're like, alright. Well, we're gonna lay off half our staff and triple the price. Wes in. Yeah. And, like, even We have all the users Node. We want their money. Exactly. It's happened with pretty much every single database provider and host out there, and they're just saying, alright. Well, like, what happens if we just triple the price? How many people are gonna stay? Or how what if what if it's what if instead of paying for the server, you pay for the users that use the server, and it's $20 instead of 4? So that's kind of why we've been on a bit of a self host kick because I think a lot of people are starting to feel the squeeze on this type of thing.

Yeah. I know for a little while, it was like, oh, it's so cheap and easy, free to throw up all your stuff and all these quick services all over the place. And and for people who, you know, weren't in web 10 years ago, we pretty much put everything on VPSs 10 years ago. So it does feel like a return to form for many of us.

Next question from Bos Wesinski.

Nice. I like that.

I'm making an app where I need some offline functionality, like saving data.

And after that sync to my database. My question is, what is the best approach to achieve that? I'm thinking about sending data to IndexedDB and then when online to sync.

I'm not sure if that is a good approach.

One more thing. If you have a third person who knows the code, maybe CJ can sometimes make a short video discussing what you are doing for understanding.

Thanks. All for the best Canadian podcast.

Love it. First of all, I'll let Scott answer this one because this is his his whole area. But the we did a a show called Lo Fi on which is Local First.

That show is doing super well. It's one of well, probably one of our most popular episodes in the last, like, 3 months. So certainly check that out. Syntax Scott f m forward slash 739.

Yeah. And the best answer I can give to this is that it is a new area that a lot of people are getting deep into, and you wanna listen to that episode. We talk all about these approaches.

Localfirstweb.dev is a great site for basically any type of service or even, like, code Bos to understand a little bit more in this world.

You are kind of going into a rabbit hole. I'm going to warn you about that.

But it's a really rewarding and interesting rabbit hole. So, yes, you're you're on the right path. In in IndexedDB and then syncing to win online, it that is what you want to do.

In practice, it's quite a bit harder than just that that statement alone. So I just want to warn you. But everything you could possibly want to learn about this approach is in fact on, local first web dot dev. There's a Discord that I'm a part of. There's a podcast, local first dot f m that's really great talking about this stuff. And there's a ton of blog posts about these strategies.

But I'm just warning you, you are getting into a rabbit hole. And speaking of the CJ comment, Wes, he has actually been doing that. And now the Syntax website actually even supports that. If you go to a, an episode where CJ has done a deep dive on the topic, his video will be linked in the sidebar.

And so that's actually one of the big things that CJ is going to be doing over at YouTube, youtube.comforward/atsyntaxfm.

He is going to be releasing videos that go much deeper into topics that we've covered on this show. Like, we've already mentioned the self hosting stuff, or he's releasing 1 on Docker today of the the day we're recording this. So CJ is gonna be releasing a ton of content there. If there's any episode in particular you want CJ to to take on some code for, leave a comment in this video on YouTube, and, CJ will see that. And we'll we'll talk about if that's, something we all wanna do. Next question from Dago.

Hey, guys. I have a special question today. I would like to build a tool to be able to ask questions like GPT, but from audio files.

These files are like podcasts for me and my coworkers doing brainstorming sessions. We started taking Node, but at some point, it changed a voice memo to be able to keep up, but haven't found an easy way to retrieve this information.

No one is going back to sometimes more than a 1 hour of podcast ideas, and, they also say they missed the music on the pod. We're gonna be bringing new music to the pod. Don't worry. So, lots of new stuff coming there, and it's gonna be done by us. Not necessarily done by us, but, like, you know, this is this is coming from from Wes and I who who want new music and new vibes here. So don't feel like it's coming from anybody else here. Now one thing that you you'll want to do here is you'll want to get your audio into text. You could do that via Whisper.

OpenAI has docs on how to do that.

Wes has just posted insanely fast Whisper. But, basically, you'll be able to pass an audio file and get text out of it. From there, what do you do from there, Wes?

Yeah.

It Wes just say you don't you don't even need to use OpenAI because Yeah. OpenAI has open source Whisper. It's so cheap. You probably just do.

But, yeah, you can you can run Whisper locally. You can run it in JavaScript via transformers JS, which is something I've done in the past. And it's not as fast, but it it's free to do, and it's it's very good.

You may also want to the meetings may be important to know who is is talking, and whisper doesn't do. It's called diet diatorization, and Whisper doesn't do that yet. It doesn't detect who is speaking. So specifically for the podcast, we use Deepgram and, is extremely cheap and extremely fast, And their support is really good, so I highly check recommend you check out Deepgram. It's paid, but, again, it's it's pennies.

Now what you do with that is you you you then take the output of that and ask some sort of AI to summarize it for you. So I even know that, like, we use this at Sentry, we use this thing called Rewatch for our our meetings, and it will not for, like, our 1 on 1 meetings, but for, like, company wide meetings.

And it will summarize all of the points of the meeting into a nice little thing, and it's it's super good. So what you can do is just basically take the whole transcript, pipe it into some sort of AI. You might have to distill it down to be to fit into the context window.

That's becoming less and less an issue. We've talked about that. Go back and listen to the new website or all all the AI episodes. We'll talk about how to make it smaller. But, basically, you just say you give it a prompt, summarize this podcast into bullet points. This is what we do for do for the syntax podcast.

Provide me a list of things that were said. So, like, give me a a 6 sentence summarization, and then give me all the bullet points of the major topics that were covered. And then you can also make your own, like, I think it's called the rag, where retrieval augmented generation.

You can also ask the AI questions. You say, given this context, the entire transcript or parts of the transcript that you've you've searched for, Answer this question. So, what did Scott say was a really good choice for local first development? And then it will search for things that are similar to local first development, bring all those, utterances or whatever back in, pass that to the AI with your question, and then it will give you an answer at the other end. So I think that's really cool. There are a couple startups that will literally record your screen all day, and you can ask them questions.

I haven't had the guts to do that yet. But Yeah. No. Thanks. Yeah.

Pretty cool that

we're getting this close to it. Yeah. It's it's some start ups gonna have all my API keys and yeah.

I'm a fan.

Okay. Well, that's it. This was a really, really great, potluck. Lot of good stuff here. Now let's get into the part of the show where we talk about sick picks. Sick picks are things that we like. We pick things that we enjoy. Could be anything. Could be food. Could be movies. Could be podcast. Anything. I'm going to be sick picking today hair powder. I I don't know if you've ever heard of hair powder, Wes, but I, you know, I've fallen into the weird TikTok rabbit hole of men straight hair. I have really straight kind of thin hair, and it's always made styling it really bad.

So there was a guy who's just popped up on my TikTok and he's like, do you have straight, thin hair with, like, weird things like a cow look? I'm like, hey. You're, like, talking to me exactly. I don't know how you pinpointed me this well. It's like, this is how you style your hair, and you use hair powder. It's like a wax powder.

It's very I'd never heard of this, but apparently, tons of, companies do this, including who we've had on the show before. We can dump lunch. It looks like you're you're pouring, like, Parmesan cheese on your hair. Just delicious. And then you you rough it up, and then it looks like all all kind of chunky and textural. So it, like, takes your your thin hair your thin straight hair and give it a bunch of texture. So, yeah, I've been I've been liking this. It it's fairly cheap too. You can get this one. It's $8 that I use. I just posted the one that I use personally. I've only tried one of these. I'm sure, many of these, could be better. Suavecito, if you are listening, I would like to try yours. Maybe I should just buy it, but, hit me up.

Sweet. I'm gonna sick pick a mini grease gun. This is not something that I didn't realize I I needed, but I feel like like Yarn of being a dad is you go around and fix everything that that is squeaking. Right? And I got really into the, like, silicone spray grease.

But, like, about 6 months ago, I went around and I sprayed all of our hinges because I hate when a creaky door wakes a kid up and we're about to have a new baby, and I there's no chance I want that. So I went and, like, at the cottage, I have this massive grease gun, and it has, like, these zerk fittings you can pump it on and you can do it. But I was like, I just need, like, a little bit. You know? Little one. So I I found this, like, tiny little grease gun. It's like, I don't know, 4 or 5 inches high, and you fill it up with, like, a nice general purpose grease. You can get a silicone or a lithium grease or you get the really good one is called red and sticky.

It's a really nice, like, general purpose grease that won't melt out on hot days.

And it's so handy that I just go in, like, my right here. Let's can you hear my microphone? No. No. You know why? Because I greased my microphone. Yeah. Yeah. I went in, and I just popped popped a little bit of grease into the into the the it's a brass bushing in there, and it's nice and silent. And Wes you go and pop the door hinge pins off and put a little in there, a bunch of the kids' bikes and stuff need that. It's just I find a use for it all the time. And just having a tiny little grease gun where you can put it in has been super handy.

I need to grease my bushings for sure.

I I I'm sure I have, like, many thousands of things that are squeaky over here. And and people often think, like, w d 40 is the fix, but w d 40 just, like, cleans stuff. It's not really, like, grease. Yeah. It's a Node w d 40 is a like, it it thins

like like, if you wanna get rid of grease, w d forty is good is good for that. It it temporarily has a little bit of an effect, but not for very long. And even, like, we go to the park with my kids, and the swings at the at the park are driving me crazy. And I was like I told my wife, next time we come, I'm gonna bring a ladder and my grease gun. And I don't this is probably not allowed, but, like, I'm just gonna be the neighborhood hero and just go grease all the swings at the at the park so that the poor people that back onto the park, that must be awful hearing that all along.

Yeah. You're gonna you're gonna have to, like, come out with, like, a superhero costume that the Grease Man.

Grease Man.

That's it for this show. If you want to submit your own question, head on over to syntax.fm.

There is a button in the top. We answer questions every month in the potluck episode. So we wanna hear from you because we get a lot of questions, but it's always great to have more. So go ahead and go submit your your potluck question, and we will get to it on the show.

Anything else from you, Wes? That's it. Thanks for tuning in. Catch you later.

Peace.

Peace.