Potluck - Handling Auth × Are Web Dev Real Developers? × Handling Git Conflicts × Converting PNG to Box-Shadow × Bad Docs vs No Docs × Making Shopify Headless

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Ready. Here is Scott Talinski and Wes Boss.

Welcome to Syntax. This is the podcast with the tastiest potluck rid Treats today. We've cut a potluck episode for you today. It's where you submit the questions, and we will answer them for you. If you've got a question You'd like us to answer, make sure you go to syntax.fm.

There's a button in the top right hand corner. It says ask a pollock question.

Smash that button. Put your read. Question in the box, and we will answer on the show.

We've got some really good ones for you today talking about authentication and permissions levels.

Some interesting ones about like headless e commerce. That's always a question that we have and there's a lot of questions about that.

How do you do cookies in Next. Js? And all kinds of really, really interesting stuff. So we are sponsored by 3 awesome companies today. Rid. Sentry does error exception and performance tracking sanity.

Does your structured content CMS And FreshBooks cloud accounting, we'll talk about all of them partway through the episode.

My name is Wes Bos. I'm a developer from Canada.

With me as always is mister Scott Talinski. How are you doing today, Scott? Hey.

I'm doing pretty good.

Yeah. I don't know. Nothing Nothing too wild. We got a bunch of snow here, so, you know, feels kind of cold. But, you know, I'm doing I'm doing okay. Yeah. Just hanging out. How about you? That's good. Good. Good. We

rid We are had just I forgot the the what they call it? Fools winter here in Canada, where, like, you get 1 warm day and then, like, Like, my wife's like, let's go for a picnic in the park. And then, like, by, like, 4 o'clock, you're like, oh, it's actually still freezing. You got to, like, gotta be careful with that. But it's nice as all the snow melts, like, we get this, like, rid Ice pack on, like, everywhere. Like, I'm sure you get it as well, but it's just, like, frozen tundra, Disgusting. Everything is brown, like and then there's mud coming through, and the dogs walk through it. And it's, like, just like the worst part of winter. So it's rid. Really nice when that all melts and all the salt

Yeah. Like, everything is just white. Like, do they use salt in Denver? They don't. But, no, in Michigan, it was really funny because, like, You would have just snow that would last the entire winter until March, April, and it would just be black by the time you know, because of the dirt. But in Denver, because we have, like, 300 plus days of sun, the snow completely will disappear between snows. So, like, completely.

And because of that, the I mean, the the ground's always really hot so that the roads clear pretty quickly Because of that and then they don't use salt because it's too expensive to import it. So you can buy it in private businesses. We'll use it. But on the roads, they'll just do sand or nothing, basically, Because they know that in a day or 2, if the sun's out, it's just gonna melt on the pavement. I wish we had that, man. Like, the bottom of our cars, Just like it's like oh, yeah. If never buy a car that's from Canada, this is just a rust bucket. I'm sure. Like, we have, like, a the 4 year old van, and I went under it the other day to

rid. Take a bolt off, and it's just like it's gone. Like, it's the entire bolt is just seized up and, like, brutal. Like, you see these TikToks sometimes with people, like, in Arizona, And they're like, this is a 40 year old car, and they just undo it with a ratchet. And it's like, no, I get it out. Like, a bolt lasts 6 months until the first solve. It.

Nice. All right, let's get into it. We've got the 1st question here, who is from Mike. Rid. How do you handle authentication level within an application, such as when a certain control needs to be shown only Above a certain authentication level, how do you prefer to implement this? It's kind of interesting one. So we've done a Entire show on roles and permissions. I think we've actually done a couple of them in the past. And the way that I like to do it rid Is and this is what we do in my advanced React course is that I you create individual permissions, like, Can delete a user, can update a user, can view a user. Right? And then you can group all of those permissions into specific Administrator and whatnot. And that's really nice because you can then make infinite levels of rid. Access control where you just add and remove certain permissions from each individual one. And you can even go a bit further and rid. Give those people not just yes or no, but you can also give them and Keystone does this really well. You can give them filter queries. So, like, rid. Can I see the users? Well, the answer is not yes. You can see everybody. The answer is also no. No. You can't see none of them. You can see the people who are your friends. Right. So then that would be a quilt a query. Show me the people who are currently friends with me.

And then one like 1 step further is like what about the rid. I think, like, how do you show the controls? Right? Like, how do you how do you block? Yeah. Exactly. Rid. Like, for example, on my app, I have a stats that shows me sales, and things like that. And, like, that's only shown to me. Right? And my assistant logs in. She can't see the Stats and the sales and all that stuff, but she can search for customers and do refunds and amendments and things like that.

So usually what I'll do is I'll just, like, wrap that in, like, a rid. Permissions component, and then that permissions component will then check if the user has that permission and then either render it out or not render it out. And You you could also just, like, not do anything, and the API request on that will fail because they're not allowed. But then you got this, like, weird, like, empty graph. So it's it's nicer to wrap it in a component.

What do we do? I do,

we don't do, like, Usage based permissions. So now we don't do, you know, canvas person view, edit, delete these types of things, but that definitely is a strategy.

We just basically have several different, roles and role groups.

So it's it's not exactly a feature based role Kind of thing like that that setup, but it is definitely like a, admin, pro user, customer, those types of things. And any user can be any amount of roles or added to a role group that would then give them access to those roles. I actually just redid the entire server part of our role system Because I don't know how much you've used directives in GraphQL.

Have you used them, Beata, at all?

Directives.

No. The ampersand. Or it's the at sign, not the ampersand. The at sign. Yes. Sorry. I totally have. Yeah. Yeah. So we recently implemented something called Mercurius off, which is, our our GraphQL library, Mercurius. It has, like, in its own auth package, but that gives you an auth directive that you can attach to any individual field. So I can just say, add auth pro. You know? So that that way, the user has to be a pro, And then our API, like, won't even return data unless you are that raw. That's beautiful. And on the UI, we also have several just is Is is pro, is customer, is admin, whatever, that is just essentially toggling the UI. It's funny because people always be like, well, I found your your role Hoggles, that's not secure. Right? You can just check the I am the I am the pro. But the thing about roles is that you have to have the The server side also validate those roles. So if you have just the UI toggling something, that's not good enough because people can If it's client side JavaScript, people can manipulate it. So just a heads up for those of you who are are working on a role based permission system, you wanna make rid sure that your admin section is heavily locked down for role based same role based as well. Otherwise, it's not really doing anything. It's a There's it's a fence that you can walk around. There's gotta Gotta be a name for these types of,

DMs and emails of, hey. I found a major issue with your because I I get them, like, maybe

once every month or 2. Do you get people at requesting a bug bounty from you even though you don't have a bug bounty program? They're like, I found this bug. You should fix it and give me money. And I'm just like, 1, it's not a bug. And 2, like, I that's not, like, part of the program.

But you didn't find anything, though. Why would I pay you for this? Yeah. Usually those guys those guys are,

like, they just have a list of rid. Ten common bugs, and then they go to, like, thousands of websites and report it. And every now and then, Somebody will be like, oh, wow. Thank you. And they'll pay out, you know, because it's it's it's always these just, like, script kitties, I call them, that they're They're just they're going around with, like, these, like, things that are not actually bugs, but they're like, hey. Do you know you're susceptible to click jacking? Yeah. And then And they, like, put an iframe and they put a button over top of my iframe website. And so I think that was like, k. Come on. Come on. So there's that. And but then there's also, like, Like, somebody when I was selling my stickers the other day, someone says, hey. I found out that I can get your stickers for free and any of your courses for free. And I, like, started, like and this happens, like, once every couple of months, and you start panicking. Yeah. Sometimes on the weekend, you're like, oh my gosh. Like, tell me more. Like, what's going on? And then they're like, oh, sorry. No. Or, like, this guy was like, I found out I can get them for free. And then I, like, checked I checked all the things that he sent me. I was like, you paid with your credit card.

Like no. You paid for that. It's like, oh, sorry. Free. Yeah. What? Turns out I can put my credit ready to info in and buy these things. And then, like, I just don't know, like, where that got lost. But all the time you get these, like, panic things that are not real, Which is funny because you can't shrug them off because one day there might be something that's real. Totally. Yeah. Yeah. Yeah. I feel that. Alright. Next question here is from TTTT,

four t's.

I I started learning front end development, and I see a lot of people who say Front end developers aren't really developers, period. My question is my question is, How can we respond to them? Okay. So, sorry. That was translated in case you're wondering why I I was struggling over the words there. So, it's okay. Front end developers. Not real developers? Who cares? Who cares? This is the same lang.

For for me, this is the same argument I hear about, like, is it is HTML a programming language? Who cares? Like, what does it matter to you? Like, does it not matter to me at all. If somebody says front end developers aren't aren't real develop who cares? I don't care. So, yeah, my my advice for you is, don't give ignorant people the time.

You know, they're trying to either get you riled up or they're trying to get you angry or they're Trying to make themselves feel better than insecure or something. Who knows what. Right? But at the end of the day, like, it's it's your responsibility to say, you know what? I don't care.

And because I don't care, it's a total nonissue.

I I I don't know. This this is the type of thing you definitely get more of in, like, The early programming world, like, a novice based stuff. You maybe you're in college or you're encountering a, like, a young young dev who thinks they're, like, hot stuff, and They think they're really good at programming, and they're like, you don't know what you're doing. And then, like, to me, if somebody were to ever say that to me, I would just think rid. You're clearly very green.

You're clearly brand new to this stuff, and therefore, like, I feel rid. I feel bad that you're in this this headspace, but at the end of the day, like, none of it matters at all whatsoever. Yeah. Anytime you hear somebody being so opinionated and,

rid negative about a technology or a job title or anything.

It's 100% of the time it's because they are rid. Not confident in their own skill set. Yeah. We lose out all the time when when you're doing the boot camp.

Like, 6 weeks into the boot camp, you had 30 of the most opinionated developers in the world who Mhmm. Hated jQuery or whatever, and it's just like, okay. Like, you you literally don't know. You have no idea. And then as as you get, like, I even you probably can even listen to this podcast over the years that we've done this podcast. Like, as you get better with your own skill sets, you care a lot less And you're like, oh, like, everything is everything depends. So what does it matter to you? Much if you think programming is not a real thing. If that's on you, I don't care. I got stuff to do. I don't have time for you, you jokers. Work to do. Okay? I'm I'm working here.

Next question We have here is from Ari. Thanks for the great show. You're welcome.

How do you handle git conflicts in package JSON or yarn lock files? Rid. These merge conflicts come up when maintaining 2 long living branches, for example. Usually, these changes cause a lot of noise and don't make much sense. Do you just remove the lock file and regenerate it? Do you somehow understand which changes to pick? I'm often running rid into this issue, and I haven't found a perfect solution yet.

There's a little aside here. We'll read that after. Let's answer the question first. Yeah. My rid. Answer to this is that I just regenerate it, because, like, who who is going through that and manually doing it? And then also, rid. The lock file is actually a bit of a vector for an attack because if you were to take a pull request from somebody and you just rid. Look at that, like, 10,000 line diff in your lock file, and you say it looks good. There's a possibility like, what the lock file does is the lock file, describes rid. The dependencies all the way down until this into the Earth.

So this thing depends on this thing. This thing depends on this thing. This thing depends on this thing. And there's a possibility that somewhere along that somebody hand, artisanally crafted that package lock rid. JSON file to point towards a malicious package or a malicious version of a package or something. And then when you type npm install, Before you know it, boom.

It's over. Right? So that's what I do.

And so I usually just regenerate them myself,

rid. Because, like, I don't know who's got time for that. Yeah. I don't know if you ever tried to do a diff on a package lock, but, yeah, that's not It's frustrating because

The lock file is supposed to go in your it has to go in your git. Right? And that's that's also what Dependabot does as well, where They will immediately fix those things for you. That's why every time you merge something, you get 79 emails from Dependabot. Mhmm. It's because they immediately scan that and fix any possible issues. Yeah. It's

it's no fun. That does it. I I but again, yeah, just regenerate it. And as long as your package dot JSON version Version numbers are accurate to what you want them to be.

Hopefully, that's, you know, not going to install anything breaking. Right?

Mhmm. Next question is from We got we have 1 more aside from Ari here. Yeah.

It says, also, on a funny ready. Know in episode 422, a poll question related to protecting images on a website. I build a small project which converts PNG images to CSS box shadow values.

Whole images can be presented in a single box shadow value.

Usually, these end up being tens of megabytes, though. Each pixel is its own shadow.

Holy cow. Images, this will prevent the right click Save as since there is no image on the element. It cannot be used in real life as it ticks all the powers from the CSS parsing engine to paint it.

It's still a rid Silly thing to do with CSS box shadow. I thought you might. It's kind of funny, and he links it off to so this is beautiful.

So he links us to a 7 meg. Oh, my gosh.

URL, which is like rid A design that was converted into box shadow.

Oh, oh, I just froze the browser. It's it's it's taking Let's see how long this takes. That's so wild. But freaking this is this is what I love love about the Internet. It's like, no. You shouldn't use box shadow to rid image, but not there. I always thought about that. Like, could you convert an image to a table with, like, a 1000000 Oh my gosh. A 1000000 table cells It's a background.

You yeah. Oh my gosh. Yeah. This is so funny. It's just the the funniest part is just how large it ends up being, and then you you understand And why we have formats in the 1st place because they're made for that kind of thing.

My entire browser My entire browser is frozen. So Oh, that's great.

I don't even know if I could freeze the entire browser if I tried.

Oh, it unfroze.

Alright. You you go on with the next one. Alright. Next question here is let you know if it ever renders.

Next question here is from Clint. Clint says, great show, guys. I just read that January 19th 2038 at 314 o eight is the end of epoch since it's using a 32 bit integer.

I'm guessing that most of us will still be working and have to deal with this. I'm wondering if work will work has started to fix this, or will we just wait till the last 2nd with, like, y two k. I've never heard of this issue whatsoever, but this is hilarious. This is very much the y two k issue where, like, years were coded with Two digits to save space.

And then because of that, when it goes to year 2000, those years will be 0.

And a lot of problems could have happened, but, you know, luckily, people mitigated that at the last second. But if you remember the y two k scare when everybody was, like, freaking out the night of? I remember being, like you know, I was in, what, high school or middle school and just being, like, alright. Nothing happened. It's all good.

It's all fine. Rid. My dad spent, like, a good couple years of his career upgrading stuff to y two k. And it's funny because at the time, I didn't understand it. And now as an older person, like, oh, they literally were just starting the date as like 99.

Right. And then It would go back to 0, and then there's, like, things that we're checking if it's greater than or whatever, which is hilarious to think about. Like, that was the actual problem. I thought it was More complex than that. Hey. It was a plot point in the movie Office Space where

do do you remember Office Space? Oh, yeah. Oh, yeah. Systems are all all they're all so So many people work on the y two k bug. No one's gonna be able to notice the, issue there. So it's it's very funny. I have no idea, Clint. I've never this is the 1st time I've heard of this, And I'm now very interested, so maybe we'll have to do a little little hunt for this to see if there's any work being done. Yeah. Absolutely. This has been,

what, like, 16 years from now. Yeah.

So that's. Yeah. That's not that far away. And, like, I bet I bet before then, either you can just, like, switch it to seconds and multiply by a1000. Oh, yeah.

Rid. That's so cool. You can't. You have to use a big int. We have big ints, and maybe that's when we're all gonna switch to using big ints, rid. Or, like, you just you just save it as a like, maybe you will have moved away from time stamps by then And and we're just using, like, proper dates, you know? I don't know what the actual solution is. If if you have any insight listener,

into this issue or you've heard of this, Please let us know because I I think this is wild. This is the 1st time I've ever heard of this. Yeah. I just googled

32 bit integer, and it says 22,000,001 A 147 oh, no. 2,000,000,000,147,483,000,000,483,600 rid. And 47.

And if you go to, epoc.versell.app, this is an app that we use for, doing the timestamps on our oh, shoot. We use this on our podcast. Rid. Yeah. We use time stamps on the pocket. Oh, my we gotta fix this. We got it. We got 16 years.

I'll do it I'll do it next year. I'll do it Next year. Don't worry. Yeah. I see it next year. That was, like, the the the we had the leading 0 bug on the syntax website for, rid. Like, 2 years before it actually. Y two ks bug itself. Yeah. January January 18.

I'll leave it for 2038. You got a couple of weeks in January. Yeah. To figure it out. We have to convert it to just I think we just converted to big end. That's that's the that's my that's my fix.

It's a good fix.

Although rid Does a date take a big int? Because if you you do new date and you pass at a time stamp, Can you pass it a big end and not just a regular number? Oh, we're screwed. It's all gonna crumble. I'm just gonna go start

Stockpiling cash and buying food rations sounds good to me. You know what else sounds good to me was? What? Having a service that catalogs and, contains all of my errors and exceptions so that I can see them as they happen, but also mark them as, complete when I fix them or mark them as regressed when, they have regressed and I have not fixed them. But also attach them to issues, users, browsers, and get the full Stack with source maps and all that and more. I'm talking about Sentry at Sentry dot I o is the perfect tool To catalog all of your errors and exceptions, but not only that, track performance of your website. Get your web vitals, all transactions. See to your user misery score. What's fast, what's not. Is it really amazing that you can, when you when you adjust the releases too? So I'm just gonna go a little, by the by on some of these features here. One of which is that you can tag, your issues and exceptions with releases, and you can very much track, like, which Releases are buggier so you can see if oh, wait. Alright. Version 3.01 came out, and this version is Got some problems, and it it we have regressed. Everything is kind of worse than it was in 3 point o. So let's do some work there and and make the next release squash some of those bugs. You can also set up alerts.

There's also a new feature, in century called dashboard allow you to create your own custom maps, graphs, and more. And if you have the business plan, you can get access to that and have, essentially, build your own custom dashboard. Man, who doesn't love a custom dashboard? Gotta love it. So check it out at century.i0.

Use the coupon code tasty treat, all lowercase, all one word, and you will get rid. 2 months for free. Century, one of those services that you gotta try. Thanks so much for Century for sponsoring. I just launched,

a new version of our course platform, rid. And, there was an issue with the one of the, one of the routes. So it's throwing, like, thousands and thousands of errors.

And Century says you're about to exceed your transaction limit.

And like, it's it's funny because, like, you can either buy more rid credits or increase your plan or fix the bug. Yeah.

So it's kind of a little kick in the pants. Yeah. It's a nice little incentive there.

Next question we have here is Charlie.

Charlie bit my finger. Remember that? That was, like, the rich. Remember that? Yeah. Yeah. I do.

Charlie from Grand Rapids, Michigan.

Shout out to Michigan.

My work uses

rid React and TypeScript, and we use a lot of open source packages. Some of these packages use TypeScript with prop types. I'm a big TypeScript fan and understand the benefits. But why do you use it with prop types? Have you used prop types in your JS or TS React projects? Rid Stack Overflow answer says that TypeScript validates types at compile time, whereas prop types are checked at runtime. This This makes sense to me, but I've never used prop types before. Should I add prop types to my package and projects? Thanks. So The Stack Overflow is right is that, TypeScript is entirely at compile time, meaning that it will only check against rid. Your functions are accepting the right data and whatnot. But when it's actually running, TypeScript is is gone by then. And if you want to check the data rid. As you are running it in development mode, let's say you are taking in data from a form and passing it in, and that data is not what it is expecting.

Rid. A prop type is gonna throw an error and say, hey, you you gave me a string here, and I was expecting a number. Although, If you if you coded it right, TypeScript would also catch that at at dev time. So there's that. And then there's also another benefit to prop types is that they're a little bit more flexible. You can run, rid. Instance of queries. You can write regexes. You can do functions to check the data. Remember we were talking a couple episodes ago about, rid. TypeScript doesn't have, like, full validation. Like, it has you can you can specify all the possible options, But you you can't like check that it starts with a capital H or has like meets this specific regex. So They are kind of different things. This answer says they are totally different things. I would say, yeah, because like with all of that said,

I don't write prop types in React when I'm using TypeScript anymore because it's it's good enough for me. I think it I've never been bit. Have you? I I Before TypeScript, I use prop types. After TypeScript, I stopped using prop types. Yeah. Just felt redundant. And honestly, again, I'd much rather focus my time on having that stuff available in build time than

Totally. Yeah. Than You only got so time. You only have so much time to do this stuff. And, like, sometimes you feel like you're like you're typing all this stuff in, like, yes, The answer is that there are different things. But you kind of feel like, is this really going to bite me in the butt ever? You know, is this really helping me that much? Or am I just kind of kind of making work for myself. And especially as like, I don't know, Scott and I were smaller devs and we've got stuff to do. I'm like, 2 feet tall. Rid. Run a business? Wow.

That's a good time. Devs. We're smaller devs. Yeah. Yeah. So just I don't know. Not not rid. Worth it to me in my opinion. I would I would bet that most TypeScript devs would say,

that is the same. Yeah. Yeah. Totally. Alright. Next question from Anan.

What's worse, bad documentation or no documentation? No documentation is worse.

Rid. Because with no documentation, you have to go to the code to see how to even, like, implement the thing at all, how to install it, how to utilize it, how where everything comes from.

So I would say no documentation is worse, but neither of them are good. So yeah.

Bad documentation.

Yeah. Bad documentation is only bad if it's, like, wrong documentation. Right? Yeah. I run into that a lot where it's just like the docs are just not as good as they could be rid. As the devs are busy actually building the thing that they're building. Right? And like, I find I find myself contributing to docs all the times. Little corrections here or there, little better clarifications, corrections, better examples, things like that. Like, honestly, I feel like that is rid Where a lot of my specialty lies, so why not contribute that back? So definitely bad documentation is way better than no documentation at all Then you just have no idea what the surface area of something is without diving into the code. Yeah. Totally. And you know what? I I think there's sometimes What makes bad documentation is sometimes people like

I don't know. Sometimes I read documentation, and and it's it seems like it's, like, written for experts. Rid. And, typically, the people who are, like, reading the documentation are not the experts. They're the people trying to learn a thing. So it's like, I Sometimes documentation could be dumbed down a lot more into more plain English. And I think maybe some developers are just that's not a skill they have. Maybe they're just rid Very smart, and it's hard to not be very smart. So Yeah. Yeah. Next question from Anan. I have rid. So many dev projects ideas to start, but I cannot seem to stick around and finish any of them properly,

mostly because I seem to give up And meet stumbling blocks in learning new tech. How do you find the motivation or discipline to follow through inside projects? So this is a really good question. I like this a lot because, rid I don't know. Half of the stuff that I do is I just, like, abandon it halfway through because, like, I've learned what I needed to learn, and and that's totally fine. But then again, there there also something to be said for people who finish things are going to be much more successful in this game because That last 10% is so tricky. You run into all kinds of little, shoot. I forgot about this. I forgot about that. That's Like that last 10% is often like 50% of the actual work. Totally. And people that can sort of, like, push through that, have a whole another level of skill set, in my opinion. So what is the what's the saying? The road to hell is paved with good intentions? Rid. Yes. Hey, that is You know? Yeah. That's what I think about. This type of thing is, like, yeah, you meant to finish it, but, like, actually do it. Like, just rid. Just sit down and do it. Figure out figure out those problems,

figure out what you're actually stumbling on, and figure out how to get around them. Because if you can do that, You're gonna level up a whole another level as a dev. Yeah. I think a good thing too is to, like, recognize what your motivation is for doing something. Is is your side project a side project because You wanna make money or because you wanna learn something specifically or because you want to gain notoriety from it? Like, what is the end result goal of your side project. And if that if your eyes are not on the prize, then you very well may like you you you may not, you know, get there. Right? Rid because you need that motivation, and that motivation is going to come from the same thing that motivated you to start the project in the 1st place. But then again, at the same regard, don't be afraid to abandon something like Wes said because sometimes you've gotten what you needed out of the project. And maybe, You know, the the real prize was the things you learned along the way, so to say. So yeah. That's great. Yes.

Alright. Next question here. Where is your head at? From BasementJacks, says, hey, guys. Sick podcast as always.

So I'm having a little headless issue. Hey. You should get that checked. You should get that checked out, basement jacks.

Your your head? Rid Ichabod Ichabod Crane, is that the guy? Is that the headless horseman? I don't know. I don't know what that is, but I had a similar joke rid. This morning, my I dropped my daughter off at school, and her mask was falling off. She says my ears are falling off. I was like, we gotta go to the hospital.

That was that was a good one. It hit

rid. Well, that is a good one. Yeah.

So, yeah, Ichabod Crane is the headless horseman, in case anybody was wondering.

So okay.

Enough enough joke. Enough jokes. So I'm having a little headless issue. I need to take an existing Shopify site and make it headless. The issue is I'm Basically, having decision overload, there is a lot of options. Sanity, Prismic, Storyblock, GraphCMS, Strappy, etcetera. I'm wondering if you guys had much experience creating headless Shopify storefronts and what CMS you've used. Any pros or cons? I'm hoping to find the CMS that I can integrate with Shopify and be used to create a page builder like Form8.

Ideally so that the client can click together their storefront with any custom components created by Mio and have Shopify handle the ecommerce junk.

Side note, there are also possible consideration of u r URL control and being able to fully control the URL path and customize it via the CMS. I don't know if any of this has ever cropped up in your travel too.

Wow.

So they're they're they got a lot of technologies kind of snapping together. And I guess the big thing is, like, okay. So Shopify exists already. So that's one of the thing you you need to use. No. I'm not I I've done Shopify headless business stuff, especially with Gatsby in the past. But what I haven't rid. Really dove into a Shopify is the kind of CMS tools that Shopify itself has. The thing I'm getting hung up here in my My explanation of this is, like, what does the CMS tools actually need to do? Usually, like ecommerce sites, a lot of the CMS parts of it are simply the products. Right? And those products are coming in via headless manner from the API. So, like, what exactly here do you need a full end CMS for? Because if if it was me, I probably wouldn't be reaching for another CMS in addition to Shopify, because Shopify is the CMS to me, and then I would do either everything else in code or utilize Shopify to the to most that I could there. So, like, what what exactly are you needing a whole another system for? And when you have these other systems, you have Sanity, Prismic, Storyblock, Grassi, all of these services that you could potentially strap in here, strappy in here. But I I I just wonder if you need it. Like, do you need Another CMS or not. Because the one thing that you're gonna have to think about is the more systems and tools you add in, the more places people are gonna have to log in, the more Places people are gonna look for something if something's, data's coming in or something's going wrong or or or the data is not correct or The training is gonna be more intense. So, like, who's using this thing, and are those people going to want to go to several different places to change things in the CMS, Going to modify it. And and they also say, like, I'm hoping to find a CMS that can easily integrate with Shopify and can be used to create a page builder like. So this is intense, and I don't I don't know. I don't I don't I don't know because you're gonna end up having so many different services kind of working together. I could I could see connecting multiple CMSs to Shopify being a big disaster. You know what I would probably end up doing is is if you do need it, I would probably just use headless WordPress and then Shopify together. Use all the product stuff on Shopify and then any sort of data and page stuff in WordPress.

It. That would be my call, but, I don't know. It sounds kinda scary to me if you're if you're asking for my honest advice.

It well, I seem to To see from looking at online stores is a lot of people will only kick you off to Their Shopify store once it's time to actually do the shopping and then the whole marketing, SEO, all of that. And It seems like Shopify will do that, all of you all for you. But from what I'm seeing, a lot of people will pick either, like, a page builder, Squarespace or whatever, or they'll they'll build something that they'll take something like next year and they'll they'll use the sanity or graph CMS or strappy or story block or Prismac or any of those. Right.

Rid. And, like, I guess it depends on on what you need to do. I think what I will tell people, and I guess question all the time, is don't try rid. To build your own online store if it is very complicated. Like, for example, when I use my t shirts, rid Sold my t shirts. I have an entire ecommerce platform that I used to sell my courses, but I did not use that to sell t shirts because there was Shipping and sizes and permutations and putting those things together and shipping to different countries and quotes. And that And then there was a certain number of every product that needed to be decremented every single time someone bought 1. And it's all very complicated. So I always tell people, like, no. Don't try to build your own online store unless it is very simple, like selling stickers or having a couple of products or you add the card and whatnot. Because once it gets more and more complicated, then you go, oh, man, There's a there's a lot. There's a reason why Shopify is, like, the one of the biggest companies in the world is that it's very hard. Yeah. Yeah. I I do my own my own ecommerce

For selling t shirts when I first started level up tutorials because I was like, I I'm building this thing for the subscriptions. It probably won't be that much more to build in products. And I kept it for, like, 2 years before removing it because it was a constant source of stress. It was a constant source of pain in my rear, and it just did it it was not fun at all whatsoever. So, yeah, I totally agree with your sentiment there.

Sentiment

sent sentiment. Sentiment. Sentiment. And you totally you totally could if you want. Shopify has, like, their own I think it's called the buy button, which is their version of Stripe checkout, where you can check out with that. So I wouldn't really have a really good answer to this is that rid. It depends on how complicated your actual store is. If if it were me, I would probably do a full blown website and a full blown Shopify And then some integrations between the 2. So, one of the we'll use Sanity because we're going to have we're going to have a Sanity sponsorship after this. So this is This is a paid recommendation here, but you could make a I'm sure they even have it a sanity input on, like, one of your websites. Let's say you have a marketing page, and on that marketing page, you could relay a product and that could hook up to The Shopify API and then pull in all the details of that so that if the name changes or the colors available changes, rid. You're only updating that in one place. As soon as you have something that has changed in 2 places, then you're in a world of hurt. Like, I see it all the time with Wise.

Rid. Wise with the the camera company, they I think I forget what they use. They use Shopify for Canada. They have their own store, and then they obviously have a marketing website.

Rid. And then the marketing website says free shipping, but then the store doesn't give you free shipping. Everyone's always mad at that. And it's like there's obviously rid. A disconnect between those 2 systems, and they something got lost in translation between those 2 systems. Right? And that's probably an email that didn't get answered or whatever, but then you don't have a system to save your butt in that case. So as soon as you start going across multiple platforms, it can get a little bit to be a pain in the butt.

Let's talk about what you could use. Again, totally spot moving from a question to a totally paid sponsored rid. Spot right here is Sanity. Sanity is a structured content CMS, and Sanity has these things called starters. Let's talk about that. Rid. They have a headless Shopify starter powered by Next. Js Insanity. So if you want to be able to use these all these things together, you want to build your own rid. Website for your SEO and your all all the content on your site, and then you also wanna use Shopify as well, you could use. It's called Haul. They have the entire Shopify starter. You just go to sanity.iocreat.

They have templates rid integrate with it all. So you could just click a whole bunch of buttons. You sign in with GitHub. You sign in with your Vercel. You can deploy it to them And bing, bong, boom, you are up and running. It works with, has tailwinds animation with Framer Motion. They have a Shopify Buy SDK already rid. Hooked up real time inventory check. That's what's important to me is that, like, when the t shirt sells out, you got to be able to Check if there's any left before you sell another one. Right? So they have real time inventory check for products, SEO features, accessibility features, all kinds of really neat stuff. So Check it out for your next website or online store, sanity.

I0/syntax.

So that's where you wanna sign up, and then you wanna check out this, Shopify starter, just Google Sanity Shopify, and it'll come up for you. Sick. Alright. Next question from Ringo

Starr.

Ringo asks, hey, Scott and Wes. A question for Wes. On your stickers website, boss.af, you have a Question mark token equals query param and some token value for it. Could you explain a bit more what this is For and how it works. It looks very interesting, and I've never seen it before. Yes.

So those like anytime you see, like, a token in a URL. It's usually being used to pass information from a link rid. To the actual system that is running. And that's good because, like, you you talk about state managers. If you wanna hold a piece of data, the URL is a really good place rid to hold data. Right? And it's just question mark token equals a, b, c 123. So in my specific course platform, it's probably one of 3 things. So rid. 1st one is, probably the most common. It's a PayPal callback URL. So somebody you go to my website, advanced react You buy the thing. You click on PayPal. You gotta go off to PayPal. You pay the money and you come back, and then you finish up. There's a couple other piece of information I need to grab from you before you're done.

And that token is passed back From PayPal to the website via the URL.

And then I can grab that token via the query params rid. And and actually push it through, meaning that I actually charge it because PayPal will say, alright. It's good for $60 or whatever.

Rid. Then you gotta finish up and actually charge the card or, in my case, take the money out of PayPal. So there's that.

Stripe checkout works very much the same way as well.

I don't use Stripe checkout in my URL platform or my course platform at the moment.

So there's that.

One thing about that sometimes is that people I have to, like I had some share buttons on there once, And people were sharing the token URL because it just defaulted to the window URL. So I had to write some code to strip that out there. It's not a big deal because those tokens are rid. Inert once once you're actually done, but that's why it's there. The next one is, drip custom URL. So if if I send rid. A link in an email. My email platform is is I use Drip.

Drip will automatically append Individual unique identifiers to all the links, and then they use that to figure out which links you've clicked and if you've opened the email and things like that, I should probably actually turn that off because I don't even use I don't use that information. You know, like, some some people are crazy being like, oh, they click this link on. Now let's hammer them with, like, a coupon code For that specific link.

I don't do that.

So there's that. And then the third one is Google Analytics tracking.

Rid so I have this built into my platform, but I don't use it a whole lot. But if I wanted to, rid Tweet a link to one of my courses, Instagram a link to one of my courses, email newsletter a link to one of my courses, and then, like, put a link in the syntax show notes on my courses. And I wanted to see who is buying it from where, you know, rid. Then you can put UTM source equals email. Mhmm. And then what happens Is that when someone buys it, I mark it in Google Analytics as paid, and then I can go into my Google Analytics and say, this is someone Someone actually bought something, and this is where they came from. You know? And for those, I actually scrub those out of the URL. So if you visit one of my websites rid. With if you you can even test it. Just go to my one of my websites, put the UTM in the URL, hit enter. And after the page loads, I use push date to update the URL and take those out of the URL because they're ugly, right? They're good for tracking and figuring out where your customers are coming from, But they're very ugly to have in the actual URL.

So what I do is when the page loads, I check if there are any in the URL and then I'll just scrub them rid Out of the URL, and it's it's pretty handy. So it's one of those 3 things usually when you are visiting my website. And

The drip and the Google ones should be scrubbed, and the the PayPal one shouldn't be scrubbed because you need that information for for checking out. Yeah. That's interesting. You know, the query primes too, they they can do so much stuff. I I underutilized them myself. I think we only really use them for affiliate codes. But, You know, you also see them in things like YouTube when you're copying a YouTube link, and it will have the time stamp if you wanna share a YouTube video with the current time stamp. So, again, it's like just for sharing rid. Essentially, information, via a link. So I I think you nailed it with that one. Next question from Brian Kitchman.

Have you thought of selling syntax.fm ready to help support your podcast.

Some of us listeners would be happy to give you our money and share the word.

Yes, we've rid. We've talked about it a couple times. We should probably do that. I think that would be really fun to have a syntax shirt. Yeah. I'm wearing a a West Boss sweatshirt right now. I gotta say I love this thing. I would I would actually I would love a syntax one very similar to this. Yeah. Those sweatshirts

are the best. Like, I rid. Maybe 3 years ago, I made these sweatshirts just as Christmas gifts for people who had helped me out that year.

Rid. And the I was like I was like, give me the heaviest hoodie ever.

And they were so expensive to ship because they're so heavy.

Like 800 grams or something like that for the hoodie. So, but I we should look into that again. So answer to that is is yes.

I have the whole infrastructure, so why not? You know? Oh, I didn't even say that. Last time I used when I sold my T shirts, I used Snipcart, and I integrated into my Gatsby website. And that that works really well. Mhmm.

Yeah. Yeah. I I'll be down for that too.

Yeah. We should we should do something. I bet that's the same thing. We're, like, oh, yeah. We should get a new, theme song. We should There's always so much time in the world. Do you know? Seriously, yeah. And and I got a dev job, and I run a business, and I have 2 kids, and yeah. It's it's a lot. There's a lot of stuff to do. And get this, Wes. I gotta do the dishes every night by hand because our dishwasher broke, in October. So I've been doing a family of Four of dishes every single night, and it just takes forever.

Oh, brutal. Ever with all those, like, kids bottles. They take not bottles. They're they're Our kids call them buzzers. Sippy cups. They're sippy cups. Yeah. They they yeah.

That's it. They came up with that. I don't know how. But, yeah, the Washing the Bubba's takes time, man. It takes various time. That's why I can't do T shirts, Brian, is because I'm washing Bubba's. Who's washing Bubba's? Next question is from Stefan, Longtime listener from Norway. I'm making a website with React and using Express for my back end. While developing, I have both running at the same URL and port with package dot JSON proxy setup so that I can set HTTP only cookies for storing session tokens for authentication.

I am looking to migrate my dev project to Next. Js because now I have a need for SSR and SEO for my website.

Can I migrate my express routes to Next JS's API and get the same HTTP only cookie workflow? What are the advantages and disadvantages for next JS API versus a stand alone expressed back end? I am only familiar with the dedicated rest back end. I don't know enough of serverless to see if it's suitable for my project. Okay. So, rid. I'm gonna let you answer some of these things that are more specific to Next. Js West, because I haven't done a ton with Next. Js's API endpoints, just kind of the the basics.

But if you're wondering maybe, like, what the benefits are, you know, we actually have our own API separated.

And I do kind of wonder If occasionally, I kind of get into the mode, like, I kinda wish these were together. But at the same time, there's some really nice things about having a separate API where you can Push updates just to the API, or you can have that service be its own thing and and control it and scale it separately, rather than if it's altogether. No. I don't I don't know how Next. Js deals with that if there are specific things for scaling your API separately, rid. Within the Next. Yes. But, Stefan, if you're wondering kind of like, how do you have that HTTP only workflow, it's really going to be the same as your your Express setup as in you can set and delete and do anything with those cookies only from the server side, And you're going to treat your Next JS endpoint as if it were just like a normal express endpoint in that regard. So whatever you're using to do to rid. Your cookie already.

I I can't speak to Next. Js's specifically. The way I do it personally is we use a Mercurius cookie package that is For dealing with HTTP only cookies. So I'm sure there's lots of examples out there for Next. Js authentication cookies. But, again, You're only gonna be setting these from the endpoint themselves, exact same way you would do it in a normal setup. Yeah. It's there's not a whole lot of difference. You need to, rid. Like, be reminded that,

serverless functions are still on a server Despite the name.

And you can still set headers. Like, at the end of the day, HTTP only cookies are just a header that's replied Mhmm. With rid a, with a response. So whether you're send you're sending back hello in text or some HTML or some JSON or GraphQL endpoint, You can always set a header with that reply, and that header will be accepted by the browser when the browser is old. There's a set cookie header. Let me just put that sucker in the, cookies, and it's marked as a should be only. So make sure it's not rid. Accessible via JavaScript only via the server side. So not a whole lot there.

Next. Js also has now has middleware, Which is like so my entire course platform is on Express, and I heavily use middleware. And I'm I always think, like, oh, it would be nice rid. To move it, not necessarily just the Next. Js. There's no difference between the Next. Js serverless functions and, like, standard Lambda, rid. Ones. There's there you can get, like, helpers and whatnot, but all the serverless is essentially the same.

So, yeah, there's not a whole lot of difference there. Myself, I'm thinking, like, should I move it over to serverless? It would be nice to have, like, faster builds rid And whatnot. Although my builds are beginning really fast lately.

So, like, I think, like, should I I use a lot of middleware now that they have middleware. I wonder, like, I use a lot of connect Middleware, which is connect. Middleware is like, connect is like, I don't know what you call it, but basically rid. Express.

And, what's the one that you use? Fastify.

A a lot of these, like, API things will be able to use connect middleware, meaning that they're rid. All standardized on connect, and and it doesn't matter which one you use. You can always use it. Like, I use one for rate limiting. Like, if someone tries to hammer my rid. Sign up endpoints that will stop them.

All kinds of stuff like that. So I think, like, should I do that? But then I'm like, rid. My website is very cheap and easy to host right now. Like, there's there wouldn't be

A whole lot of benefit other than my own enjoyment of of moving it over to serverless either. Yeah. That is interesting. There's There's that, like, analysis you have to do. So, like, if you have your own express server already, like, is it really going to be that much better for you to move it On to Next. Js and have to deal with that. I don't know. I I personally have not had that that I I haven't had the feeling like that would be enough of a benefit even though I have kind of occasionally looked at the same to do with, like, SvelteKit endpoints instead of Next. Js endpoints. But, yeah, it's it's tough call. At the end of the day, I think we're both more in the camp. If it isn't broke, don't fix it. But,

rid. One more thing is that, he he talked about session tokens, storing them on the server side.

Most likely you are already storing those session tokens somewhere.

I specifically I store mine in MongoDB.

You can also store them in very popular places. Store session tokens is in Redis.

So if you are by chance Putting your session tokens in memory, that's not gonna work for serverless.

But you generally shouldn't be putting session tokens in in memory anyways rid. Because, you can overflow your memory very quickly that way. Good call. Beauty.

Let's talk about our last sponsor now, which is FreshBooks.

FreshBooks is the cloud accounting software built for business owners. It is awesome. I use it myself. I have for rid. I think I looked it up. I think I've been using it for something like 12 years back when Ben Vinegar was employee number 5 or whatever.

We interviewed him the other day and it is awesome. It's really cool because you can look at all of your invoices, all your expenses, all your clients, all of your projects, you can get a there's all kinds of reporting around FreshBooks. You can see how your business is doing at any given time. If you need to estimate Where you're gonna be at in 6 months from now, you can do that.

It's just a great way to run the books for your business. Check it out. Freshbooks.comforward/ syntax.

That's gonna give you a 30 day free trial. Thank you, FreshBooks, for sponsoring. Sick. Cool. Well, this is a a part of the show where we're gonna get into sick picks, things that We like things that we think are pretty sick. Wes, do you have a sick pick today? I do. So this was a bit of a joke pick,

rid. And then it turned out to have a, like, cult following. So, we use the stuff in my house called working hands. It's a hand cream for for for working hands. And I always joke with my brother in law is an actual farmer, and I always joke about how my, I have programming hands and, like, so I put a little thing on Twitter, Levine.

Like, finally, they made a, rid Like a a really hard, really good hand cream for extremely cracked and dry hands for us programmers, you know, like, working with our hands.

Rid. And, but then, like, I don't think anybody realized that that was a bit of a joke, but everybody's like, that stuff's the best. Or, like, I bought some after you posted that, and it's amazing. And, like, it actually is very, very good. It's it's the best hand cream ever. It's not It doesn't get, it's more like waxy than it is slimy or oily, which is good if your fingers are slipping all over the over the keys after you put Hand cream on. And I don't know about you, but Canadian winters really, really take a toll on your hands. So It's a good one. You wanna check it out. It's called the Working Hands from O'Keefe's.

Yeah. It's so dry here that my my skin overall in the winter is just a It's a mess.

Just dealing with that dry skin hands hands specifically too as well. And you know what? I gotta say that, man.

I'm going to I'm going to double up your sick pick on O'Keefe's, and I'm going to sick pick O'Keefe's rid Lip balm.

Keith, get at us here. I bought this thing in, like, 6 packs because my My my lips, specifically, in in this winter or Colorado dry climate have just been getting destroyed, and I've really run the gamut on All the different types of lip balms. I've tried the lip bag, you know, the little circle egg thing. I've tried the Yeah. Yep. I've tried lip bag. I've tried, rid Busax blizz Blissdax, not Blizzax. Blizzax are top notch.

I've tried Blizzax. I've tried, Lip bag. I've tried all that stuff. And let me tell you, O'Keefe's lip balm is the only one that's, like, actually made a difference where I'm not having to put it on Every single day, 247.

And so I'm gonna I'm gonna do that, and I like the cooling one with some, what is that? With the menthol. Get It's a peanut alcohol in there. So spicy? Yeah. So I'm gonna I'm gonna sick pick O'Keefe's lip balm with menthol. We're just going straight on rid. O'Keefe's today.

I got all of this stuff. I'm gonna pick up some of that hand cream for myself too because that looks wonderful. It's good stuff. It's good stuff. We're we're talking about this on Twitter because It's really funny sometimes you talk about stuff on Twitter and, like like, everybody nobody talks about lip balm. But then once you start, everyone's everyone's got tips and stuff. And We got one more tip is, if you use lanolin, which is lanolin is meant for your nipples when you're breastfeeding.

And

I'm sorry. You said nipples. I was laughing. I didn't mean to laugh.

Like, one of my daughters gets, like, awful, rid. Super chapped lips. Like just like to a point where it's like like red and stinging. And we finally figured out you can just buy lanolin straight up in the Baby section. Oh. And that stuff is apparently, it's the active ingredient in a lot of these lip balms.

Rid. And, man, that works super well as well. But it it comes in it's kinda messy, and it comes in the thing, but you just want, like, a nice lip balm to put in your pocket. I'm going to get some of this O'Keefe stuff because

it's good. Yeah. It's pretty standard lip balm, you know, size fair, whatever. It's an easy to apply. Yeah. I always like

the the Burt's Bees for the longest time had the circle tins.

I love that because I would put it in my, like, salvage jeans and that you get like a rid. Circle in the back in your back pocket.

And people because it's like a thing in salvage gene world to put a a pack of chew in your back pocket and to get, like, a perfect chew ring. And, like, I don't I don't chew tobacco.

Yeah. I don't like a lot of guys just get an empty tin and put it in to get the luck guy. Rid. But, like, I'm not. I like the little thing, but they stopped selling it in Canada.

I still have a couple. I bought them all when they stopped selling it. And somebody They told me in the in the UK, they still sell it in a tin, so I gotta take a flight one day. I don't do the tin. I no. You got me, like, a tin of some fancy lip balm at some point. I was like, what am I supposed to do? Rub this on my finger and then rub it on my lips, and then now I got a little ball on my finger? Finger And then I lose it in there. Yeah. Yeah. Yeah. Come on. Rid. Come on. Oh, man. Tim for life. We've moved past that, Wes. We have we have the deodorant stick style thing where you just twist it, and it comes out. Yeah. That's fair. Yep.

Let's move to shameless plugs. I'm going to shamelessly plug all my courses at Westbost.comforward/courses.

I'm going to specifically plug the course player, which has been totally rewritten and updated. So we updated the entire progress tracking. You can now check videos on and off if you want to watch them again. That was a big request that we had.

Rid. And the it now uses CSS aspect ratio instead of the Position padding tag. So it's, like, so much better on mobile and, Position sticky for scrolling through the videos and just just a well needed update to the course player. So it doesn't look a whole lot different, but rid Every line of code in there has been rewritten, so check it out.

Westboss.comforward/courses.

Any course that you watch, free or paid,

We'll, we'll have the new player. Sick. I'm going to shamelessly plug the latest course on level up tutorials.com and specifically because because I'm gonna get specific with it just like you.

Specifically, we just released a new course on Svelte three d using Svelte cubed.

And we did our very 1st course drop where, Caitlin, who does our marketing, she interviewed me about the course and asked me a bunch of questions. It's like an audience surrogate to say, like, you know, what's the job market like for this type of thing? And and just in general. And so we we did a fun little course drop video. So I'm gonna Shamelessly plug that specifically. I'll link it up in the show notes. If you wanna learn more about Svelte and three d on the web, just watch this video because she asks a ton of good questions, And I give a lot of good answers, and we kind of dive into the course itself and what you'll learn about it and some of the examples. It was a lot of fun, and it was our 1st time doing this. So, let us know what you think, and let us know if, if you like the course drop. You wanna see more of them. We're gonna be doing every every month from now on, and we we'll do giveaways too. We did A giveaway of a free month of LevelUp tutorials pro. So, yeah, check it out. Leveluptutorials.com, as well. Rid. Just throw in all the URLs.

Beautiful. Alright. Thanks, everyone, so much for tuning in. Appreciate all of your questions. Keep them coming. We'll keep answering them, We will catch you on Monday.

Pete.

Peace.

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