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

I specifically I store mine in MongoDB.

And so I'm gonna I'm gonna do that, and I like the cooling one with some,

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

hand cream And if you go to, crafted that package lock rid. JSON file to point towards a malicious package 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 is so tricky. You run into all kinds of little, rid. And then it turned out to have a, like, cult following. So, here, but you could make a I'm sure they even have it a sanity input

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 don't know how much you've used directives in GraphQL.

It's just a great way to run the books for your business. Check it out. Freshbooks.comforward/ 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.

connect is like, I don't know what you call it, but basically rid. Express.

rid Lip balm.

syntax.

software

cheap and easy to host right now. Like, there's there wouldn't be on, like, everywhere. Like, I'm sure you get it as well, but it's just, like, frozen Rid. And, And then there was a certain number of every product that needed to be decremented every single time someone bought 1. And it's

for for for working hands. And I always joke with my brother in law is an actual farmer,

Which is like so my entire course platform is on Express, on, like, one of your websites. Let's say you have a marketing page, things will be able to use connect middleware, meaning that they're rid. All standardized on connect, storing them on the server side.

have not had that

I personally

rid. O'Keefe's today.

rid. To move it, not necessarily just the Next. Js. There's no difference between the Next. Js into specific so I put a little thing on Twitter, Levine.

and I'm going to sick pick O'Keefe's it's okay. Front end developers. Not real developers? Who cares? Who cares? it's it's not exactly a feature based role Kind of thing like that that setup, but it is definitely like a, Busax

All kinds of stuff like that. So I think, like, should I do that? But then I'm like, slimy or oily, which is good if your fingers are slipping all over the over the keys after you put Hand cream on. And

blizz Blissdax, not Blizzax. Blizzax are top notch.

rid And whatnot. Although my builds are beginning really fast lately.

But you generally shouldn't be putting session tokens in in memory 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?

I'm going to I'm going to double up your sick pick on O'Keefe's, 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

Where you're gonna be at in 6 months from now, you can do that.

A a lot of these, like, API

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

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,

own express server already, like, Can I migrate that is the same. Yeah. Yeah. Totally. Alright. Next question from Anan.

and I heavily use middleware. And I'm I always think, like, oh, it would be nice

I always joke about how my, 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,

I've tried Blizzax. I've tried, Lip bag. I've tried all that stuff. And let me tell you, O'Keefe's

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 rid. One more thing is that, he he talked about session tokens, I love that because I would put it in my, like, salvage jeans and that you get like a like, Can delete a user, can update a user, can view a user. Right? And then you can group all of those permissions rid A design that was converted into box shadow.

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 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

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, 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 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,

My my lips, specifically, in in this winter or Colorado

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 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.

now has middleware,

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, so describes Directives.

FreshBooks is the cloud accounting

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

Most likely you are already storing those session tokens 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 serverless functions and, like, standard Lambda,

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

somewhere.

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,

which is connect. Middleware is like, who is buying it from where, you know,

Keith, get at us here. I bought this thing in, like, 6 packs because my

it's more like waxy than it is 6 months until the first solve. It.

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

Hopefully, that's, you know, not going to install anything breaking. Right? great show, guys. I just 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

which is like

Next question here is from Clint. Clint says,

I I I don't know. This this is the type of thing you definitely get more of in, like, 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

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, 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

all the way down until this into the Earth.

you know, I was in, what, high school or middle school and just being, like,

Let's see how long this takes. That's so wild. But freaking artisanally 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.

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

yeah. Oh my gosh. Yeah. This is so funny. It's just

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 Rid so So that's where you wanna sign up, and then you wanna check out this, 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.

Oh, it unfroze.

rid. You're clearly very green.

this is this is what I love love about the Internet. It's like, no. You shouldn't use box shadow to

And then because of that, when it goes to year 2000,

You

don't give ignorant people the time.

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

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 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.

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

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.

URL, or online store, sanity.

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.

with, like, a 1000000

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

or a malicious version of a package or something. And then when you type npm install,

2038

And so I usually just regenerate them myself, 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, 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

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,

rid negative about a technology or a

those years will be 0.

is beautiful.

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,

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,

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've gotten what you needed out of the project. And maybe, You know, the the real 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 is the kind of CMS tools that Shopify itself

314

parsing engine to paint 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.

Oh, oh, I just froze the browser. It's it's it's taking

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

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

read that January 19th 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

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

My entire browser

they're made for that kind of thing.

alright. Nothing happened. It's all good.

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.

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

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 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.

Oh my gosh. A 1000000 table cells It's a background.

rid. Spot right here is Sanity. Sanity is a structured content CMS,

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.

Their Shopify store once it's time to actually do the shopping and then the whole marketing,

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 let's say you are taking in data from a form and passing it in, and that data is not what it is expecting.

recommendation

rid. Website for your SEO and your all all the content on your site, and then you also wanna use Shopify as well,

and Sanity has these things called starters. Let's talk about that. Rid. They have a headless Shopify Usually, these end up being tens of megabytes, though. Each pixel is its own shadow.

starter Pete.

and on that marketing page, you could relay a product and that could hook up to

I always tell people, like, no. Don't try to build your own online store Wow.

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 and can be used to create a page builder like. So

you could use. It's called Haul. They have the entire Shopify starter. You just go to sanity.iocreat.

shipping to different countries and quotes. And that we use the stuff in my house called working hands. It's a

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 rid. Ten common bugs, and then they go to, like, thousands of websites and report it. And every now and then, So, 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 bing, bong, boom, you are up and running. It works with,

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,

rid. It depends on how complicated your actual store is. If if it were me, I would probably do a full blown website hello in text or some HTML or some JSON or GraphQL endpoint, You can always set a header interesting ones about like headless 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, And rid. TypeScript doesn't have, serverless functions are still

unless it is very simple, like selling stickers or having a couple of products or you add the card and whatnot. Because rid. The dependencies 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.

I0/syntax.

once it gets more and more complicated, because, like, who who is going through that and manually doing it? And then also, And that token 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

to build in products. And I kept it for, like,

rid. You're only updating that in one place. As soon as you have something that has changed in 2 places, append

has tailwinds animation with Framer Motion. They have a Shopify Buy SDK already that, rid. And 47.

and sizes and permutations specifically plug the course player, which has been I'm going to anyways

the sanity or graph CMS or strappy or story block or Prismac or any of those. Right.

sent sentiment. Sentiment. Sentiment. And you totally you totally could if you want. Shopify has, like, their own

where you can check out with that. So rid. Then you can put UTM source equals rid Ice pack One thing about that sometimes is that and then you finish up. There's a couple other piece of information I need to grab from you before you're done.

It well, I seem to rid. Ones. There's there you can get, like, helpers and whatnot, but rid. Hooked up real time inventory check. That's what's important to me is that, like,

It. That would be my call, but,

Sentiment

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

then

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.

The Shopify API and then pull in all the details of that so that if the name changes or the colors available changes, Whole images can be presented in a single box shadow value.

then 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 rid image, but not there. I always thought about that. Like, could you convert an image to a table

and a full blown Shopify

They have templates level to pass information 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.

To see from looking at online stores is a lot of people My name is Wes Bos. I'm a developer from Canada.

so that I can set HTTP only cookies for storing session tokens for authentication.

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,

I am looking to migrate my dev project to Next. Js

yeah.

And I do kind of wonder

is we use a Mercurius Usage based permissions. So

why not? You know?

rid. Maybe 3 years ago, I made these sweatshirts just as Christmas gifts So that's. Yeah. That's not that far away. And, like, I bet Rid. And the it now uses CSS aspect ratio instead of the

in the, cookies, and I don't know what the actual solution is. If if you have any insight listener, component, and then that permissions component will then check if the user has that permission and putting those things together and

API How can we respond to them? Okay. So,

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?

I have the whole infrastructure,

That's it. They came up with that. I don't know how. But, yeah, the

in October. So I've been doing a family of Four of dishes every single night, and it just takes forever.

ready to help support your podcast.

separated.

on a server 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

Next. Js also has

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, we have the deodorant stick style thing where you just twist it, and it comes out. Yeah. That's fair. Yep.

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.

Rid. And Let's talk about what you could use. Again, totally spot moving from a question to a totally paid sponsored

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

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

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

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 the latest course on level up tutorials.com

are the best. Like, I Oh, we're screwed. It's all gonna crumble. I'm just gonna go start will only kick you off to Before you know it, boom.

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.

my express routes to Next JS's API

only cookie workflow?

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 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, 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, Specifically, at

rid. Within the Next. Yes. But, Stefan, if you're wondering kind of like,

Have you thought of selling syntax.fm

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 prize was the

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, has. The thing I'm getting hung up here in my

whatever you're using to do to rid. Your cookie already.

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,

Despite the name.

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

how do you have that HTTP only workflow, it's really going to be the same as your your Ideally so that the client can click together their storefront

rid React and TypeScript,

They are kind of different things. This answer says they are totally different things. I would say, 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.

essentially, build your own custom dashboard. Man, who doesn't love a custom dashboard? Gotta love it. So check it out at century.i0.

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 Any course that you watch, free or paid, TypeScript is entirely at compile time, meaning that it will only check against

A 147

Rid Stack Overflow answer says that TypeScript

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 I have programming hands and, like, Next question We have here is from Ari. Thanks for the great show. You're welcome.

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, Peace.

like, full validation. Like, it has you can you can specify all the possible options, Rid. And, rid. Because, 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

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,

Rid. A prop type is gonna throw an error and say, hey, you you gave me a string here, Drip will automatically 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 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.

And like, it's it's funny because, like, you can either buy more upgrading stuff to y two k. And it's funny because at the time, I didn't understand it. And now I think it's called the buy button, which is their version of Stripe checkout,

in

you're like you're typing all this stuff in, like, yes, I all very complicated. So tracking.

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

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.

The Stack Overflow

Can you pass it a big end and not just a regular number? But you you can't like check that it starts with a capital H actually do it. Like, just rid. Just sit down and do it. Figure out figure out those problems, oh, no. 2,000,000,000,147,483,000,000,483,600

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,

epoc.versell.app, you can overflow your memory very quickly that way. Good call. Beauty.

It's a good fix.

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

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? Individual I use push date to Administrator and whatnot. And that's really nice because you can then make infinite levels of

one of the routes. So it's throwing, like, thousands and thousands of errors.

Because if you you do new date and you pass at a time stamp,

is right is

Although

Stockpiling cash and buying food rations sounds good to me. You know what else sounds good to me was? What?

There's also a new feature,

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

I bet before then, either you can just, like, switch it to seconds It would go back to 0, and then there's, like, things that we're checking if it's greater than or whatever, rid credits or increase your plan or fix the bug. Yeah.

in build time than

Shout out to Michigan.

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? what, like, 16 years from now. Yeah.

this is an app that we use for, you're in a world of hurt. Like, I see it all the time with Wise.

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, But if you're wondering maybe, like, what the benefits are, you know, we actually have our own

Right. And then

and multiply by a1000. Oh, yeah.

and projects? 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,

a new version of our course platform, rid. And, there was an issue with the one of the, 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.

Next question we have here is Charlie.

Thanks. So

like meets this specific regex. So Like 800 grams or something like that for the hoodie. So, 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

that's my that's my fix.

as an older person, like, oh, they literally were just starting the date as like 99.

My work uses

Rid. That's so I don't even know if I could freeze the entire browser if I tried.

yeah, because like with all of that said,

your issues and exceptions with releases, and you can very much track, like, which Releases are buggier Alright. Next question here. Where is your head at? From BasementJacks,

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

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.

so you can see if oh, wait. Alright. Version 3.01

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, 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,

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,

came out, and this version is

rid Does a date take a big int? 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,

Side note, there are also possible Have you used them, Beata, at all?

this is a really good question. I like this a lot because, for people who had helped me out that year.

Wow.

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? because now I have a need for SSR and SEO for my website.

My explanation of this is, like, what does the CMS tools actually need to do? Usually, like ecommerce sites, see connecting multiple CMSs to Shopify says,

are going to be much more successful in this game because

what's the saying? The road to hell is paved with good intentions? Rid. Yes. Hey, that is You know?

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,

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.

I'm hoping to find the CMS that I can integrate with Shopify

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,

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

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, rid. Well, that is a good one. Yeah.

I I I just wonder if you need it. Like, do you need

So okay.

all of these services that you could potentially strap in here, strappy in here. But

you you you may not, you know, get there. Right? Rid

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

business stuff, especially with Gatsby in the past. But what I haven't

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 Some

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 So I'm having a little headless issue. Hey. You should get that checked. You should get that checked out, basement jacks.

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

a lot of the The early programming 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

things you learned along the way, so to say. So yeah. That's great. Yes.

data's coming in or something's going wrong or or or the data is not correct or

exists already. So that's one of the thing you you need to use. No. I'm not I I've done Shopify headless

afraid to abandon something like Wes said because sometimes 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

That was that was a good one. It hit Rid. Wise with the the camera company, It's all fine. Rid. My dad spent, like, a good couple years of his career have a whole another level of skill set, in my opinion. So what is the 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.

rid. Really dove into a Shopify via a link. So I I think you nailed it with that one. Next question from Brian Kitchman.

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.

hey, guys. Sick podcast as always.

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? and it's it's pretty handy. So it's one of those 3 things usually when you are visiting my website. And

Above a certain authentication level, how do you prefer to implement this? It's kind of interesting one. So

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 what's the one that you use? Fastify.

such as when a certain control needs to be shown only

within an application, 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, 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

we've done a Entire show on roles and permissions. I think we've actually done a couple of them in the past. And tundra,

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

yeah, check it out. Leveluptutorials.com, And because of that, the I mean, the the ground's always really hot so that the roads clear pretty quickly and get the same HTTP

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

Westboss.comforward/courses.

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.

in your back pocket and to get, like, a perfect chew ring. And, like, I don't I don't chew tobacco.

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 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.

totally rewritten and updated. So we updated the entire

Like, one of my daughters gets, like, awful,

rid. Circle in the back in your back pocket.

Position padding tag. So it's, like, so much better on mobile and, rid. My website

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

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, So I would say no documentation is worse, 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.

for a full archive of all of our shows, rid. And don't forget to subscribe in your podcast player

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.

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

as well. Rid. Just throw in all the URLs.

course drop where, Caitlin, who does our marketing,

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 Next question is from Stefan,

or drop a review if you like this show.

and specifically

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 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,

she interviewed me about the course and asked me a bunch of questions. It's like an audience surrogate to say, like, you know, I I can't speak to Next. Js's specifically. The way I do it personally with any custom components created by Mio and have Shopify handle the ecommerce junk.

We'll, we'll have the new player. Sick. I'm going to shamelessly plug

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,

because because I'm gonna get specific with it just like you.

And people because it's like a thing in salvage gene world to put a a pack of chew

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.

Head on over to syntax.fm

if you use lanolin, which is lanolin is meant for your nipples when you're breastfeeding.

is passed back From PayPal to the website via the URL.

I don't do that.

email. Mhmm. And then

from a link and

hey, Scott and Wes. A question for Wes. On your stickers website, boss.af, 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 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 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, I don't know. It sounds kinda scary to me if you're if you're asking for my honest advice.

I should probably actually turn that off because I don't even use

For that specific link.

people I have to, like I had some share buttons on there once, And people were sharing the token URL which converts PNG images to CSS box shadow values.

have this built into my platform, but I don't use it a whole lot. But if I wanted to, 32 bit integer, and it says 22,000,001 Charlie from Grand Rapids, Michigan.

what happens

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.

Someone actually bought something, and this is where they came from. You know? 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, 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 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,

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 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.

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, the snow completely will disappear between snows. So, like, completely.

you have a Question mark token equals query param o eight is the end of epoch since it's using a 32 bit integer.

Shopify starter, just Google Sanity Shopify, and it'll come up for you. Sick. Alright. Next question from Ringo 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,

Starr.

So those like anytime you see, like, a token in a 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 That last 10% Mhmm. Next question is from We got we have 1 more aside from Ari here. Yeah.

or my course platform at the moment.

Stripe checkout works very much the same way as well.

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 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 don't use Stripe checkout in my URL platform 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

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, URL. It's usually being used 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.

So there's that.

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, job title or anything.

rid. A link in an email. My email platform is is I use Drip.

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

Ringo asks, 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 do do you remember Office Space? 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

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.

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

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.

For for me, this is the same argument I hear about, like, is it is

Somebody will be like, oh, wow. Thank you. And they'll pay out, you know, because it's it's it's always rid. Access control

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, and be used to create a page builder like Form8.

roles and role groups.

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

my question is, our our GraphQL library, Mercurius. It has, like, in its own auth package, but that gives you an auth directive

several different, And we did our very 1st

admin,

server part of our role system

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,

I I started learning front end development, and I see a lot of people who say Front end developers aren't really developers,

Like 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.

period. My question is

DMs and emails of, hey. I found a major issue with your because I I get them, like, maybe is very And then one like 1 step further is like what about the Totally. Yeah. Than You only got so time. You only have so much time to do this stuff. And, like, sometimes you feel like

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

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 Another CMS or not. Because

So

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? I wouldn't really have a really good answer to this is that all the serverless is essentially the same.

off, which is,

like,

We just basically have

no. You paid for that. It's like, oh, sorry. Free. Yeah. What?

rid. Permissions 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,

Because

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,

1, it's not a bug. And 2, like, I that's not, like, part of the program.

sorry. That was translated in case you're wondering why I I was struggling over the words there. So, four t's.

What do we do? I do,

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

This is the same lang.

So usually what I'll do is I'll just, like, wrap that in, like, a and then either render it out or not render it out. And

we don't do,

like, they just have a list of was employee number 5 or whatever.

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 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

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 and I was expecting a number. Although, but I we should look into that again. So answer to that is is yes.

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.

things like that. Like, honestly, I feel like

Rid. Because with no documentation,

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

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 drip custom URL. So if if I send So there's that. And then the third one is Google Analytics Let's move to shameless plugs. I'm going to shamelessly plug all my courses at Westbost.comforward/courses.

contributing to docs all the times. Little corrections here or there, little better clarifications, when the t shirt sells out, 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.

but neither of them are good. So yeah.

Bad documentation.

rid. As the devs are busy actually building the thing that they're building. Right? And like, I find I find myself

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 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?

that is rid Where a lot of my specialty lies, so why not contribute that back? So definitely or has Yeah. That's what I think about. This type of thing is, like, yeah, you meant to finish it, but, like,

corrections, better examples, rid a, with a response. So whether you're send you're sending back

How do you do

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

e commerce. That's always a question that we have and there's a lot of questions about that.

cookies in Next. Js?

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

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,

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,

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.

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.