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

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.

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.

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

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.

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

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.

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.

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.

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

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,

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

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

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,

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,

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.

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.

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?

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.

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

Yeah. You're gonna you're gonna have to, like, come out with, like, a superhero costume that the 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.