Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More!

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax. This is the podcast with the tastiest web development treats. Today, we got another potluck for you. If rid You've got a question you'd like to submit to the potluck, that is where we answer your questions. Go to syntax.fm. Top right hand corner, there's a button that says, Submit a poll question. Go ahead and submit a poll question up there. Today, we are sponsored by 3 awesome companies. First 1 is FreshBooks cloud accounting. Second 1 is re Century, which is error exception and performance tracking. And the third one is Vonage. They have APIs for SMS, video voice, And verification with libraries and code snippets in JavaScript, some pretty cool stuff,

over at Vonage. So welcome. My name is Wes Bos. I'm a developer from Canada. And with me as always is Scott Talinski. How are you doing today, Scott? Hey. I'm doing good, man. I'm just doing good. Rid Just doing good. That's good. Yeah. It is good. Now things are crazy around the Teleski house. You know, we got 2 kids running around. We got dogs barking. We got all this stuff happening, And yet somehow, every week, I show up, I get my work done, and I'm bringing it rid 20 hours a week. Who cares? I'm doing it, man. So just trying to feel the positivity and and get moving. That's good. I finally just launched my, advanced React course, and kids are back to school. So this is like a Monday

where I'm just, like, Back at it, and I'm feeling good as well.

This is the 1st Monday. I don't have a kid in my office for the entire morning in, like, 2 months, so I'm so so rid

We, we contacted our, what's it called, our day care, and we're like Yeah. When is the soonest we can get the kid? Courtney just got her vaccine.

I don't have 1 yet, but just, like, please, let's get the kids back in the daycare because I am losing it.

Rid Yeah. Yeah, man. That's you guys been at it for, like, what, almost a year now? Yeah. Over a year.

No daycare. It's been very, very hard. Alright. Let's get into the 1st question here from Ollie. Sometimes in Versus Code, when IntelliSense tells us the TS type script type of a variable, Just gives me the name of the type rather than the type that is defined.

It's annoying for objects as I want to know what the Fields contained in it. How do you handle this? Is there some Versus code magic to make the full type definition show, or is there some way to bring up the definition of the dot d dot file. So, yeah, this is a good great question is when you hover over a variable, it will tell you the name of the type, like user or person or company or string or whatever, and it like, let's say it's a user, and you have a name and an age on there. You wanna be able to see, okay, what are the possible values that I can access inside of this object.

So hovering over it doesn't work because rid. Types could be massive, and you you can't really put that in a in a tooltip just because it it goes away when you move it. Right? Rid So the way that you can do this is a couple different ways, and I think this is an unused feature of Versus Code is peak the peak. So on Versus Code, when you peak something, it just opens up another little editor right underneath the current line of code that you are writing on. So if you can, you can peak errors.

But in our case, you can peak a definition, which is where that variable was created, Or you can peek the type definition, which is the actual the typings for that, and it knows where in your project those things are defined. So You can hit the keyboard shortcut just to quickly peek those things, and it will open it up right underneath it and show you what's available.

But quite honestly, I use that rid Pretty often, but more often, I use just ctrl space, and that just opens up autocomplete

and shows you what the available fields are And methods are on that type. You know what? I I really like to do is use go to type definition. Yeah. Recently, I Maps my hyper key. We've talked about hyper in the past, which is basically just remapping control, option, command, shift

rid To Caps Lock's, I use my hyper t

as a go to type definition.

So if I do hyper t, It takes me to the actual definition file, and that to me allows me to see everything.

So just that quick little keyboard shortcut rid Has been very powerful for me, but that's what I do personally rather than peeking or whatever. You just go right to the file. That's also kinda nice because you can rid Just keep it open in another tab. Or if you have multiple, panes open, you can just have it open and just glance over it really quickly.

So that's another guy. So there's 4 ways to solve that issue. None of them will show up in a tooltip because it's it they're often way too big to show up in a And a twill tip like that. Yeah. Yeah.

Next question is from Kumar. Hello. I have dated a bunch of tech podcast, but rid Finally married to the Syntax podcast. Thank you, Kumar.

This is this is a marriage material. Your voices complement each other, and I sincerely enjoy the ups and downs in your voices while you explain and learn at the same time. Thank you, Kumar. There is so much To learn and remember in software engineering, and we work on different projects that use different text stacks. I don't remember most of the concepts When I leave a certain library, Angular, React, Data Structures, Java, whatever, for a month, do you guys have any techniques you're looking at cheat sheets at least once a week so that the concepts stay a little fresh when you come back to it and won't be like working in a strange new world. Many thanks to you guys for being so genuine and spreading the knowledge. You never try sound like you're trying to sell anything. Hey. And, although we are thanks, Kumar. We're we are trying to sell stuff here. We are we are trying to sell courses. We're trying we're just trying to sell rid all the time, but the the difference is I think we truly love and believe everything or we made it and truly love and believe in it. So glad to hear that it doesn't come across as too silly. Rid So thank you, Kumar. So the question is, basically, I work in things, and then I move on to something else for whatever reason, projects change, whatever, and then I come back to that specific environment or that specific type of code, and I don't necessarily remember everything. What do we do for that? Okay. I don't use cheat sheets. I don't know why. They've never really benefited me. I remember, like, when I first started learning, I had, like, oh, I'll burnt out the Git Cheat sheet. I'll just have it sitting here. Yeah. You already have, like, a wallpaper or something like that. I'll have a CSS cheat sheet. Yeah. You have it all right here, and maybe you have it on your desk rid Somewhere. No. And and those things to me would eventually just get tea stained. They'd get crumpled up, and I would never ever use them. I don't know why. It's rid It's never been a thing for me, but cheat sheets can be a good thing for some people. I I think that is a is a way that some people really connect well to it. And if that's you, then go right ahead. For me, here's what I like to do. If I'm working in a specific environment, let's say I'm working in an Angular One project. Right? Something I haven't touched in a very long time. You know what I'm gonna do? I'm going to when I'm initially working on an Angular one working on an Angular one project or initially working on anything, I'm going to star and keep track of reposts that show good practices for everything.

The more involved in code I get, the more I find that reading code and being good at reading code rid. Is way more valuable than having a cheat sheet or or anything like that. Because if you have a good example of what rid. Properly used patterns in the environment should be for whatever it is, fetching data, showing data, animations, those types of things. If you have the proper explanation sitting there in straight up code, then you can just pull open that repo at any given time, Look at their code and say, alright. This is how things are supposed to be done. This is how I I I should do it as well, and it should come back to you, like, riding a bike, the patterns, and whatever.

That's me personally.

I like to keep track of repos and areas of my code that are

Very well executed and use those as a guide instead of maybe like a cheat sheet. It could be it it essentially is a cheat sheet, but it's like a rid A cheat code base kind of thing. I go into old projects all the time. Like, the other day, I went into a, like, a React repo that had Create class in it. Mhmm. And, like, I haven't written Create class in, what, like, probably 3 or 4 years. And I couldn't do it from scratch, I don't think. Yeah. I it came right back to me. The it's amazing how quickly it does come back to you after not having done it For so long, sometimes you have to pull up docs, and there's a problem there where sometimes the old docs aren't available.

And when you're trying to work rid With a code base that is using an older version of something, that could be a little bit frustrating. But other than it usually just comes back to me. I'll usually write lots and lots of comments where I know something will be complicated to me in the future. Sometimes I look at code. I'm like, alright. This is a weird way to do it, and I say, rid Better write future self a bunch of comments so we know exactly what's happening there. Mhmm. And then past that, for things that are not rid explainable via code or via code comments.

I'll often make a markdown file as to how to do something. Rid Like, I have a huge markdown file that shows me how to provision a new domain name as a cell certificate. Rid The whole process, setting up NGINX config files, whenever I add a new domain name to my website, I have to do that that whole song and dance. And rid. It's like something like 20 different random steps, and I never remember them. And now I have it all written in,

markdown file. Like, one rid. Better than that would be to just, like, automate that entire process with code, but it's not worth it because I don't do it frequently rid Enough. So I just enough. Just a little bit of markdown notes, in in my case, are are that good. Yeah. For concepts when I'm learning concepts like high level non code concepts, I do take a lot of notes I use, like, link notes. There's an application called Obsidian, but it doesn't matter what you use, just like linking notes for, like, high level things. For instance, when I'm Actively learning something. Let's say video codex. What I'll do is I'll listen to several episodes of YouTube channels or podcasts or read through docs or whatever. And as I'm doing that, I'll make headers and and create notes about things. But, typically, if it's syntax related, I not the podcast. If it's syntax Code related. I'm gonna be looking at code to help me fix my issues or remember.

Next question we have here is from Noah.

How do you feel about Vercel versus Netlify pros and cons? Thanks.

Oh, this is a good question. So we should say Netlify has sponsored us in the past.

Rid they're not currently a sponsor, so we could say whatever we want. And Vericel hasn't sponsored no. Just joking. No. No. We can talk about these rid I mean, no no matter if they sponsor us or not, I think that's one thing that Scott and I hold true to this podcast.

The difference between the 2. So Netlify initially started out as a, like, a static site host. And then, Verstel initially started out as, like, a node and other types of language host. And they've

rid Since migrated and then now they they do overlap a little bit,

Netlify now offers serverless functions. They offer background functions, which is something that Vercel does not offer. I think they also offer server side rendering for next to applications.

Yeah. One really cool thing, yeah, rid is that they Netlify has figured out how to run Next. Js as serverless functions, which is not something that you can do on any other platform except I don't know. I I've heard people be able to get it to working on serverless platform. I'm using quotes here because that's the name of the the framework.

So how do you feel about them? They're both really, really good. Netlify seems to, layer on a lot more services on top. So Netlify has, stats and contact forms and AB testing and all of that stuff. So they're more I think they're more targeting towards rid The type of person who wants a a lot of that functionality, and Vercel is more, I think, targeting just like the people who aren't really slick DevOps experience, rid Oh, and whatnot. So which one do I like? I like them both a whole lot. There's other other ones out there that, what begin what's the one that you're hosting your website on? Render.

Render.com?

I got nothing but good things to say about render.

Yeah. So there's there's a lot of really good, use cases in that sort of space.

I'm currently hosting my own website on Netlify, and then I have projects running on Vercel, so I don't know. It's hard for me to pick which one's better. I do really like rid The stats that Netlify gives me, though.

Yeah. Netlify has the, analytics game really nailed down. For me, I don't even see these things as being the same thing because for me, Vercel, since they moved on from, like, the straight up node hosting, To me, Vercel is just Next. Js, the host. Right? You wanna host Next. Js? You should probably do it on Vercel. Yeah. You could do it on Netlify if you Have all your stuff there, or you you like Netlify or whatever already.

But if you're running Next. Js, it seems like you're gonna use Vercel. Vercel is Next. Js the host. Rid. Yeah. The syntax runs on Vercel. We should say that as well. Yeah. Yeah. Netlify to me is any platform that you need to front end code and need to augment it. Now Granted you can do Next. Js with serverless functions, and I don't know what their their story in the future is gonna be for other platforms like SvelteKit. Right? Perhaps. Is SvelteKit going to be supported in a server side render sort of way with Netlify? Who knows? Could be.

So to me, they're not really the same thing. I'm posting a lot of stuff on Netlify, rid. I like my slides or even scottwinski.com is hosted on Netlify. If I'm doing anything with Next. Js, I'm gonna put it on. I don't really see them as the same thing or related. It was so funny when I was, like, asking for hosting recommendations for level up. Right. We are gonna be moving off of Meteor Galaxy, and the options were, let's say, Heroku, Digital Ocean.

You know, you could do a VPS or something like that. But there's also the option of maybe doing it on Netlify.

We ended up going with render, obviously, but I had just about a thousand people tell me you should host it on Vercel.

It can't. It can't be hosted on there. I don't know if people just think that you can host anything on there or if that everybody's using Next. Js, but You can. It it's not necessarily the same thing. That said, it's a fantastic host. They're both fantastic hosts, and I would also say rid Throw render.com

as well as DigitalOcean's app platform and then begin onto that list of of hosts that you should be checking out. Rid. What was the issue with you not being able to host on Vercel? Because, like, I had the same issue, and it was that Vercel doesn't host node apps anymore. Yep. That's it. Yeah. That like, if it's small enough and you use the right packages, you can stick an entire node app into a serverless function.

But if you want a long running traditional node application, that's not what they're for. They used to do that. They used to host it, but now they're moving they moved entirely. Same thing with Begin. They are entirely focused on doing serverless functions.

And if you have an app like my course Platform, which is a long running node application, then I need to go for something like DigitalOcean or something like that. So, yeah, that's that's a good thing to think of. The reason why I went with render is because they do

it's basically the same as Heroku. Right? You could do traditional node apps on there, But it's like a a fourth of the price, and the automatic SSL generation, it's basically like Netlify but for node stuff. It's very, very good. One more thing we should say is, when you're evaluating

these platforms, think if you want background functions, which are Functions that can be triggered and run without hitting an API endpoint directly Mhmm.

That's Something that a lot of these hosts don't offer. Netlify just rolled them out. I'm sure Vercel will roll them out eventually. Render has them. Same thing with Cron Jobs, I don't think Netlify or Vercel support them. Render has them. Schedule jobs. Yeah. Begin does. Render has them. Gonna say. I'm not turning into the guy again. I'm sorry, everybody. Rid No. That that's awesome because, like, it's really frustrating when you build something, and then you just assume that it's all there. Rid. And then you go, ah, shoot. You can't do you can't do this type of thing, and you have to think ahead of time if you need it. Like, the syntax transcript The thing that I wrote is every couple hours, it runs and scrapes new transcripts from Otter to AI, and that needs to just run rid every however many seconds. So you need something that supports that. And then there's also, like, edge functions or edge handlers, which is more like, CloudFlare Workers, where you sort of sit in front of a request, and you can intercept a request and rid Either return your new data or massage the existing data or do an AB test, something like that. Netlify has that as well. So those are a couple other things to think about

If you need those in your app or not. Totally. Man, I feel like it's almost time for another host rundown. I feel like we just did this, and I I I did so much evaluating of this stuff Before we pick darts, so I I have a lot to say. Put it on the calendar. Put it on the calendar.

You know what, Wes? We should put on the calendar would be a thing to send invoices and then check invoices. But guess what? You don't have to the check invoices on your calendar because one of our sponsors does all that stuff for you automatically, and I'm talking about FreshBooks. If you send an invoice, rid. It's gonna automatically remind your customers about it. So, Wes, do you wanna talk a little bit about your experience with FreshBooks?

Yes. I use FreshBooks for all of my billing rid And all of my invoice tracking, and it's awesome because I just need to send out an invoice. You can turn on the automatic payment reminders, Just super nice, so you don't have to, like, spend time going through your invoices and then following up with clients. It will automatically send those out for you. Couple times a year, I need to just round up all of my expenses. You can import all those expenses directly from your bank account or your credit card, and it is awesome. One stop rid for doing all of the counting in your business. Go to freshbooks.comforward/syntax,

and make sure you use syntax. And how did you hear about a section? Sick. Rid Cool. Alright. Let's get into the next question, which is from Anan.

Anan says, should a model name be Singular or plural? This one is a difficult question for me. So Anant's talking about you. You have a model, which would be basically a structure of data. Let's say it is let's pick a good one. It's gonna be I like to call it the schema. The schema. Yeah. The schema. So let's say we had a rid A model that was handsome podcast hosts.

And would that be handsome podcast hosts or handsome podcast host? And then you'd have multiple of them. Rid That is a tough question. My understanding of it in fact, let me check my own tutorial.

So I have tutorial re Schema that's non pluralized and tutorial schema is exported as tutorial.

So if we do any sort of find, it's tutorial.find.

No. It's tutorials.find.

Is that correct? Oh, interesting.

So I have In my code base, it is pluralized, tutorials.

Tutorials.

Yeah. It is pluralized in my code base for when we do schemas and models.

Let me check to make sure that's the same in our GraphQL. Man, this is one of those if it sounds like mine's like non organized or standard, It is because that's accurate. In GraphQL, my model is singular. So our API has the model singular, and our database has the model pluralized. And for some reason, that's never bothered me, but I know that's something that is, difficult. I don't have a good answer. Anant.

I very rarely rid Come down hard on this type of thing, but I'm gonna say your schema should always be singular because a schema defines or your model defines rid How one of those pieces of data looks like, 1 customer, 1 tutorial, 1 course.

And then if you want to find multiples of those, then, obviously, there there can be many of them.

Yeah. Each one should be singular.

And then relationships, if it's like a one to many relationship, then the the like like, a rid A customer can have many courses.

Course will be a model that's singular, but the relationship will be pluralized as in, Like user dot courses.

I don't think I've seen people do it the other way around, and I've also seen many ORMs, the things that that take your schema. They will also pluralize them for you Mhmm. When you're running it. Like, like WordPress, for example, you make a custom post type. If you don't fill out what the plural of your custom post type will be, it will just I think it will try to smartly Decide on how to pluralize that thing or maybe it just adds an s. I'm not sure. But, yeah, always do it singular in my case. Yeah. I

I'm gonna go out and say that I really dislike when tools do it for you. Like, if I create a schema rid And something and then in the database, it is pluralized, I really hate it. Yes. I did not tell you to do that. I'm a fan of a little bit of magic, but I did not tell you to do that. Yeah. Why are you doing that? Yeah. Like, the example would be in GraphQL is if you have a user schema, rid A lot of GraphQL packages will pluralize that to

the query for all of them will be all users. Oh, like if you're using, like, Prisma or rid. Gatsby or something. Yeah. Yeah. They'll put Prisma specifically will do it. They'll put an s on the end, and I don't mind that just because, like, it's all typed At the end of the day, so it's not like you're gonna forget and type it wrong. Like, you'll know immediately if you have spelled that something in your schema incorrectly.

And you didn't have to write it yourself because that's nice. Yes. Over here on LevelUp Tutorials, we have to write all of ours ourselves. We write every query, mutation, and whatever. And, yeah, I would like, like, one of those free CRUD operators on every single model that we create. That would be sweet to just get that for free. Yeah. That Keystone does that. Prisma does that. Rid. Strapi does that. A whole bunch of them do. It's great. You just have to give it your model, and it gives you every

CRUD operation rid. And every little metadata query like, if you wanna know how many users you have without querying every user and checking the length, then you can just do, like, a metadata query, And I'll tell you how many are in the database. It's really slick. Wes, don't make me want to do another refactor here. We we just finished our last refactor. It's been, like, a week. Rid Scott, get it now. Do another one. My team is gonna no.

Alright. Next question we have here is from Rodrigo.

I just listened to CSS typography and systems hasty treat, and I realized that we often try to apply web design to web apps.

Can you elaborate on the difference Designing for a website and a web app. Oh, that's a that's a good question.

Like, at what point this is my own question here is, at what point does a website ready. Become a web app. Like, is is GitHub a website or a web app? Right? Like, part of it's a website. Like, You're just browsing stuff, and then part of it is a web app. You can literally run rebases from the the web UI.

So what's the difference, or how do we apply CSS differently from one to another? I would say when I'm working on a web app, My CSS is a lot more componentized because I think it's a lot more complicated.

It's rid not true for every website, but I I think an app is much more complicated in the markup, in the structure, in the CSS that is written. And also with rid A web app, you often want to move things around and display them in different parts of the application. And having a very componentized rid. Scope CSS makes that really easy in a web app, whereas, like, sometimes I write a web app, and I just scope all the CSS appropriately.

But in deep down in my heart, I know that this thing will never exist anywhere outside of the footer. You know? Yeah. Rid Make like a copyright component or something like that. Yeah. That's accurate. You know what? I I I'm much more likely if it's like a 5 page

rid Brochure website? Yeah. I'm much likely to do the CSS in a much more like, here's the CSS for the about page. Rid. Here's the CSS for the the showcase page. You know? Like, I'm much more likely to do a Traditional style CSSing of that rather than, like you said, doing it componentized and and really breaking it down. Why? Well, To be honest, it just it's faster that way. If you have a 5 page site and you're not going to, have a whole bunch of reasonable components, there's no reason to set up all of that And I think some people who are working on those types of things look at some of what people are doing in React or maybe with CSS and JS and look at it and just be like, are you doing that? Well, that's overkill, and it is overkill for a lot of those projects. But for something like a a web app, a level of tutorials type thing or GitHub type thing, You are. You're really thinking in components.

Another thing is, like, if your app is primarily going to be used on on mobile, rid There's a lot of, like, mobile design system stuff that comes along with working in mobile, whether that is, like, a material design or a Human design guidelines or whatever Apple has, you think a little bit differently and more like what native apps feel like if you're working in a mobile platform too. So that that's something to think about as well.

Alright. Next question is from Andy Martisich.

He says, my syntax friends, Your podcast is my go to while doing the dishes. Andy, doing the dishes is my favorite time to listen to podcasts. This is me talking, not Andy talking.

So I'm I'm with you there, man. I hate doing the dishes. And ever since I started really podcasting all dishes, oh my gosh. It is the best.

So it makes dishwashing a joy, he says. Thank you, Andy. I agree.

Yeah. The family is happy with me keeping the kitchen so clean. I'm a front end developer rid Working for a new client who's trying to figure out whether to build a product using adaptive or responsive design. I'm pretty in the dark about adaptive design. It sounds like adaptive design involves the server sensing the device, serving up specific CSS for that device's dimensions.

Could you explain the development process for each situation? I'm so used to using media queries as part of responsive design approach. If a developer were to convert design in adaptive, it sounds like they would need to simply look at segments in their CSS based on the video query and put those in a separate file based on specific screen dimensions, And those specific devices will be only served when needed, thus reducing the load time. This question is way too big. I know. He says, is it that That simple? And then it's like you just Andy, I'm sorry. You drooled a whole lot and then asked if it's that simple.

It is it is okay. So So to answer this question, Andy, adaptive design is sort of the old way of doing things, and responsive design really took over.

How would you approach responsive design to adaptive design? My experience, you just flat out don't. It's the other way around. But If somebody's asking you to do that, then I think they might need to reevaluate where they're at. There might have been some updates to adaptive design, but that's definitely like an older school way of doing things. Right when Ethan Marcotte's Book of responsive web design came out. In my mind, adaptive design died. So, I I don't have any more thoughts on that. There's another couple extra bullet questions here I wanna get into, West. Do you have more to say about that adaptive design?

Yeah. I think, like, in most cases, it makes sense just to make your rid. Application responsive.

The only use cases is where the mobile version of your and I'm gonna say app here because if it's a website, you should probably be 100% be using responsive design. But if it's an app and for some reason, the mobile one is totally different than the desktop one, Then, yeah, that makes sense maybe to do adaptive where you serve an entirely different code base up. But, like, rid. As someone who's still sometimes, we have, like, local news organizations that have, like, a m dot website. We have, like, a mobile version of their website. It kills me kills rid going to that website. So, yeah, don't try not to do adaptive design unless you have a very specific use case. But, like, even when websites have their own re Mobile version of something. Even with GitHub like, the GitHub the other day, I was trying to remove a tag rid From a repo, I was on the mobile website trying to do it for, like, 15 minutes, and I was like, I cannot figure this out. And then I figured out that I had to, like, Use the, like, show GitHub desktop version. I had to click that button, and then still it didn't show up. And then I had to turn my phone sideways, And then finally, there was enough width

for it to click some media query where they took the display none off. And I was like, come on, GitHub. You can't just, like, hide functionality from me because you can't figure out how to Totally. Design it. So, yeah, just try to use responsive design as my rant on that. Yeah. I agree. Alright. I'm gonna read the rest of this. So why does Scott introduce himself as being from Denver, but never messaged messaged quest bosses for I I did in the last episode just to rid you, Andy. So I did say where Wes is from, although I did say he was from Toronto and then ensued a conversation about that. So, that's one thing. I don't know why I always say I'm from Denver. I haven't even lived in Denver that long, so it's not like I'm, like, from from here, but I'm currently living here. I don't know. It just sounds nice. It's just part of my thing. That's just his call it part of his call sign. You know what's rid. Another funny thing is that there's a lot of people that don't

know the difference between Scott and and I. That's weird. That they think Scott's voice is rid. Scott's voice is me, and they mix this up, which is, like, why I'm glad that, like, Scott doesn't have any, like, really brash opinions rid. Because, like, I'm someone will be like, oh, Wes, you're a jerk for saying this about meteor or something like that. And then I'm like, oh, well, that was actually Scott. But, like, the amount of times that that happens rid Where people say, hey. You mentioned this on the podcast. I'm like, that was actually Scott. But

Yeah. So people just assume that whatever we say comes out of both of our mouths, And we have to be responsible for it. I have, like, little quirks and things that I don't like, but for the most part, I'm a pretty positive dude, I think. I like to to think that way.

And likewise, Wes, I I know it is it always it's always weird because we identify ourselves at the beginning of every episode, and, like, some people are like, oh, I had no idea until I saw them live that Scott was that 1 and Wes was that one. What do you mean? What? How? It's very it's very weird to me.

Yeah. He says, you guys are very talented. Thank you. I'm I'm just reading this for the for the compliments, by the way. I'm amazed at how much you get done. You're an inspiration to aspiring developers everywhere. Keep up the fantastic work. I just picked up a book rid About DevOps and SRE. You should do an episode about DevOps philosophy.

I don't know a whole lot about DevOps philosophy, but That kinda sounds interesting. I would maybe pick up a book about that. SRE is site reliability

engineering.

Yeah. I'll pick up a book about that. I don't know if I necessarily The time to become a a DevOps engineer or something like that. Yeah. I would pick it up, but I wouldn't read it like every other tech book I own. Yes.

I would pick it up and put it under my computer as a monitor stand.

That's actually one thing is these companies email me all the time. They're like, hey. Can we send you a copy of your book? Rid. And I used to be like, yeah. Sure. Send it over. But then they then they send you an email in, like, a month. Like, how was it? And they're like, oh, I didn't read it. So now I had to start being like, no. Don't send me your book on Using, I don't know, some some random grid framework or whatever, I just Yeah. Not gonna not gonna be able to read that thing.

Dogecoin for dummies? Yeah.

And if, of course, you are a DevOps engineer, you're probably gonna run into a host of issues. Of course, you're gonna log in, keep track of those issues Using one of our sponsors in that century at century.i0.

Use the coupon code tasty treat, all lowercase, one word, to get 2 months for free. Now Sentry is an amazing tool, and it keeps track of all of your rid. Errors and exceptions allows you to link them to specific GitHub issues. It allows you to link them to specific releases, commits, and so much more. You can see rid. The user that committed the atrocity, and you even get performance metrics on your site. It's very, very cool. You can see exactly what's going on, and you can get re Performance for each route in your site along with a user misery score for how slowly that site is loading. So check it out at century.iocoupon

code tasty Treat all lowercase, all one word. Next question we have here is from Morgan. Multi vendor platforms. Have you done it before? Partner and I are planning To build a peer to peer platform, also called a multi vendor platform, it'll be similar to Etsy and Amazon where users can register as a merchant or a buyer. I have never done anything like this. I was wondering if you guys have ever set up something like this. What is easiest for payment transactions, Stripe or PayPal? Rid Do you know any frameworks that will make my life easier? I want to build on React, Next, Mongo, Arango, or Google Firebase.

Stay safe, and thanks for being awesome. This is this is kind of an interesting one. I think the hardest part of building a multi Multi vendor platform. So something like Etsy, where you have, like, one side of the marketplace where people sign up and sell things, and you have the other side, And you have people sign up and buy things. 1st, you have to get people into your application to do both of those things. That's that's a hard part. Rid So one thing you have to be very, very careful about what these platforms is managing fraud because you get people coming on here rid and selling things, and you get people coming on and buying things, and people could be selling ripped off or stolen artwork or something like that. And then on the flip You can have people coming in and buying stuff with stolen credit cards, and you're in the middle of that. And you have to figure out, like, what happens if rid. The user ships an item, and then you find out it was a stolen credit card. Like, who eats that cost at the end of the day? And, like, I'm dealing with this right now. There's this company called rid TeeChip, which I posted some t shirt designs I had on Twitter, and somebody commented, oh, hey. I'd love that on a tee. And then these bots search for that word, and then they just automatically put the thing on a t shirt and reply with a link that says, hey. Here it is. Go ahead and buy it. So I'm going down this road right now of, like, oh, man.

I found this underbelly of this, like, print on demand t shirt world where Where there's these people that are just stealing artwork and putting it on a T shirt, and then I've emailed back and forth with this T Chip company, And they seem to be I think they're sorta in on the fact that they're making most of their revenue from these scammy rid places, and it's crazy. There's a whole like, somebody sent me this article where they intentionally tweeted a picture of Mickey Mouse That says, please sue me, and then they they replied, o m g. I want this on a t shirt. And then they actually put it on a t shirt. My god.

Anyways, rid. That's a whole problem you sort of have to think about. And then also doing, for payments and stuff, I would do Stripe and PayPal just because rid. That's what people want to pay with at the end of the day. You just have to know that you could get yourself in some hot water. And then also, you're on the hook rid for any, like, taxes or regulatory stuff that needs to happen in every single possible region. Like, I was talking to Adam Wathan who rid sells all of his courses. And instead of doing what I do, which is just use Stripe and PayPal directly, he uses, like, a third party platform. It's Gumroad or something like Gumroad, and they handle all the, like, taxes and local and and remitting and all that. And Because they're technically the vendor, and then they just pay out to the seller. So there's a lot to think about there, not just technically.

Yeah. There is a lot to think about, and there's rid Times where I wish I would have picked a little bit more of a turnkey platform and just ate the, fees, you know, to take care of some of that stuff. We're we're running pretty I mean, Braintree is Like, Braintree's idea of holding your hand is like to stand on the other side of the sidewalk.

That's that's, that's all I'll say about that. Okay. So, next question here is from Paretti p. Hey, Wes and Scott. I've been using GraphQL for the last few months, and everything's great. Documentation is great. Scheme is great. Good. That's great, Purdy.

Getting your data is great. Everything's great. It's all great. As long as I'm fetching data, when I need to write mutations, the story gets murky. Looking around the Internet, not too many best practices can be found. Mostly articles focus on rid. Blogs focusing on data fetching. Is there a golden rule for mutations? Should I send the entire blobs of objects similar to the rest API? Rid. Should I implement partial updates and only send a change to values? Should entity relations, one to many, be maintained as part of your giant mutation for rid the entity or have its own mutations. Where should I validate inputs, and how should the errors be sent back to the consumer? So this is really interesting stuff that I have to work on all the time. So for the most part, there's a lot of questions here. My answer solution for everything, I'm gonna maybe do some of these in reverse. So where do I validate inputs? Alright. 1, you validate them first in the HTML. Second, you validate them via an input Type in the GraphQL. So let's say I have a tutorial, and that tutorial has a form where I need to send information. I will create a 2nd type, And the type is an input type, and you'll say input tutorial input, and then that structure is the structure of data in which The mutation is expecting to receive.

And so because of that, I have basically data type checking all the way up and down Based on that input type. Right? It is what's it expecting. That's where I validate the inputs.

And there's a lot of stuff here. Let me see. Relations.

Yeah. That stuff, it it kinda depends on how you're you're doing your database.

I would say have a giant mutation a giant mutation with several Several methods or functions that you can call from that mutation, maybe reusable methods or functions.

Should I send the entire blobs of objects similar to a REST API? Rid. Again, I'm sending just the inputs. And if you're talking about when the mutation is complete, I'm typically sending back all of the data that that component's receiving rather than partial data Just because I've had issues with GraphQL schemas and partial data giving me some weird results, whether it is The data just completely disappearing or, you know, maybe the the client that you're using for GraphQL not necessarily knowing how to merge that data. Partial data can get kind of rough. So

rid I I usually just send back the full amount of data of what I'm I'm doing. For me, I broke it down into create, update, and delete here. Rid. So create, obviously, is saying, you know, all the data when you create it.

When I'm doing any sort of mutation, I just specify rid Which pieces of data I need back? Because sometimes that's just the ID of the item that was updated, and then That can ripple through the rest of the application, whether it needs to go and refetch it. And then sometimes it's the entire like, it's rid. Fragment.

And sometimes it's it's everything. And in that case, I'll throw all the fields into a fragment, and then I keep wanting to say spread it into because the spread in in JavaScript It's dot, dot, dot, but you just use the fragment in GraphQL, which is a way to just group together many fields.

Updated, rid. I don't send the entire thing across. I just send only the updated fields over, and that's the way I've seen it in a lot of other GraphQL frameworks as well.

Many of these frameworks will have a thing called Upsert, which is kinda nice where you can just either update or Insert if it's if it doesn't exist yet.

If there are multiple relationship elements on updating, I will just update them separately.

Rid. But if you are creating them, what I'll usually do is I'll create just the object of the data first.

And then when you are rid creating a one to many relationship, then you can and and a lot of these GraphQL frameworks allow you to pass rid A create key on it. So a a good example is in my advanced rad course, we are we're creating an order. Rid. And in the order, there's things like the quantity of items they bought, the price they paid for their order when they created the order. And then there's a relationship from the order to what's called an order item, which is each item that they have purchased. It's its own thing. So when somebody checks ripped. So we need to both create the order, but then we need to create an order item for each item that they've bought. And in that case, You can just pass that create key to the relationship, and under the hood, it will just go in and actually create them all ready. For you so you don't have to, like, make them first, get the list of IDs back, and then pass it to the next item when you create the order. But when updating, I think I'd do it the other way, which is just update each one individually. I I don't have a ton of experience in that, though. It's funny that Because your experiences are so much more tied to

Prisma and these types of things, and it makes me so jealous that I have to do all that myself.

Because just I gotta do so many things by by by hand here. Like, if I'm doing an up cert or whatever, it's it's more reliant on Mongo or or or whatever database software I'm using than, Prisma or something. So very interesting to hear that perspective, and, again, it's may making me jealous.

You might not have seen this, but the other day on Friday, a couple days ago, Prisma announced they are going to be supporting MongoDB, which is really cool. Wow. So instead of using rid MongoDB directly, you can just use Prisma, and I'm assuming you could hook it up to your existing database Oh. And just write your write your schemas, because then you get all that for free. Wes,

stop. You're gonna make beats.

You're gonna make me wanna do a refactor. It's

Although, like, just maybe just hold off and wait because, like, this is the 3rd major iteration of Prisma. Right? We had Yeah. Graph. Cool. Then Prisma 1, and now we have Prisma 2, and now we have Prisma from Mongo. So maybe just hold on and make sure it's gonna stick around.

I've already created the PR. Oh, no. Just okay. Okay.

Next question is from anonymous again.

Different anonymous, most likely.

What do you think about the future of Svelte? I know they are replacing Zapper with rid SvelteKit, which uses Snowpack. What direction do you think SvelteKit will go in? I think SvelteKit is gonna be basically a really cool project.

It uses Snowpack, but it also has a server side component to it, and it has a server side rendering aspect to it that I think is still being worked on it currently.

I am very excited for it. I think it's gonna be good.

I am excited to see rid The developer experience about around SvelteKit because in my experience, working with Snowpack has been very good. I've really enjoyed it. Rid. I I really, really have liked the developer experience, and I think one of the things that Svelte already has going for it is a really good developer experience in the code itself.

So when you're writing Svelte code, everything feels easy and smaller, and just overall Makes a little bit more sense than many other frameworks. Right? So if you get that combined with a crazy good developer experience rid. You're in the territory of a really, really fancy modern tool, and I think that could do very wonderful things for Svelte in the future. So I'm very hopeful. I'm very excited, and I can't wait See what they do. I would love to do some sort of a combination of Svelte with my avalanche thing that I'm working on. And, You know, maybe that is the future of my avalanche platform is that is Svelte or something like that. I don't know. I've been thinking a lot about this. So it could be a really interesting time to pick up Svelte or understand that that SvelteKit is coming, and it's gonna be very cool.

Alright. Let's talk about one of our new sponsors, and that is Vonage, Specifically, the developer APIs that I wanna bring attention to here on this ad read. So, Vonage allows you to interface with re SMS, messaging, video, phone numbers, all they have all these different APIs that allow you to work with that kind of stuff. So, re you can get programmable phone numbers from around the world so you can control calls that are going out and coming in. If you wanna do two factor authentication, that's a rid pain. And if you wanna send those codes over an SMS, Vonage has a an API called verify and allows you to rid Take care of all that stuff for you so you don't have to manage any of that stuff. They have a messages API that allows you to receive Messages via SMS. You can send them via SMS, Facebook, WhatsApp, Viber, all in one single API, And then they also have a video API that allows you to do fully working video calls back and forth. So you could build your own app, and they'll take rid care of the video section of it. So some pretty wicked stuff. Check it out at Vonage dotdevforward/ syntax.

And if you use the promo code syntax 10, you're gonna get €10 worth of free credit. Make sure you use that by June 30, 2021.

Re Thanks so much to Vonage for sponsoring. Alright. Next question we have here is from Jordan White. How can I get back into the habit of learning new things and stop heavily relying on video tutorials all the time? You don't. You keep paying Scott and I For the sweet, sweet video tutorials no. Just joking. Forever. I really struggled to sit down for long periods of time. Have you guys Also, have you come across the Genesis framework if you could recommend any learning materials?

I think it's a really funny question because it's like, How can I focus? Also, have you checked this thing out? That's exactly why I put this question in here. I read it, and I was cracking up at that.

So the number one thing is, like, don't get super distracted based on new and shiny toys. It's ready. Really, even listening to this podcast, you might think, oh, yeah. I need to check absolutely everything out. Like, no. No. You can wait and wait until something is rid Pretty stable and well developed, and you'll be able to get into it. You don't have to to jump on, absolutely everything same thing. Re the other thing is, how do I get back into the habit of learning new things? Just literally go out and build stuff. That's half of the questions that we get in this syntax thing is, How do I do this? How do I get better at this? How do I get comfortable with this? The answer is you just gotta go build stuff. There's really no Yeah. Try. Yeah. You gotta try it out. You gotta go make things. You gotta start writing the code. And, unfortunately,

that is not the easy answer because it takes time and stuff to do this, but you just gotta put in rid Put in the time. Start banging on that keyboard. Yeah. Yeah. Banging on the keyboard. That's what I do too. All about banging on that keyboard. I I think That is like the number one thing is to just get into it. Get working on that code.

For me, that that has always been the way that I've learned the best rid Is in you know, you fire up a a Scott Zelensky video tutorial. He tells you what to do. You do it. That's fine. But one of the things I talk about even in my tutorials is, like, For instance, I'm gonna sell a little bit here. In our latest Cypress tutorial series, the first thing I say is, here, we have provided you with a Starter React repo. This is a basic React app. Right? But if you wanna get the most out of this course, Fire up your own website and just try to do what we're doing in your own website rather than doing the code base that I'm giving you because You're gonna learn that stuff way better if you're not following directly along with the tutorial.

And I've always done this too. With video tutorials, I'm not listening to follow the project read. Word for word, I'm listening to follow the project and adapt to what they're doing to the things I want to do. If I want to build, let's say, an app to help me dance better or something like that. I'm not going to make the movie app that Scott says to make in the tutorial.

I'm going to find a way to take what Scott's saying in the tutorial and apply it to the thing that I want to build myself, and you're gonna run into problems. You're gonna hit rid Snags that things aren't going to cover, and those little aspects are going to teach you much better than just following along. So, Jordan, do not look for learning materials on Genesis. Fire up Genesis, whatever that may be, and just start going to town on it. And then if you get into mistakes, you can head into GitHub issues and whatever. People really rid Fear having big red errors and databases that crash and things like that. Like, you can get through it. Read the error logs. Google it. Rid Stack Overflow it. You can get through it, and you're gonna be stronger for it. Alright. Last question here is from Sunice Lennon. My team uses handlebars templates for generating newsletters. The content is coming from a CMS and generating the final HTML.

I'm fairly new to handlebars and mustache.

So instead of learning handlebars, I'm thinking about using React to generate the HTML on the server side. I see some great potential here, and the entire team is well versed in React. What is your opinion on this? I'm open to learning handlebars if this makes no sense. Hey. Direct no is okay. Amazing show. Thank you. Thanks for that. Thank you for commenting us, as well at the end. I wasn't gonna read this question until I got to the compliment, but let's go ahead and talk about handlebars templates ready. Generating because this one hits home personally for level of tutorials for a very long time. We used handlebars to do our templating for our emails. Why? Well, it was just easy. I needed to have an email template drop in some values. It was very easy to run it through the handlebars compiler on the server side. Just say, here's my data. Here's the template. Give me the new email. That's how we've done it forever.

Recently, with the launch of the new level of tutorial site, we moved everything to MJML on the server side. Now if you have not checked out MJML, let me blow your mind, Suneeth, because I think this is exactly what you want. MJML is a read. HTML rendering and generation library for React.

It is fantastic.

It is fantastic. It's wonderful.

Rid As somebody who absolutely loathes writing HTML email, m j m l, and doing it this way is going to save you a ton of time. The emails are going to look good no matter what, and it is React. It runs on the server, so you can just generate your emails rid The same way using MJML, create templates. They even have templates. Like, you can download MJML templates, which are fantastic.

So my recommendation

is m j m l all day. Yeah. I would say so. Yeah. At the very basic, you can just Do react dom. Render to string, but you still need to inline CSS and and all that stuff where MJML does rid Templating and inlining. And one cool thing is MJML also has an API where you can just ping their API rid with your markup, and it will return the HTML for you, which is cool. I'd be a little worried about sending, like, rid. Password reset tokens and stuff over that. Like, I'm sure you could if that was me, I would I would just send, like, a constant placeholder. And then once it comes back, I would swap out the password reset token so you're not accidentally sending sensitive information to To a random service, but it seems pretty sick. I also just found this other one called, React Email Editor.

Ready. This is not a Templater, but it's an actual React visual GUI for drag and drop rid. Emails. So this is not what you're asking for. But I think if you do have a client who wants to design their own email layout, I'm super impressed by this. I think this would be a really cool thing to integrate into your application.

Interesting. I had not heard of this one. Yes. From Unlayer. Here, I'm gonna put the link in the show notes because I think it's pretty sick. Cool. I think this was a very good potluck. I mean, when are they not very good, to be honest? I think they're all fantastic.

Always the best. Always the best. I love these episodes because we get to hear a lot about the problems that people are facing in their real rid. Careers that are realized as developers. I know it's so funny because we talk to a large range of people. And in our space, there's so many different types of projects You can be working on whether it is these long term projects or short term projects or agency projects or full on web apps or Apps like Discord or Spotify or whatever. Right? I mean, the range is absolutely huge for what people are working on, so it's always just A joy to to get to hear a little bit about the issues that you're facing and some of the the real world stuff. So let's get into the part of the show that we call Sick picks. This is where we pick things that we find to be sick. To typically, when we say sick, we mean good. That's where that comes from. Sick is good. So we're gonna pick things that we find to be sick. Wes, do you have any sick picks for us today?

I do. This is for all the cold weather people. I recently got a new pair of outdoor gloves, and they are amazing. They are Carhartt Insulated waterproof gloves. Oh.

And the older I get, the more I rid. Just wanna buy 1 thing that is very, very good and will last me forever and Buy it for life. Yeah. Buy it for life or Do you know that Reddit? Yeah. Oh, yeah. Yeah. Rid It's it's funny because it's pretty much all people just showing their red wings, which are, like, some of the I've been wanting to buy a pair of red wings for Really? Forever. Ever. Yeah. They're like nice leather boots that are made in I think it's made in Detroit. They're made in Minnesota.

Oh, okay. But it is funny because the logo is is somewhat Very similar to the Detroit Red Wings. So we would see, like, Red Wing shoe stuff all over Detroit, but then also Detroit Red Wing stuff because it was close enough where you where you'd see Red Wing shoe stuff all over the place. So It was always very odd to us that it was like, why are these things so similar? Guess which one came first?

That's a good point. Yeah. I love that. Buy it for life read. I read it. Anyway, so these are waterproof gloves. I've had a pair of waterproof gloves in the past. They're, like, really well insulated, and then they have this, like, layer of very soft plastic that stops water from seeping through. And I only know this because my last pair ripped. Rid. They weren't the Carhartt ones, and and I saw inside that, oh, there's actually, like, a little glove inside of this glove that stops the water from seeping through. And I was up at the cottage this weekend wearing them, and I was like, these are the best gloves I have ever had. They're super warm.

They don't fall off. They've got the little clip where you can clip them together so you don't lose one of them. Yeah. Do you know this is a snowboarding thing, I think. Do you know what a nose wipe is? Of course. It's like a soft little bar on the thumb Yeah. That makes it so you can wipe your nose without irritating the underside of your nose. And let me tell you, every glove I've ever bought has had that because that is a killer feature. Rid Feature. I was, like, reading the features here, and I was like, what the hell is a nose wipe? And I, like, looked it up. I was like, that's disgusting, But,

it's got a nose wipe. It's so necessary if you are out snowboarding, man. It's necessary.

So that's it. Carhartt men's gloves. They also sell the, like, the mittens version where you put your 4 fingers into

1 ball and you can't do anything with your gloves on. So we just got a a peek into the mind of Wes's mitten opinions here.

Wes non subtly dropping his, your controversial opinions on mittens. Wes Wes slams mittens in the latest episode of Syntax is the headline.

Oh, I'm gonna get this is gonna be mitten gate. People are gonna be so mad. Yeah. Big mittens are gonna come for you. Mittens seem like a good idea if you have nothing to do when you're

rid of mittens.

No. I am picking, my favorite.

This is a very, very odd pick. This is gonna be an odd pick, but rid.

I didn't have great skin for a lot of my my life. My face skin is prone to breakouts, often getting a lot of, you know, a lot of just not great skin. And I a couple years ago, maybe, like, 2, 3, 4 years ago, I started getting into the whole Korean face routine thing, Which is very funny to some of my actual Korean friends because, like, they're like, this is the stuff my mom does, and I'll do, re You know, like, a 9 step face routine. But one of the face routine parts that I like the most is the face wash that I have, and I have sick picked this before. Rid. I just used it the other night. I was like, man, this stuff is awesome. It's this, man, I don't know, Korean or Taiwanese, I think. Sowang enzyme powder wash, And it's a powder basically in a tube, and you just shake it like a salt shaker powder into your hand. You get it wet. It's nice and frothy. It's the best face This is the enzyme powder wash. This is my favorite face cleanser.

So maybe I should just do a sick pick series on all of my different rid Face products because, apparently, I'm very into it. Awesome.

Shameless plugs. I'm gonna shamelessly plug my advanced React course. Advancedreact.com.

We learn rid. React hooks GraphQL.

Keystone on the back end, which is really, really slick. It's a headless CMS that I love rid And all kinds of stuff, style components, custom React hooks with using forms, all that good stuff. So check it out at read. Advance react.com. Use the coupon code syntax for $10 off. Cool. I am going to shamelessly plug our latest courses on Cypress. If you're interested in learning

rid Cypress, which is a very modern testing platform. We show you how to do everything including using the latest features in Cypress, some of which are, like, re Beta features at the time we recorded, like Cypress Studio, which writes your tests for you. It's very cool. You click around your site and it physically writes the code for you. Rid. We also teach you how to use intercept for mocking code, which is the latest way to intercept your requests to return some fake data, saving you whole bunch of really Sweet performance time. So check it out at level up tutorials.comforward/pro.

Sign up for the year and save 25%.

Alright. That's it. Thank you so much for tuning in. And as always, we will catch you on Monday. Peace. Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't ready. Don't forget to subscribe in your podcast player or drop a review if you like this show.

Rid.