Potluck - Protestware × NoSQL × Next.js × ESM × Jest

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

Welcome to Syntax, a podcast with the tastiest web development treats rid Out there today, we've got a potluck for you. This is where you bring the questions. We bring the answers. We got all kinds of good stuff for you today talking about, rid. Next. Js and building syntax dot f m and our Arm base max slow. And, rid do you alphabetize your JavaScript objects? Why would you not use a SQL database rid Over, NoSQL.

Tons of good stuff. We are sponsored by 3 awesome companies today. Prismic, Headless CMS, GraphQL, REST API, and Slices. They got Slices. Let's talk about them partway through the episode. LogRocket JavaScript session replay, great rid For debugging and Auth0, I'm wearing their t shirt right now.

They are easy to implement adaptable rid. And authorization for your app. Basically, if you wanna put log in to your app, use Auth0. We'll talk about them partway through the episode.

Rid. With me, as always, is mister Scott Talinsky.

Feeling a little under the weather, mister Talinsky?

Yeah. I'm not feeling great.

I'm just a little sick here. Rid. So I might not be talking a whole ton to avoid, just sounding sick on the microphone. You know how that is. Yeah. Still showing up, though. So shout out to Scott for

rid. Making it work.

Let's get into the first question here from Ghost.

My boss has chose Next. Js as a framework, And I wonder if it's worth using if we do not care about server side rendering.

What are the good reasons to use Next. Js apart from personal preference rid. As my boss has and server side rendering. Can I not just use c r a create react app? To this, I say, I think that it's probably worth still using. It's absolutely still worth using a Framework in general, whether it's Next or whether it's, Gatsby or whether it's, Remix or any of the popular, rid React frameworks out there versus just using CRA. And, the reasons behind that is, like, build tools, probably the biggest one. You don't rid. Set anything up with Next. Js. It just works. You can throw your configs in there. They've spent tons and tons of time. Create react app will give you build rid. Out of the box.

But as soon as you need to do something a little bit custom or whatever, then you have to eject, and then you're Working with webpack configs and babel configs and all that good stuff, that's that's a pain in the butt. I don't I don't recommend that to anybody.

Yeah. It gives you a lot of stuff even beyond server side rendering, you know? Yeah. And and a lot of those things, like, you have to come up with yourself.

But all in all, like, I've never necessarily seen create react app personally as like a production ready Kind of system. I I've always seen create react that create react app as more of like a you know get up and running or learn react kind of playground but of things like You know, Next. Js really do feel like all of the tools you need for production apps that are kind of left out of the box And the fact that it makes a lot of those decisions for you without you having to think about them is a big plus for me because React can be a death by a 1000 decisions, and This just takes out a handful of them. Exactly. What else is there? There's images,

TypeScript out of the box. There's a router built in. So There's of course, there is lots of routers out there. There's React Router. There's React location.

There's a handful of other ones out there. But, again, rid if you just want a router built in, you want to use the one that they have, absolutely.

Prerendering page is another big one. If you're not using server side rendering, I'm pretty sure you can still use, rid the prerendering. So if a if a link turns up on a page, it will try to download and render out that page so that by the time you click it, it's super fast.

They have a whole layout space system, which is great. So if you want to be able to have, like, a header and a footer on every single page, rid. It's a lot easier with that. And then there's a huge community of packages that surround.

I talked to, the author of Blitz JS at Reactathon, and he said, rid. They have changed from being a framework that sits on top of Next. Js to a set of utilities to use with Next. Which I think is pretty pretty interesting. So they have their own auth package that you can integrate. Of course, there's NextAuth.

So there's just, like, huge Community of stuff built on top, and you can use with Next. Yeah. So absolutely. I think so. Even if you don't want the server side rendering, it's obviously a big part of it. I'd still say go for a A framework.

Yeah. Yeah. Likewise.

You know, I like or even if it's remix or any of these things I know there's all different approaches but I I don't think I would ship a production app with create react app, and that's just that's just me. That's kinda always the way I viewed it. But I again, most likely because you You probably want something other than CSR at some point whether that is like you mentioned pre rendering or even like straight up just static generation or any of that stuff and and to to get that out with create react app, your options become less and less. So alright. Next question is from Joe Shabadoo.

I'm wondering if that's a reference to the movie break in, but I'm not sure if it is.

What's up, Joe Shabadoo? Assuming you guys built syntax.fm together, I'd like to ask each of you if there well, there's a design decision that you would have preferred to be different. Maybe Scott was high on Jekyll, and Wes has convinced him to use it next.

You know what? At the time I probably would have built it on Gatsby myself and, you know, Wes was doing more Next. Js at the time, but Wes built basically the whole site.

Rid. So Wes built it and designed basically the whole site before I could even blink. I think we had, like, talked about doing the podcast. And then, like, a a day or two later, Wes was like, alright. I got a site done, and I was just like, what? Yeah.

But it was gorgeous. And I I got I had no beef with any of it. So, Yeah. I I was totally fine with any of the design decisions made just because I didn't build it. So I didn't have to build it. Let's just say that. And, so, You know, it's all good there.

Wes, do you have any things that you wish would be different about it? Me, personally, when I do modify it, I'm not sure if there's things I really wish would be different about it necessarily. So I I don't have any complaints. Yeah. There's a

a couple things there. I use Stylus for it. This was 5 years ago we built this and I was a big use. I still use Stylus, but I think rid. Doing scope CSS is there's a lot better options out there for scope CSS these days. So eventually I would like To switch that over, I think there's even a pull request in for it that I have to review. So switch over from stylus to some sort of scoped rid. CSS with that style components or style JSX.

Not really. Like, it's funny. Over the over the years, you've said, it would have been better in Gatsby. Ready. Good thing we chose next.

Maybe we should rebuild it in in SvelteKit. And, like, from a From a distance, it looks like a very simple website where, like, it just just get a bunch of files and loop over and display them. But there's rid. There's actually quite a bit to it in terms of the player and the router and everything like that. So, very happy that we chose And also, it's a it's a great website to keep up on all the new Next. Js stuff because

whenever there's a new Next. Js API, I would Try to put it into the website and implement it. I was gonna say I edit that live streaming page too so we can just quickly and easily live stream to the syntax. Fm and like rid. I don't know. I got no complaints with any of the

the way that it's configured. The one thing I would like to do is that we currently have our editor, rid generate both the RSS feed into Libsyn and and convert the markdown as well as the website, rid And those 2 things are separate. So if we update 1 show note, we have to update the other one.

I would love to have it all in one place, like, all powered off the website. Right? Like a single source of truth, But I don't care that much.

So is this is a list of things that I would like to do. One thing I was thinking about recently, though, is I have this uses. Tech website, And it has grown to almost 700 people that have used this pages. And I was like, oh, like, rid. I need to, like, update this page because there's way too many people on it. Like, I need to, like, rethink how I how I do things a little bit. And I was like, that would be kind of I've I've been ready. To build something in Remix or add as well as SvelteKit.

And I was like, man, I should have re this is a great example of a website that could be rid. Quickly and easily rebuilt, but still use a lot of the features of a framework. So I was like, I should rebuild this thing twice, rid. Once in Smellkitt and once in remix just to get a good a good bite out of those frameworks. A good job. Yeah. Yeah.

Next question we got here from Caesar. Thank you for the pronunciation.

Pronounced like the salad. Caesar salad. The he says it's Pronounced like Caesar's a salad. I thought it was just Caesar salad. Did you Caesar's Caesar's Caesar's salad. Rid. It's Caesar salad. It's Caesar salad.

Caesar is one of the hardest words for me to, to type.

Rid Yeah. I can never remember that as c a e, Saeeza.

Anyways, the the question is, I rid I have a new ARM based Mac. That's the new the new Macs that have the m one chip in it, and it feels slower than my old x eighty six. That's the Intel one. Rid Sometimes my IDE WebStorm becomes unresponsive for 30 seconds. I feel like the browser is also slower. Rid. Have you had any similar issues to your Macs? I installed everything via Homebrew, so maybe that was it. You also mentioned rid. A way to check if your programs are installed on the PC are optimized for Arm or not. What was that? So first of all, to check if your apps are rid. Running on the new, like or the older Intel version because apps had to be, like, recompiled and and upgraded to to run on this.

So you can go into your activity monitor.

And if you right click on like, you go to the CPU, you can click on rid. Right click on any of the columns, and you can add a column called kind, and that will tell you if something is Apple or Intel. Rid. And Intel is obviously x86. But that said, you're even the Intel apps are running faster than they were on my Intel computer.

Rid Intel is faster than actually on Intel, so you should definitely not be having that. And one of the huge benefits to m one for developers, people rid. Send me this all the time. Like, should I get the M1 or the M1 Max? Is it worth it as a developer? The biggest benefit that a rid. Developers are going to get is that your, IntelliSense and things that are resource heavy, like TypeScript And IntelliSense on a WebStorm, things that are constantly evaluating your code base, those things get very, very fast.

So, you should definitely not be getting 32nd hang times on that. Likely, something is either wrong with your hardware, Or I would probably, unfortunately, go for a, every format on there, which kinda sucks. I always hate that the Apple people always tell you, Oh, just wipe it and start again. You know, like, oh, yeah. That's not disrupt distracting or destructive

disruptive at all to your daily life. Right? Yeah. I've been having a lot of battery issues with mine lately where the battery even like yesterday, you know, Wes, I thought I had solved some of my battery issues, and I I'm actually Gonna put Firefox down for a bit because I I sadly, I think Firefox might be the culprit for me.

But it's like rid I was just seeing like my battery life on this thing being like 2 hours which is just is very wild when you think about how how good the battery typically is. Yeah, like last night I opened up the laptop after like not using it at all and it was just completely dead so

rid I I don't know. Yeah. There's something mysterious going on with my machine. I don't wanna have to reformat. No. Thank you. I was I took a A flight to San Francisco, and the flight is 5 and a half hours plus, like, 45 minutes of sitting in the rid. Sitting in the thing waiting for the plane. And so I did I did probably 6 hours of coding and emails and web browsing, and rid. I was at 70% when I landed, which with Internet on Unreal, and I was using Firefox. That's what I'm used to. And I I have no idea what's going on if it's an extension or what, but Firefox seems to be the major culprit. That's that's like the only thing that I'm running when it rid is just draining like crazy, so we'll we'll figure it out. Here here's I've got a sort of an aside for you because I was talking to my wife about how the batteries on these Computers are so good. You don't have to, like, get the good seed out of coffee shop near a plug anymore because, like, literally, the battery will outlast your bladder or rid. Your time allowed. But one of our favorite coffee shops put up a no tech, sign. You're not allowed to have a laptop in the coffee shop anymore. Rid. What do you think about that? Seems like bad business to me.

I think I wouldn't go there. People were just setting up camp rid. And just sipping a a $4 coffee for hours and hours.

And this coffee shop is very nice, and I think they want to foster That's the place you go to have a coffee with a friend or to have a quick meeting or to catch up.

And Because sometimes, like, you go to a coffee shop and people are talking and then people are, like, looking at you, like, quiet, you know, like, this is a coffee shop, you know? Rid. Yeah. I I'm not sure how I feel, but I'm bummed because I used to go there a lot and work. But also, I know, like, these businesses have been hurt in the last 2 years not being able to have people in person.

So maybe they're trying to turn over their people a little bit quicker. So I thought it was interesting for me. Rid. Yeah, there's another one that has also coffee shops in my city are small. So you get 4 guys sitting on their laptops all day. You've taken, like, 80% of rid. The workspace away from people who and it only takes 3 or 4 times to you got a meeting, meet me at this one. You stop going to that one because, there's never room, you know? Mhmm. Yeah. I hear you. Let's take another question from Phil d.

Do you alphabetize your larger JavaScript objects by key name? I wish there was a prettier option to do this though I understand it could technically cause functionality changes which is why I never add which is why they will never add that feature.

Okay. Do I alphabetize my JavaScript Object properties, I do not. I op I do alphabetize my CSS properties which seems Ridiculous, but I do so automatically.

This one feels like big no no, no need or desire to do that for me, but it's coming from the guy who alphabetizes his CSS property. So I I you know, I have a hard time. But in my brain right now, there's kind of a collision course of,

rid. You know, contradiction. Yeah. I don't do that as well.

I don't do it for any of my CSS. I just look for the property I need and and edit it.

Rid. I could see like, there was some prettier issues for putting your like, back when we had React Class components, putting those in the right order, but that was not alphabetical. That was just kinda keeping, like, your constructor up top, then your static properties, and then your Your hooks and then your custom methods underneath that, I think that was the order. But, no, I I don't do that. And for people who are saying, like, why couldn't Prettier do it? Rid. Their thing is that if you like, specifically for CSS, if you have properties in a specific order because they rid. Fall back on each other. They have some examples, but, like, if you've got 1, and then you have progressive enhancement after that, rid. If you reorder that based on alphabetical,

then your progressive enhancement could come first. And I've never had any issues that in practice, but I could see how that's a thing. Yeah. Like maybe,

display inline and then display grid. Rid. Display grid would go first and then inline would overwrite that. So on your your browsers that support grid, You would fall back to inline, which is not what you want.

Might only alphabetize this because I do with style in via, just properties. Property name so Okay. Yeah.

It like doesn't it doesn't get in the way of that but I guess yeah.

Rid. I also like I'm having a hard time thinking of, like, some other issues there. I've read the GitHub thread at some point, but yeah, maybe maybe it should be added, But I don't like it. I like it to stay where I wrote it.

Yeah. What do you like, though, is Prismic.

Prismic is one of our sponsors today. They are a, headless CMS.

What you do is you sign up for Prismic, You log in, and right away, you're presented with the UI. There's no npm installing anything. There's no setting up. You just Automatically have the GUI for Prismic, and you can create all of your data types that you want, and then you can put those data types rid together into things that are called slices.

And slices are instead of thinking about your website in terms of pages, you gotta think about your app in terms of, like, components. Rid. Right? Like, you've got a a map component and a person component and, a navigation component, and you wanna be able rid Add items to that navigation and take them off. So Prismic is really cool because you can click together all of those data types, rid. You can even put the data types together into other components, and then that is a slice.

It is really cool. And, essentially, what happens is if you query rid. Items from a page, it will tell you what the type of the slice is. And, basically, at that point, it's just a switch statement being like, well, if this is a person rid. Slice, then use the person component, and it's gonna give you the the name and the description and the photo. And they by the way, they have, rid. Integrated photo resizing and whatnot all built in. It's an awesome CMS. I use it for a bunch of websites myself. You wanna check it out, rid. And build your even if you're just like, I I I wanna understand component driven design a little bit better instead of rid. Page driven design? Just go and try to build a simple little site in Prismic and and understand, okay, rid. That's why they're pushing the slices thing so hard because it makes a lot of sense. So check it out. Prismic dot I o forward slash syntax.

They have a whole bunch of starters there as well. If you want to check it out with React of you or you name it. They work with pretty much anything.

Thank you Prismic for sponsoring. Sick. Alright. Next question here from Thomas.

In one of the episodes that you guys mentioned that he who's he talking about? In one of the episodes, Do you guys mentioned that he I'm gonna just name in quotes he because I don't know who the he is referring to. Yeah. I we both use MongoDB. Me. So he uses MongoDB.

Why? What is the what is the case why you choose NoSQL database over SQL database? So, I think both of us are he here. We both, have chosen Mongo and honestly the the reason why I chose Mongo is because my site was initially We built in Meteor and that was the only option.

I kid you not that's the only reason why I picked it.

I I you know those the kind of decisions that we we make, but at the time, it is fine. And to be honest, it's still fine. You know, there there may be times where I wish, I was using Postgres or something relational but to be honest my database is almost never the bottleneck in any of my my issues. I use a Schema, library via Mongoose and that gives me TypeScript, types and everything is Schematized and all that stuff and really the only issues that I ever have with Mongo are relational stuff can be a pain. It's not that bad.

In fact I do most of my relational stuff via DataLoader and GraphQL anyways now and so that's not like a huge huge concern of mine. The aggregation pipeline is fine too for many of that those things but, the relational stuff can be an issue.

The This thing for me with MongoDB is that over time because you're not writing a lot of migrations to do changes to your database Your database can get a little sloppy here from changes made over time so for me that's been the biggest issue is making sure that my database hasn't seen a lot of rust over the past.

I don't know. I I built the site meteor in 2015 so Yeah. Yeah. Over those past 7 years database has seen a lot of chain and a lot of churn and things getting their names changed and stuff like that.

Migrations would have been really nice to have at some point but, you know, I I think as long as you're you're structured and organized with everything like that I see no problems with it. You know people people I think oftentimes they get really Really fired up over Mongo and and say the oh there's the one time that there was some data loss or somewhere somewhere but like rid. And Mongo has been pretty solid for a long time. I've never had any issues with it. It's like an

enterprise level database at this point. I someone at Reactathon. I was like, oh, use MongoDB. Like, I could never do it without having relationships. And I was like, well, MongoDB is a NoSQL database, but rid. But you can have relationships. I have tons of them. Right? You got I got users that have relationship to, customers. And, in my note course, we have rid. Stores that have reviews and reviews that are related to story. Right? Like, you can you can do all of that stuff.

Sort of, like, many years ago, the no SQL got real hot.

I remember I used one. I still have the t shirt. What was it called? Couch? No. Not couchdb.

Wreathcloud.

I have a WeThink DB T shirt.

It's cloud cloudinary? No. Cloud.

Something cloud. Rid. Basically, it's a database. It's not not around anymore.

Oh, no. I think it was couch. It was a a host of couchdb. There's a whole lot of NoSQL databases. There was like you could rid Add whatever you wanted to what you could just create models and and fields, and, MongoDB has a, Flexible field that you can add or specifically mongoose has a flexible field where you can literally add anything you want.

Rid. Yeah. I don't recommend that, though. That's that's how you get yourself in trouble. I think in some cases, it might be nice just to slap new properties on stuff and whatnot, but You can slap new properties out of bongoose just by changing the schema. Look, without writing a migration, there's nothing to stop you from doing that. Exactly.

We, rid. I got an email, and I've been hearing this word a lot. I don't think I understand what it means is graph databases.

Mhmm. Not GraphQL.

Rid. People at Neo4j, I think I got an email in my yeah. I got an email in my inbox from the Neo4j rid. Folks, I think we should have them on. Just be like, what's a graph? What does a graph mean? Everyone keeps saying this word graph. What does that mean? So I'd like to know that, what we chatted with the reddest folks, they have a new database out as well rid. Not a new database, but, like, they have, like, a bunch of stuff that makes Reddit like a like a proper database and not just like a cache.

So some kind of cool stuff. There's a market for that stuff. Caitlin, our marketing director, one of her good friends, she sent me a link to a company that they work at and it's a graph database I've never even heard of in in from their website in their presence it seemed like they were somewhat major company and I was just like they didn't their stuff they that just never crosses our plate ever you know as as much as these things there's so many options it's like There's so many different different tools and different libraries and different companies building on this stuff.

I I might reach out to her and and See if we can get some, like, someone from this company to explain a graph database to us. Or if Yeah. If you're out there, maybe that's a good maybe that's a great topic. Not even a good topic. Maybe rid great topic for 1 of our separate clubs here is, like, can you just bring a brown bag and and, you know, tell Tell us what the heck a graph database is and how it's different from a graph API or a graph API.

And the graph people are talking about. Rid. I remember Facebook, like, 10 years ago when they rolled out their new search. They were talking about the graph as well, And I I just don't know what that is.

Alright.

Oh, we're gonna get freaking so many emails from that. Alright. Next one from Moe. People say they've run into problems That just does not support ESM.

What problems are these, and what exactly does it mean? I personally haven't run into any major issues to this. Rid. So is it only something in specific scenarios? Also, to ask more generally, what does it mean to support ESM, both for installable node packages And bundle transpiled apps. So let's let's back this up real quick. E s m, ECMAScript modules, that is the specification for rid. Importing and exporting values from a module, which is a module is just a file in JavaScript.

Before we had ESM, rid. We had CommonJS, and CommonJS was what was implemented in NodeJS.

And because Node has only supported common JS for most of its life.

Any tools that were built in node, any tools like, Even if you're not building your website in node, a lot of the build tools, a lot of the test runners, and things like like Jest are built in, rid Common JS, and they don't support e s m, meaning that, like, now that we have e s m in node, rid. We're just like we're not there yet. There's a lot of compatibility issues, and packages are not published in the SM. So they only support CommonJS right now. So rid. The idea is if you build a React application in e s m or you build a Svelte application or you build literally anything in e s m, rid. It needs to be transpiled into common JS before you can run it. That's a bit of an issue for people because if you are running your application, rid. On your on the server or whatever, if you're running it in e s m and you are transpiling it and testing it in common. Js, The code that's running is not the same code that's being tested, and there's a possibility that something could could goof up in between that. And also, it's just a pain in the butt to sometimes get all these babel configs properly set up and and whatnot. I personally have not run into too, too many issues, rid. But I have been in the situation where I'm just like, all right. What what what do I need to copy paste now to make this thing work? And Scott, you specifically switched to what was the other one?

V v test? V test. Yeah.

Which is is eliminated any issues that I've had and it's blazingly fast and it's just it's just really nice I I actually personally really appreciate the test after coming from just just for rid the simple fact that it just worked for me and like that this is a lot where I was having so many issues with just where I had to have my own custom Jest, config file that had its own Jest babble config.

My Jest had its own babble config.

Rid.

I I I wouldn't even have Babble in my application, but I needed Babble just for jest to test my code. And then at that point I'm thinking like the code I'm testing is not the same code I'm shipping and that makes me very uncomfortable. That doesn't make me feel like I'm testing The real code. So being able to ignore all of those steps and just have it work has been good for me, but that's really the big thing. Yeah. I'm actually on the flip side of that is, AJ, who works with me on the course platform.

He's like, hey. Let's let's try Vitest out, rid.

For a test test runner. And I was like, why not? Like, you can the API is exactly the same as Jest, so there's no there's no real, like, commitment to it to it.

And then he came back a couple of days later. He was like, oh, because our server side app is done entirely in common. Js still. There's rid. There's no big benefit to spend all that time to move over to ESM right now just because of It's it's too tricky. It's not worth it. There's nothing wrong with CommonJS.

So I can't I can't use Vitess because it doesn't support CommonJS.

So, rid. I'm kinda on the flip side of that. And, hopefully, one day, I'll be able to to move over to that once we do the big migration over to ESM, but I'm waiting at Least another 6 months a year before I attempt to do that.

Yeah. I've I've said, bon voyage to come and JS. And I've completely left that that dock area. I'm totally gone from that love

syntax is there was a hot take once that, like, We should have just accepted common JS in the browser, but like

the the like the API thrashing, I agree, but the syntax of of ESM is much nicer yeah it is and for me personally I like largely avoided common JS which sounds ridiculous but because I was Meteor always that would transform your node code.

I always wrote the import syntax even if it wasn't ESM so I had never even touched The common JS syntax even in node code. And I I know I wasn't ready. Know the tooling is amazing if that you don't ever have to go down that route. I know. And I got to avoid it for so long that, like, to me, like, I have to look up how to do anything in common JS, which which sounds great. I just got to avoid it all entirely, which is great. So, you know, if you want to, avoid errors entirely in your application, that's not gonna happen. So you're gonna need a service like LogRocket that shows you where the errors happen and how they happen. So LogRocket has a really great service, which What they do is they give you a video scrubbable replay that includes everything that you'd want when you're debugging issues. So let's say a problem happens in your application.

User goes to log in. The logins broken.

That seems like it stinks.

You say, alright.

They they message you. They say, hey. My my lock in didn't work. And you say, oh, what browser are you using? What'd you do? What'd the message say? What'd the console say? You know, all those things that you would never ever actually, Need to do or shouldn't need to do. What LogRocket does is it gives you a video replay so you can see that, they typed in their thing and, rid they actually they did everything correct, and there's a big fat error coming back from your network. So you could actually see a scrubbable video replay of them Doing and trying to sign in and seeing the network request come back and you can spy on that network network request and see exactly what happened so that you could say, Oh, shoot. We put push some buggy code and it broke our login.

That allows you to go ahead and fix it. So LogRocket is one of those services that you really have to see to believe. Check it out at logrocket.comforward/ syntax, and you'll get 14 days for free. Alright. Next question we have here from.

Kudos To you both for consistently putting out high quality podcast. Love the show. Thank you. With the recent increase in protest wear, rid. Including the release of the popular styled components packages.

I didn't hear about this. Did you hear about this? That either. Yeah.

Let's see here. I bet that is some dependency way down. New protestware.

Oh, style components put a post install script that Is it if you are seeing this, your environment is set to a Russian locale. By now, you have seen the Devastation, whores, and complete disregard by the Russian military blah blah blah.

Okay. So they put in a post install, thing that warned.

But they didn't do anything bad, but they they just put, like, a a log in your console if you have a Russian locale.

Rid Kinda interesting. So this is becoming more popular.

I'll keep reading it. Are these open source maintainers doing more harm than good? These acts of self sabotage Will lead to mistrust in the open source ecosystem and demonstrate higher levels of risk with open source packages.

One form of protection.

Rid Okay. Well, let's talk about, like, what our thoughts are with that, and we'll talk about the production. So first of all, these people can do whatever they want. This is this is their open source thing. And if you feel Like, you need to do that, then then absolutely. This we we saw it with Black Lives Matter. We see it with the situation in Ukraine Ukraine.

Rid. They're not doing anything.

They're not deleting your system. They're not changing your code. They're not not allowing you to use the code.

Rid. They are just using their platform for, to to talk about things that they are passionate about. So I think it's fine.

Rid. People always say there there was another thing the other day where there was a open source package where the author Just like Ghosted, and it was a super popular open source package. It's called ForEach for looping over stuff, which is, like, you think, oh rid. Because we didn't have for each.

And, yeah, we didn't have it for the longest time. And, before that, you needed a package.

Rid. Kids, we didn't always have all these fancy APIs for looping over stuff. So people install the package, and it's it's rid. Fill in lots of packages because it just has never been updated. So that's why, but rid So what happened is this guy's domain expired. He he went away. I'm not sure what happened, but, somebody registered the domain, rid. Set up the email server on that domain, reset the password because it sent it to that domain, and then rid. Was able to, become an author of those packages. And that that's a potential issue because, thankfully, the person who did it was, Doing it in good faith, but somebody could certainly put bad code in there as well.

And we'll say that this is not an npm issue. This is a problem with literally every open source package.

If you use code that is being pulled in from somewhere else that you did not write, At a certain point, I think you have to trust that that code is okay.

And they're at a certain if you want, rid. You can read over every single line. At a certain point, that becomes impossible.

Yeah. You can't read over every single line of code that is in there. Rid. So what are what are your solutions to that? Well, there are lots of projects out there that are attempting to do that. We talked to, oh, Oh, we haven't talked to him yet. We should maybe talk to him.

The guy who wrote WebTorrent, Feras, he rid. Is starting a new start up that attempts to figure out if there are supply chain attacks, rid. So that's good.

There are there's a node security project. You can also just peg your package JSON to the exact rid Files that you want. So take out the tildes, take out the carrots, and then only manually upgrade to versions that you know are safe.

So if you're even if you're, I don't know, a week behind all these packages, you're gonna hear about, this type of thing. So rid. I think it's just something that comes with open source packages. People love to write these sensational articles about it and say, npm is a huge loophole. And LOL, no developers will npm install something to console log, you know, but that's that's that's just how we how we do it.

Yeah. You know what? I rid.

Honestly, if if we're talking me personally, like, I'm not speaking for anybody else here.

I do not care if the Owner, maintainers of a project wanna put a message in my console when I'm installing the thing that asks for rid money or ask for support for any specific cause or use the software. Or uses their platform to promote a, you know, you know, Atrocities that are going on in this world. Like, go for it. I I that does not affect me at all and and I can if it's something that I want to ignore, I can ignore it something that I want to pay attention to, I can pay attention to it.

If you're not mind modifying my file system, if you're not putting malware on my computer, rid It absolutely does nothing to erode trust in my mind and I do not care. I I cannot stress how how strongly I don't care about that.

Rid.

So yeah it I mean it does highlight the fact that you know they can they can do whatever they want to these packages and you can Install it and run it on your computer. But guess what? At the end of the day, you might not like to hear this, but you are responsible for the code that you bring into your project.

It is your responsibility, not their responsibility. It does not matter if you are you know, whether or not it's practical with all of the thousands of packages that are of being used today. You made your choices on what libraries you're used using and whatever and sure enough you know you you can't You cannot fine tooth comb every single package that's out there and I certainly do not. And, you know, whether or not it's like Salt Kit using a you know, dependency of a dependency of a dependency and that's the one that is affected that's certainly a conversation right but at the end of the day like if if if you like your stuff and your stuff's working pin those versions you don't you know unless there's a vulnerability you don't have to change it and rid. You know, I I I do believe in in some degree of responsibility here and being on the developer to know what they're they're bringing in. And that's kind of a thing anytime you install anything I guess I come from a place where I used to work at a company that rid Before we installed any node package, we had to contact legal and say, can we install this package? And then they had to go over the license and they had to check it out and then to make sure it was okay with legal.

So, you know, maybe it's just that I had that background where we had to be over maybe, like, hypersensitive to what we are bringing into our projects.

That's just something you gotta be cognizant of in this world. Right? You're bringing in someone else's code into your project. And at the end of the day, you kinda gotta know that You're bringing in other people's stuff, and we we've largely gotten blind to that because, you know, node modules goes, and we have a 1,000 packages next thing you know in there. And Yeah. There's A 1,000 link dependencies. But at the end of the day, you know, you're still bringing in someone else's code. So I don't know if there's any great solutions here.

Rid you know, kind of an extended rant on absolutely nothing with no no end to it, but, that's just how I feel.

It it seems I I know the world is not perfect.

And we live in a society.

And unfortunately, yes, rid. Absolutely. Could you get hit by a car crossing the street? Should we take streets away? You know, I don't know if that that's necessarily a good argument. I don't have the answers like Scott said, but rid. I think we're doing pretty good.

And, certainly, people are working on these issues as well. You know? Like, there's we talked about rid. Even NPM itself, they're starting to enforce that, the top 30,000 packages must use two factor authentication. So If your password gets out, someone's not gonna accidentally publish a Bitcoin miner, to your NPM package and

Take an eye on your side. Just don't have the energy to be outraged about it.

I got too many other things going on in life to be outraged about, somebody putting a message in my console log or something. I got no time for it, so it's so true. It's like we said a while ago. Just like I feel less

rid. Outraged the older I get or just care less about this type of stuff. Yeah. I hear you. Alright. Next, next question is from Streggs.

Hi. Wes and Scott. Big fan of the podcast. I've got a half technical half architectural design question for you.

I'm currently building a web app designed as a card game. It involves my friend requesting some card data from my back end.

I started to write the game logic, how turns are handled, how the cards affect the players, and I ran into an interesting problem.

The question is, should I write the game logic on the back end or the front end? If I were to write the logic On the back end, I suppose I would have the front end send request to the back end for the next game state based on the user's interaction on the client side.

But if there's no validation required coming from the back end to run the game and I'm not saving the game state either, is there a downside to having the game rid Logic all run on the client side. Having the game logic run on the client side would allow games to run smoothly even if the user did not have a good connection. It would allow my server to take less requests on top of my on the top of my head. My only thought is, yes, a savvy user can Manipulate the values of the game perhaps but potentially view the entire game logic and understand what's happening. Could this be a security issue even if I eventually wanted To have some sort of game data persistence down the road.

Saving for game state in the database.

Do I Do some sort of game state simulation where the logic exists on both the front end and the back end, and the back end can validate the game date asynchronously.

Now I have a headache.

Rid. Many follow-up questions. Could the front end code obfuscation help preventing front end logic being viewed? Okay. So a lot of stuff here.

You know, I would love to have you remember Drew Conley who we had on for, he built Game and react. I would love to have him on his thoughts because game development is its own thing. But my personal thought is like, you know, the game Status and state seems like it should always be running on the client right? I mean the the client's the thing that's being responsible for this And then if you were connecting to a database for many of these things it would probably be something that you'd wanna do over something real time like web sockets To have it constantly being updated rather than just sending requests back and forth willy nilly.

That's just like my own thoughts I have no experience in this regard though. I mean if we're we're going off of just pure instincts what would I do? I would have the game state be Saved in client side state. I would have it be, saved in local storage so that it's fast and loads quickly and Yeah. I I would imagine that you would probably just store all of the game state in some sort of a giant game state object and rid. And and manage it like you would at the state of any major application.

So, yeah, that's just my thoughts. Yeah. I think the question is rid. That was not answered here is, are you are they playing against other peoples where if they were to modify rid. The code on the client's side and beat that person, then, of course, that that would be an actual issue. Rid. I'm very curious. Like, could you detect if somebody was modifying the code or some objects or a method? You know, like, could you could you freeze those methods in JavaScript object and then observe them? And if somebody were to change it, then set off some sort of trigger, It would be kinda interesting. Like, there's a lot of cheating that can happen.

I think it it sorry. On that same regard of, like, cheating, like, to me, Cheating only matters if there is, like, a high score or some sort of competitive element to the game. But if the user is just playing the game themselves And they're cheating, like, that's on them. You know? They wanna ruin their own game experience to cheat. Who cares?

I think and then the other thing was that, like, ready. You're sending, like, let's say you scored 10 points and then you sent to the server.

I scored 10 points. Right? Like, I think rid. Video game developers have had this for a long time where people are patching the game, you know, and they have to figure out how to detect that.

So I don't really know how you would solve this. I just put this in here because I thought it would be kind of interesting. There are some solutions. If we think about, like form states, you have nonce that you send from the server to the client, And that's a token. And then when you send data back, you have to send that back, and then that's sort of a token saying, okay. I know that you are specifically being requested for that piece.

I am just gonna put this out there to the listeners at syntaxfm on Twitter. If you have ideas of what rid to do here. Tweet us back, and we will retweet it because I'm very curious

about how you would solve this issue. Yeah. And Drew drew specifically I know he listens to the show so I'd be interested because he has direct experience not only writing a game in react and webtech but Shipping 1 to Steam. Yeah. In like a real platform and selling it. So, and actually, you know, Drew hangs out in the level of tutorials Discord too. So Stegs Streggs, if you if you wanna hop into the level up tutorials Discord and maybe we can ping Drew and see if he can Yeah. Rid. A good answer for you. Maybe we can do a follow-up on this one. We also didn't answer the question about obfuscating

the data.

Yeah.

Rid That will definitely stop a lot of like, I all the time, I try to crack stuff open. And then if it's really hardly Office gated or if I can't figure out where the, like sometimes they just have, like, window dot game, and then you you open it up, and there's methods like score. And it's like, that's very easy. But if you can't even find it, like, I'll probably put a good 10 minutes into it and then I'll just be like, you know, so that can definitely get you a further way. That's not any guarantee, but that's going to stop people from poking around who are rid. Semi smart, at this type of stuff.

Totally.

Alright. Let's talk about one of our last sponsors with this off 0. Rid. Funny. I just got back from Reactathon, and 0 had the best swag out there. I got a really cool Gradient tee, rid.

And they have they gave me this, like what is it called? I got it right here.

Zoopar rid. Mister bio multi cable. And, basically, it's this little man where his thumb is USB c, his finger is USB a, rid. And then his feet are USB c micro, and his other hand is a lightning connector.

And it's just like one of those cables where you can have any input, any output, and you could charge it. So that's that's not what Otho is sponsoring us to tell you, but rid. Shout out to the swag people at Auth0 because they did a good job. What do we wanna talk to you about Auth0? Rid. Auth0 gives you login authentication for your application.

You don't have to do all the logic. You don't have to write all that stuff. You don't have to deal with, rid.

JWT tokens and cookies and all of that because Auth0 will do that. You can integrate it into your app. You can have log in with Twitter, Google, Discord.

Rid. You can have a customized login page. They have SDKs for Node and Express, React, Next. Js, and many more. They have Tons of, good features. So if you want user management, roles and permissions, multifactor authentication, so you want to have, rid. Okay.

Scott is a editor, and he can view and edit, but not delete.

Rid. But also, I want to make sure that Scott is using the two factor auth on his phone so that when he logs in, I can be sure it's him. Right? Like, that's that's a lot of work. Rid. Just pop Auth 0 into your application, and it's gonna gonna be working really well. So we want you to check it out at a zero dot t o forward slash Syntax.

That's a0.t0forward/ syntax, and try it out in your next application. Thank you, Auth0, for sponsoring.

Let's get into the rid. Section which is sick picks. This is where we pick things that are sick.

I'm gonna sick pick this mister bio cable because it looks like you can also buy these.

Rid. So I just talked about it. I was like, what makes it bio? So apparently, the the outside of the cable is made in paper, which, like, I don't know. Like, is that really going to be there's plastic on it as well. Are you really going to be taking this thing apart and recycling all the different parts? But Shout out to putting paper on the outside because that seems cool for the environment.

But this cable is awesome because I always have this problem where All my chargers are most of them are USB a, but then my laptop is only USB c.

So and then you want micro USB c and lightning.

So you need to carry around, what, 6 cables or 3 cables and a USB c converter.

What a pain in the butt.

Rid And this is just a tiny little kit. This is like a backpack cable where wherever you go, you'll be able to plug your stuff in. Mister Bio rid. Eco friendly dual power in universal charging multi tip cable for smartphones.

That read, like, such an Amazon page title. That was like, yeah, exactly. That sounds like they have just they have 1 keyword. It looks like a person,

but they have other ones that are look like

octopus, So much I thought was pretty cool. You know what? I'm kinda partial to things like octopus or squid. I have the power squids. You know, there's a power strips that have the the squid on top of them. Yeah.

Rid Yeah. I I like to press one of these from the Auth0 booth? I do. Yeah. I did. I have not used it yet. It's still in my backpack, which I have not unloaded from. I have still unplugged my backpack yet. Rid. That's the kind of thing that I would do coming back from anything, just to leave that backpack full of everything that I took on my trip.

So That I just hope that I should probably be getting to right about now.

I'm gonna sick pick a new podcast here. I sick pick a lot of podcast, This one's been really good for me. And you know what? The the thing I gotta appreciate about this podcast when I have so many that I listen to is they don't don't release podcasts that often. But when they do they're very good this one's from PBS it's called Eons Mysteries of Deep Time and it's just answering kind of interesting questions that have existed for a long time like What's the case of the most famous fake human fossil? So there was like a fake human fossil and What were the implications of that fossil being faked and what were the circumstances around it? The last 1 I listened to was what was the 1st dinosaur And it kind of talks about, you know, how evolution took place in that period of 1000000 of years ago.

Just like just the what were the conditions that led to this 1st dinosaur? And, like, what makes a dinosaur a dinosaur compared to, rid other animals of the time and other other things that were happening of the time and this the most recent episode I haven't listened to yet but I'm really excited to is The extinct human species discovered deep within a cave system.

You gotta love this stuff. I'm a big fan of, like, history in general And I'm a big fan of you know all sorts of things but this is like pre human history in a way that you don't get really broken down so many ways and I found the production I found the research I found everything about it to be very pleasant I listened to the human fake human fossil episode with Landon rid. Mhmm. My, 4 year old son and he was able to not only pay attention and listen to the whole thing but he was able to even, like, ask a lot of really good questions after it. So it's not like Focused For kids, but it's it's presented in a way where it's you don't have to be like a, an absolute genius to get what the heck they're talking about. So big fan of this one.

Rid. Eons, Mysteries of Deep Time from PBS.

Awesome. Shamelessly plug westboss.com rid. Forward slash courses. List of all the courses that I have. You want to learn JavaScript, CSS, you name it. Check it out. Use coupon code syntax for $10 off.

And thanks for your support shamelessly

plug leveluptutorials.com.

We have a new course out every single month rid. In a lot of amazing stuff, the latest course is on exploring browser APIs where we dive into some new and old browser APIs but also talk about the practical aspects of working with browser API, things you should know, strategies for dealing with different browsers. We talk about why user agent rid. History is a complete mess, and we even get a little bit of a history lesson there. It's pretty sweet. So check it out at level up tutorials .com. Sign up for a year and save 25%.

Alright. That's it. Thank you, everybody, for tuning in. We will catch you on Friday.

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

Rid.