Potluck - Subscriptions × ES Modules in Node × Chicken Thigh × Being a Good Dad × Refactoring × More!

make this process more efficient or maybe we can bring in more customers

skills to Using the old require syntax, I use the Npm package module alias, but I cannot seem to find a solution for Node v 14 imports.

Next question here is from Rami. He says, in Wes

understanding I cannot imagine. We've and reading That was actually an entry of 5 to 6. Wasn't that the original name of Babble? And that's just the type of person I am, but I'm also gonna make sure that we have tests in place so that things don't break. I'm going to

not LFS.

about Datto CMS, Netlify CMS, Forestry.

a place that you could look at if that's where you want to go, maybe even more responsibility, more ownership. But, again, like Wes mentioned, technology is gonna be your superpower here. Even if it's something simple like you're probably not going to make a ton more money as a developer So this sick pick is kinda interesting.

maybe we can that gives it a base of 10.

the Internet requirements and maybe you can save $100 a month on Internet services, you know, just like little things like that, you have an expertise in this that other people just aren't going to have by the nature of your background and training, and maybe you can find some

you know, make more money or move up was to to get more ownership in the the company. So I think that's really definitely you know, companies value that kind of thing, and they'd most likely be not only willing to renegotiate a new job title, new kind of thing, but

website episode, he mentioned using a Gatsby

without, podcasts just for fun to to hear what kind of other, tech podcasts are out there, you know, just to to give a listen, and this person's like, I'll have it in the show notes. They didn't. So it wasn't in the show notes, I didn't yeah. Yeah. That's funny.

I don't know, without without moving into a different location.

Any ideas on how to move up without switching companies? I know my boss would be receptive if I came to him with a pitch,

parallels for images, you know, widgets and websites

So it sounds like your your boss is pretty receptive to this type of thing. So if that was me, I would at a certain point, I think you sort of reach the top with being a developer.

and I mean writing code full time, not writing code at all. Like, if you wanna write code full time via a full time dev and make more money,

but my company doesn't have anything like a lead developer position.

some JavaScript and Io. Use the coupon code tasty treat, all lowercase, all Node word, and you'll get 2 months for free.

either of those could be considered inline code. I They punch it, and they punch the the bird right in the in the spine.

in the CSS that

that led some JavaScript could be executed there? But, again, the only thing I saw in relation to that was about, like, an old like, Opera version one, you Node. I mean, it was it was in the it was back when,

and drumsticks and all of that is separated from the breasts and the wings. And then you can You're both you're both more tired. Yes. When you're both up all night and you're miserable and the kids aren't sleeping and everything is awful,

ceramic for some time Node, and I've taken on

cook the breast and all of that at a different rate than,

I think I've had it described at least once before, but it is not something that sticks in my brain. Yeah. So if you, like, buy, like, an entire

I feel like this is one of those Yeah. 6 65.

what the the idea is behind it because it might not apply to you rather than you just, like, sort of blocking ESLint, loader

you can pull them when they're ready, forward slash Scott dot forward slash

I don't necessarily but it's following that same kind of idea. And so this whole course is again about writing minimalist CSS to accomplish some very cool things,

for here for beginners? I ordered Yeah.

And then it lays flat when you cook it. And it it cooks both faster as well as as better. And then I just learned, like, a month ago that you can Exactly. And if there's, like, nobody Oh, yeah. Yeah. Getting a little sick of the, lockdown.

you know, IE day, so I don't really know if this is a current problem.

Next question we have here is from Yarn Haslam. What advice would both of you have for being a first time father,

So there's 2 two sides of this. Sometimes,

and view source.

know too much about this. I I was doing some reading, and it's like some browsers could allow And for a long time, I was feeling kind of, you know, uncomfortable as a father because when they're first born, they want mama for everything. And if you hold the baby, the baby cries and, you know, you can run through the checklist of all the things that could be wrong, and the baby could still cry at the end of the day just because you aren't mom. And so

a chicken is? the ability which is the best way to jam Stack. We'll talk about both of them partway through the episode.

attacks. But for those of you at home, it's cross site scripting you know, what needs to fall into place, the systems I have in place for making myself productive. And Yeah. Oh, man. Really, like, having a an off day in those regards, it really hurts a lot more. It hurts a lot more now. Yeah.

cut it horizontally. So, like, if vertically is where the the backbone is, you can also cut it horizontally

you know, there was a time when I hit a century, and it was all set up, and I just, oh, I saw some issues coming in there and, just say, you know, if I close Sentry, I I just don't see the issues. Right? But no. No. I I I use Sentry to my fullest capabilities nowadays. Like, I we talked briefly about this when we were first starting, but really needing to make the most of your time. And Sentry allows me to do that by, finding an issue. Right? How many users is this affecting? How important is this issue? Is this a one off kind of thing? Okay.

Yeah. So a Kamado grill is just a resize and do all of that all in parallel. So it runs them all at the same time, and that made it much faster. So the question was, why not Gil Git LFS? So Git LFS is, large file system. It's an add on ticket. It'll allow you to put lots of large images or videos or things like that in your GitHub repo

personally have not thought too much about cross site scripting here. I've written CSS a long time, and I just kind of let the tools handle it for me. Right now, styled components sort of creates generates classes for me, but we do have that that CSS, use them interchangeably Like, I don't mean, like, physically moving, moving into a a different, like, physical skill set where you're using your but Meteor is all PubSub basically out of the box. It doesn't have to be, but it it makes it super easy.

If it's a problem, if it's something that we have to fix just based on seeing it, I can quickly and easily create a GitHub issue. I can tag Eric, who's working on LevelUp tutorials, and he can take a look, or I can tag myself, and I can get there and, and and fix the problem. So for me, Sentry is the quintessential My name is Scott.

Inlining CSS to improve page speed. Absolutely. Like, kind of a hard thing to do. And that's why we love Gatsby so much because they they do that for you.

My tips are chicken thighs. That's like

it's kind of like an oven and whatnot. I I love mine. So I have 2 big green eggs. Kamado Joe is Have you used any of the ES 6 generators in the yield keyword? And it turns out Absolutely.

from

specifically about this? Because I've seen that it was possible, but the article that I was reading was, like, very old, and it was talking about opera. So I I don't know anything about

because, to be executed inside of a URL, inside of an inline CSS.

chicken, my favorite way to cook it is you cut the backbone out. And so on either side of the the backbone, you cut it out and you have TypeScript. You throw that in a pot. You make soup out of it later.

either script tag and then JavaScript

it's not going to open you up for cross site scripting attacks because just just about thousands and thousands of websites more than that would be exposed to that. Because for a long time, people just man, people used inline styles for all sorts of stuff just because of maybe ignorance in the past. But nowadays, inline styles are seen as something that can be added on where needed in a way that the browser can utilize those inline styles.

like, why would inline code maybe a GraphQL API comes already with it. There's a lot to gain in terms of speed

the critical server side rendered CSS coming in from the server.

Chef's kiss.

What do you think of this trade off?

My other tips are, I just learned this Node, like, a month ago, and it blew my mind. So do you know what spatchcocking to add

Lighthouse recommends inlining critical CSS to improve page speed.

But absolutely, you should you should be doing that if if your setup allows you to do it. Yeah. Totally.

the lower half, like the dark and the white meat, because they cook differently. So you can pull grill that is shaped like an pnpm, and there's all kinds of benefits, the heat retention. And, change diffs that and that would both make your your Git repo huge, but also it's it's unnecessary and it gets messy. So,

is to use it who probably opening your own agency or,

a money one of those. That would be a good one. I got lots. I won't bore everybody here.

a chicken thigh, and it just tastes so good. Chicken breast is so overrated. Dude. Chicken thigh is the the best. We moved to recently to, like, just about all chicken thigh instead of chicken breast for, like, everything. Like and let me tell you. Every meal that we make is better. Like, I I make bibimbap with, chicken. It's better. I make, people refer to inline CSS as CSS that's actually on the elements themselves and other times So I Yeah. I've seen that before.

a command

so that the thighs

tool for things like this that I like. It keeps everything of Node specific But, no, I never heard of this horizontal splitting

just simply having inline CSS on your website

You'll see that they use that. Pretty much every website will have a script tag on it. And there's nothing wrong with using I've got a yeah. We'll do a a entire cooking show at one point with with little tips that we have.

So we'll, we'll move on to the next one, but, yeah, thanks for sending that one in. Yeah. Well, moving on from cooking tips to,

push back and ask why. It's probably a very valid rule. You definitely need to ask, like, why is that an actual thing and understand

I I can't imagine it is just because of how many things use inline CSS. I've I've never yeah. I I I can't imagine it's an issue.

No. I I don't think that JS an issue either. Like, Node. There's nothing wrong with using

And how can I best prepare? My wife is pregnant, and we are both very excited. Congratulations.

Alright. Next question here So I have, like, an h four custom or CSS variable. Sorry. I think they're actually, like, legit called CSS variables now and not custom properties anymore, if those and if any of those words sounded familiar to you, you might you know, that give yourself a pat on the back. Some of this stuff is really cool. I don't use Roam myself. I use something called Obsidian.

attacks.

classification in one Scott, I e every single error and exception that you have keeps them all in one spot and allows you a really awesome interface for finding, fixing,

And then you flip it over and then crack the breastbone.

if this is an actual issue.

So I would not describe it any of the work as being, like, just inherently This is another question for Wes. It's any big green egg tips

this stuff? Right? Is is that I've got these skills. Right. Am I just gonna be updating

If not, what entrepreneurial and I won't do more than 1 red dependency at a time. If it's a red dependency, bubble.github.ioforward/foam. GitHub

building desktop apps or anything like that. And you need to find out what that thing is and dive deep into that and start writing blog posts and making YouTube videos.

are open with JavaScript and hooking up React with the back end node, Laravel,

It's basically saying in the correct me if if I'm wrong here, but it's basically saying, like, what are their what are the interesting career possibilities with don't Node. I don't I mean, obviously, Research built on Visual Studio Code and GitHub.

video for web. We have torrent for web.

I built a lot of I build a lot of CRUD apps in my day to day. And, there's always new and interesting stuff that that comes up in building UIs around them and then the data validation and all like, I heard it once,

diving deep into them, and they're they're sort of known for it. I don't think anyone's just gonna hire you off the street and Sanity, like, yeah. We need to start, like, 3 d modeling this DNA samples.

corner of the Internet, like Scott was just saying, whether that's animation or video or,

And because, like, the jobs that are

where you could do all sorts of cool stuff.

We have a ton of very difficult problems potluck.

Maybe you just like building animations and interfaces,

there's going to be job opportunities out there. Somebody's gonna need those crazy video manipulation skills you can do. Somebody's gonna need those crazy animation skills. And if you're showing it off and you're doing the work, then people are gonna come to you first. Right? There's a lot of opportunities out there. If you can think about it, just think about how many different things. Right? So if you wanna work on some more challenging problems or some more interesting problems, we have what? We have, Yeah. For me okay. So for me with font sizes, I think everything

and getting around really complex

But if you're on the the server side of things,

I think, like, you probably can get some really cool jobs, but you need to to start showing that you have those skills first. Yeah. I think that's the I think such a key thing is that Yeah. Meaning that I just said 10 p x.

the list isn't exhaustive, but you get my point. Right? Note, I'm not interested in selling courses or creating frameworks. There okay. This

for corporate culture?

web graphics. We have three d on the web. We have

interaction

Google Maps Docs?

or maybe you like creating portraits with CSS.

problems and understanding how people are using things in a little bit more way than that's instead of writing just, like, database updates or or that sort of stuff.

that. But if that's the case, what you need to do is you need to like find

Do you think you could do that? I know that you're really good at, like, mapping state to props.

in doing different, more exciting things, and I thought that was genius. I had never done that myself. Yeah. But that's just, like, another way to have it dialed in. Yeah. That is, very cool. I've seen Gordon Ramsay do that on top or Node on Top Chef, on Master Chef before where they hit the hammer.

and here's what to do to to fix it. But if honestly, if it seems like too much work, roll that sucker back and just live with the versions you have. There's there's nothing wrong with or if there's no security issues,

pat yourself on the back for fixing some sort of an update there. So, yeah, I I I update very frequently. In fact, I, I know this is about legacy projects, but sometimes people ask me, you know, about keeping things up to date. And if there's, like, a non breaking change in a package, I'm updating all the time. I mean, we have our Wes in place for a reason, and, I don't wanna get too far behind me. You get too far behind, everything gets a little bit more difficult. So I'm running my update stuff at least once a week, which sounds crazy. But, man, every single time I run it, there's a a ton of new updates. That's for sure. And I'm addicted to updates. It's like a dopamine hit for me even though I'm not getting anything.

or this project is, like, not going to,

in the next half an hour, an hour? And in most cases

If it's just a point release, entirely.

the security security issue will arise, and then you can reference that with your code to say, am I using it in that way, or or do I have to really worry about that? And almost always, it's like, if you use this thing, but you also have a regex that interpolates a variable, there's a slim chance that somebody might do something like that. And you're like, oh, okay. Well, I'm not doing that at all.

so it really depends on

it's just a matter of, okay, I'm running into these awaiting inside of a function. So like the example that I had in my course was, I think it was like a barber shop, where at the start of the day

Next question we have here is from Mohammed Talab. In what instances do you prefer as simple as doing an add event listener on the window resize method. That would be a subscription to to that ESLint. Or it might be setting up like a WebSocket your entire build, like, a card the other day that says, I love when we go fishing. And it was like, oh, man. I'm so glad that we we I ditched work and went

Yeah. Make sure you commit back up all that stuff before running a yellow update just so it's easy to jump back in time and fix everything up in case it's not working. I do that too. I use Yarn upgrade interactive,

really read the read the change log. But, like, some good like, especially Mongoose does this JS they're they'll they'll they'll wait, like, 2 years. If they remove a method, they'll wait, like, 2 years and and just throw warnings in your console for 2 years but while you fix it, and then finally deprecate it, which is really cool of them. Right. Give you that time,

where I just, to that is that the output of Gatsby which uses Google Cloud style tags in CSS to, to put it on. So

Wes, it is a legacy project, but, level. But at the once once you get into any sort of large level or more complex anything, there's always gonna be pain points. It's it's just fascinating to me what your pain points are with the images and and how you solve that sort of stuff. It's it's really cool.

all of the npm audit issues? Now this is a question that

how

before. And they'll they'll alert you in the console. Like, React does that, says, hey. Don't use, this unsafe method or whatever.

So that's that's not really an issue for me, and it it'll be fine.

it doesn't have, like, a a it's not going to go away anytime soon. I'm gonna invest that time. I'm gonna rip it out. I'm gonna start, you know, refactoring things. I'm going to update dependencies, how do you decide when to retool and fix all the npm audit issues? For me, it's like, really, what is the lifespan of this project? refine sort of how I think about, Very thick. I'm gonna I'm gonna check that one out. Shameless plugs, I have a new course on CSS design system using CSS variables. It's very cool. The whole focus of the course is to accomplish as much as possible Matt. Matt asks, inline code is considered harmful because of XSS just CRUD. I think CRUD makes up a very small percentage of my development time. A lot of my development time is building interesting interfaces

So I'll just go blow it away, update the entire thing, and try Scott the app, or specific loading

A 1.1 at being a good father. Our baby is due in January. Both of you are fathers multiple times. I would love your thoughts. Oh. Yeah. That's that's a good question. I I maybe should have prepped some of this. Why don't you go ahead, and I'll think of some of my points.

So take a look into, like, what is the actual security issue. And usually what will happen is they will show you I the font size, to like, a 1.0 connection event warp you're listening for specific messages and then piping them into state. So it's one of those words where you see it and you go, is that actually a a thing, or is that just a a general programming idea? And that's it's it's the second of those. Right. Yeah. And there's oftentimes to the whole idea of you you might hear it referred to as pubsub, kinda cool. I I probably wouldn't use that just yet. I would probably just run your code through Babble when I did my ES6,

and then a full version bump. And that's when you Scott

I've some somewhat of a similar,

I run n c u, which is npm check updates, and then dash u would just update the package JSON.

I'll just I'll just update that because that's bug fixes.

My next thing I'll do is,

see What is red? Like a full version bump? Correct. The full version bump. A a 5 to a 6.

65. Oh, yeah. That makes more sense. So yeah. Node. I I'll do that YOLO update as Wes, but, again, not just doing it willy nilly. Sometimes Wes they do a major version update, absolutely nothing. There's no breaking changes. And, in time? Right? that that person

I'm not going to spend the time updating this thing just yet because in some cases, it's just not worth your time and the potential things breaking and and whatnot.

My main apps, I'll run it once a week. No problem, just because it's so much more manageable. You can usually read the change log of the new thing that updated.

Those things are definitely helpful. So does the Npm Vercel, whatever the n NPU, is that what it is? Or a n c u. N c u. Does n c u not color code? Because one of the things I love is yeah. It does or it does not? It does color code. Oh, okay. Yeah. Yeah. Because that's what I really like about the Yarn upgrade interactive is that, like, red for major version, yellow for minor version, green for patch. I mean, really easy to see at a glance what's good and what's not. Yeah. That that's key.

and I'm going to do it 1 at a time until it's all done.

Me, personally,

survive for too long, then maybe that that changes the discussion a little bit. So, Are present web developers merely crud bastards

to 1.0.2,

and see if they're actually

the project at hand and what the life cycle of this project is going to be and what these audit issues actually are.

Visually confirm it yourself, and then, Node

I'll give it a try sometimes and,

stacks And then, also, I think, like, into your node, you could write a loader that sits in between,

website already, so whether that's a Gatsby website or Next. Js or Nuxt, then you've already hooked it up with whatever CMS you're using,

my header is not going to,

make some decision on this? So we've talked about this a lot in on the podcast, but we can we can do it again. So inside of that. Go to facebook.com and I just believe it until until I'm dead. Like, I have no idea. I might be wrong here, but I have no idea, But I even run like Dependabot on GitHub always changes that.

I

font size is

the logo entirely in CSS.

and go to one of my blog posts, be a potential XSS attack? I saw it. I don't understand. JS that anytime that there JS a URL at the, you know, at the thing? Deli?

just because of my practices in CSS.

said make this, like, 2 m by 2 m. And then

real time previews,

I just about, where anytime

and then I also also set all of those font sizes Or, like, what about, like it'd be, like, a really good bar? Like, a you go to go to the pub and get

.com. It's the best way to JAMstack. Thanks so much to Stackbit for sponsoring.

And if I wanna scale up or down the logo accordingly,

this is the one No. No. I think that was a good transition. Yeah? Speaking of fonts, which have font stacks, another type of stack that we should,

different CMSs like Sanity, Contentful,

sizing things, I don't think that that is actually an issue. I'd probably whenever you hear, like, a rule like that, Yeah. For those who didn't listen to that one, the problem was that I have, I don't know, maybe 4 or 5 400 images on my website, and each of those images needs to be resized and compressed and put into several different sizes, making it a couple 1,000 images. And that was initially very slow. So I use this thing called Gatsby Parallel Runner, that Node is implementing generators is that

think about is one of our sponsors, which is Stackbit.

font stacks,

what I usually do is I'll set a base font size on my HTML element, usually just a 10 p x. And then I set most of my other

there's like a little

regardless of how big the font size is, it it's always scaled up proportionally.

as that's my CSS variable just in case I need to reset an h three to be the size of an h 2 or somewhere in in the code. Right? But, again, I'm only ever updating the font size on the thing itself and not the container to avoid any sort of weird root issues. But, in your use case, that is, where you have, like, the squares being relative to the parent. That is such a good use case. But, unfortunately, that that type of thing, it, like, doesn't pop up that much. So me, personally, I use EMS, but for no good reason, really.

Jamstack to allow you to do things like real time editing,

I basically set up my entire typography system as font sizes on elements,

And everything, the border size, the padding,

I I functionally use them the same as as rems and most likely as custom properties.

In practice, I found it a bit hard to gauge, what to expect ems, because of nesting issues. So So I've been leaning towards using REM, though I thought custom loaders similar to like a webpack plug in that or a babel plug in that would handle specific files like, can I can I work through any issues that are popping up

In practice,

So I I don't define any font sizes on containers.

So Stackbit offers developer tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack website.

on the back end. They they support all kinds of,

to use rem versus m versus pixels for size? I usually like to think of it as so. If I'm okay with an element's font size being based on the parent, then I'll use m. If not, I'll use a rem. I almost never use pixels anymore except for on the HTML element. I'm assuming that's to set the base font size. But even then, I usually use a percentage. If you set the HTML element this is me jumping in. If you set HTML into what? To 62.5%,

Those are M's because no one's, like, sort of, like, own that.

16 pixels when I really mean the nav is. You know? If I if I have a nav item, that styling is going to be attached to essentially that element itself, whether that is the list item or whatever. And then that way, you don't have to worry about those weird issues that you encounter when you're 1st learning m's or rims Wes this thing is not the correct size that you're expecting ESLint to all because of the root is not what you're expecting it to be, whatever it's relative to.

the amount of tilt on each of the things, all of those things were based on how big it was.

things that made me a better CSS developer when I was learning CSS.

understanding the REMs can be less modular. Can you, Mai, sometimes I'll just try what I call a YOLO update,

and that's made working with Em's way easier. Now granted, if you're not declaring a font size on the container and they're just relative to the body, you might as well use RAM anyways. So there's not really too much of a a benefit there, but maybe it leaves the opportunity open. And I think the the key distinction is that you'd know when and why. But, like, you know what I'm not doing JS I'm not saying, you know, my

subs that you can get at Publix.

like, Meteor, my platform that I work on, not one that I've created, obviously,

a a sub at the bar too. Get a sub. Yeah. Like, a nice pub sub. Yeah. That's true. Like, a real oh, man. Ricky's Pub has the best Usually, what the case is, there's like 1 or 2 or 3 So if you've got a Jamstack Hey. Hey, Billy.

1st question we got here is from doing that really, really niche and interesting things, the people that get those jobs are usually the people that are happy in your job. You just wanna move up a little bit more and and thus make more money without having to switch jobs, which I think is really cool.

and setting up event listeners, Learned very on early on. And my sister actually told us this is nobody wins the Who's More Tired game.

for everything. Right? You can subscribe to specific types of data, and it can work really well. Other times, it's just going to get in the way. You know what I mean?

in React, I wanna take on more responsibility and salary, Please explain to me why this or this isn't a bad idea or more generally share your wisdom on when a CMS is actually necessary. Peace.

subscriptions aren't I don't Node, maybe a little bit more difficult because that's not my specialty. But there's there's a lot of really interesting stuff going on that's not just CRUD in my mind.

we know that sometimes we have to go off and

live data in over a WebSocket.

that is what is referred to as a side effect in

So I've been working in subscriptions with ramen. It's better. It's just so much better. Every everything. It's so good.

subs. Is that a real thing? I couldn't tell if you made up Ricky's Pub. Oh, no. No. Ricky's is not a real thing. Oh, that sounds like a pop up to me. Yeah. I'm sure.

Yeah. I just googled Pub Sub on Google Images just to get at one of those visuals as to to what it is as we were talking about it, and it suggests Publix. So it's like Publix is like the grocery store in, like, in Florida. I don't think we have those. So I clicked on it, and there's, like, these amazing So you you still use both of those things, but you JS the developer can take,

that publish happens of whatever the the data. And since you're subscribed to it, the new data will come in. What's funny is that the entirety of,

What are subscriptions

information gets updated,

So because that is going outside of the React component True. And it's it's usually cheaper too, and it's so much better. I don't understand. Like What or is it just because it's less meat? Is that why people it's less desirable or not? As like, people think, like, oh, it has fat in it. So it's, like, not as good for you, but it's it's super good for you. It's it's a good food. It is good food. So chicken thighs, you can't goof it up. My favorite one is a little bit of sesame oil, a little bit of fish sauce, a little bit of Scott, toss it in a bowl, grill that sucker over charcoal.

and

there's the idea of publishing and subscribing to information whether or not it is being passed over a WebSocket, whatever, that would would do that, a customer machine or something like that. Yeah. You know, I mean, I think you hit some really good points here, especially because I worked at a small agency before, and at some point, the only way to,

it made some things very easy when you everything's a TypeScript. It made other things very difficult. So sometimes I think that, obviously, writing CSS inside of a style tag in an HTML document. So, I don't know. I just I I for me, I'm I'm gonna run on instincts here. I have no real training here. I don't know what I'm doing. Just about never know what I'm doing. And for a long time, I was actually pretty uncomfortable as a as a father if I, you know, can say that correctly.

in React or programming in general? The React docs mentioned that setting up a TypeScript, in an example, is a side effect. But what exactly is a TypeScript, and when do you set one up? So

Mark Haslam.

this idea here is not a React specific thing, and it's it's more of just a programming thing. So

So I want that kind of pub sub. Yeah.

listen for events And the second Node is Stackbit, You know? by by building something

a month, being able to just do it all yourself is key. But why would you want to use a CMS over just building it all yourself?

ex external package or a service

sort of like the Roan research ideas,

CDN tier.

Obsidian is an application for taking connected notes where you can easily link between things, and I found it to be a better fit for my notes than something like,

quite honestly, And you can take your iterator Very good example. Yeah. It was it was I was proud of it. But, quite honestly, I have not found a good use case for for using genres in the wild. And I think that async await does meet most of my use cases. Node to say that it's not a good part of JavaScript. It's just not my I have not run it into into it myself. So just tweet us if you have a good use case for generators. I'd love to see that.

and I was just like, oh my god. It was like the longest URL. It was, like, not even related to anything. I was just like, come on. I'm not gonna type this

So I've been using Obsidian to do this because it writes to markdown files.

spending doing other things, you know, adding more functionality, be a 100% careful all the time about and, it's really cool. It's very, very cool. So, check it out here. It's still early days, so a lot of the install stuff is is a little rough, I found.

the the series importer. All those things are

Visual Studio Code version of this exact same thing graph of connected information. It's fantastic.

free So just like whether that's people in your family or just people on the street or people that you run into. And and and building the things that need to be built and and taking care of of all of the code to how can we push this business a little bit forward. And I'm going to come to the table with technology as my special weapon. So I don't Node what that looks like in your specific company, but taking on some sort of special project where

I don't know why there's different numbers, like a a 1.0.1

tend to to shine because that, like, example I just gave, like, that might take a developer 2 weeks to build that thing when it's just like a small percentage of of the little UI that you get for free in a CMS plus. Things like an API, Let's grab 1 more question here, and we will, stuff to be rems, and that's going to be based off of 10. And that way, if you ever need to Enjoy.

data validation, running into these errors. Let me just Google those errors. Oh, here's a GitHub issue where somebody else hit that error when upgrading, I think

not having to reinvent the wheel when you reach for a CMS.

for order tracking, submitting supplementary and then run any tests that have it and see, Yeah. I agree.

I don't know. It it it's a tough because at the time when I made level of tutorials, there probably wasn't any good option to do all this stuff. Now there's, like, things like ReactionCommerce

That is not a word that I'm gonna be able to say correctly without hearing somebody else say it, but it's a whole building a second brain thing where you can do this sort of, really neat little linking syntax and have all of your documents be linked in this giant About cross site scripting attacks, Wes, do you know anything

inspired by Roam

man, there's a method that starts with the z. It's a long word. I'm sorry. I'm blanking on this method method's name. Oh, the this is a weird question.

So just little things like that, but it's it's still early days. It's very cool. If you're looking for a free note taking, and just refer to them for everything because that's that is what I do.

Because to a 1.1 will just ditch work and go hang out with my kids. As hard as that is for me, because I would just love to sit on my ass for a couple more hours and hack away on things, and there's always more projects.

basic CMS

recording more, just all sorts of things. And now granted, I really like building admin tools. It's a lot of fun That, like, basic CMS sort of stuff is JS that okay? Okay. Next question here is from Jack. The question is, using the latest Node ESM imports, is it possible to use aliases?

I think this is a really interesting question, because, like, that's the answer. It's like, why would I use a

custom tools are really sweet, but they are definitely

which is basically a

from talking about Jamstack and and things like that, headless Wes. This is hello, chaps.

It's all connected. So instead of having to have some third party app that is, like, essentially mimicking Visual Studio Code, Well, you just got it all in Visual Studio Code,

design variables. Some people call these design tokens, and they're not necessarily design tokens,

like, first of all, good on you for doing that because I think in a world of slap all these services together and all of a sudden your website costs $400

imagine how many hours I spent building that stuff that I could have been

you can sort of follow along yourself and learn a lot from it. I think it is I've heard of foam.

called how to use a multimeter for beginners. So I've had a multimeter forever, and I know how to use AC and DC, Yes. Next question we have here from Codefinity.

because I, you know, coded my own back end entirely for Vercel up tutorials, and we had to do just about every single basic

everybody should have. So check out this. I'll link it up in the show notes, how to use a multimeter.

Now, Maybe it's just caused by somebody's extension.

kinda tough. That's not the best URL.

a little bit better because there's more manpower working on it. So there's definitely trade offs to think about there. And,

what all these other things on this multimeter are for.

open source application that uses, Wes, do you wanna talk a little bit about your decision here? what what is the actual cost of making these decisions

Alright. That's it. Thank you so much for tuning in, and we will catch you on Wes nope. Monday.

Yeah. I think I experienced this firsthand myself just about all the time, to work on my work. What am I doing? I need to go on my work. And he's, like, saying the same stuff that you're you're saying or doing or whatever. Yeah. He's just like mimicking you in those sort of ways, and it'll speak you think, oh, man. I gotta

you can't. Like, I didn't build this like amazing drag and drop UI I'm going to sick pick a YouTube video

Thanks so much for the show. I learned an awful lot listening through. I've been dabbling in development for holding the original images and the uncompressed versions of that.

Notion. I I use Notion for databases technique. Wes, we Node, like, a cooking corner with Wes. That'd be

creating a theming system. So not just a a Yarn Node, a light mode, but, you Node wave ray 64 theme if you want it. So check it out, level up tutorials.comforward/pro.

Actually, this is this is a perfect question hitting all the different edge cases of being able to do something. Like, your client's gonna come in and say, alright. I have these 2 lists of content. How do I reorder them? And then also, I have 1 in the wrong list. I wanna drag it out of that list into the other list. How do I how do I do that? And you go like, oh, well,

do you need to do yourself

is fun for me to work on.

pages, will include a shop with a number of small items, a customer dashboard

there's a lot of finesse all you have to do is change the font size of the logo root, and then everything else will will scale exactly the same amount up and down, which is cool. And you could you could do that with Calc Calc as Wes, But it's pretty easy to do with Ems. And same with my

Cool. Well, awesome.

for a link or for this thing I really wanted to to check up on. And then they were like, or you can just visit blank.blankforward/blankforward/blankblankblank, You know? So, yeah, when you when you have 1 off 1 or a couple off ones, it really, really hurts. So, yeah, ready to, ready to get into this, cheaper or maybe some more interesting or more productive solutions for the company. And, Of course,

including

sometimes, that is just like hedging. Like, how much you can get good at anything and probably get a job. I mean, if yeah. On the web right now, unless it's like, oh, I've mastered Netscape. You Node, if if you get really good at anything in 2020 competent and comfortable as a father because, blah blah

Foam,

But then there's also a lot of control that you can have when you you do go ahead and build the whole thing yourself.

these these cool people created either way. Because I've been calling them custom properties to try to stay, like, legit, and then I think they're in can I use as CSS variables now? Either way, I I set up, like, an you know, Node have an h two,

But for some reason, it's like they felt the need to define a theme and define a font and stuff like that. It's like, I don't want you to change my font or theme. I want I want you to use my theme and font.

and that the alias module uses. If it if it uses that, then replace that with the relative path, which sometimes is

And it's both a strength and a weakness because, at the same time, some of the the things I'm most proud of in the LevelUp Tutorials code Bos warp some of the admin Node, as in my, like, tutorial builder, the course builder, the, sharing solution

on AC and DC. I don't know what resistance is. So I sat down. I was like, I learned it all. And it's just like a 10 minute video, and is usually a React component because it doesn't just take in data and return some some JSX and and whatnot. It actually goes outside of it and try like, one thing I'm thinking a lot about now is just, like, how do you another really popular, really nice one. And then there's lots of, like, hardware store versions that are a little bit cheaper, but still pretty good. I love using mine. I have 3 of them. That's awesome.

feature that you can imagine in my platform. Right? Anytime I need it, I gotta build it. Drag and drop to reorder, whatever, I gotta build it.

Beautiful. I'm a shamelessly plug all of my courses, Wes Bos comforward/ courses. Use coupon code syntax for $10 off. Learn you a thing or two, JavaScript, CSS, you name it.

of foam, Wes? I crispy chicken

a modern skill that

just sitting at my desk with a couple electronics parts, custom Node,

and making things available through sort of configuration,

There was, like, some interesting things where it's like, oh, to to get started, just clone this GitHub template, and then you clone the template. And the problem is is the template has, like, a bunch of, like, like, custom Versus Node extensions and configuration.

in correctly. Okay. So, Foam. So Foam is really interesting. Foam is a personal management

Cool.

I've listened and relistened to your CMS roundup, which is great. But having worked through Wes' Node course, I'm kind of thinking,

And then to drop them in front of the kids way more

Oh my gosh. JS that okay? on the web,

a big heavy or or Ghost or or some of these other platforms that could have done all this stuff for me in ways that are probably

Foam. What's foam? Foam scale up the entire website or down the entire website, then you can simply just set the change the base font size off of that. So at the end of the day, I'm still calculating in my head how many pixels things should be because at the end of the day, our screens still are in in pixels. Right? For m's, I very rarely use m's, but I their use case is for exactly what you said.

is really nice with this whole, if this is a project that's going to be, maybe a little bit more, like, a big picture, bigger picture stuff with this business. How is, like you said, how is this business making money? How can you assist in that? And, what does that look like for you? To me, if you are looking to remain writing code Have you have you heard

a project for an express site, which aside from a few static, 20,000

with writing as little actual CSS as possible you know, working for a a bigger employer is your ticket to making more money. But in terms of getting more responsibility outside of of that space, maybe you can use some of your code skills to,

This is totally unrelated. I was listening to,

it was a a little while before Font sizes, Am I going to be the 1 maintaining and working on it forever? Because if if I am, then I'm going to fix it. If it's somebody else, I would probably recommend,

So Yeah. Totally right.

So,

I really need to go to my office developer just building, really cool that I've made, and I really spent the time to make them cool. But

So for me, it wasn't until Lennon started being able to play more, then you're gonna wanna check out Foam. It's very cool. I'm very into it. Beauty.

at least, that that could be the case. Right?

But, like, my kids are starting to, like, take that on and, like, just talk to cashiers and stuff like that. And I think that's I think that's probably the best

No. I I I say something, and then Courtney says,

My my points are are are get a a partner who is a child psychologist comparatively. It's like I I I'm pretty good at setting up that filter in front of the kids. And, there JS Courtney's are a little bit more emotive where it's like, I cannot stop this from coming out.

Next question is from Talak Mehdi.

take a lot of time off in both in the summer as well as, like, pretty easily where you can cross data paths and relate content and things like that. I just gave you a text box where you can type it in. And that's where CMSs really

You can you can tell.

again, it feels like for a little while, like, no matter what you're doing isn't working.

Yeah. Yes.

that is important. I think, like, not breaking changes as well. It might be, but they're usually just adding features and fixing bugs,

I'm starting to see that through my kids. They just talk to people at the stores all the time. And that's something I always do. I always whenever at the at the grocery store, I always ask, like, what's the most expensive bill you've ever seen? And then the people at the grocery store love hearing that. And, like, I'm super curious. Like like, what happened? Or, like, if some you know, sometimes you have the grocery store, and there's somebody checking out with, like, 40 pineapples in a cart. You're like, yellow square in the top right hand corner of all of my h one through h six elements.

and and not not like a little boy play, but, like, even just, like, very simple stuff where, like, Brooklyn's just getting to that age right now. Right? She's just over a year old, so we can do a little bit more involved games. She's shown me things. She's climbing the stairs. We're playing outside. We're we're we're doing those kind of things. She responds better to to things like tickle

what's going on there? What are you doing with that cart shirt? All those pineapples? pick it up from from there.

Like, my dependencies in there that are being triggered over and over again.

early on in those early days. Oh, that that's good advice. I just jotted down a few things here When you have when you wanna size something based on its parent font size, then you use an m. So in my latest course, we did if you have that sort of base set of skills, then those are the type of jobs you're going to find.

exactly what I'm modeling because that that modeling aspect is so key.

I, I, honestly, I I differ a lot. And maybe it's just because, like, I I think I had a good good model. Like, my dad Wes, you know, he Wes, versus,

I was feeling

Oh, absolutely. One of our kids dropped a swear word the other day, and I was like, what am I doing? all the kinds of tools. It's really cool. It gives you that extra like, I think, like, if you're building a website, a lot of the marketers are really going to appreciate this this feature to add it on to your JAMstack website because it fixes a lot of the little downsides that we have with the JAMstack. So check it out at stackbit

Oh, man. That's so funny. Alright. I just added that to the the Pollock title as fathership.

or or it's just those little things like that that make it a little bit easier for me to, Little just

to really feel comfortable as a father because you get to play more. Once it got into play territory like, I can play all day. I can do that. That that's fun. So that that for me was a bit of a a learning experience, and I felt pretty useless for a little bit. Just make yourself available, and tracking and all sorts of stuff, but I don't use it for my notes because Obsidian

be a role model to your kids and how Yarn you treat other people? that, like, last 10% of building a UI, makes a connection with the database or makes a connection with something else on the website. So that is what they mean by a subscription.

my daughter gave me a, and check for continuity. But I was just sitting there the other day and be like, I don't know

oh, you need to reread that book, and we're we're referring to, like, the, how to talk so little kids will will listen to the book. She's like, you clearly don't remember the book.

I want to do the best I can

really great, and, does all those updating because I don't wanna update a bunch of stuff I'm not gonna fix, essentially.

you hear that kids soak up everything. But, man, kids soak up everything. Landon says the funniest stuff, but, like, you don't even you don't even, like, know that he's paying attention. Right? He's he's doing something else, and all of a sudden, he'll be like,

it's funny because in in everyday life, I'm dropping them way more than Courtney, but Courtney definitely has the skill

nobody's gonna win the I'm more tired game. So that's that's try to support your partner and and think about them as much as possible.

Take time for the kids. So, like,

you have an empty array.

With a legacy project that has all the build's dependencies,

and call Scott next on it and you get the next customer. But as people And if you want to steer clear of that, and there's certainly nothing wrong with that. Like, one of the best ways you can meet a good father is supporting your partner.

in my day to day work. So async await will, will

So using async await is probably sufficient. I like this question because

But they're Scott the exact same thing. Kind of a cool thing about

they can sort of be like long running. They don't just have to be It seems like they are a mechanism for async await under the hood. Thank you.

Same.

generators

customer. So that was, like, my one example.

Yeah. Mark's Deli. You know, you get the little ticket at the deli counter, and then they're, like, next number is 47. Right? And Node get your meat.

inside of that.

Cool. Next question is from Anthony.

compile down to generators if that works out with the browser support.

as people come in the shop, they get added to the end of that array. So you just keep you just keep calling next. Oh, it was it wasn't a barbershop. It was, the deli counter why would I spend time integrating a CMS when I can just build an ad post page for admin users? Save the post in MongoDB, upload the images to my server, and use Cloudflare's

And since then, I've not actually found a use case for them

in line anymore, then they stop changing the number. But if there's lots of people, then you just push next after after the next that, like, if you run a Pnpm install, You only have so much time, and you have a bad day. Like, the other day, I had like, something went wrong. And on my whole plans for the day went out the window, and I had to spend time fixing something. And it's just a bummer

Yarn, modules,

there yet. And when I was looking into if they're coming, they mentioned these things called Node, and I dug a little bit more into loaders.

so that if you wanted to require

forward/.forward/.forward/blah

so in And how do you set 1 up? It depends on on what it is. It might be

really awful compared to at some folder request a higher rate.

with a an alias. And, actually,

write a loader and then intercept all of those and say, if it starts with like a, what is it, the at Speaking of fonts, which have security issues for my application. So you you run it, and it says you have 300 Sanity issues.

and then use the Babel plug in for that. That that's probably what I'd recommend if you're using if you're using ES modules in general right now because they're they're not ready in Node just yet. Yeah. I think that sometimes a key thing is that if if something's feeling like

maybe the tooling isn't the same place or isn't there quite yet, I mean, you don't have to start using it,

Next question we have here is from Laura. I've been a full time developer for 10 years, and my company has a fairly flat hierarchy.

And, I mean, I see this with, like, Deno or Deno. Sorry. Deno. I'm so used to saying Deno where people will be like, I wanna use Deno, and then they they go to the Reddit, and they'll be like, what's the express of Deno? Of course, there's some things that you can't do that with. Eat that frog, take care of some of the big ones, and then refactor down that way. As long as you have those tests and you have the time, I would go for it. If you if you don't have the time and really keeping track of those bugs. So check it out at century.

TypeScript or TypeScript or Sass files, if you wanted to import them

Well, I mean, it's it's brand it's people are still working on stuff. You know? The the the landscape and everything is going to change. It's gonna grow. It's going to evolve. So, with anything new, I'm sure there'll be a solution here.

I wonder if you can write your own. And it it turns out you can write your own. And they have an example on the Node docs, I'll put a link in the show notes, for a transpiler if you go to Wes when I can just build that myself? Like, Wes course showed me how we can make an admin area. We can edit the thing. We can create a form. We can update the update it, and you're you're up and running. So,

Yeah. So I I've played with the ES modules in Node quite a bit because I'm I'm really excited for them to be added. There's a couple, like, things that aren't bunch of really neat stuff, so stay tuned for some tasty treats. Today, we are sponsored by 2 awesome companies. First1 is Sentry that does all of your error and

Jack, I I'm gonna say I absolutely agree with you. I really, really cannot stand relative imports in that sort of sense. In fact, I will go to great lengths to avoid that kind of thing just because, again, that that is so hard for me to parse to see that Scott dot forward, like, and to try to have some sort of understanding of what nested structure I'm actually in. So I'm right there with you. Wes, you actually have a a solution for this here that you found. I have not used this myself considering I just do everything through Babble. So

intercepts those requests and then returns the actual formatted

especially I mean, not even just the tooling, but in this case, the actual thing.

I'm betting, I don't know if this is true or not, but I'm betting what you can do is you can

it jumps in before the actual module is loaded, and you can write some custom logic in there. So I was just looking into that. I'm like, oh, yeah. I know they're they're working on loaders for Node.

and and parsed JavaScript. So in your case,

In a deeply nested file. I find that the import

requires in a certain way? Or or I I even think it's kinda like a service worker where it jumps,

being productive and what, I have heard the term.

man, I've been I've been doing a lot of work to text boxes for the rest of my life, or is there something a little bit more interesting? And, also, Deno, I'm not gonna create a course. So they're looking for job advice or job inform like, what are the types of jobs? But there seems you know, the cool thing about this this platform, the web specifically, is that the browser can do so many different things. So if you're really interested bug finding tips and and bug finding tips, I'm talking about our sponsor today, which is Sanity dot I o. And the sick tip I have for you with century.i0 Wes you can work in markdown apps. You get the graph view. You can link between things. It's all markdown.

doing as good as I could be doing. Just just get grinding out, working on my stuff as always, and,

yeah. It's difficult to make it all work. I know we, you know, we both have those experiences, but, Kamado. Is that it? Kamado. Yeah. Kamado style grill, and I'd appreciate any tasty tips you forgot. I I would too. We don't have a a green egg or anything, but we'll we'll get some barbecue tips. It's about time.

Hey. Too good. Well, I mean, you know, opportunities how do you decide when to retool and when to fix

yeah. I don't know. Doing alright, I guess. The it's scatterbrained nonetheless.

to waste that time. Especially just I mean, right now, there there's just, there are just so many things to do 247.

And, like, those change so quickly approach to to this type of thing. First thing I'll do is I'll look at the actual security issues that pop up then just just keep running the thing that you have. I have apps that run on, like, Node 8 right now. And, until my hosting platform will no longer run Node 8, until there's a major security issues with Node 8, then info, and the image centric journal blog section.

that's not what Git LFS is for. It's not for the output of the build. And I bet, like, if I ever got into a position where

there's so many it's so funny. You hit these new approaches, and they're always if you see that in the documentation, that's the perfect use case for this thing. Go ahead and do it. Run all your tests. Make sure everything's still working.

the images and videos on my website were too large for just a regular Git repo, that actually would be a good solution

Have a, small little aside.

That's really interesting about Gatsby. You know, it's it's funny because I I don't do a ton of static,

Wes 1 person installs a package and then somebody else updates a package, and then when you do the the merge, the Yarn lock always complains. Then we have to dump the yarn lock, And it's like, why you've what is this thing even doing for me if I'm dumping it all the time? You know? Yeah. It's it's it's because the lock file contains the version of of the package that you're using, not just the, like, 15 dependencies that you have for your your project, but it has the, like, never declare a font size on a container ever. I I I'm trying to think of a situation where I would do that, not worry about doing it all in felt 1 fell swoop, just doing a little bit at a time.

your entire build directory in Git, every single time you built the website, you'd have like a 1,000 reinventing the wheel,

And then yours is out of date and I too do that. Like, I either just take whatever was coming in from GitHub or just nuke the entire thing and and start again because it it is frustrating. Yeah. I almost always nuke the the unlock file whenever it gets a conflict, because I'm like, I don't wanna parse through this and try to figure it out. It's just a Yeah. Yeah. I wasn't sure if that was a pain point that was I was, you know, experiencing just me.

you're not technically changing anything about your codebase. But because those things have changed since you've done it, that that has come in. So I do run into those Scott as frequently because I don't have as many people working on my codebase.

is done into a build directory and your generally your build output is not included in your git Deno. Just your source files are along with instructions on how to build whatever Peace.

so easy at the small

I

like, big projects with images in static sites. You know? So it's definitely, seem to have them all the time, and I'm not quite sure if this is this is like a me problem. Am I updating things too much? I end up getting these, you know, React and otherwise for a long time, I think,

Alright. Next question here is from Nate Norberg.

to but we work full stack, so it feels like I'm already doing it all. So this is cool. It sounds like you're pretty happy in your chunk of your time. That's for sure. Alright. Great question. Thanks so much for asking that. Let's move into some sick picks.

that specific thing. Because if you included

GitHub, like, making it too big. Like you can put images in a in a in a Git Deno, and I actually have all the images from my website. But I don't keep all of the compressed and and resized versions in the Git repo because or get some data from a database or, in this case, is talking about a subscription, which is generally what's going to happen is you're going to add like, an event listener to something some sort of data being streamed in. Or most likely you're going to have like a database that is sending

dependencies that those dependencies have and those dependencies have and those and it tells you every single one all the way down.

Do you ever have git commit issues I mean, conflicts, not issues, but do you ever have conflicts with your package lock file? But at the end of the day,

that would make it way too big. So the question is why not that? And the reason

LFS, And in order to maybe make more money, you have to take on more responsibility. And if this was me, I would talk to the boss how does the business actually make money. And and then that goes from just being a dev

get we didn't have a sync await. And I taught,

How are you doing today, Scott?

tracking.

Talking about salaries,

ES modules in node, which is gonna be really cool.

to Syntax. This is a podcast with the tastiest web development treats out there. Today, we've got a potluck for you. Some Some really good Wes, some stuff that I'm really excited about in, Node

and Wes Bos. Welcome

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