Potluck - Mobile First × Arrow Functions × Deno × JSON APIs × Refactoring Tips × More!

It

and its consumption in React.

Now in every single organization,

Yeah. I

where you can get in on the ground floor now

I think it's fantastic. I think it's interesting. I think it's so cool. I've never heard of a frame. I have used,

to the employer and, competitor. Right? Well, not a Rails competitor, but a Rails

is the site. A GraphQL Would you use a framework like this to build large? It JS the same question with a couple of words replay. So for those of you who don't know or feel fatigued by all this stuff, you're probably rolling your eyes that there's another another new dot JS thing. We have Blitz JS, and we have Redwood JS. Now both of these are layers on top of the things that we're using currently,

useful information on top of, to not be scoped or you need the concise syntax.

to the left or to the right or whatever, then you could you could say, okay. They were here, and now they move there. It really doesn't seem that difficult when you think about

these are gonna this is gonna mean something different, which is one of the reasons why I think it's kind of a vanity thing.

And GraphQL,

and you will get 14 days for free. Check it out.

okay. So this is

Beautiful.

How would you define

Me personally, when I became a senior developer, and they both fall into this category of things that we've continued to predict on this show that are going to become more of the future of this platform that we're working on. So it's funny that Wes we've we don't wanna do that wherever you can. In fact, this is one of the reasons why I don't use frameworks at all because, honestly, they usually add a little bit of extra bulk to your project that it might not need. So if you are using one of them, stick with 1 of them. You can do every single thing you could possibly need to do in one of them by using it or extending it. There is absolutely no reason to use both of them.

that having some sort of a structure or some sort of a a spec is a is a good idea for

JSON. Colon API? API.

you probably don't need GraphQL. It's probably just as good to do this and this and this. It's like, okay. Cool. But I like GraphQL

the,

getting an object, JSON

There's, like, this often this this disconnect where maybe you forgot to query something, and you just thought it was available to you. So you used it, and then it wasn't there.

snowbreak thing, the snow snow day, the current situation,

the GQLESS It is too

and simply having the job title of senior developer is largely just going to mean that you've been in a position of sort of management or heavier load and responsibility

senior developer? What's the difference between an intermediate and a senior

page about how to how to camel case things. You

it looks like this JSON API is just like a spec for for building, APIs, and, it's been around for since 2013,

React 3 60 briefly.

It makes so much sense. And then, therefore, you're never gonna have to worry about stuff.

That makes so much sense.

Now LogRocket is the error handling tool

video experience where you watch a tutorial in some sort of way that makes it more interesting.

I had a lot of different roles Right? That's pretty good.

I I've been playing a ton of VR

I've got the face detection code on my beginner JavaScript,

Yeah. Because, like, also, if your GraphQL or Scott, if your GraphQL API is typed Right. So you can just start And I was like, man,

Yeah. Do it. Alright. Next question is from Goran.

It is called the GQLESS.

and so you can just start using properties while I get off my soapbox, maybe I'm going to sell mobile first was a shift into platform JS in you're writing your your entire code base in 1 code base, but it uses and even giving maybe some other developers more freedom to choose their own stacks based on what their comfort was. But again, this is largely something that's going to be different in every single organization,

as a developer.

I thought, like, that's just a regular REST API. And and I looked it up, and I said, oh,

repo. It's on GitHub. You can grab that as a starter, or, any one of these other, headless CMSs that we you can go and listen to the entire headless CMS every single person. He's, like, the Oprah of Tiger King. Jeez. And, I didn't know that. Yeah. Super interesting to hear, downsides to just How How are you doing today, Scott? whatever it is that your your camera is seeing. So maybe that would be a fun project to do as well. Maybe just do, like, a simple little, Like, this podcast you talked about, I'm gonna go listen to that.

in VR. I've put a headset on once, and it was pretty cool, but that's that's where it stops with me. Yeah. So this is really funny. I've been since the, But I'm pretty excited about it. I still haven't built anything serious in it. Just a couple little hello worlds here and there. But, like, begin, we've talked about them before. They support Deno right out Bos the box, which is cool. So there's already, like, a good hosting. Like, that was that was, like, a hurtful thing when Node first came around. It was like, how do I even run this thing on the server?

is a plus for me. Not to mention, since my headset is made by Facebook, I would have to imagine that at some point, maybe React 3 60 becomes some sort of an official way of building types of apps maybe. So we'll see. Who knows? Maybe you can take those skills and and really, flourish on a medium that is still very young. Right? We have to consider that this VR medium is very, very young, and there's just an endless amount of opportunity

JS that there is no standard

I do think

it's funny that the APIs that we largely write are consumed by only a few people, and I think that's a a big difference between needing something with some sort of our rigid spec and being able to come up with a little bit more pricing grid or or whatever JS on the website. So if it's making your head hurt, then just go back to the other way. I think it's it's totally fine. Yeah. It's totally fine. And, honestly, I have some thoughts on why I think that it's seen as sort of a or or it was seen as sort of a bad practice for a little bit to do desktop first. I think it's because a lot of mobile sites were

As somebody who has had the senior developer role in their title before, I can tell you it's largely just a job title.

day? Yeah.

I think they're Like, I'm trying to think, like, how would you do that? Well, like, you would, like, track people's faces, which you can do. Yeah. You do object tracking.

in your template. So you just you just, like, use the data in your templates, and it will figure out how to query that for you, which is pretty nifty.

And do you think this could become a big thing for the web development in the future? So I know I'm gonna pass this over to Scott because I've never done anything

it's just tracking it has been covered. And, to have a killer app and some sort of variety

all of that stuff. There's no specification for it. So everybody sort of just invented their own way of doing JSON APIs. And every time that you needed to work with an API, you basically had to kinda sit down and and figure out Oh, man. Alright. Let's, let's get into the potluck questions.

before these experiences blow up and everybody's got a headset on. And we're all floating around on movable chairs like Wall E.

if you are going to build such a rigid API and not just a standard, like, JSON stringify it, give it an endpoint, and call it a

still. Like, that doesn't mean I don't like it because, within your your React component or whatever. You just start using properties.

for how you should interact with it, for how to structure your data, how to do pagination, it JS a good database.

That would be a fun little thing to to recreate.

And, I haven't had a chance to use it, but I've seen people talk about it. And it's been up for a little bit here, and it already has,

was building a much larger API could look for something like this.

I probably wouldn't

coding and it will know all of all of the properties and whatever, and you can get really nice autocomplete

go for this just because I think GraphQL is probably a better choice,

somewhat true with GraphQL because you still have to know what the functions are called and new Netflix series that everybody has been watching called Tiger King. Have you have you seen this yet, Scott? Yeah. My tip for, like, if you have, like, a ugly piece of code that just does too much is

make this with the,

the workflows that we would maintain as a team, the git workflows, those types of things. I was in charge of directly managing the developers, their timelines, their projects. And I was also in charge of picking our stack choices you can write your TypeScript types within that context, and it's going to

I like that a lot. That's very much like, when I learned idiomatic JavaScript where, like, just give me a page of things I should and shouldn't do, and I'll follow that. Nice.

grab people's faces

JSON colon API

for building APIs in JSON. So one of the

Is it still a good pick going with JSON colon API

Either way, I I would keep an eye on both of these platforms. I would try them out if you have the capability of trying them out. They look so stinking cool, and to be able to do VR using React components I'm assuming this is the same Dan the man as the other Dan the man, but Dan asked some good questions here. How do I use prop types

that allows you to see how your bugs happen. You get a session replay video Head on over to syntax.fm specifically, Yeah. Reason then just largely,

been last updated. I've never heard of this, and I don't know why I've never heard of this. No. Me neither. But yeah.

definitely, a la carte.

GQLESS But there are like, for a React component, always explicit return every single time because you will need to refactor that. And, I to be honest, arrow functions all the way. I pretty much only do arrow functions, and it's really just for consistency in both syntax,

Here's the URL structure you should use. Here's the URL structure for a single piece of item. Here's how you get comments that are relationship to something.

I've I've seen a bunch of, like, the quizzes and challenges, but I haven't seen the couple's questions.

client without queries. It's so cool. It's pretty cool. What does it do? So, basically, here here here's the gist. So for those of you who don't know, with GraphQL, what you do is you basically write an object like a pseudo JavaScript object.

that is so cool. You could scrub it. You could see the network requests, the error logs, the Redux store, anything you got in there, and it works with all of your frameworks that you know and love. You can even see where the user clicked to turn your website into a frog. How'd they do that? I don't know, but you can find out with LogRocket.

like, detection, so I will pass on it.

I I do like what it what it gives me. Have you seen this whole, Yeah. Right after Magento 2 came out. And Magento 2 Party 2. It is just a quiz game, a bunch of fun questions. My whole family has been drinking

a specification Next question we have from Andre MacNamara.

The one thing I hate about VR is being, like, tethered to a computer.

you'll want to make sure that you have some sort of error and exception handling service, one of which Wes you can see how the errors are happening. Now this sponsor, of course, is LogRocket.

and edges and ownership and things like that. So

Yeah. I'm I'm interested. I I definitely am interested, and, it makes a ton of sense. I'm very excited for trying this out at some point. I wish I had, like, a little little tiny project to try this out on. This would be a pain to try out and level up, but definitely looks cool. Something to keep your eyes on. One more thing about this, JSON API is they have a I'm just on the website here. They have a recommendations Yeah. And it's funny. I I listened to a podcast that covered

And I feel like I could be decent at table tennis now because of all the time I've put into it in. The physics are so good, and I absolutely love it. So I am becoming a huge VR fan in that regard.

how that thing worked. And that's still those will still be scoped to that function.

your API should start with a character.

is that you've been in a role where you're doing a bit more management and you've had a little bit more on your shoulders, a little bit more pressure, a little bit more ownership.

to create anything major. It's one of those things that if I had any free time to do a goof around project, is using GraphQL,

that I didn't have before. I was supposed to go to more meetings, more management meetings, more meetings where I had to be the spokesman for all of the developers, right, the advocate for the developers.

And this is a small company. Right? It depends on the size of the company. I was in charge of coming up with

creative spec of your own or something. To me, personally, I am using GraphQL, so I haven't really thought too much about it. There is sort of like this counter pushback to GraphQL going on right now. I don't know if you you've seen it Wes people will be like, a arrow function, it doesn't have its own Scott, so this would refer to its parent scope. So that's largely the reason why I use it. To me, it's more predictable. I don't have to do this whole this, that dance to access the parent,

WebVR? Next question is from Christian Anderson. Says, hi, Scott and Wes. Love the show. Here's my question.

Next question is from Jason.

or,

thing? never felt as secure of a solution as TypeScript types, and I did use prop types redefine the type JS what it's like coming in on every single time.

put my stuff on GitHub. But for most people, no. You shouldn't do that.

over over everything you want. It can be easy and you can have control, and and I think that's that's what Shopify is. It's easy and you can have a lot of control,

70 tutorials on Magento Node If you have that sort of setup going, then just surgically change out those things, rewrite them, move them, whatever, being careful not to break your tests.

there's a, making it happen. Like, last night, I just, like, took a Deno, deep exhale and was like, holy cow. I am company.

and its intention is to be a seamless experience on top of your site.

which Yeah. Is so funny. I one of them. Them I have, like, 2,300 data to it in some sort of way unless, of course, you are a developer editing those templates yourself. So if a client needs to use it, yeah, you need to have some sort of a back end in there. And Yeah.

promotion in any sort of way. But Snipkart is sort of what I was talking about, like, when you have the iframing in with the Shopify and Gatsby thing. What it does is it basically is a ecommerce platform built for Jamstack 15 different custom React hooks over the course of the video, but we talk a little bit about when, where, why, how, what you do to write them, why you would use certain techniques, when to use certain other techniques,

do it. Like, I run my own, and I just have digital products with no shipping and no inventory, and it's hard enough.

experiences, so

Next question we have here is from Luke.

but you don't get full control

Yeah. Yeah. So okay. It really depends on who your client is. Right? If your client is somebody who's nontechnical,

is still a component. Right? In fact, I always make a provider component where it's like a function for, like, an hour each day, I would say, maybe. It's it's been really interesting for me because it's like Wes put the kids to bed, and there's, like, a little period before Courtney and I are, like, really hanging out. We're all just sort of floating around, and I have been playing, rocket.comforward/syntax,

podcast that we did, and we listed out about 10 of the different ones out there.

Shopify all the way, best experience, So Unfortunately, I was the most shocking thing in the entire thing.

on add ons and things like that. And then if you want control and cheap,

I got really excited about making ESLint site in Gatsby, but they would need to be a coder to be able to edit the content of the site or maintain it. Am I missing something here? Well,

and they've got lots of control, lots of plug ins, and things like that. And then the other end of it is is where the data comes out, and then that's where you, the developer, go in and I'm confused about, But because

ecommerce and why?

it looks really super interesting, and I'm keeping an eye on as something that I would use if I was going to be building an e commerce site. But Shopify, Snipcarts, then use Mongoose. If you wanna write your own validations and you wanna write your own stuff there, you want a little bit more flexibility and a little bit more freedom, then choose Mongo.

is a CMS,

a paid

Sanity

It looks really, really nice. I have not used it on any projects, but

Gatsby is more just the theme or it JS just the theme. It's it's how you, And if there's no parent, this then they will go for the parent of that, and then eventually, this will just be the window if nothing is bound to this. But if you create variables inside of an error function, you still will compared to GraphQL or just a normal Wes of JSON API? So I was, like, reading this. Like, what what is

I know. People are like, oh, why did why are you using GitHub?

how do I use prop types to check? The big thing here is that your provider of podcast, right, where it's, like, always going to be high quality stuff. Yeah. You know when they put it out, but it might not be for you. And it's so funny that I've, like, gone back and listened to some of these, like, must listen to podcasts, like Up and Vanished and some of these other ones that are, like, essential podcasts in the genre. And I, like, walk away always being like, yeah. That was really good. Like, they did a good job on that. And and, you know, I put off a lot of stuff like that. So, developer? You're just you're you're actually passing out is what it is. You know, it's funny. I, in. I guess those aren't coming in as props, though.

Like, generally sorry. I should let me back that up. Generally, you're not coding content directly into a Gatsby page unless you are actually a developer like I am.

it's it's a tough balance. That's a funny thing that happens is that, I think I think this is partly why WordPress gets a bad rap as well. It's because it is the first thing that people

that has the whatever context dot provider.

I like how you said that get like, the Gatsby Node is just the theme. I think too often, we forget that it is basically just like the theme template. And why would you use that over a WordPress theme template? Well, you get

Right. I know. And and yeah. It's not about babying your clients or whatever. It's about down.

It's funny because they sponsored us a little while ago. So I don't this is they sponsored us a long time ago. This is not,

solved by TypeScript.

as their type rather than having you to props coming into component, you have to type them in every single time, and it gets totally redone with all of the types you have to write. Where with, context, And, if you wanna make sure your website's capable of handling some sort of heavy load,

when getting the props from context instead of passing them very neglected

that's why you would use it. But at the end of the day, like you said, it is just the theme. You need a back end. You typically are going to be connecting

on YouTube, and commonly used patterns that you'll see in other people's custom hooks. It's really stinking cool. And it's actually on sale for 50% off right now. That's not something I typically do, but with the current situation,

Why using MDX and whatever? Like, that's not real. And I was like, I know it's not. Like, don't ever give your client and Mongoose is not used in the real world, and it's just a tutorial language. And everybody's like, yeah. Thank you. And I was like, What?

tutorials still? It's just like, because I really didn't like it before, and I don't like it now. I just did it because I was working in Magento every single day, so I knew it pretty well at the time.

In there, I would have my prop types

control at the end of the product

Adobe bought Magento? Yeah. A few years ago.

So that I think that's the part that you're missing.

Yeah. Yes. Yeah. So I think online ecommerce has a triangle where you have easy, Shameless plugs. I'm gonna shamelessly plug my beginner JavaScript course at beginner javascript.com.

was sort of this, in my mind, botched launch. I have no idea what the status of Magento 2 is right Node, but it seemed like when they first launched Magento 2, it was I don't know. So, like, my my my experience in Magento JS I have this, like, really weird relationship with Magento where it was the very first platform I ever built a site with a database, a MySQL database, and a, like, PHP. So, like, most people cut their teeth on WordPress in that regard, but, like, Magento was it for me. Like, my first experience with PHP and databases was Magento. So I have this, like, very all those the same stuff. Right? your API, gives you back everything you ask for. Right? Well, what this library does is it takes it 1 step further, and it says, hey. We know that your component from the things that you're requesting and build a query for you so you don't have to write it for yourself.

And I believe it's all iframed in. I'm not entirely positive.

developing a website for a client. I feel like most, if not all, clients want to take administrative

most templates, biggest community. There's a 1,000 Shopify developers.

Awesome. Yeah. I I

So I don't know if I have a great answer for this. If you do have a good answer, what's the best way to type

control, and cheap. Yes. You gotta pick 2. You gotta pick 2. So Yeah. You don't get them. It Sanity be easy and cheap, says, your rating system sucks. You just changed your name to cute dogs,

people are always like, why don't you do Magento

context with prop types here? Let me know. We'll retweet you on the show notes. I think this is an interesting question, one that is, have probably not done a good job of doing mobile first specifically because our platform called Snipkart.

So

a markdown file on GitHub. That's not a Yeah. They don't want For me, it is because I'm a developer, and I want to be able to

You know what? This is an interesting question and one that I haven't had to think about beyond the fact that if you use TypeScript,

Yeah. Right. The thing that you're missing is is that Being able to control what the site looks like.

and you can use the the headless part of WordPress for that with Gatsby if you like or, go in and start to pull the content and and display it on a website. So the thing you're missing here is that Those keep us going. We are sponsored by 2 awesome companies. 1st 1 is LogRocket, whether that's WordPress, debug. Yeah. Yeah. And so I I just switched to to just regular functions. So that's the difference. They're both very useful.

Next question we have here is from David.

extensively.

data and template it out.

And I say that because my Gatsby website has paragraph tags That was okay. It was okay. Yes.

really insane speeds overall. I mean, just Gatsby sites are fantastic there's a lot of things where you, like, where you declare inside of a normal function, of an arrow function or the other way around? Stay tasty.

Yeah. And so if you're a Magento developer and I'm totally wrong about this, don't be don't be too mad. I haven't really looked at this in too long. It it it could be just fine. I see that they have a GraphQL API and whatever, but I've just never been a I've never been a big fan. So Yeah. I I just made I've been polishing up a project from a boot camp I attended, and I'm putting on the finishing touches. And I'm getting frustrated with how inefficient, hard to read, and junk some of my code is. I want to go and restructure a lot of things eventually, but I'm wondering the best practice I should be aware of or just maybe a way to tame this beast.

is up to your CMS. So, Is that right? Yes. I did butchered it, like, 3 times before this. MacNamara.

take a look at it. Obviously, if you have Wes, great. Maybe that's not always the case, No. Yeah. No. Successful business over here on on Mongoose and and MongoDB, and I I think that it gets a bit of a I think the same thing happens with Firebase. Because it's so easy to get up and running Yeah. It's pretty popular to be used in tutorials, and then people think of it as a toy and, money coming in, see who's paid you, whatnot, sign up for FreshBooks and get all of that cloud accounting in one spot. Go to freshbooks.comforward Hey. I was curious about knowing your opinions regarding

and make sure it's working and then just go through piece by piece and say, like, what can I don't necessarily care all that much. Right. Yeah.

And then So my unit is the Oculus Quest, which just says no cables or anything. So as long as you're not tethered to a computer, doing it all at once. Do it 1 step at a time. So there's some different approaches, but the main thing is have tests,

but just to not I don't wanna be that guy because now that I it's like 2 months ago Wes I didn't have my entire application written in TypeScript, I was in your same boat. I've used it on projects. I was just, you know, whatever.

what I'm going to do is I'm going to use one big old kielbasa.

And just by sort of, like, going file by file, trying to clean it up and and tight tidy it up, often then you'll start to see,

the the the the thing that gives me the most amount of confidence when refactoring Node Exotic

what the thing is I'm refactoring. I have, is seen as maybe almost like the HBO Okay. Ecommerce 2020.

The last way I have is to with this and variables.

my components right now Yeah. Is TypeScript.

but just go and take that huge take that thing that bugs you the most frameworks as well where you're overlaying So, honestly, all of the jay JSON APIs I've built in the past, I've never had a whole lot of problems with it that I I needed

that that refactor is such a snap in TypeScript versus Mhmm. The Versus Code does a okay job at it, but, like, so much easier in TypeScript if if you have all of that stuff properly set up. I like it just for my components

number 1, yeah.

and make a branch. Because if you start tweaking stuff and all of a sudden it breaks and they are in your main branch and you have some code changes you didn't commit beforehand, you're gonna be frustrated that you are now having this project that's not working.

I just don't have a huge project in it right Node.

Start with number 1. Make sure you commit all of your code currently readability and those aspects of it. For me, I personally prefer the

Also, you want something that you can just go back to if you goof it up.

The other way to take this would be to change small parts surgically, So I I think that I'm gonna throw of how it handles this? There used to be this I'm trying to find a good way to explain this without.

fetching data, and returning it back. And that's the point where I'm sitting now, and I say, okay. I could probably refactor this out into Mhmm. A smaller reusable hook or whatever it is that I'm using. You know what? You're not going to like this.

but,

always make a branch.

actual React hooks

annoying TypeScript people that's like, boom. So but the the ref refactoring, even, like,

migrate the things that are easy to migrate before rewriting a bunch of code. Let's say your refactor is you're taking this thing from a class component Nothing any major, So

Why? Well, because it's important to get this thing up and running as a function component if you're doing that sort of transition.

And the reason I think would I not like that? Because TypeScript people are lying TypeScript, TypeScript, TypeScript all the time. Oh, okay. I need to let's let's make this clear. I'm not anti TypeScript.

I'm doing the same thing over a few times. Like, I just wrote for the footer of my own website. I wrote this thing that would fetch my in latest Instagrams, and then I wrote another thing that would fetch my Instagram stories, and then I wrote another one that would fetch my Twitter feed.

If I'm using component did mount, component will mount. Though, if I'm using those life cycle hooks, Which technology stack would you choose for 2020

So I have a couple of strategies. It depends on if I'm if I'm refactoring a beast of a file. I'm gonna branch. I'm gonna duplicate that beast of a file, and then I'm just gonna go hard deleting stuff, completely rewriting it. Right? And, So if they need work done, they'll be able to find somebody really quickly. So I think Shopify is sort of the winner for the easiest overall if you're just building in their platform. If you wanna get something a little bit more, I don't know, developer y, a little bit more hipstery, you can use Shopify as a back end for a Gatsby site or even a Next. Js site. And the Shopify API, it takes some getting used to, but all in all, JS pretty dang good. And they have some iframe cart stuff, so you don't have to, like, build your own shopping cart. You can just drop in their Iframe cart, and then you can have your whole Gatsby site the way it is. So it's pretty cool, but it doesn't really give you a ton of ton of options in terms of, like, giving the client those pages that they might be used to to see their orders and things. You're gonna have to dive in a little bit more. If you want to go for a really cool little option here,

So, like, don't pay me as the anti TypeScript guy. I'm I'm not trying to pay you as that. Okay. The reason I say that is only because it's like TypeScript people often

that one is going to be probably I would probably stay away from Magento, but only because of my own personal experiences in Magento one,

make into a smaller function? How can I chop this out into to other pieces? Can I put them in their own file or or something like that? Yeah. You can do that in GitHub in Chrome already. Yeah. And then you just, like, you track I think the back channels is just as interesting trying to solve something. I mean, if I think, like, a couple episodes ago or maybe a couple months ago, we said, he replies, you give every dog elevens and twelves. It doesn't make any sense. So he replies, And the most popular one was MongoDB Where the data lives and how that data is controlled

It exists, and it's cool. And now I'm, like, slowly turning into one of those

this is mostly the same. Mostly just going to an API, Maybe pop rates,

branch, and commit often, and don't be afraid to really go radical with some things.

across multiple files,

complaining now. It's like, oh, I don't have the props that I should have, or I am being passed something that I shouldn't have. And it's, like, may really made all my stuff more organized. Okay. Off the soapbox. And, So which should you use?

rather than,

and this one works best if you have tests. If you have good tests that say, this is how this thing works, and you don't wanna have to rewrite your Wes. You just wanna say, okay. This thing should function the exact same way it did before. If you're using React testing library with data IDs, that shouldn't be too much of a problem.

there was like a push to get people to actually make I don't know. I'm interested in Deno. But at the same regard, I'm I think I'm interested in it the same way I was in

hacks and stuff to to make it work on both. And then I just kinda, like, sit sit in my chair and go, like, what am I doing with my life? Like, just make Yeah. Just make 2 navs and hide 1 and show the other. We probably had, like, 4 or 5 iterations of our nav that warp garbage

What is the difference between the ES

between And what this library is able to do is sort of pull out the object structure

just become a thing. So all of a sudden, So next question here is from Adrian. This is the last question here. We have a hefty, hefty potluck for you here today.

CSS wise because of that.

unfortunately, still is, is that people would just start to hide stuff. Yes. Yeah. Like, oh, it's the mobile website. They don't need all the features, and that's so frustrating to me to to get a website that just hides stuff on mobile Yes. When the reality is is you should start all of the functionality and all of the content on mobile and then and then figure it out. So that I think there's some some good ideas behind that. And as long as you can keep those in mind, you're you're gonna be in good shape.

It's just like, this is too much. What are we doing here? I would definitely spend it on Node of these things. Not because I It's important to get it up and running and then think about how you can restructure it. Because

Yeah. Because, also, like, what was popular,

and how big that component will be. Like, I think component queries or, element queries will make this the thing of the past as well because, like, I don't necessarily think in terms of website. I think in terms of, like, player and Right. Exactly.

Like, listing of videos or, I am going to Hey, Wes and Scott. Thanks for the badass podcast. Humor and knowledge always as always, I was wondering on your take on mobile first design and implementation. Node you throw desktop styles or the mobile styles into media queries? Any opinions about that?

going way overboard on, like, clever CSS

thinking about mobile websites as being something more important than they were before.

content rather than I often find myself building with these things.

that just straight up does not work structurally it actually is much better because when you have

thinking in terms of components

it's too much of an issue. I know that when this first came out, there was a whole, like this tends to happen with, like, everything. Like, this new idea comes out, and then the other thing is immediately garbage or an awful way to to approach it. And I I don't think that's true. I've never had real issues, especially with Flexbox and Grid and, Oh, it's like it's kinda like Wes you get married, you play the shoe game or, like Yeah. Who's most likely to cook dinner? And you put the shoe it's it's like that. But instead, you you tilt your head left or right, which is pretty nifty. Oh, that's fun. We should do. Yeah.

mobile looking websites

Yeah. And the only time that's really acceptable is if you have duplicate. Like, for instance, we have a navigation

a priority rather than just an afterthought. So to me, 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.

which was great for a long time, but we eventually moved to Mongoose because it offered more features, essentially.

and, certainly, you can scale to have a very profitable business with MongoDB.

Alright. Let's do a little meme explainer right here. So yeah. So there's this Twitter account,

I don't know. I've only ever used Mongoose myself. That's the way I learned it. That's the way I like it. I'll tell you. What is it, Scott? The difference is is that Mongo doesn't include any of the validation or schema stuff. So you use you would have to build bring in a third party package. Like, we used to use on level of tutorials. We used to use Mongo, at that time. Yeah. Right at that time, media media queries had just come out. People didn't really know about them that much. I mean, responsive design,

If you want to brush up or slam dunk the fundamentals or you're brand new to JavaScript, this is a course to take. We use coupon code syntax for $10 off Beginner JavaScript Scott.

some sick picks.

and not a real world thing. But, certainly, there are like, MongoDB is a publicly traded company. Are they not? They are a very profitable, where's our Sanity sponsorship today?

sick pick,

I don't think it's just a toy toy,

Awesome.

speaking of yeah. Yeah. I'm doing I'm doing that right now. I'm building a large fenced and private beach, and none of my residents can use the beach but me. So, Yeah. Stay tasty.

as the actual thing itself.

before

Mixed stuff.

too

I'm sure there will be a lot more. I'm sure there will be an entire podcast What do you think of Deno JS reaching version 1 ESLint o? Is it really going to be a node successor, or is that just marketing hype? So Deno, look back at it fondly.

Later. Peace.

a Reddit thread, unpopular web dev opinions.

but it's going to be Frankenstein together. You don't wanna do that. Number 2, part 2. Here's the here's the big big meat of this. Here's the big meat. The big meat is, I don't know that, but it sounds cool. Good. I like dogs.

Yeah. Right? Oh. Yeah. But yeah. So it it that wasn't really the question, but, They're good dogs, Brent.

like, they're able to finally, like, talk after it's all come out, and they're able to give their own thoughts as to to what happened and because they are

It's just good database.

Wondery One, check it out. It's really good.

very interesting. So check it out, Tiger King as well as back channels.

David Spade has a YouTube channel where he interviews

Jackbox Sanity Pack. This is one of those things that you can now buy online and play over Zoom. We've been doing that, I mentioned, in the last show because we own it on Switch. So I used my Cam Link to hook up the Switch and stream my Switch over Zoom,

In my mind, MongoDB, the company,

you know, UI ways of doing things that are very specific to their design system. So if you mix 1 with the other, what you're gonna get is a Frankenstein looking thing. You're gonna have, you know, an arm sticking out of your website and the legs sticking out over here. You're gonna have some bolts in the neck of it, and it's gonna probably stand up and move around fine,

Cool. I am going to plug my latest course, which is called custom React Hooks. And the custom React Hooks is a really cool course because what we do is we talk a little bit about

So last question from Adrian. He says, is it bad practice if I mix up React Bootstrap and Material UI in Node React project. Yes.

a company that has open source software, but also,

like, is a publicly traded company making money off of that.

It's a good database. Database. It's a good pup. It's it's a good Wait. What's that meme? Yeah.

And some guy named Brandt

I have nothing to add to it. Scott nailed that there. Let's move on to

Mongoose is a very stars and a bunch of forks. And it looks like it's well underway to becoming really super cool.

Should I use the MongoDB or Mongoose Node module in my project? Are the differences? different SKUs, different sizes, things like that. It certainly would have to go, what they are, but we we do have

Murder it is 50% off. And if you use the coupon code syntax, you'll get an additional 10% off. So it's basically free. So head on over to leveluptutorials.com,

And

and

Animal Crossing as I'm, in in size. Right? You're adding so much additional bloat via CSS, JavaScript, whatever, especially if these are React Bootstrap, React Material UI. You are adding major KBs that mimic that functionality I think Scott

murder

have very specific,

It's all good.

So, do have their own scope. They just don't rebind the value of this and that's not gonna be easy. You you can certainly,

What I was gonna say is, Yeah. Yeah. Totally. I'm the same way as well. I've always done desktop first and then gone smaller. I think the benefit to What are some of the other benefits of it? We talked about so many times that just

They have m MDB. So they're a publicly traded company.

Brent. They're good dogs, Brent.

Beautiful. Alright. Thanks for tuning in to the potluck, and we will catch you on Monday.

gratuitously Christian from Denmark.

No.

and I'll have the link in the description. You can either sign up to become a pro subscriber and get access to all that and more or buy this course outright,

there. It certainly does have downsides

the process of writing your own custom hooks. Throughout the course, we're constantly writing custom hooks. So we I don't know how many it is. We may be right, and type check a component

Yeah. No. I mean, all this stuff is whatever you're proficient in, you know, can be effective, modern meteor into the mix as a a nice option here too, but maybe a little bit less handholdy.

widely used package and highly supported, so I don't think it's gonna be at risk of going away anytime soon, Node think. So I personally use Mongoose now. Yeah. I I saw a, just pass those into the component you can play it online now if you buy it over Steam. It's really super cool. It's a game you play with your phones. I specifically am recommending the

compared to other languages or other databases, but, in Deno coded right into the pages, where in most cases, you're gonna did, and they wrote some awful code and did some terrible things and weren't totally sure what was going on. And that's not to say that that WordPress doesn't have its own fault, but it's funny when you look back at your the first thing that you ever did, most people don't don't totally understand this question, and be able to handle things themselves. Does this mean I the only option for client projects is WordPress?

you know,

Whichever you like, if you want something that includes validation,

generally, publicly traded companies don't just they're they're not made from tutorial companies, except Pluralsight is publicly traded, though.

murder party 2 on the Jackbox

let me tell you why it's a bad practice. Besides the fact that both of those libraries

large

It's a good database, Brent. You don't know that meme? It's a good database. They're good I don't know that meme. I I I would consider I would I'm pretty memed up too. I I mean, I know the memes. I'm I'm with the memes.

They're good databases.

playing it online. It's been a lot of fun.

no. I I'm gonna start I'm gonna start doing that either way. Okay. Getting off topic here. Jackbox Sanity Pack,

And, You don't even wanna know. A mandolin? No. A a, like, actual shaving razor. It was just I was just moving it, and it Oh. Yeah. My nightmare. Dude, it's it's seriously

currently

Wondery did a podcast, before this whole thing went down, before any of this stuff happened. They were, like, covering him as being like, alright. This crazy guy did something crazy again. And so I had him I knew about him, and then I listened to the Wondery podcast. So by the time that the Tiger King came out, I knew the whole story. Wow. Courtney didn't know any of it. And we watched, I think, the first like, all of the episodes but 1, and Courtney was like, I'm I can't watch this anymore. I know I can't all the animal abuse. So we have not finished it, but we watched it. And I I mean, I thought it was I knew the story, so, like, the story wasn't riveting to me, but the production was certainly great. And, seeing some things like Carole Baskin's husband wearing the tiger collar at their wedding thing, like, that was pretty shocking.

like, people's is very much like, Red Hat or IBM or Oracle or, like, a big company like that

and he always rates them, like, 11 out of 10. Great dog. Like, everything is amazing, and there's no bad dogs.

which is pretty sweet. I'd never now I feel like I could be a game streamer. Here's me playing, 6, Alright. So I have a couple of strategies for refactoring, and it really depends on,

They're good they're good dogs, Kent.

Alright.

Yeah. Well, the Wondery one does a good job because it's, I think, it's a little bit longer, and it's Wondery. They're the ones who did Dirty John and all those. So they they're, like, very tuned at this style of podcast. They're like you know, it's funny because, like, podcasts are this this whole medium, and there's this, like, type of podcast that Awesome.

My sick pick is going to be,

JavaScript works in a way where you can put functions in variables,

to that that function instance. So it will be inherited from the parent.

what do you wanna call this this this,

simplification of

where you actually write the word function space, what the thing is built in under the hood, stick that in some sort of CMS.

6 arrow function and a normal function? They're sitting on top, and they do specific jobs. Now I have an eye on both of these projects because I think they're both interesting. They're both fascinating, the more I find myself using my own VR headset, the more I I get ideas about what kind of cool interfaces you can build in it. So I think it's very interesting. I would love to do rather than like a game or anything like that, I would love to build some sort of interactive

I don't use the this keyword a whole lot in much of my programming anymore just because that's more object oriented. Functional allows you to sort of just take in arguments and whatnot. So,

that that's why you can do something like const say hi equals function as well.

yeah, it's it's kinda interesting.

like, what do I use? I use both of them. For React components, I've actually switched away from arrow functions and over just to regular functions

and it largely to me, it looks cool. No. I don't know. That that's that's low on the totem pole, but I do think it looks cool. Yeah. It definitely does. So arrow functions your import as being from a repo specifically rather than via package dot JSON file.

you could use an arrow function for So I guess the problem with this question is is I initially read it as how do you type check? And I was thinking, oh, TypeScript makes it super easy. And now that I'm thinking about it, how do you use prop types in this way? I'm not quite sure. And I think that is maybe part of the problem with prop types overall. Prop types, to me, Sometimes Wes you you are applying for a job, the senior developer position, all it means my meteor stack does a lot of this stuff really well in the same regard. Like, I have server side rendering, code splitting, GraphQL, we did it with a, schema package called simple schema,

each function had its own scope, where with

Use an arrow function if you need the this WordPress

partly because of hooks, partly because of the implicit return was such a pain in the butt to

but you didn't wanna access that functions this,

but that doesn't really all matter all that much because if you have, like, a stack trace or something went wrong, it will usually take the name of the function from

say hi,

the big part of this is really how it deals,

Implicit return is not doesn't have to be. You can still return and use curly brackets on an arrow function

There used to be this technique where if you needed to access this

the visual of it all, just to have things be parsable, but also just so that we always know how things are functioning. And not to mention, we just about never use the keyword this.

So what what else do they do? They they allow for implicit return. So, if you're doing, like, a map filter reduce is probably the use case where I use an arrow function most often, where you just need to take in an argument and then immediately return something, that's building it yourself,

those quick little things can be done on one line with an arrow function, and that is that is huge.

like, divided or or looked up in an object or multiplied by a certain number or or filtered out, return true or false,

can only be passed in as reference, meaning passed in as an r an argument to, like, a map filter reduce, or it has to be stored in a variable. So they're technically

as well. It's just kind of a shorter concise syntax.

When would you use a normal function instead don't make that back up back in GitHub. Your clients don't want to edit GitHub. That's what I have to continually tell people that.

both of them.

And it was such a giant pain in the butt because where it's going to do the most it can to

The reason why I use the arrow function, like,

You wanted the parent scope. You wanted the parent scope. That's a perfect way. That's the exact word. You wanted the parent scope. You had to do this whole this equals that or this equals parent or whatever beforehand in the variable and pass that in.

Everything else is sort of, I I guess, a lesser function of this where,

instead. So, it takes years to build up all the resources that we have in Node land.

that is that's called the function declaration.

The other thing about arrow functions that they must be passed in as reference or stored as a variable. So a function declaration

I think a lot of times people build these really complex websites and then they find themselves trying to figure out how do I cram this thing down into something that is

And I'll definitely do my breakpoints as being

to it, or do you build the desktop website and then and now I don't know. Like like, what are your thoughts on this, Scott? Like, what do you do? What is Vercel up touch? Is it mobile first, or is it desktop first? Yeah. This is a good question because I think you could really do it either way if we're being entirely honest. And I

to style things at increasingly larger displays JS in, you know, the default styles are all for mobile. But so many of our styles are set up to a way that you don't even have to think about it too much, too much, too much. Yeah. Hey. It's almost like the media queries are used as patches to fix the stuff that's not working when you make it wider rather than mobile and desktop. So we have a mobile nav and a desktop nav. That's the only actually instance where we have a mobile component or desktop component. Oh, yeah. As long as it's, like, duplicate VR table tennis, which is not something that I've ever played, really.

really thinking about the 2 designs as being that separate.

First Node we have here is from standards in GraphQL for pagination Yeah.

acceptable on mobile where Yeah. Mobile first JS, like, you think about the experience When they came out, arrow functions, people were like, I'm gonna use arrow functions for everything. And, like, I would get a lot of people being like, why are you using a normal function? Like, why don't you upgrade that? order tracking and go smaller, smaller, smaller and that's just dedicated to to this Netflix series.

and desktop.

I'm switching a lot between project to do it differently,

coded in a way major KB toys to your site here, and, Yeah.

first on mobile, called dog_ am more interested in the AR, which is augmented reality. And I imagine you could probably do something similar with these where their heads were and then over, like like, I don't know, one second. And if both heads move

Simon.

scale up JS in I don't want to have to change a ton of stuff between mobile

the mobile first style breakpoints Wes you only use breakpoints

majority of it is consumed on mobile. Mhmm. And then you can make it more complex with media queries as you go on up.

which a lot of websites are probably

and it really makes my head melt. Keep up the good work. So this is a question that we get all the time is is when you are building a website, do you start with the mobile website

and then use media queries but you're you're gonna pay through the nose,

So we're inherently going to favor a little bit wider of a viewport. Yeah. That said, the design was certainly

mobile first is that, renaming a function

users are primarily using the LevelUp tutorial site on their desktop computers or their iPads.

and Scott and I attempt to answer them. If you have any other questions that you'd like us to answer on a potluck, make sure you go to syntax.fm

and click the button

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 Bos. Welcome to Syndaxes. This is the podcast with the tastiest web development treats out there. Today, we've got a awesome podcast

lined up for you. And, potluck is the episode where we take in your questions, Ecommerce, man. I can't even imagine doing, like, a real wet a real store that has products and shipping and, a a value. A box. Yeah. If if the value goes left or right. Somebody and then take it and run with it.

that says ask a potluck question.

and 2nd is FreshBooks.

and a potluck or or we mentioned that and it got put a couple people got mad. It's not built in TypeScript. It's built in Rust, but you you build your apps in TypeScript. You don't build the apps in Rust. So, Quite honestly, I have never had a problem going either way, so I don't think that, That said, if you are building an API from scratch right now,

We'll talk about them partway through the episode.

The whole thing about Blitz is that it's a monolithic a Deno investment before you see anything working again.

we've talked about it a bunch on the episodes before, but basically what it is is it's a

these are 2 things that have the potential to become really popular.

using an existing up information. I I always take the Instagram. Have you seen those, like, the couple's questions on Instagram lately?

and and that's that's the reason why we're able to have, Node. Js in the 1st place is because you can take an engine and and run it in different places. So the idea behind Deno is that

And so TypeScript, like, very clearly became the dominant of the type systems for JavaScript. And at that point, I was like, alright. I have to invest the time because this is becoming an industry standard to know And then that can cause a bug. So this is a really interesting new library. And by new, I mean, I think this thing is brand new.

front of that with blog posts or YouTube videos or whatever, then that's a huge because, like, I it? And, a couple Yarn ago, there was a big push for the sort of mobile first,

Oh, yeah. Yeah.

So the first one, Blitz is more like a Rails

TypeScript about, like, 2 years ago. Right? Like Yeah. I am keeping an eye on it. I'm thinking about it. It's in my brain space, but I'm not going to, like, really dive in or really do anything unless it, like, really picks up. For me, like, there was some point when TypeScript became the obvious champion. Right? So if you wanna check it out, head on over to log

it was built in TypeScript TypeScript. I get that. Yeah. No. But people on Twitter keep saying, like, why do you hate TypeScript? I use TypeScript.

and Prisma for the data. So with this one, you're not having to think about a database all the time and I just do I force explicit returns. Well, for the most part. I don't know. There's there's some use cases where I don't do implicit returns.

to, learn something new here. Yeah. I would definitely

serverless functions. So when you deploy, it's all serverless, tight fondness for it, and at the same regard, I absolutely despise it. So first and foremost.

Next question is from Deno, the man. Hey, guys. Love the show. My question JS, if you are looking to refactor code, do you have a process that you'd like to follow? There's a lot of people who do not want to hear,

like React, GraphQL, whatever.

or your schema, and it's trying to encompass all those aspects and then just giving you React. So I have my eye on both of these. I think they're both cool options.

analogous.

They're they're Scott, like there's not a company behind them. There's not a whole bunch of, like,

a runtime in JavaScript and TypeScript,

use this for a weekend project, but nothing too serious just yet. And I would definitely keep my eye on them because

Deno has anything but marketing.

that's built on the same engine that Node is built on, which is called v eight. V eight is also the it's it's the engine in Chrome,

Would you use a framework like this to build large and scalable web apps? And then, also, what's your take on Redwood JS? any sort of major organization.

You Node, so it it's funny that I,

I definitely think it will be a huge thing in the next couple of years, especially if we can get I'm not sure, like, what does it look like for and the thing that people like about WordPress is the fact that it has a really nice back end that clients like,

now Wes the other Node, Flow. Yeah. I don't think people people like Flow very much.

But that whole story looks a lot nicer right now. So definitely not marketing hype. I would say

but from the folks behind it JS well as the fact that they it's like a 1st class TypeScript support.

Node of these 2 might be it. Word.

moving along here a little bit more. Clearer what it is now. Definitely more clear. So Blitz, in short, is trying to be the rails for JS. Now Redwood is also taking this, but it's taking

And if you can be on the Scott it and sending that sucker down the line a a rigid spec for this, but I could definitely see someone who So, I don't I just don't have to think about it too much. That's not a a big, a big issue for you. Yeah. Next question we have here is from Max Dayton. Hey, Scott and Wes. What are your opinions or experiences on developing for 3 60 slash VR experiences on the Wes. There are few frameworks out there like A Frame and React 3 60. I was wondering if you had any experiences And, like, I certainly do use you know those triangles where you're allowed to pick 2?

cursory glance at Deno just to have it in my brain space.

you can run the whole thing in TypeScript.

but I don't think you have to worry about that aspect of it too much. Isn't this the the same framework we talked about a couple episodes ago? It is, but things have been

node module

more control over the data side of things, and it uses React, GraphQL, I think VR has a lot of possibilities. I think as long as you are tethered to a computer, I don't think it's going to get that sort of mass adoption. So what are my thoughts on Yeah. I like that. Alright. Next question is from actually Jason.

because, like, there there definitely have to be some sort of transition there because Peace.

And Jason asked 2 questions here. I thought they were very related, so I decided to, answer both of them here. What's your take on Blitz. Js? if you are refactoring your your component, maybe you you swap out alright. I did the class for a function component. Now I can take a look at these maybe non optimal hooks like an unmount hook or something that you have. I can take a look at that and then think about how this could be written with the use effect properly Not Jason, but Jason.

I don't know. We'll we'll see about these things. They're brand new. And, largely, they're saying, would you build anything in this right now? I'm not gonna build anything major in either of these right now because they're I don't even think either of these are done yet. So just keep your eye on them and and see. Maybe that could be a cool opportunity Yes. It's a bad practice.

we as developers anonymous functions,

So that seems pretty pretty interesting as well. Is it going to replace Node? Certainly Scott anytime soon, whether that's

and I can't, like, I can't rip anything.

I'm Dylan.

it's gnarly. So,

Okay.

and and veins and stuff like that, I just get, like, oh, The arrow function is off the shelf for something like that. Yeah. Totally.

You Node, everybody, just,

Not too happy about it. You're not going to the hospital for that, though, are you? No.

I don't wanna get into any of the gruesome details, but it's fine.

blood the variable that it was stored in

what exactly happened to this. So yeah. No. I get I'm, like, almost passing out as you're telling me that. I get so queasy. I get what's called I thought this was a common thing, but I call it the melts, where if you start talking about VC or anything. I I don't think there is at least. It just seems to be a bunch of really smart people

tight. I'm just, like, tense, man. I'm just yeah. It it's just it's just nonstop, but, you know, it's all good. I, sliced off the tip of my finger the other day, so that was pretty sweet. With what? providing them with a good experience and being a good developer. Alright. Next question is for Dan, the context man.

from Creso.

next question say that, like, TypeScript is the solution to, like, every single problem. Oh, yeah. And and that can get really annoying really quickly. So not to say that you specifically don't like TypeScript, and you're moving it to a function based component. Now I know the React team says don't do this, but I have components that would be so much more elegant in a hooks based setup, and I have hooks to help me. So maybe I think, okay. Well, this would be better with my own custom hooks. They'd be better with my setup. They'd be better as a function component. Let's go ahead and rewrite this thing.

this soapbox full of soap on Etsy right Node, but for some side income. And then if I do that, I'm gonna need to track it on FreshBooks.

Yes.

FreshBooks

JS, the small business accounting software that makes your billing painless. So if you are running an Etsy shop selling soap

or if you are a web developer trying to keep track of your expenses

So

/ syntax and use syntax in the how did you hear about us section that is gonna give you a 30 day unrestricted free trial. Thanks so much to FreshBooks for sponsoring.

I've never passed out before. It's a weird thing. You get, like, a cold Scott, and, yeah, easy react. You get that prefetching. You get that image transition. You get some

I had a, like, a sister removed from my arm at some point a couple years ago, and they were like, do you wanna watch? Because it's obviously here. You can watch. And they're like, obviously, you don't wanna do this if you're prone to passing out. And I was like, I've never I mean, I passed out once from something else, but, like, I don't I know I never passed that story on the podcast before. Right? I've never I've never passed out. I just need to find to watch this, and then then I'm watching them do it, and I passed Scott, and they're like, oh, you should've you should've not watched. Like, why did you say you wanted? They were actually mad at me for choosing to watch.

it stinks.