872: Too much AI × Disappointed in Firefox × Planning New Projects × Hard Truths
en
January 29, 2025
TLDR: Discussion about HTML semantics, TypeScript null checks, adapting to AI's impact, best/worst browsers for web development, managing dependency versions with lock files, project planning, deploying SvelteKit apps, navigating online opinions in tech, and best practices for new projects.

In this episode of the podcast, Wes and Scott dive into a variety of topics that are relevant to web developers today, including HTML semantics, TypeScript practices, the growing influence of AI on the industry, browser performances, and project planning strategies. Below is a summary of the key points discussed.
Key Topics Covered
HTML Semantics for E-Commerce
- Choosing the Right Container Elements: The most appropriate elements for a grid of products on an e-commerce site were discussed. Wes recommends using a
<section>
for the product grid with each product as an<article>
, ensuring proper semantic structure. This approach helps in categorizing products meaningfully and improving search engine visibility. - Utilizing JSON-LD: It's also important to utilize structured data, like JSON-LD, to provide search engines with product details such as price and ratings. This can enhance search result appearances with rich snippets.
Handling TypeScript Null Checks
- Common Challenges in TypeScript: A listener’s question about handling null checks in TypeScript highlighted the language's strictness. Wes explains that when attempting to access DOM elements, TypeScript enforces checks to avoid runtime errors. The recommended solutions include using optional chaining or writing conditional if-statements to ensure elements exist before manipulating them. Employing these practices not only conforms to TypeScript requirements but also leads to more robust code.
Adapting to AI’s Influence
- AI in Web Development: As AI continues to gain traction, Wes emphasizes the necessity for developers to adapt rather than resist. He argues that ignoring AI advancements could lead to obsolescence in the field, and instead encourages developers to embrace these technologies as tools to enhance productivity.
- Understanding AI's Potential: The hosts discuss the reality of AI’s rapid evolution and suggest evaluating tools that genuinely enhance work processes, rather than dismissing them based on hype.
Best and Worst Browsers for Developers
- Browser Preferences: A significant portion of the conversation revolves around the pros and cons of various web browsers, with Scott sharing his positive experience using Microsoft Edge over Firefox due to its improved developer tools and performance. They analyze different browsers such as Chrome, Safari, and Arc, weighing their functionalities and suitability for web development tasks.
Managing Dependencies with Lock Files
- Lock Files Explained: The importance of using a lock file (like
package-lock.json
) was discussed. Scott explains how lock files help ensure consistent dependency versions across development and production environments, preventing issues that arise from version discrepancies.
Starting New Projects
- Project Planning Insights: When planning new projects, both hosts stress the importance of having a clear data model and design framework. They share personal approaches such as using starter templates and focusing on required functionality first. Adaptability and evolving code structures over time were highlighted as key to successful project development.
The Reality of Online Tech Opinions
- Navigating Online Information: The hosts touch on the difficulties of discerning valid tech opinions online, noting that confident assertions often overshadow nuanced discussions. They encourage developers to seek information from experienced peers rather than solely relying on popular but potentially misleading opinions.
Final Thoughts
- Caution with App Development: Scott shares a cautionary tale regarding app development investments, emphasizing the importance of due diligence and having skilled technical collaborators. The discussion about poor outsourcing experiences serves as a reminder for careful project planning and execution.
Conclusion
This podcast episode underscores the current trends in web development, highlighting critical discussions about HTML semantics, the role of TypeScript, the impact of AI, and navigating the complexities of navigating online opinions. Wes and Scott provide practical advice for developers looking to adapt to the evolving landscape while maintaining best practices. Whether you're a novice or an experienced developer, the insights shared can enhance your understanding and approach to web development in today's rapidly changing environment.
Was this summary helpful?
Welcome to syntax. Today, we've got a potluck for you, which is you bring the questions. 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 e-commerce store? Finding good opinions online. 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 got in the potluck is when are you going to stop using this janky Google form? Yes. Which we 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 google form is always a failure of your infrastructure it's maybe not a failure what it is it is a uh... it's uh... acknowledgement that my time is more important uh... drop yeah it's lean right yet totally all right
All right, let's get into the first question here from the Ponderor. What's the most appropriate container element for a grid of products on an e-commerce 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. Yes. 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. And a story. Just CSSing a grid around it. You might see this 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. You think about bullet points and whatnot. Oh, well, not for sure. The order is not very important, right? I guess if you are sorting it, but 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, man, the opposite. I'm always asking myself 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 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 listing 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 that 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, 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 sorry, you said you'd wrap that in a section, which I agree with.
Yeah, yeah, yeah, because it is that section of the page is the product listing of things you could throw in a div but sections probably more appropriate mm-hmm
Along with this is make sure you're also throwing JSON LD in there. If you ever go to Google and you search for something and it shows you the rating or the stars or information about a recipe or a product or anything like that, you often wonder, 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 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 website as well. Yeah, totally.
Next question we have from Tim Rinkle. Hi guys, bollocks are great. Thank you. 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's saying,
This is quite a thing if you're using vanilla JavaScript and TypeScript, which I do a lot is 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 null. 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'll say, cannot find out event listener.
He goes on to say that the ways around it is you can put a bang on the end. So my button bang dot an ad 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.
sort of side stepping type script in that case. And then he also says you can add a optional chaining, which is a question mark. So my button question mark dot add event listener. What that will do is it will first make sure that my button exists, 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 an error. So
This is a pain, and this is something that I hear about a lot in TypeScript as people say. This is so much boilerplate for this type of thing. And the answer to that is, yeah, TypeScript often makes you do write a lot more code, not just to make TypeScript happy, but because there are situations where you're gonna run into these actual errors, and TypeScript is finding those possible situations 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'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 mistyped a selector,
Somebody submitted 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 going to know that something is no longer there, right? So if you care about that, then yeah, you should probably do a long form if statement and then throw an error, submit that data to Sentry would be kind of nice making a little helper method for that. Otherwise, the question mark is not a problem at all.
Yeah, I totally agree with that. 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 like without TypeScript. I'm like, oh, yeah, I'm just not even checking things. I'm free wheeling 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 can help you is if you have, let's say you have three 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 where you have checked if that button exists. So it's kind of a pain. And that means you now have to check if that button exists in all three of your functions.
So there's, there's two solutions to that is one, pass the button into that function as an element, um, so that when you call it, you're passing the button as an argument or two, 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, uh, 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 all right next question from anon and this is more of a statement and less of a question 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 says i'm genuinely so fed up with a i can we please get something different already. Anonymous emitter i hate to inform you of this.
But that genie's 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 got to adapt or die here. 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 saying, I don't want to use this garbage stuff, that's going to be hard for you in the future. So in my opinion, you got to get on it. And I'm sorry to hear that it's not going away.
I totally feel and understand this exhaustion that people are having because 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 an AI win and you have to be, we had the Windsor folks on and we're like, hey,
Given that you raised a quarter billion dollars and you need to make this thing work, that's a little caveat. Let's ask this question of if you think it's going to be the next thing. Maybe that's my advice here, is that when people are talking about this AI stuff,
ask yourself, is it somebody who has a vested interest in this type of thing? Because there's a lot of people touting that it's absolutely game changer and it's going to change you and you're going to lose your job. And those people have investors to make happy at the end of the day. But then on the other hand, there's people like Scott and I is
We have zero money tied up in whether AI works or not. 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 keep building websites, the way that we built them for the last 10 years is it's not going to 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 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 I just don't feel like having to reinvent myself one more time. You know, I just want to keep doing the same thing that I'm doing. I think that's, we'll start to see that in the next little bit. Yes, I 100% agree with your answer.
Next question from Dan P. Why do you think 3D never took off? Example 3JS react3fiber. Seems like it could create a cool UX or something unique. This is kind of interesting. Why did 3D never take off? You're starting to see.
little bits of 3D 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 want to 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 3D configurator where you can sort of build it online. And that makes sense for a 3D thing, because you can spin it around, you can zoom in and out, you can kind of get an idea, you can place it
in your space to kind of see what it would look like and 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 laying things out. So I think that it's 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 going to 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 Vision Pro
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 3D tip for web stuff, I sincerely believe this has taken off.
I see websites all the time with 3D, and you might not notice it, you might notice it, whatever. They might just be there in the background. You don't necessarily see our websites that are, I mean, you do, but not everywhere that are.
you know, just completely 3D 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. So yeah, I think 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 agree. Otherwise, it's flash, right? It's hard to make that stuff accessible. It's hard to make that crawlable. If you put everything into a flat JPEG thing, it's hard to get stuff out of it. Yeah, totally. 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 Maxim Heckle's blog, his website.
amazing. It's well worth your time if you're interested in getting inspired by 3D stuff on the web. Sorry, one more thing. A nice little 3D touch is githubuniverse.com. They have these little octacat in their duck. They have all these little animals spread throughout the site. As you scroll, they turn their head. If you go into it and download both the model and the shaders to make them colorful, it's interesting to see how they did it.
So I don't know if you've seen this, but actually Safari has added an element specifically for 3D that I do think, I don't know if the other browsers have it or not. It looks 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 ends up coming here. I know that they probably have vested interest in 3D 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 3JS and have a, 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 3D software and then it will.
You'll have access to it in JavaScript. Yeah, that's it. The model element allows for a website to embed interactive 3D models as conveniently as any other visual media. So, yeah.
Okay, and it looks like dot USDZ or GLB files. Yeah, GLB are currently GLB is 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 model. So it's going to be getting a lot easier for people to just generate quick little assets that they need.
Yeah. When you say AI models, you don't mean AI models. You mean 3D models within AI. Yes. 3D models. We're running out of words. We're running out of words. I know it is very funny. All right. 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 one feed, what we can't do is serve both the audio and the video in one 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 and you got two 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.
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 and Spotify doing more podcasts. But Apple should do something about that because I know a lot of people don't want to listen in video, but they want to subscribe. Some people occasionally you want video. Sometimes you don't. Yeah.
As much 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 Yodo player, and she loves this kid's podcast called Who Smarted.
and the audio only shows them 25 so i wrote a script to download them all and 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 issues like you want video in a while, right? And Spotify has solved that. We can upload the video in 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, like, believe me, we like it when people use the app with the RRSV, because we're not competing with, like, cooking videos on YouTube. But that's just the way that the general public is going.
This is the hard truths episode. 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.
I got, yeah, we all got them. But if you don't want those issues to become GitHub issues, head on over to sentry.io, sign up, use the coupon code at tastytreatallovercaseall1word. And it's actually at sentry.io4 slash syntax. We'll have a link in the show notes.
Man, Century as a product just keeps getting better. You know, 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 going to be little bugs here or there, old browser versions and stuff. And I got to 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 sentry.io forward slash syntax.
Daniel asks, 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 in it. Sometimes lags. Yes, I was so I was Firefox for probably eight years or so. We talked about this on a couple shows ago.
I've been on Microsoft Edge for quite a while now, maybe four 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...
tweak 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, a 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 and get a good one. Plus, there are a handful of other tools in Microsoft Edge that are really nice for web development. They had 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 it, it would do well just because
People love ragging on stuff like Microsoft, so you can say, you know, how to de-Microsoftize 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 going to hit Command T and I'm going to type Riverside and it says switch to this tab because I'm on Riverside right now. Every browser has done that for like 10 years. It says switch to this tab where? What does it mean? It says switch to this tab. So here, let me share my screen with you there, Scott.
But then you got to go over and click on that thing. No. So I've got this rep fitness tab open right now, right? So I'm just going to type rep fitness. Oh, it's a Canadian version. C-A dot rep. OK, there we go. Right there. Hit it. Boom. Nope, that didn't work.
Yeah, it doesn't. And 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 common thing. That's just a little thing for me.
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 two things like always open at the same time. There's like little issues here and there. The profile management inside of Arc is like second to none where I have
You know my column and i just swipe to the left and i'm in a different profile and that profile has its own set of bookmarks and pin tabs and i swipe as another one with its own set of bookmarks and pin tabs like if i have. Several different profiles with that syntax sentry yeah i 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 in the old version with it. And because they're corporate, they'll probably have that forever while the 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. Although the container tabs that Firefox had was the best.
In every other browser, you have to have a different window. If I want to add 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. The Firefox tabs was the best because you could have them all open in one set of tabs. For Microsoft Edge, you got to create an entirely new profile and you got to turn off all the same thing, reinstall all the same extensions to the pane.
I know, that's what Arc does best, that kind of stuff. So, nice little swipe. You know what I can't get behind is, I always want to use Safari, but I just cannot get behind Safari's dev tools. I just, no. They're dead last place for me. I'd rather use Firebug at this point.
Because there are times when you gotta use them, like you're debugging iOS, you know, something on the simulator, or you're connecting your phone to debug something in production, or even on just a device. And you're like, I wish I was not using these dev tools. All right, 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.json? It seems like both of these actions accomplished the same thing, but the lock file is a billion lines long and non-human readable.
M-I-O. I-I-M-O. I-M-O. I-M-O. Pin your dependency versions, run NPM audit often and get ignore lock files west. I'm going to toss this one to you. You can choose to either answer this one or point it to your video.
Yeah, so I just did a video on this question and explained how Sember 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 carrot in there, meaning that you
will get the latest major version. So if you have version 2.0.0 with a carrot 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 those numbers mean the first one is a major version, breaking changes.
Second one 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 carrot or the tilde will only give you the last patch version.
If you remove the Kerat and just give it 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 Penancy tree and lock those versions. So if you install tailwind version 4.0.0, tailwind dependencies still aren't locked, meaning that there's a possibility that what you NPM 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 needed.
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 as well. Some of the security implications that could come along with 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 one from Mark Bozinski. I have two questions. First, when are you going to 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. Just to compare timestamps and push data, or maybe it is better to use some sync engine. So yeah, we explicitly had some
Spooky stories on this year's Halloween episode where somebody tried to build their own sink 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 can talk about that. Yeah. Oh, maybe maybe you can. Let me tell you I don't think of this any conflicts. No, no, no, thank you. So yeah, what do you think? Should should he build his own?
I think there's no problem with building your own if you want a simple sink. The only time that sink 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 yes, 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 and it's like, I call it 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's extremely naive, but it works super well because only one person is ever going to be writing to that specific thing at any given time.
And 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 the same records, and there might be some conflicts there. But if you know that that's not how this is going to be used, then of course you can write your own very naive one as well.
As far as what database, anything, man. I've done it with pocket base. I've done it with Postgres straight up with a drizzle. I've done it with several different things. So you could even have it as a CMS if you want to have it saved to a CMS. Like I said with, I do it with pocket base, which is kind of a pseudo CMS. So I don't think the database matters. Mark, what about if he wants to stick with his existing database? Could he stick zero on top of that?
Only if that existing database is Postgres. So zero is only Postgres. Oh, zero doesn't work with SQLite. You're right, okay. It sounds like it's fairly simple. It probably wouldn't be a big deal to move it. If you do want to stick with SQLite, I would check out either CloudFlare or DeepOne, which has 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 Terso. We had Global Costa on who is the creator of Terso. They have forked SQLite into their lib SQLite. And they're pretty good services as well.
All right, next question from Joe. Hey guys, love the show. Been listening to since episode one. 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 habit app? I.e. 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 have my own starter that I call drop-in. That's what I use. And actually, when I built 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. It was like, oh, I want to use these on other projects. So I'll have them. You know, no, I have my own set of libraries for often 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 like two nights ago 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 moving that all into an object lookup within each of those as a set as the property, and it got way faster. But it wasn't anything like that when I first wrote it. And so 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 clear experience in doing that exact thing. Your evolution of how you think about things might change. I've actually found a lot of value in AI tools here where 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?
I've gotten good luck with results there. That doesn't mean you're always going to get good luck, but I've gotten good luck in terms of at least giving me more context than I would have had outside of my own understanding. I think you should take the time to plan things. I think you should think about it, especially if this is something you want to keep for a little while.
CSS wise, you know, a lot of times we're even like 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 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 want to use for like a framework, you know? Like you probably know what library you want to use, you know, and it doesn't want to spell to react or view. Do you want to 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 or because it's often a nice time to try something new 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 in my entire dev career. Oh, thank you, Nick, the new guy. I am struggling to understand how to deploy a felt kit app on something that is not versatile or Netlify. My employer is PHP and SQL all the way. I finally convince them.
So let me build a little internal web app using felt kit 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 a bunch to 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, etc. 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 it's 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 Linux running on it. There's an Apache that runs as a web server. There's MySQL database installed to store your data, and then there's PHP already installed. So you essentially need that
kind of collection of things, but for a Node stack. And on an Ubuntu server, you're going to need pretty much Node.js installed. You can still use a server in front of Node.js, because Node.js can be its own server, right? But you can also put an Apache or Nginx or Caddy in front of that.
and you probably don't need that in this case unless you're doing some weird proxying with multiple apps. So pretty much. Grab that Ubuntu server. 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 server is SSH into the box, install Node.js on that box, and then use Git to pull down the application. And then you'll have to run like a
Like probably a build step. And then finally, you run a start command, which is no JS will run this felt kit app. So that's the very basics of it. If you want something a little bit more 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. Like you said, you're used to just deploying these things to these automatic hosts or whatever.
Any felt kit or most modern apps, I think this is true for Next.js. I'm not sure how difficult or easiest 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.
Host it anywhere you want to host node sites and same thing with static if you don't need a backend You don't need a server turn it into a static site and hosted 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 hundred percent of them these days. So that's what I do. Yep
but he doesn't want to do that because I know why internally. Yeah. Yeah. Yeah. If you want to make a note out, I wrote you'll have an easier way because cool if I can also do the whole build step and whatnot, but at the at the very basics, you can simply just SSH, get 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 Truthseeker. 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.
probably half the audience is thinking, no, that's true. 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 is 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, truth seeker. Yeah. Hey, man, you're right. You're so right. And here's why. Let me tell you, let me tell you exactly why.
because opinions stated very confidently is how you get clicks. 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 links and then, you know,
next thing you know that you cannot have an opinion that varies at all from what one person on some specific channel or anything said as being the fact the way you got to 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 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, 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 ignore it as clickbait because 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 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 you know, I would stick my neck out of her react It's a great you know a lot of people using like react that said I think what you're getting at is in a problem with like
clickbait, which has just only gotten worse and worse and worse. We're feeding these algorithms. And the only way to do that is to give into the clickbait. So 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. 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 good way that people like to put themselves out there is to hold these really strong opinions. But you might notice that some of those opinions are only held for a week or two or a week or two 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, all right, all right, 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 was 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 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 love advice myself. And people even ask us this while they're like, I wish you were a little bit more opinionated about some of your decisions.
Often, often our answers are, well, it depends, but here's kind of how you can configure that thing out, you know? So, yeah, I think that's just part of growing as a developer. Is the more, the more I get into my career and the better a 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 some things otherwise don't.
I'll just end that since I'm saying like if you do find people who are doing that because often they are not the biggest creators out there then certainly send a message and support them because that's the type of stuff we need to see.
Scott Boland says, I have a friend who made a huge investment mistake by getting an app built. 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 a built. I'm a senior reactive 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. I was able to look at the codebase and it's just bad, clearly built by someone very junior, turns out they outsourced it and it's been pulled by one or two overseas dev, no in-house developers, just 1pm. 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.
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 going to 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? Did you not have contracts in place? Do you not have project management? We're going to get to this point. I'm going to pay you this much. Unfortunately, people get taken advantage of when they don't have
somebody who can, that's why people get like technical co-founders, you know? 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 getting 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 never say yes because it seems like a great way to ruin a friendship because you look at these things a year and a half later nothing ever panned out you know.
Yeah, it's not only a great way to ruin a friendship, but it's also like a great way to burn all of your time. So many of these things, especially like messes, messes take a lot longer to clean up than you might expect. So tough situation to be in, but I think you nailed the answer, Wes. So yeah, I don't have anything extra to add to that.
I will say that talking about AI, this is why regular people want AI. And this is why regular people use wicks and stuff now because they're sick of having to wait two years and spend 120 grand 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, and 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 want to leave your question, you think you have something really exciting for us to answer or just something interesting, or maybe you just want to give us some feedback, leave a question in 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 shake your head at us for us having that. It's embedded. You don't have to go to it. But yeah, it looks like
How long have we had that for now? I mean, 2017, five or six years. Yeah. Well, hold on, we can go. Let's check a look. I mean, we created that like right away. So it feels like it's probably been here. The first question almost 10 years was January 24, 2018, 2018. Oh, wow. What was the question? Was it good? Oh, yeah, 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 funny. We should go back to some of the very early lots of JWT questions in the early days. Lots of React questions. It's kind of funny to watch 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, a varnish, you were way ahead of the game, brother. We didn't even answer that one. Yeah.
Yeah, crazy. Cool. All right, well, let's get into the part of the show where we talk about sick pics and shameless plugs. These are things that we both were 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 not good.
I got to say, I found this app. I 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 what you actually get for the pricing, it's a bunch of extraneous stuff like you're helping development. Maybe like an extra AI tool or something here and there. I tried this. I had asked on
I asked on the podcast like a year ago, 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've never used anything like this. I'd never really got into Pinterest, but you know, it's like,
I've got to have a place to log some things, to group some things, inspo boards and stuff. 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 it's just much better than that. So check it out. Mymind.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. 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 chains and they find coins and whatnot.
Yeah, this is very exciting to me that you can just find stuff in the ground. So we got my daughter like a hundred dollar, hundred and twenty dollar metal detector. It's not the most amazing one in the world, but it works really well. I was surprised. So 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 can dig the wood chips at the playground. Every time we've done it, we found a bunch of money and we found a couple necklaces and some random paper clips and ski passes and stuff. It's really fun. If you want to have a little venture with your child, I would highly recommend grabbing a metal detector. I'll link up the one that I got. Wow, I can dig that.
Oh, that's good. 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. West did a great video on package lock files. He did a great video on VS code speed and performance. CJ has got some stuff that will be out by the time you listen to this as well.
I'm working on some local first tutorials. I got a crazy story that I'm going to be telling. So we have a lot of cool stuff and it just keeps getting better. So check us out on YouTube at Syntax FM YouTube.com, the good old YouTube site. Peace.
Was this transcript helpful?
Recent Episodes
874: Fast Apps - Easy Perf Wins

Syntax - Tasty Web Development Treats
Is your app feeling sluggish? Scott and Wes break down the biggest performance bottlenecks—like bloated assets, slow databases, and waterfall requests—and share easy wins to make your site feel lightning fast. From smarter caching to preloading tricks, these tips will have your app zipping along in no time! Show Notes 00:00 Welcome to Syntax! 00:58 Brought to you by Sentry.io. 02:01 What makes apps slow? 02:10 Loading too much. 03:26 Slow database work. 04:04 Slow server. 04:54 Waterfall requests. 06:34 How do I know what is slow? 06:45 Web vitals. 12:50 Streaming. 14:05 Network tab. 18:18 Performance tab. 22:53 Caching. 22:59 Client-side caching. 23:38 Server-side caching. Valkey.io. Redis.io. 25:40 Local data. 26:11 Gzip. 29:23 CDN. 30:57 Images. Cloudinary. Cloudflare Images. Imgix. Vercel Images. 31:08 Serving. 34:16 Compressing. 35:06 Ship fewer images. 35:50 Loading JS. Async vs Defer Attributes. 37:00 CSS. 38:28 Preloading & Prefetch. 39:40 Preloading on hover. 41:44 Ship less code. 43:49 Icons Nucleo App. 47:01 Fonts Tolin.ski. 51:13 Sick Picks + Shameless Plugs. Sick Picks Scott: Skywalkers on Netflix. Wes: Oxo Swivel Peeler. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
February 05, 2025
873: Standard Schema: The Universal JavaScript Data Interface

Syntax - Tasty Web Development Treats
Wes and Scott talk about the standard schema for data validation, a collective effort by various library authors to create a unified interface. They discuss the benefits, how it works, and its impact on developers and libraries. Show Notes 00:00 Welcome to Syntax! 01:24 Brought to you by Sentry.io 02:44 What is Standard Schema and how does it work? Standard Schema Spec Fabian Hiller Valibot David Blass ArkType Colin McDonnell Zod 06:00 Benefits of Standard Schema 08:54 Implementation and usage 11:25 Is this primarily for end users or library authors? Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
February 03, 2025
871: Coding Agents Cursor + Windsurf Tips

Syntax - Tasty Web Development Treats
Scott and Wes discuss AI-powered coding agents like Cursor and Windsurf on Syntax, covering modes such as Chat, Composer, Agent, and Inline Chat, offering practical tips to use with JavaScript Set Methods Demo, Fire Dispatch Data, Refactoring, and more.
January 27, 2025
870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding

Syntax - Tasty Web Development Treats
Wes, Scott, Kevin Hou, and Varun Mohan discuss the evolving role of AI in coding, its potential impact on future software development, challenges with implementing AI in Integrated Development Environments (IDEs), and their work at Windsurf.
January 22, 2025

Ask this episodeAI Anything

Hi! You're chatting with Syntax - Tasty Web Development Treats AI.
I can answer your questions from this episode and play episode clips relevant to your question.
You can ask a direct question or get started with below questions -
What was the main topic of the podcast episode?
Summarise the key points discussed in the episode?
Were there any notable quotes or insights from the speakers?
Which popular books were mentioned in this episode?
Were there any points particularly controversial or thought-provoking discussed in the episode?
Were any current events or trending topics addressed in the episode?
Sign In to save message history