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

rid. Right click on any of the columns, and you can add a column called kind,

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, because they did a good job. What do we wanna talk to you about Auth0? Gatsby or whether it's,

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

In one of the episodes,

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.

Okay. Do I alphabetize my JavaScript and, you know, Wes was doing more Next. Js at the time, and If you're not mind modifying my file system, if you're not putting

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,

disruptive

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.

and things that are resource heavy, our server side app is done entirely in common. Js still. There's rid. There's for looping over stuff, which is, like, you think, oh

CSS properties which seems

So maybe they're trying to turn over

And 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 It would be kinda interesting. Like, there's a lot of cheating that can happen.

field that you can add or specifically mongoose has a flexible field where you can literally add anything you want.

anyways now

library via Mongoose

database has seen a lot of chain and a lot of churn and things getting their names changed and stuff like that.

rid. Slice, then use the person component, So there's just, like,

In fact I do most of my relational stuff via DataLoader and GraphQL

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 huge I think I got an email in my yeah. I got an email in my inbox from the Neo4j

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, and that gives me TypeScript,

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.

And this coffee shop is very nice, and I think they want to foster

This one feels like

It is really cool. And, essentially, what happens is if you query 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,

but I do so automatically.

to do changes to your database

What is the what is the case why you choose Thank you Prismic for sponsoring. Sick. Alright. Next question here from Thomas.

and that will tell you if something is Apple or Intel. Rid. And Intel is obviously x86. But that said, you're 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.

Flexible 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, I am just gonna put this out there to the listeners at syntaxfm attempting to do that. We talked to, 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.

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

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 a but 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, and building syntax dot f m and our Arm base max slow. And,

cause functionality changes which is why I never add which is why they will never add that feature.

a map component and a person component and,

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

display and then you have progressive enhancement after that, rid. If you reorder that based on alphabetical,

Ridiculous, rid It absolutely does nothing to erode trust in my mind and I do not care. I

That's the place you go

those things get very, very fast.

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.

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

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

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

relational stuff can be a pain. It's not that bad.

Might only alphabetize this because I do with style in via,

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, Rid. They are just using their platform and it feels slower than my old x eighty six. That's the Intel one. Rid Sometimes my IDE WebStorm rid. Was able to, So,

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

and

no no,

just properties. Property name so Okay. Yeah.

to have a coffee with a friend or to have a quick meeting or to catch up.

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.

that

No. Cloud.

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.

IntelliSense for your application.

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

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

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

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

I think both of us are he here. We both,

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

Do you alphabetize

a little bit better instead of rid. Page driven design? 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.

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

rid. Fall back on each other. They have some examples, but, like, if you've got 1, it.

is one of our sponsors today. They are a,

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 JavaScript session replay, great rid For debugging

Object properties, I do not. I op I do alphabetize my 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,

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

something

In one of the episodes that you guys mentioned

Wreathcloud.

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

which is not what you want.

NoSQL database over SQL database? So,

have chosen Mongo Hi. Wes and Scott. Big fan of the podcast. I've got a half technical half architectural

rid. Items from a page, 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, 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, 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 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.

Really fired up over Mongo

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.

So you can go into your activity monitor.

big

And if you right click on like, you go to the CPU, you can click on

your larger JavaScript objects by key name? I wish there was a prettier option to do this though I understand it could technically

types and everything is Schematized and all that stuff and really the only issues that I ever have with Mongo are Why? a, you know, I have a WeThink DB T shirt.

inline

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 like TypeScript And IntelliSense on a WebStorm, things that are constantly evaluating your code base, a, rid. It needs options out there for scope CSS these days. So

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?

the relational stuff can be an issue.

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

rid. And just sipping a a $4 coffee for hours and hours.

so Yeah. Yeah. Over those past 7 years

It's cloud cloudinary?

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.

I didn't have to build it. Let's just say that. And, plug 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, 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, and it's just answering kind of interesting questions

Yeah. I I was totally fine with any of the design decisions made just because I didn't build it. So 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, The This thing for me with MongoDB

But it was gorgeous. And I I got I had no beef with any of it. So,

And also, it's a it's a great website to keep up on all the new Next. Js stuff

but Wes built basically the whole site.

eventually I would like To switch that over, I think there's even a pull request in for it

and Wes has convinced him to use it next.

rid

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 I'm just a little sick here. Rid. So I might not be talking a whole ton to avoid, this one's from PBS it's called

generate both the RSS feed into Libsyn and and convert the markdown

because And, yeah, we didn't have it for the longest time. And, 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,

that I have to review. So switch over from stylus to some sort of scoped rid. CSS with that style components or style JSX.

a couple things

What's up, Joe Shabadoo?

You know what? At the time I probably would have built it on

so, You know, it's all good there.

very happy that we chose Yeah. What do you like, though, is Prismic.

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.

rid. I don't know. I got no complaints with any of the 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

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, modules, that is the specification

Gatsby myself

the way that it's configured. The one thing I would like to do is that we currently have our editor, Feeling a little under the weather, mister Talinsky?

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 Maybe we should rebuild it in in SvelteKit. And, like, And we'll say that this is not an npm issue. This is a problem with literally every open source package.

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

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

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

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

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

obfuscation help preventing front end logic being viewed? is that over time because you're not writing a lot of migrations

rid. The code on the client's side and beat that person, to to talk about things that they are passionate about. So I think it's fine.

rather than just sending requests

the code or reset the password rid. Because we didn't have for each.

then, of course, that that would be a module, which is a module is just a file in JavaScript.

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

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

like form states, you

you send from the server to the client, And that's a token. And then when you send data back, he headless CMS.

required coming from the back end to run the game But it's like Eons

server.

Okay. So a lot of stuff here.

But if there's no validation

And they're cheating, like, that's on them. You know? They wanna ruin their own game experience to cheat. Who cares? 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/

if somebody was modifying 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.

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, Rid. Eons, 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.

I think it it sorry. On that same regard of, like, cheating, like, to me, Cheating only matters if there is,

Rid. Many follow-up questions. Could the front end code

back and forth willy nilly.

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.

Now I have a headache.

and rid. And and manage it like you would at the state of any major application.

that rid.

You know, I would love to have you remember Drew Conley who we had on for,

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.

some objects or a method? You know, like, could you could you freeze those methods in JavaScript object and then observe them? if you have properties in a specific order because they One form of protection.

an actual issue. Rid. I'm very curious. Like, could you detect

like, a high score or some sort of competitive element to the game. But if the user is just playing the game themselves

Saving for game state in the database.

like they didn't their stuff they

What problems

We,

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?

Mhmm. Not GraphQL.

tools and different libraries and different companies building on this stuff.

And before that, you needed a package.

transpiled apps. So let's let's back this up real quick. E s m, ECMAScript syntax is there was a hot take once that, like, We should have just accepted common JS in the browser, but like So, you should definitely not be getting 32nd hang times on that. Likely, all of your data types that you want,

So I'd like to know that, who are rid. Semi smart, to type.

you know, tell

to ask more generally, what does it mean to support ESM, both for installable node packages

values from you need to do that, then then absolutely. This

a bunch of stuff that makes Reddit like a like a proper database and not just like a cache.

And So and then you want micro and Auth0, rid. Is starting a new start up that attempts to

Oh, we're gonna get freaking so many emails from that. Alright. Next one

she sent me Migrations would have been really nice to have at some point but, that's certainly a conversation right but at the end of the day like

And bundle

the reddest folks, they have a new database out as well rid. Not a new database, but, like, they have, like, 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 I think I wouldn't go there. People were just setting up camp What a pain in the butt.

from coding and emails and web browsing, 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.

for rid. Importing and exporting

Before we had ESM, rid. We had CommonJS, and Slices. They got Slices. Let's talk about them partway through the episode. LogRocket

Alright.

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

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,

Tell us what the heck a graph database is and how it's different from a graph API or a graph API.

So some kind of cool stuff. There's a market for that stuff. Caitlin, our marketing director, one of her good friends, I don't know. I I built the site meteor in 2015

Moe. People say they've run into problems That just does not support ESM.

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 good features. So if you want user management, roles and permissions, I can't use Vitess because it doesn't support CommonJS.

All my chargers are most of them are USB a, but then my laptop is only USB c.

That's a0.t0forward/

a zero dot t o forward slash Syntax.

just got back from Reactathon,

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

Rid.

and recycling all the different parts? to be transpiled Kudos 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.

Mysteries of Deep Time User goes to log in. The logins broken.

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.

Alright. Let's talk about one of our last sponsors with this off 0. Rid. Funny. I

at this type of stuff.

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.

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?

and edit, but not delete.

that

Rid. You can have a customized login page. They have SDKs for Node and Express, JWT

Awesome. Shamelessly plug westboss.com

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

So you need to carry around, what, 6 cables Oh, style components put a post install script

Rid. Auth0 And slices are instead of thinking about your website in terms of pages, to almost 700 people that have used this pages. And Prismic an author of those packages. And that that's a potential issue because, Let's get into the first question here from Ghost.

leveluptutorials.com.

how

and try it out in your next application. Thank you, Auth0, for sponsoring.

have existed for a long time like

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

in react and webtech but Shipping 1 to Steam. Yeah. In like a real platform and selling it. So, evolution took place in that period of

I always have this problem where for your app. Basically, if you wanna put log in to your app, use Auth0. We'll talk about them partway through the episode.

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.

But Shout out to putting paper on the outside because that seems cool for the environment.

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

Mysteries of Deep Time from PBS.

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.

And it kind of talks about, you know, really appreciate the test after coming from just just for 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 Assuming you guys built syntax.fm

what is it called? I got it right here.

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.

for a full archive of all of our shows,

USB c and lightning.

or drop a review if you like this show.

and actually, you know, Drew hangs out in the level of tutorials Discord too. So Stegs Streggs, if you if you wanna

and he can view Caesar is one of the hardest words for me to, but they have other ones that are look like So I can't 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 even the Intel apps are running faster than they were on my Intel computer.

the data.

What's the case of the most famous fake human fossil? Rid.

Scott is a editor,

the human fake human fossil episode with Landon

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

micro, and his other hand is a lightning connector.

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

Just like just the what were the conditions that led to this 1st dinosaur? And, like, what makes a dinosaur a dinosaur compared to, 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.

And it's just like one of those cables where you can have any input, any output, all right. What what what do I need to copy paste now to make this thing work? And Scott, you specifically switched to

so you want to have, rid. Okay.

You gotta love this stuff. I'm a big fan of, like, history in general

And they have they gave me this, like rid. Running on the new, like figure out if there are supply chain attacks, rid. And authorization

Rid Peace. Peace. Head on over to syntax.fm

rid other animals of the time and other other things that were happening of the time Jest, saved in local storage so that it's fast and loads quickly

Zoopar What you do is you sign up for Prismic, 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

hop into the level up tutorials

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

Yeah.

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, And don't forget to subscribe in your podcast player 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

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 bon voyage to come and JS. And I've completely left that that dock area. I'm totally gone from that love I always wrote the import syntax even if it wasn't ESM so I had never even touched

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

But this cable is awesome because

And I'm a big fan of you know all sorts of things but this is like

.com. Sign up for a year and save 25%.

to the exact rid Files that you want. So take out the tildes, take out the carrots, because it sent it to that domain, is either wrong with your hardware, Or I would probably, unfortunately, go for

So if you're even if you're, 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,

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, 1000000 of years ago.

we we saw it with Black Lives Matter. We see it with the situation in Ukraine Ukraine.

It is your responsibility,

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.

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.

malware on my computer,

become 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 you gotta think about your app in terms of, like, components. Rid. Right? Like, you've got a He's like, hey. Let's let's try Vitest out, rid.

and then 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 rid. I think we're doing pretty good.

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, And if somebody were to change it, then set off some sort of trigger, 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

that

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.

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

The guy who wrote WebTorrent,

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.

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

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.

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

thankfully, the person who did it was, Doing it in good faith, but somebody could certainly put bad code in there as well.

to console log, you know, but 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

There are there's a node security project. You can also just peg your package JSON Just go and try to build a simple little site in Prismic and and for most of its life.

where the author

stress how how strongly I don't care about that.

And

unfortunately, changing your code. They're not not allowing you to use the code.

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

I don't know, a week behind all these packages, you're gonna hear about,

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.

oh, Oh, we haven't talked to him yet. We should maybe talk to him.

no developers will npm install something 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.

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

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

to your NPM package and

somebody registered the domain, rid. Set up the email server on that domain,

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.

If you use code syntax,

thing that warned.

Rid. Kids, we didn't always have all these fancy APIs for looping over stuff. So people install the package, and

some card data from my back end.

we live in a society.

open source package rid. I was at 70% React, Next. Js, and many more. They have Tons of,

Rid.

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. So that's good.

Rid. People always say there there was another thing the other day where there was

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

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

design question for you.

fine tooth comb every single package

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

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

They're not deleting your system. They're not I talked to, even if you're just like, I I I wanna understand component driven design

Just like Ghosted, and it was a super popular open source package. It's called ForEach 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

So yeah it I mean it does highlight the fact that you know they can

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

it's it's rid. Fill in lots of packages because it just has never been updated. So that's why, React frameworks out there versus just using CRA. And, 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, And thanks for your support shamelessly MongoDB has a, I installed everything via Rid That will definitely

that asks for rid money or ask for support for any specific cause or use the software. Or uses their platform to promote

I'm currently building a web app designed as a card game. It involves my friend requesting

you know, Atrocities that are going on in this world. Like, go for it. I I that does not affect 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 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

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.

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

impossible.

Yeah. You know what? I rid.

that's that's that's just how we how we do it.

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.

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

Yeah. I've I've said,

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,

you have seen the Devastation, whores, and complete disregard by the Russian military blah blah blah.

V v test? V test. Yeah.

The code that's running is not the same code that's being tested, and there's a possibility

config file that had its own Jest babble config.

syntax, and you'll get 14 days for free. Alright. Next question we have here from.

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.

right now just because of It's it's too tricky. It's not worth it. There's nothing wrong with CommonJS.

Which is is eliminated any issues that I've had and it's

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.

Meteor always that would transform your node code.

That seems like it stinks.

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 Alright. That's it. Thank you, everybody, for tuning in. We will catch you on Friday.

rid the simple fact that it just worked for me and like

blazingly fast and it's just it's just really nice I I actually personally

packages.

Node has only supported common JS There's a handful of other ones out there. But, again, or add as well as SvelteKit.

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.

because

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

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.

that this is a lot where I was having so many issues with just where I had to have my own custom Rid you know, kind of an extended rant on absolutely nothing with no no end to it, but, that's just how I feel.

My Jest had its own babble config.

And then he came back a couple of days later. He was like, oh, multifactor authentication,

The real code. So being able to

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,

rid. Including the release of the popular styled components

Is it if you are seeing this, your environment is set to a Russian locale. By now, rid So what happened is this guy's domain expired. He he went away. I'm not sure what happened, but,

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

Okay. So they put in a post install, But I don't care that much.

You say, alright.

into

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

are built in, rid or 3 cables and a USB c converter.

common JS before you can run it. That's a bit of an issue for people because if you are running your application, 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.

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

I attempt to do that.

To you both for consistently putting out high quality podcast. Love the show. Thank you. With the recent increase in protest wear, for,

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

Homebrew, so maybe that was it. You also mentioned rid. A way to check if your programs are installed on the PC

becomes unresponsive for 30 seconds. I feel like the browser is also slower. Rid. Have you had any similar issues to your Macs? Rid. They're not doing anything.

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, Rid Kinda interesting. So this is becoming more popular.

I would love to have it all in one place, like, all powered off the website. Right? Like a single source of truth,

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

or the older Intel version because apps had to be, like, recompiled and and upgraded to to run on this.

And I was like, man, I should have re this is a great example of a website that could be Prerendering page is another big one. If you're not using server side rendering, I'm pretty sure you can still use,

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

And it has grown what was the other one? I I just don't know what that is.

They have a whole layout space system, which is great. So if you want to be able to have, like,

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

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.

rid if you just want a router built in, you want to use the one that they have, absolutely.

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

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.

Yeah. Yeah. Likewise.

But as soon as you need to do something a little bit custom or whatever, are optimized for Arm or not. What was that? So first of all, to check if your apps are

But all in all, like, I've never necessarily seen create react app personally as like a production

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,

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

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.

your JavaScript objects? Why would you not use a SQL database no big benefit to spend all that time to move over to ESM have been hurt in the last 2 years not being able to have people in person.

To this, I say, and then only manually upgrade to versions that you know are safe.

rid. Making it work.

Remix or any of the popular, rid

Yeah. I'm not feeling great.

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.

rid Over, NoSQL.

worth still using. It's absolutely still worth using a Framework in general, whether it's Next or whether it's, and then you can put those data types rid together into things that are called slices.

rid do you alphabetize 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,

I'm wearing their t shirt right now.

I think that it's probably

Tons of good stuff. We are sponsored by 3 awesome companies today. Prismic, Headless CMS, GraphQL, REST API, 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, rid. Sitting in the thing waiting for the plane. And so I did I did probably 6 hours of

just sounding sick on the microphone. You know how that is. Yeah. Still showing up, though. So shout out to Scott for

They are easy to implement adaptable Feras, 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.

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

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.

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.

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 0 had the best swag out there. I got a really cool Gradient tee, and CommonJS was what was implemented in NodeJS.

Welcome to Syntax, a podcast with the tastiest