Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths

Welcome to Syntax. Today, we got a potluck for you, which is you bring the Wes, we bring the answers. We've got some really good questions today on TypeScript null checks. How do you check if an element is there before you go ahead and use it? What's the best approach for that? What's the correct HTML tag for items in an ecommerce store? Finding good opinions ESLint, somebody needs the truth, spending $120,000 on an app idea and getting nothing, awful story, and how to plan a new project.

You know, one of the one of the questions we Scott in the potluck is when are you gonna stop using this janky Google Form Yes. Which Wes should move it over because we wrote the, submission form, for a couple other things, for the spooky story submissions, for the open source sponsorship thing. So it just needs to be switched over because, yes, it's a a Google Form is always a failure of your infrastructure.

It's maybe not a failure. What it is, it is a, it's a acknowledgement that my time is more important.

I just drop yeah. It's lean. Right? Yeah. Totally. Alright. Let's get into the first question here from The Ponderer.

What's the most appropriate container element for a grid of products on an ecommerce store? I'm building a storefront at the moment.

And on the collection template, I'm not sure what is the best element to use. I'm looking around at major online stores. DIV and UL seem to be the most common. I'm wondering why OL never seems to be used even if a sort order has been manually selected. Presumably, in that case ordering is relevant Wes so I would not use any of these elements for this I mean me personally here's what I'm doing I'm doing a section each product is an article that's what I'm doing end of story just CSSing a grid around it you might see this JS differently than I do but I don't personally see products in a grid as being a list right I don't think so either yeah I don't see that it you think about, like, bullet points and whatnot. Like, oh, well, not for sure. The order is Absolutely.

Not very important. Right? I guess if you are sorting it, but that that kind of is inferred, I think.

But no. Certainly not an unordered list for that, and I reach for unordered list for a lot of things.

Yeah. I man, the opposite. I'm always asking myself if I if I can get around this without using an unordered list. Please, for the love of God, don't make me use an unordered list on this. An article is interesting. I would have thought an article is more for,

like, text based contents, but it's not. What's the semantic meaning of an article?

Let me double check and confirm this, but the way I use an article, typically is for, like, serial content. You might think of, like, a ESLint of blog posts or, for instance, on the syntax website, we have a listing of each podcast episode in the listing page. In the listing page each of those are an article that is a thing it is one of potentially many of that type of thing

and that's why it reaches for the product yeah An article HTML element represents a self contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

So that's the key. Be meaning that it's its own thing, and you are able to click off to a separate URL with that piece. Right? Like, it's its own item. Examples include a forum post, a magazine, newspaper article, blog entry, a product card right there, or a user submitted comment.

So, yeah, if it is its own thing which can be distributed likely via its own URL, then reach for an article.

And you and sorry. You said you'd wrap that in a section, which I agree.

Yeah. Yeah. Yeah. Because it is that section of the page is the product listing of things. You could throw it in a div, but section is probably more appropriate. Mhmm.

Along with this is make sure you're also throwing JSON LD in there. If you ever, like, go to Google and you search for something and it shows you, like, the rating or the stars or information about a, like, a recipe or a product or or anything like that, you wonder, how do how do they infer that data? You should be dumping JSON LD into the description of that product so that Google knows, like, the price of it and and all of that stuff around it. So, we should do an entire show on it because we are also due to add JSON LD to our our website as well. Yeah. Totally. Next question we have from Tim Wrinkle. Hi, guys. Botlocks are great. Thank you. I'm I'm trying to come to grips with TypeScript while working with a settings form. Whenever I try to access an element, TypeScript wants to make sure the element is there before it lets you go ahead and do anything. Okay. I get it. So he he's saying this is this is quite a thing with if you're using vanilla JavaScript and TypeScript, which I do a lot JS when you query selector an element off the page, there is no guarantee that that element was actually found.

So the problem that he goes on to say is if I want to do something like add event listener on the element itself, you get, like, a TypeScript error that says my button is possibly Node, and and that's true because there is a possibility that nothing was found. And if you try to go ahead and run a method on that, then you could possibly get an exception in JavaScript because it's it'll say Sanity find add event listener. So he he goes on to say that the ways around it is you can put a bang on the end.

So my button bang dot in add event listener.

What that does is it circumvents TypeScript with the non null operator. The bang is very rarely ever a good choice in TypeScript.

You're almost always Scott of sidestepping TypeScript in that case.

And then he also says you can add a optional chaining, which is a question Yarn. So my button question mark dot add event listener. What that will do is it will first make sure that my button exists and then go ahead and chain on the rest. So, he says both of these are frowned upon in general. The only real solution is you say if my button, then go ahead and add event listener. Otherwise, log out in error. So this is a pain, and and this is something that I hear about a lot in TypeScript JS people say this is so much boilerplate for this type of thing. And and the answer to that is is yeah.

TypeScript often makes you do write a lot more Node, not just to make TypeScript happy, but because there are situations where you're gonna run into these actual errors. And and TypeScript is finding those possible situations and and getting them for you. So what would I do is I either create a helper method that will do that internally.

Or in most cases, I do what you said is I I'll I'll pop an optional chaining on the end because that's not frowned upon at all. You're simply just checking if the button exists and then going ahead and adding the event listener. The only downside to that is it fails silently, meaning that if the element is not on the page for example, if you if you mistyped a selector, somebody submitted a a change to your Git repo, and it changed the ID of that button, and it's no longer finding it on the page, you're not gonna know that something has is no longer there. Right? So if you care about that, then, yeah, you should you should probably do a long form if statement and then throw an error. Submit that data to Sentry would be kinda Node. Make a little, little helper method for that. Otherwise, the question mark is

not a problem at all. Yeah. I totally agree with that. And and, honestly, like you said, it depends on the context. But a lot of the time, I am just using optional chaining for these things. And the worst part about TypeScript for me is that it makes me realize, how full of holes my code is if I'm just typing it with, like, without TypeScript. I'm like, oh, yeah. I'm just not even checking things. You know? Yeah. I'm freewheeling so much stuff. So I'm thankful and angry at TypeScript for that.

One more tip I have with this, and I don't love this tip, but it it can help you, is if you have like, let's say you have 3 functions on that page that use that element, that button. Right? And if you were to query selector the button, check if the button was there, and then go ahead and define your functions, all of those functions still don't know that the button is there or not. And the reason behind that is because JavaScript hoists the functions to the top of the file, so it's technically taking your functions and moving them above Wes you have checked if that button exists. So it's kind of a pain, and and that means that you now have to check if that button exists in all 3 of your functions.

So there's there's 2 solutions to that JS, 1, pass the button into that function as an element, so that when you call it, you're passing the button as an argument, or 2, if you use a in, like, an arrow function or a a function declaration no. A function assignment, meaning that you stick it into a variable instead of, typing out the word function, then that will not be hoisted, and you can you can do your check above where you define your functions.

Yeah. Word. Alright. Next question from Anan. And this is more of a statement and less of a Wes. They say and, honestly, I think a lot of people are feeling this way, so I thought it might take some time to talk about it. It says, I'm genuinely so fed up with AI.

Can we please get something different already? Anonymous submitter, I hate to inform you of this, but that genie JS not going back in the bottle. Like, we are in this new world.

And in my opinion, as somebody who loves this stuff very deeply, you either adapt here or you're gonna get passed by.

So if I were you, I would take the time and accept that this is the new reality 2025 and beyond and harsh truths here you Scott adapt or die here I I think I think you learn how to implement AI tools into your workflow you see what the hype is about and that doesn't mean you have to take part in garbage AI art or any of that stuff that doesn't mean you have to take part in garbage AI code but there are some genuinely very helpful tools out there things that will make you faster, things that will, make you more efficient. And if your coworkers or somebody that you're competing with for a job is using these things and you're just, like, putting your foot down and say, I don't wanna use this garbage stuff, That's gonna be hard for you in the future. So in my opinion, you you gotta get on it, and I'm sorry to hear that. It's it's not going away. Yeah. I I totally

feel and understand this Same. Exhaustion that people are having because it it feels like every single day, there's something new, some big thing. There's a lot of people with a lot of money tied up in having AI win, and, like, you have to be like, we had the Windsor folks on, and we're like, hey.

Like, given that you raised a quarter $1,000,000,000 and you need to make this thing work, that's the little caveat.

Let's ask this question of if you think it's if it's think it's going to be the next thing. Right? Like so, like, maybe that's my advice here is that when people are are talking about this AI stuff, ask yourself, is it somebody who has a, like, a vested interest in this type of thing? Mhmm. Because there's a lot of people touting that it's it's absolutely game changer and it's gonna change you, and you're gonna you're gonna lose your job. And and those people have have investors to to make happy at the end of the day. But then at the other on the other hand, there's there's people like Scott and I JS we have 0 money tied up in whether AI works or Scott, but we know that, unfortunately or fortunately, it's going to be this new amazing thing. And while we would love to just sit around and and keep building websites the way that we built them for the last 10 years is it's it's not gonna be the case. Things are changing very quickly, and you are certainly going to have to learn how to adapt to this type of thing. And I I think that we probably will see a good amount of, like, rage quits from this type of thing where people do like, this is just not what I fell in love with. This is not what I love, or or I just don't feel like having to reinvent myself one more time. You know? I just wanna keep doing the same thing that I'm doing. I think that's we'll start to see that in the in the next little bit. Yes. I 100% agree with your answer.

Next question from Dan P. Why do you think three d never took off? Example, 3 JS, React 3 Fiber.

Seems like it could create a cool UX or something unique. That was kinda interesting.

Why did three d never take off? You're starting to see little bits of 3 d added as, little design elements, as little helpers.

I think, like, for stuff to really take off, it has to also be genuinely useful rather than just look really cool.

So for example, Rep Fitness has this amazing if you wanna build a Rep Fitness squat rack, there's so many different options. Right? You can get different sizes, different color, different heights, different attachments.

It's just infinitely configurable, and they have this, like, 3 d configurator where you can sort of build it ESLint.

And that makes sense for a a a three d thing because you can spin it around. You can zoom in and out. You can kinda get an idea. You can place it, in your space to kinda see what it would look like and how it how it would fit. So I think that as things become more approachable, it's not easy to build this stuff either. Right? Like, once you move into Canvas, you're giving up all of the niceties of HTML and CSS of of laying things out. So I think that it's it just has its place. It's not gonna totally take over absolutely everything. Maybe it will once we Scott's goggles get more popular, but we'll see. Yeah. The goggles are gonna have to

undergo some big transformations in terms of, like, how people are wearing them before they take off. Because I acknowledge that the thing is a big thing on your head, but it is pretty sick. I wore the VisionPRO in my car while working outside of my daughter's dance class, yesterday. So she goes into dance class, I go to my car, and I now have an ultra wide monitor in front of me. And that rules. So once that becomes a better form factor, I do think it'll take off. But, that said on the 3 d tip for web stuff I sincerely believe this has taken off I see websites all the time with three d and you might not notice it. You might notice it. Whatever. They they might just be there in the background. You know what? You you don't necessarily see our websites that are I mean, you do, but not everywhere that are, you know, just completely 3 d Masterworks all the time. What we're seeing more of is, like, you mentioned background elements, things here or there, shaders on top of things. Yeah. So yeah. I think I think it it did take off and it does exist. I just don't think that its place was ever going to be a full takeover of the entire app in my mind.

Yeah. I I agree. Otherwise, we're it's Flash. Right? It's hard to make that stuff accessible. It's it's hard to make that crawlable. If you put everything into a flat Pnpm, like,

thing, it's it's hard to get stuff out of it. Yeah. Totally. I I've also posted a link in this to one of my favorite blogs and websites that I've talked about several times on the show. It's, Maxime, Heckle's blog, his website. It's amazing. It's well worth your time if you're interested in getting inspired by 3 d stuff on the web. Sorry. One more thing. A nice little

three d touch is GitHub universe.com.

They have these little, like, Octocat and their duck. They have all these little animals, spread throughout the site. And as you scroll, they turn their head.

And I went if you go into it and, like, download both the model and the the shaders to make them colorful, it's kind of interesting to see how they did it.

So I don't know if if you've seen this, but actually, Safari has added an element specifically for 3 d that I do think I don't know if the other browsers have it or not. It's you know? Like it's a draft

spec at the moment. That's not to say that it will hit, but they're going through the process of trying to draft it up, and they're probably testing it out in Safari to see how it works.

Yeah. So it could be interesting, if that that ends up coming here. I know that they probably have vested interest in 3 d on the web given, they now have a spatial platform.

Oh, so what would the model element do that Canvas cannot do? Is it just that you don't have to load 3 JS and and have a cam like, you don't have to get all that stuff in? Like, you could just I'm sure that they would say, like, this is a standard model file that works on the web. You could just export that from your three d software, and then it will you'll have access to it in in JavaScript?

Yeah. That's it. The model element allows for a website to embed interactive three d models as conveniently as any other visual media. So yeah. Oh, okay. And it looks like Scott USD

or GLB files Yeah. GLBs are currently GLB is the standard. What I've seen a lot. Cool. Also, I think a lot of these like, going back to the last AI question is you're now able to, like, prompt for AI models. So it's going to be getting a lot easier, for people to just generate quick little, assets that they need.

Yeah. You when you say AI models, you don't you don't mean AI models. You mean 3 d models within AI. Generated 3 d models. Yes. We're running out of words. We're running out of words. I know. I know it's very funny. Alright. Next question here from Mike r. You have mentioned this before, but for the video format of the podcast, is it not possible to push audio and video to the built in iPhone Apple Podcast app? Mike r, it is not possible, at least, if you want to have them within 1 feed. What we can't do is serve both the audio and the video in 1 feed we could have a separate video feed as an entirely set but you'd have to subscribe to that separately and then you're splintering the audience on the podcast Node you got 2 separate feeds It makes more sense for us to do it all in audio. I don't know why.

Maybe because of the way that the podcasting is kind of the Wild West. It was a thing just made by Apple, and now it's kind of just this open thing. And I I would imagine somebody solves this eventually.

You know what it's kind of being solved by? It's being solved by YouTube doing more podcasts Spotify. And Spotify doing more podcasts. But Apple should do something about that because I I know a lot of people don't wanna listen in video, but they wanna subscribe. Some people, occasionally, you want videos. Sometimes, you don't. Yeah.

As as much as it as it absolutely kills me to say this, RSS is dead.

Try find the RSS feed for a popular podcast.

Try find it. It's impossible.

My daughter has this Node player, and she loves this kid's podcast called Who Scott It.

And the the Yodle only shows them 25, so I wrote a script to download them all. And they're, like, trying to find the RSS feed for that podcast was so hard. Like, no websites have RSS icons on them anymore, and, like, it's it's absolutely wild.

And and then we have have issues. Like, you want video in a while. Right? And Spotify solved that. We can upload the video and the audio, or we just upload the video, and it will strip the audio for the listeners. And as much as it kills me to say that because Yeah. Like, believe me, we like it when people use the app with the r r RSS feed because we're not competing with, like, cooking videos on YouTube, but that's, that's just the way that the general public is going. This is the Yarn truths

Node, the episode full of hard truths. Here's a hard truth.

Here's another one here for you. Your website has bugs. It is slow. It has issues. And if you want to fix those things oh, I got yeah. Wes all we all we all got them. But if you don't want those issues to become GitHub issues, head on over to century.io.

Sign up. Use the coupon code at tasty treat, all lowercase, all one word. And it's actually at it's, century.ioforward/syntax.

We'll have a link in the show notes.

Man, century as a product just keeps getting better. You Node? We use this thing for all kinds of stuff whether that's session replay to see what went wrong. You get a nice little scrubber so that way you can visually see what happened.

I use the AI tools to help me find, like, what exactly this bug is doing. I've identified performance issues with the apps, slow queries, slow pages.

Just in general, we push an update. There's gonna be, little bugs here or there, old browser versions and stuff.

And I gotta say, the Sentry team is cooking, Wes. They're constantly adding new stuff and I can't talk about a lot of the new things just yet.

But yeah. A lot of new stuff, a lot of great stuff. It is just an ever evolving awesome platform. So check it out at century.i0forward/ syntax.

Daniel asked, what browser are you guys using at the moment for web development? I'm a Firefox lover, but, unfortunately, I've been disappointed lately since it seems there's not much development, and it sometimes lags. Yes. I was so I was Firefox for probably 8 years or so. We we talked about this on a couple shows ago.

I've been on Microsoft Edge for quite a while now, maybe maybe 4 months or so, and I've been absolutely loving it, because their dev tools is it's just so it's Chrome. Right? But they have tweaked the dev tools so that it's, like, a little bit nicer looking.

So they have icons. You can dock it to the left. You can have just icons or icons and tabs.

The spacing, the colors are just a little bit nicer. Big fan of it. Edge in general is awful when you first boot it up. So I think I'll maybe do a video of, like, how to turn off all the garbage Microsoft stuff Yeah. And get, like, a good one. And, plus, like, there are a handful of other tools in in Microsoft Edge that are are really nice for web development. They have the selector performance that's been upstream now. You can get that in Chrome as well, but I've been really happy with it. Yeah. I think if you did a video on that, it would do well just

because people love ragging on stuff like Microsoft. So you can say, you know, how to d Microsoft eyes Yeah. Edge.

I you know what? There's something about Edge's UI that still rubs me the wrong way. We've talked about this repeatedly. I'm still on Arc. I can't get rid of Arc. I just can't quit it. It does so many nice things for me. If I hit command t, it takes me to the tab I already have open instead of opening a new tab. That way every browser does that.

They do?

Yes. Yes. So I'm gonna hit command t, and I'm gonna type Riverside.

And it says switch to this tab because I'm on Riverside right now. Every browser's done that for, like, 10 years. It says switch to this tab where? What JS what do you mean it says switch to this tab? So here, let me let me share my screen with you there, Scott.

Oh, but then you got you gotta go over and click on that thing? No. So, like, let's so I've got, this rep fitness tab open Yeah. Right now. Right? So I'm just gonna type rep fitness.

Oh, it's a Canadian Vercel. Ca.rep.

Okay. I'm there we go.

Right there.

Hit it. Boom.

Nope. That didn't work. Yeah. It doesn't. And and you you have to hit tab twice to get it. I want it to be the default. I want it to always be the default, unless I specify otherwise, because that's such a a common thing. You know, that that's just a a little thing for me, but, like, there's so many nice useful things. It cleans up my tabs automatically for me. I can do split. I can split a window and have 2 things, like, always open at the same time. There's, like, little issues here and there.

The profile management inside of Yarn JS, like, second to none where I have, you know, my column and I just swipe to the left and now I'm in a different profile and that profile has its own set of bookmarks and pin tabs and I swipe JS another one with its own set of bookmarks and pin tabs, like, if I have several different profiles whether that's Syntax, Sanity, my own personal stuff, like, I can just have those workspaces so perfectly defined in a way that feels like, you know, effortless to go between them.

I just can't find that experience anywhere else. And I've tried all of the Arc like browsers that people have suggested, and they're all just skins on top of other stuff. It's it's they're not good. Yeah. They're not good. Oh,

the other benefit to using Edge, I can't believe I didn't say this, is Edge has not gone away with the manifest 2 Chrome extension. So meaning that you can still use uBlock Yeah. The old version with it. So and because they're corporate, they'll probably have that forever while their corporate clients have these old Chrome extensions that they can't live without.

So they'll probably hang on to that for quite a while. I although the container tabs that Firefox had was the best.

In every other browser, you have to have, like, a different window. If I wanna have my syntax one open, and then I have my regular one open, and that way I don't have to sign in and out of everything or use a stupid Google switcher.

And the Firefox tabs was the best because you could have them all open in one set of tabs.

For Microsoft Edge, you gotta, like, create an entirely new profile, and you gotta turn off all the same thing, get reinstall all the same extensions.

It's a pain. I know. That's what the that's what Arc does best, that kind of stuff. So, nice little swipe. You know what I can't get behind is I I always wanna use Safari, but I just cannot get behind Safari's dev tools. I just no. They're they're dead last place for me. I would rather use Firebug at this ESLint.

Because there are times when you gotta use them, like you're debugging the Bos, you know, something on the simulator, or you're connecting your phone to debug something in production or even on Yeah. Just a dev and you're like, I wish I was not using these dev tools. Yeah. Alright. Next question here from unlock me, please.

Why would I use a lock file for managing dependency versions rather than just pinning the exact version in package dot JSON? Seems like both of these actions accomplished the same thing, but the lock file is a 1000000000 lines long and nonhuman readable.

M I o. I I m o. I m o. I m o.

Pin your dependency Vercel, run Npm audit often, and git ignore lock files. Wes, I'm gonna toss this one to you. You can choose to either answer this 1 or point it to your video.

Yeah. So I just did a video on this question and explained how SemVer works and why this is not a good idea, but I'll go through it quickly for for our audio listeners. So your package JSON has listings of all the versions of the package that you have.

And, generally, when you Npm install something, you'll get a caret in there, meaning that you will get the latest major version. So if you have version, 2.0.0 with a caret in front of it, that will give you 2.0.1 if it's available, but it will also give you 2.1.0.

And and those numbers mean the first one is a major version, breaking changes. Second 1 is a minor version that's features have been added, but nothing has been broken. And then the third one is, patch, meaning that, oh, I fixed something that was accidentally broken.

So by pinning those, meaning that you remove the caret or the tilde will only give you the last patch version.

If you remove the caret and just give you the package version straight in your package JSON, that will pin the version to your Npm install, but it doesn't go all the way down the the dependency tree and and lock those versions. So if you install Tailwind version 4.0.0, Tailwind's dependencies still aren't locked, meaning that there's a possibility that what UNPM install locally and test against and what you push to your server and build in CI is going to be different code. And believe me, I've been bit before by not having these things totally locked down.

So a package lock file will all the way down your dependency tree, it will specify the exact versions of every single package so that when you go ahead and deploy it, the npm install knows exactly what versions are Node, and then you only will update those when you go ahead and rerun an npm install or npm update, which will update your lock file.

Nice.

Very,

very Yes. Thank you. But go to YouTube. Check out the video I did, and it explains it a little bit further as to why this is not a good idea JS well as some of the security implications that could come along with with not lock or not you having a lock file. Nice. Cool. Send it to your friends as well.

Send it to your grandma. Send it to everybody.

Next Node from Mark Tolinski.

I have 2 questions. 1st, when are you gonna change that ugly Google form, and now the real one? So we already answered that one. Thank you, Mark, for that push. We'll switch it over. Second, I am building a mobile app using expo to handle the invoices for my business and expenses slash income tracer. All my data is stored locally in SQLite, but I would like to add a sync ability to not lose anything. What database would work best with SQLite, for a cheap option? I was thinking to build a simple sync library by myself. Famous last words. I'll just build a simple thing myself Yeah. Yeah. Just to compare time stamps and push data, or maybe, it is better to use some sync engine. So, yeah, we we explicitly had some spooky stories on this year's Halloween episode where somebody tried to build their own sync engine and accidentally, like, screwed an entire project. So I would probably say, unless you're keeping copious backups, maybe don't build it yourself. I'd build 1. I I can talk to you about that. Yeah. Maybe maybe you can. Let me talk to you. I don't think there's any conflicts. Node. No. No. No. Thank you. So yeah. What do you think? Should should he build his own?

I think there's no there's no problem with building your own if you want a simple sync. The the only time that sync engines get to be tough is if you're dealing with multiple people writing to the same data at the same time, and if that's the case then Wes do not write your own, go find something.

If you are simply having a sync engine where anytime I make an update it should sync whatever and then when the app loads it can check timestamps like you said which is newer which is older and then just update it that way I did that in a it's like I call that an extremely naive sync It's for my dance app. I actually have it I have it on GitHub so I'll post a link to that. That way you can see what I did there. But it it it's extremely naive but it works super well because only 1 person is ever going to be writing to that specific thing at any given time and, you know, the only way that there could be some problems is if I made some changes offline never connected again online with that client then made some more changes online with that same records And there might be some conflicts there. But if if you know that that's not how this is going to be used, then, of course, you you can write your own very naive one as well. As far as what database, anything, man. I've done it with Pocket Bos.

I've done it with, Postgres straight up, with Adrizzle. I've done it with, you know, several different things. So you you could even have it as a CMS if you if you wanna have it saved to a CMS, like I said, with, like I did with Pocket Base, which is kind of a pseudo CMS. Mhmm. So I don't think the database matters.

Mark, you need to stick with his existing database? Could he stick 0 on top of that? Only if that existing database is Postgres. So 0 is only Postgres. Doesn't work with SQLite. You're right. Okay. Yep. It sounds like it's fairly simple. It probably wouldn't be a big deal to move it. If you do wanna stick with SQLite, I would check out either Cloudflare Deno Node, which has, like, time travel, meaning that if something does go wrong, you can scrub back to any minute in the last 30 days of your database. So it's like minute based backups for 30 days straight. So if you do screw something up, especially, like, while you're updating, you could possibly just store the old value as well so you at least have it, if you ever do need to roll back to it or use, Turso. We had Global, Scott, on who is the creator of Turso. They have forked SQLite into their, Lib SQLite, and, they're they're a pretty good service as well.

Alright. Next question from Joe. Hey, guys. Love the show. Been listening since episode 1. Nice. Wow. Nice, Joe. What is your approach for planning out a new project you want to build from scratch? Scott, what approach did you take when building your Sanity app? IE, did you start with a design first or did you just dive straight into code? What did you use for design if anything? Yeah. It depends.

For me, I I have my own starter that I call drop in. That's what I use. And actually Wes I build Habit Path specifically I didn't have that starter and just about everything in my drop in starter like was pulled from Habit Path so I just started building these things and Wes like oh I I wanna use these on other projects. So I'll have them, you know, now I have my own set of libraries for auth and base CSS and stuff like that. But, you know, typically, I'm not building a ton of super long lasting products. So I'm, I start from scratch and I just start getting in there which isn't always the best idea if you if you like really want to take your time and plan something I'm also very bad at planning overall so in my mind what you should do is think long and hard about the product you should think is this something that I want to be well structured for years and upon years that doesn't mean you can't restructure and remove and change things in fact just what like 2 nights ago I I rewrote Habit Path, the whole, mechanism for determining if a specific habit has a check on a specific date.

Because that's a lot of data that you're working with. Right? You have, you know, 20 habits. You have 365 days a year. You could potentially have a check for each one of those for every single day, if not more than that.

So I ended up, like, moving that all into, like, an object lookup within and each of those has a set as the property and it like got way faster but it wasn't anything like that when I first wrote it and so you can you can evolve how things are being done especially if it's a type of product or a project that you haven't worked on before you don't have a, you know, clear experience in doing that exact thing, you you your evolution of, how you think about things might change.

I've actually found a lot of value in AI tools here Wes I I I can say, I'm looking at building this specific type of project. What type of design patterns or architectures are common for this specific type of project and I've gotten good luck with results there that doesn't mean it's all you're always gonna get good luck but I've gotten good luck in terms of at least giving me more context than I would have had you know, outside of my own understanding.

So in all I'll say, I think you should take the time to plan things. I think you should think about it, especially if this is something you wanna keep for a little while. CSS wise, you know, a lot of times, or even, like, the structure or frameworks or whatever, a lot of it is just sticking with what you know unless you're explicitly setting out to build something with some new tech and that's the experience you're looking to get.

Otherwise, take the things you're good at and just keep rolling with that because you can find other times to build up your skills and and try new things and potentially find faster ways of doing things. But maybe on a long running project that you're looking to keep maintaining isn't the best place. Yeah. When I'm starting a new project,

I'll almost always start about it in terms of thinking about the data model because everything starts with the database. Right? Or everything starts with the database, or everything starts with the router.

So I will often scaffold out a schema for all of my data, and then I'll go looking for what do I wanna use for, like, a framework. You know? Like, you probably know what library you wanna use. You know? And does it want a Svelte or React or Vue? Do you wanna use something on top of that, sort of make your decisions there? Stick with what you know for the most part, but, certainly, take a look out there and see, is there something else that has been sort of superseded, in terms of CSS approaches or database ORMs? Because it's it's often a nice time to to try something new and and learn a bit more. Yeah. Totally. Word.

Nick, the new guy says, I feel stupid asking this question, but you guys have been with me my entire dev career. Oh, thank you, Nick, the new guy. I am struggling to understand how to deploy a SvelteKit app on something that is not Vercel or Netlify.

My employer is PHP and SQL all the way. I finally convinced them to let me build a little internal web app using SvelteKit as a proof of concept.

It is not a static site and requires some server side stuff, and I just don't know where to go. I have a dedicated Ubuntu server with full access to do whatever I need to do, but I've not been able to find any good resources on how to deploy an app locally.

That's not the exact word, but not a cloud provider, etcetera. This app is only inside of our firewall. I don't mean the DNS stuff or anything like that, but what do I need on my server to make the app work? I know Node a super hard answer. Yes. So what he's talking about here is you're probably used to just having a PHP server that is probably a LAMP stack, meaning that there's there's Linux running on it. There's an Apache that runs as a web Vercel.

There's MySQL, database installed to Scott your data, and then there's there's PHP already installed. So you essentially need that kind of collection of things, but for a a node stack.

And on an Ubuntu server, you're going to need pretty much Node. Js installed.

You can still use a, like, a server in front of Node. Js because, like, Node. Js can be its own server. Right? But you can also put, like, an Apache or Nginx or or Caddy, in front of that, and you probably don't need need that in this case unless you're doing some, like, weird proxying with multiple apps.

So pretty much grab that Ubuntu Vercel.

You may want to install Docker on it so you can deploy your whole thing as a Docker container.

Otherwise, you just need a way to get that app on your server and then run a start command.

So, basically, what I would do if you have a Ubuntu Vercel is SSH into the box, install Node. Js on that box, and then use Git to to pull down the application, and and then you'll have to run, like, like, probably a build step. And then finally, you run a start command, which is Node. Js will will run the SvelteKit app. So that's the that's the very basics of it.

If you want something a little bit more, like, friendly, like you're used to these nice cloud environments, you probably want COOLIFY. And we have a huge YouTube video from CJ on the Syntax YouTube channel on how to do that.

Yeah. That's my exact recommendations.

You know? I mean, like you said, you're used to just deploying these things to these automatic hosts or whatever.

Any SvelteKit or most modern apps, I I think this is true for Next. JS. I'm not sure how difficult or easy this is because I haven't, Can be deployed as a straight up Node app.

They can be deployed as a straight up static site. So if you need a full on server, you need the server side code, just make it a Node app with the, Node adapter and host it anywhere you want to host Node sites and same thing with static if you don't need a back end you don't need a server turn it into a static site and host it for free on something like Netlify, Cloudflare Pages, even Cloudflare Pages for server side stuff.

Honestly, I end up hosting most of my apps on Cloudflare Pages or Coolify. I would say a 100% of them these days. So, that's what I do. Yeah.

But he doesn't want to do that because I know why. Internally.

Yeah. So, yeah, yeah, if you want to make a note at. Route, you'll have an easier way because COOLIFY can also do the whole build step and whatnot.

But at the at the very basics, you can simply just SSH, git pull, npm install, npm run build, and then npm run start, and, that thing will be up and running. You just have to do that every single time you make a change Yes. Which is why people like these cloud environments.

Yeah. Yeah. Another reason why Coolify fills that void of that experience with having it on your own server.

Next question here from a truth seeker. I'm finding it increasingly difficult to find correct information online.

Opinions are stated as facts. If I do research online, I'll come away with the conclusion that React is a horrible choice for a project, and why would you ever use it? But in reality, it's the most widely used front end technology with good support, community, and stability.

But probably half the audience is thinking, Node, that's true. Yeah. Yeah.

Yeah.

For years, I've heard and read online that OPP, object oriented programming, is bad and functional programming is superior. I've had multiple dev jobs in both big and small companies. All of them used object oriented coding, and the software JS running fine. What gives? Why is reality not reflected online? Where can I get the reality? Sorry if I sound sour, but coming off a long journey with Rust and WASM being the answer to the front end only to find out that WASM can't even interact with the Dom without significant overhead. It's the same exact thing with the news and politics, but we don't have to get into that. LOL.

Yes. Truthseeker. Yeah. Hey, man. You're right. You're you're so right. And here's why. Let me tell you. Yeah. Let me tell you exactly why.

Because opinions stated very confidently is how you get clicks. It that you just state that opinion, this is the only way to do it. This is what you gotta do.

And, man, let me tell you. People just share that. They either hate share it or they love share it, and they click on it and everybody gets the Tolinski. And then, you know, next thing you know that you cannot have an opinion, that varies at all from what 1 person on some specific channel or anything said as being the fact, the way you gotta do it. But let me tell you. Here's where you get the truth.

You get the truth from your coworkers. You get the truth from, the people that you work with, that you trust their opinions. You get the the truth from straight up experience.

Like, when I'm looking for stuff, I'm not looking for who said what is good. That never crosses my mind, unless it's me. If I said it's good, then you should listen to that because I'm me. But, specifically, I what I'm looking for is the answers to the questions that I have.

And if somebody says something is always universally better than something else, unless it's like a straight up consensus, then just just ignore it as clickbait because it's it's almost never the case. Is React terrible? No. Absolutely not. If somebody says React's terrible, then, they're lying to you to get clicks. That says yeah. Or it says more about their own skill set. Totally. Because it's not terrible. It's fine. I don't even use it. And I'm gonna I, you know, I'd stick my neck out for React. It's a great you know, a lot of people use them like React.

That said, I I think what you're getting at JS in a problem with, like, clickbait, which has just only gotten worse and worse and worse.

We're we're feeding these algorithms and the only way to do that is to give into the the clickbait so I I would say don't trust those types of opinions and I would be skeptical if you're reading too many of those opinions from any particular individual because that might indicate that that individual is just saying things to get you hyped up or riled up. So and I'm not I'm not mentioning or calling anybody out specifically here. I'm just saying in general.

I think that's a a good way that people like to put themselves out there JS to hold these really strong opinions. But you'll you might notice that some of those opinions are only held for a week or 2 or a week or 2 before they're like, oh, no. Wait. This actual thing is the actual thing. Oh, no. Wait. This thing is the actual thing. It's like, alright. Alright. Which one? So yeah. No. You're right. Everything has trade offs. There's trade offs in everything. Make yourselves aware of the trade offs. Learn the, intricacies there. Make informed decisions for yourself. But don't ever listen to something that x Wes good or bad because it's not that black and white. Everything depends

on your situation, and everything is good and could work for different situations.

But, unfortunately, that is not what people want to hear, especially, like, when you're when you're young and impressionable or you are unsure of a specific area.

People just want to be told with opinion that something is and people love advice. I I love advice myself. You know? And people even ask us as well. They're like, I wish you were a little bit more opinionated about some of your decisions because often often our answers are, well, it depends, but here's kinda how you can configure that that thing out. You know? So, yeah, I I think that's just part of growing as a developer is the more the more I get into my career and the better developer I become, the more I realize, oh, there are a lot of people in different situations that have different needs, and some things work great for other people and and some things otherwise don't. I'll just end this as I saying, like, if you do find people who are are doing that, because often they are not the biggest creators out there, then certainly send them a message and and and support them because that's the type of stuff we need to see.

Word. Yes.

Scott Bolan says, I have a friend who made a huge investment mistake by getting an app build.

He spent years in the industry, identified a big gap, and come up with a great idea, but not being technical at it. He's reached out to an agency to have it built. I'm a senior react dev who could have handled it, but he didn't want to be a pain in asking me, so he never reached out. The issue is he's now spent $120,000 of his own money to have it built, and it's nearly a year beyond when it was supposed to be launched, and he still hasn't seen a fully working application. Finally, I got to see the current app, and it's very bleak, very poorly designed, no polish, most basic workflows.

Auth works half the time. The list goes on. Mhmm. I was able to look at the code base, and it's just bad. Clearly built by someone very junior. Turns out they outsourced it, and it's been built by 1 or 2 overseas dev. No in house no in house developers, just 1 PM. How would you suggest breaking it to him that he's effectively being ripped off? Yeah. Man, this is so common. You actually see this quite a bit where people have these, like, dev agencies, and they just get as much possible work as they possibly can. I get emails like this all the time. We're looking for work. We're looking for work. And if you do any hint of research into it, you realize these are all fake accounts, and somebody is just farming out all of this work to other people. So that's part of it. And I think that the other thing is that having an idea for an app is such a small part of actually being successful in business because, yeah, you have a really great idea in an industry, but you're not gonna have any success unless you also have skills in terms of, like, why did you give somebody $120,000 to build something when you haven't seen any part of it? Right? Like, did you not have contracts in place? Do you not have Tracking. Management? We're gonna get to this point. I'm gonna pay you this much. And, unfortunately, people get taken advantage of, when they don't have somebody who can let that's why people get, like, technical cofounders. You know? You you have an idea, but you also need somebody that knows how to navigate the ropes and figure out how all this stuff works. So I would certainly suggest telling him that, like, you might have just got ripped off, see what they can do to get any of that money back. It depends on what your contracts look like.

It's going to be a bit of a bummer, but I also probably would recommend not also offering to do it yourself.

I get friends all the time ask me if I will help them build stuff, and I I never say yes because that seems like a great way to ruin a friendship, because you look at these things a year and a half later, and nothing ever panned out. You know?

Yeah. It it's Node only a great way to ruin a friendship, but it's also, like, a great way to burn all of your time. You know? So many of these things, especially, like, messes messes take a lot longer to clean up than you might expect. So Mhmm. Tough situation to be in, but I think you nailed the answer, Wes. So yeah. I don't I don't have anything extra to add to that.

I will say that talking about AI, this is why regular people want AI. Yes.

And this is why regular people use use Wix and stuff now because they're they're sick of having to wait 2 years and spend a $120 just to get an idea out.

And I think that these will soon be a thing of the past because you can get something up and running that is a very basic proof of concept with very little coding things via AI generation, no code, low code platforms, and whatnot. And, certainly, those are not the long term solution for building a business, but I would have hoped. And I see a lot of people now not going the route of finding a developer to build their out their idea, but you can just go prompt your way to make a little proof of concept app and, try things out. And if you get a little bit of traction, you get a little bit of customers, then you can start, going down the route of finding somebody you trust.

Cool. Well, that's it. Thank you so much for all of your questions. There were some really good ones and, honestly, a lot of really good ones we couldn't get into in this episode. So if you wanna leave your question, you think you have something really exciting for us to answer or just something interesting or maybe you just wanna give us some feedback, leave a question in the the form. And, hopefully, we have that new form up by the time you do so you don't have to,

go to that Google Form and, you know, shake your head at us for us having that for 1 month. You don't have to go to it, but, yeah, it looks like looks like long have we had that form now? I mean, it's 2017. 5 or 6 years. Yeah. Well, hold on. We can go. Let let's take a look.

I mean, we created that, like, right away, so it it feels like

it's probably been here. The first question Almost 10 years. Submitted was January 24, 2018.

2018.

Oh, wow. What was the question? Was it good? Oh, yeah. That's that's a good question.

What were some of the struggles you had early in your coding journey, and how did you overcome them? Nice.

Thank you. Yeah. It's it's funny. We should go back to some of the, the very early lots of JWT questions in the early days, lots of React questions.

It's kinda funny to watch the the trends of questions come and go over the years.

Yeah. I wonder when the, first question with the word AI came in. So That's a good question. Let's see.

2019.

Please do an episode on what's the deal with ML and AI. How is it going to help web development? Man, Avanish, you were way ahead of the game, brother. You didn't even answer that one.

Yeah.

Yeah. Crazy. Cool. Alright. Well, let's get into the show where we talk about sick picks and shameless plugs. These are things that we both warp liking right now as well as things that we want to share with you. I have a sick pick for you, Wes. I don't know about you, but my wife and I talk all the time about how awful Pinterest is and how it's shocking that no one has come out with a better Pinterest yet. Like, come on. It's it's not good and I gotta say I found this app. Saw some people chatting about it on Blue Sky actually, but it's my mind and it's very good.

There is a pricing, but don't let that scare you because when you look at, like, what you actually get for the pricing, it's like a bunch of extraneous stuff like you're helping development.

And, I'm maybe, like, an extra AI tool or something here and there. I tried this. Yeah. Yeah. I had asked on,

I asked on the podcast, like, a year ago, like, what's what do I use that's, like, Pinterest like, but for everything? And this is what everybody recommended.

I have been using it, and I really like it. The interface is great. The general flow and vibe of it is great. And, Yeah. I'm I'm, I I've never used anything like this. I'd never really got into Pinterest, but, you know, it's like Mhmm. I gotta have a place to to log some things, to group some things, inspo boards, and stuff. And you know what I'm doing right now? I'm taking screenshots, and I'm thrown into a folder on my desktop that I never look at. So this is much better than that. So check it out, my mind.com.

I found it to be very nice.

Awesome. I'm going to sick pick what I got my daughter for Christmas, and it's a metal detector.

Oh. This thing is so cool. I've always wanted a metal detector because I think, like, you see the people at the beach, and they've got, like, like, chains, and they find coins and whatnot. Lexus.

Yeah. That's just very exciting to me that you can just find stuff in the ground.

So we got my daughter, like, a $100, $120 metal detector.

It's not the most amazing one in the world, but it works really well. I was surprised. So we we took it twice now to the playground, because the ground is frozen in Canada, so you can't dig the you can't dig the ground.

But you you can dig the, like, wood chips at the playground. And every time we've done it, we found, like, a bunch of money, and we found a couple necklaces and some just, like, random paper clips and Mhmm. Ski passes and stuff. And it's it's really fun. So if you want to have, like, a little adventure with your child, I would highly recommend grabbing a, metal detector. I'll link up the one that I got.

Oh, I can dig that.

Oh, that's good.

Scott. I know. It's a silence.

I'll take it. I'll take the silence. That's fun. Yeah. Cool. Well, that's all we got. Shameless plugs. Check out Syntax on YouTube. Wes did a great video on package lock files. He did a great video on Versus Node, speed and performance. CJ has got some stuff that will be out, by the time you listen to this as Wes, and, I'm working on some local first tutorials. I got a crazy story that I'm gonna be ESLint. So, we have a lot of lot of cool stuff, and, it just keeps getting better. So check us out on YouTube at Sanity FM YouTube, Scott, the good old YouTube site. Peace. Peace.