Potluck × JS Modules × HTML Tags × Recession × Budgeting

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

Welcome to Syntax. This is the podcast with the tastiest potluck treats Out there. We've got a potluck episode for you today. We've got lots of really good questions about JavaScript and, modules and the recession, and Why is this specific JavaScript false? We are gonna tackle it. My name is West Boss, developer from Canada. With me, as always, is mister Scott Tolinski. How are you doing today, Scott?

Do good. Hey. I'm doing super good. I, I was telling you yesterday, I've really messed up my knee, man. I got a history rid of really clumsy injuries, like a significant history of really clumsy injuries, and I've just tacked down to it by, rid. Wearing some slippery socks and slipping down my basement stairs and hitting my knee on the shop vac, and I just was, like, Rolling around the ground like, oh, ah, ah, for, like, a good 5 minutes.

It's just like, oh, man. That's awful. I do so much bananas like physical activity, and I always hurt myself doing something like that. There was, like, a time When I stepped on the hose while I was carrying a ladder and the hose turned on and then I dropped my phone and cracked it, and the ladder fell on me, and then the hose was spraying me with water. It was like a Cartoon. Like, I feel like a cartoon character sometimes, so

I need I need, like, a protective bubble, and I need, little kids' grippy socks. That's what I need. Oh, man. That's ready. All right. Let's get into it. Fred asks, hey there, long time listener, 1st time potlucker. Thank you. We want to talk to you, the listener, that you've never submitted a potluck question.

Throw 1 in the bag. We love them.

So the question is, when should you use article and section in HTML? What is the difference between the 2? What are the Benefits that they offer over the old trusty div. I think that sections were nifty because you could have an h one in each section, rid. But, apparently, that was never true. Okay. So may I guess, like, at the time, people were saying like, That was always the old wisdom is only use 1 h one per page, because it's like the the title of the page or the title of your document. Right? Rid. And then people were saying you could do it. So they link to a thing that says that's that's not true. So maybe some examples will help, he says. If I've got a single blog post, it seems like article.

But if there is an archive page, is each item in the list also an article? Is article only for long form content? What about something that is kinda similar if you squint at it? Like a product catalog.

Would you ever use an article or section in something less cruddy and more workflow based, like a multistep checkout or something? So rid. All of these tags, this is what happened in HTML 5. They are just we call them on the show fancy divs.

They're fancy divs because they Are the same thing as a div or a span depending on if they're default to inline or block. There's no extra functionality to them. They're just more semantically descriptive of the content that lives inside of them. So, yes, if you have something that is a blog post or a list of blog posts or a list of rid. Preview of blog posts, and that's a good use case for an article tag.

A section tag, I've always seen it, and I'm curious what you think, Scott. Section tag to me is just a a good way to, group elements together instead of using a div. So it's kind of like saying, like, this is just Like an article, you're saying this is content, but a section you're saying this is just like a like a lasso wrapper that I use to collect

Different elements into 1 single container. Yeah. And I kind of I I kind of, completely agree with that. Like, I I don't think there's anything that I would disagree with that.

Maybe just to reiterate, because Fred was asking very specifically, like, should an article tag be used On a blog listing or each item in a listing, and the answer to that is yes. If you have a listing of, like, excerpts or previews or, like, individual blog posts where you Just have, like, a heading and whatever and read more. Like, those those are all article. And and so that's the way I've always thought about it as well. Right? The article is for content that is rid its own thing, but often content that can be more than one of, you know, like, individual blog posts. It's an Yeah. Article. It's it's a thing. Right? Rid. Blogs are, like, the best example for an article, but you could also, I suppose, use it in other contexts like that, maybe linking to a A tutorial course listing, but I guess I don't do that. For me, that's the main thing. But if you if you take a look at any major page and in fact, I'm trying to think of, like, a good page, like the the syntax Website. Right? I might use section to define the area that has the video player or the audio player. The audio ready. Player itself is kind of contained as its own thing. Yeah. If it's contained as its own thing, that to me is a section. So if we're looking at the syntax page, I would use That section for that, I would use a section for I mean, well, I don't know about anything else on this page, but I'm using sections for big chunks of content that are really contained as is. Maybe you have, like, a landing page, and part of it is, like, the newsletter sign up part of of this, and that's this whole thing is the newsletter part of it. I would have that be a section as well. We do that on on level up on our home page where we have, various rid. Sections or group content that are all related to the one thing, whether it's the subscription sign up area or it's the testimonials area or whatever. I use those A section for that type of of content.

So there is, like, nuance there, and some of it is, like, really based on feel, so So to say, where you you kinda get through it a little bit, but it should never get in the way of some of the core semantic ideas of HTML, like 1 h one per page, having your heading tags be, like, hierarchical to determine, you know, what's important Yeah. And and how your content is laid out in sort of like a, table of contents style of, like, you should be able to almost look at your rid. Your h one through 6 as a table of contents, so to say. I'm I'm just looking at the MDM docs, and they are recommending you should always have

A heading in every single section, which is kinda interesting. So they're they're saying, use it more for Content, like inside of blog posts. If I were to just say, alright. Here's how we're gonna do react. Step 1, that's a section with the heading of step 1 inside of it. And they also recommend if if the content is a stand alone unit, maybe art use article, if the content represents tangential information rid. Using aside, like, an author bio, that makes sense. If it's the main content area of a document, use main. That makes sense. And if you're only using the elements as a rid. Styling wrapper use a div instead.

So maybe I'm wrong about that, as lassoing content.

But your example of, like, the video player, rid. Like, that's not just lassoing content. That's clearly describing

that area of the site as the video or audio player. Right? Totally. Yeah. Yeah. That's the way I think about it. And and, you know, in componentized based development that we have today, sometimes it makes it It a little bit easier to think about that because, like, if you look at, like, the LevelUp Tutorials website, it's pretty easy to see where I'm using sections.

We have a big section that's browse the library. It has a heading. It has a paragraph. It has its own thing. Right? And it shows off Our course is in a thing. That's a section. Next 1, we have latest drop. It has its own heading. It tells, it has a specific story. The story here is we're showing you the latest content. That's a section. Next 1, deep learning and great community. That has a very specific heading and section to it. That's a section. Next 1 to testimonials.

Next one, the, pricing and and whatever. Next one is reviews, then our community. Those all have very distinct Reasons why they exist, and they do all coincidentally have a header that explains that that grouping of that content. Alright. Next one here is from Andrew.

Rid. Andrew asks, does your businesses suffer from economic recession? Have you already taken, or are you going to take any action? And I think the, the correct answer here is, I think, yeah, just about everything is. I mean, I'm sure there are some things that aren't affected by, you know, downtimes and, you know, economic prosperity or whatever we way you'd wanna say that. But at the end of the day, you know, if people are being laid off, rid. Companies are slashing budgets.

There's less and less budget and less enough money to go around for things like learning resources. Right? And so I've certainly seen data to suggest that our our business has, you know, taken a hit during this this current time.

And to me, it's not necessarily something that I'm going to be changing too much, but, you know, it's a good time to remember The solid practices of, not overspending and not, you know, going beyond the means of the business. I I think I run my business pretty Conservatively in in terms of, like, we're not spending like crazy. We can cover salaries for as long as we would need to. So, you know, it there's been definitely data to suggest to us that there has been effect there. But at the end of the day, For me, I'm just going to continue putting out good content. I'm going to focus on the content.

I'm going to focus on teaching people things, useful things, because If people want to invest in themselves and learn some new content, they're absolutely, you know, going to be looking for learning resources. That said, You may have heard me say several times throughout the course of this podcast last year that we were going to be raising our rates. Well, we distinctly have chosen to not do that, and then that's not to do that's not because of we'd be worried about losing subscribers or not gaining enough subscribers, but, man, people are hurting.

And the last thing I wanna do is charge more Yeah. For that. And a lot of companies are doing that right now. They're charging more. You know? Inflation has gone up. And, you know, As inflation has continued to increase, we haven't changed our prices because, man, I feel for people. I I'm buying eggs and stuff. I'm doing all that stuff that everybody else is, and I don't wanna Punish people for the current situation. So, yeah, I've kept my prices the same just to try to be a little bit, You know? Nice. Nice to

Luckily, in a spot where the price of Tech has not gone up that much. The host my hosting all has gone up a little bit here and there, like and a little bit. I mean, Maybe 20, 30%, which is is not or is significant, I guess. But, yeah, I've actually I've I was thinking about that the other day. I was like, I've never raised my rates. I get People all the time being, like, you need to charge $7,000 per course. It's worth it. And then or or you see these tweets that are at people being, like, why are people mad rid. My course, being x, y, and z price, like, it's worth it. And, like, if you have to, like, if you have to, like, plead to somebody if it's worth it or not, then Then you have a problem. Right? I don't know. It's it's kinda interesting stuff as well. I have not not raising my rates anytime soon either.

Does my business suffer from the recession? Yeah. Like, I I saw it like it. It's kind of funny. When COVID hit, I saw a quick, like, cut down, rid. And then quickly followed by a very large spike, meaning that people go, oh my goodness. The world is ending. I better save every dollar I have to oh my goodness. I have nothing to do. I better learn the JavaScript framework. Yeah. And then it's Yeah.

And then it's it's it Kinda leveled leveled off from there. It's definitely a little slower than it used to be, but, I also don't, I'm about to launch one one of my biggest courses ever. So, like, rid. I don't it's hard to, like, look at that type of data. Taking action, I'm kinda like Scott is. I've always been pretty conservative with my business. It's it always rid. Blows my mind that, like, you have, like, 6 bad weeks in the stock market and these companies lay off, dude Yeah. 20% of their workforce. And it's like, dude, There's so many people even, like, personal budgeting, I see people do it. Like, they just they make so much money, and they assume it will be like that forever. Rid. And that is never the case. You have to like, when times are good, you have to assume that at some point, that will stop, And you need to be prepared for that. So I'm I'm always being pretty conservative in that that regard. Yeah. The next Questions about budgeting too, so we can talk a little bit about this. But, man, I was on

Reddit, of course, classic Reddit moment the other day, and, Man, I saw this thread that really bummed me out. There's a guy who was talking about his boss's car, which was a Nissan GTR, Which the entry level g t r starts at a 113,000.

Okay? And Really? So Yeah. The the introductory one. The maxed out ones Freaking Honda Civic. No, dude. They're they're there's, like, a 600 horsepower twin turbo. Like, yeah, these things are crazy.

But the the the highest one is $210,000, so they're they're fancy cars in terms of, price point. Right? Yep. And people in that thread were like because 1 of the guy's boss was a technician at an auto department. Yeah. People At the in that thread, we're like, I don't understand why people are shocked that this guy can afford a g t r. He makes $120,000 a year. A $120,000 a year, and you're buying a $120,000 car? Like, mm-mm. Like, That to that to me is is shocking, that that people would feel that way. And, man, I don't know what amount of money I would have to make before I felt comfortable dropping that kind of cash on the car. No kidding. Maybe that's just me. And I thought that cars are people are on payment payment mindset. Like, I've I've always been a buy a cash car guy,

and you see all these other people being like, I just want to know what the payment is. What's the pay every single month? Rid. Totally. And and, like, granted, like, I'm not being a lot of people need to to buy stuff on on payment because it's simply just too expensive and you have to get to work. Like, I'm not rid. Don't clip this and get mad at me, but when you're buying a 100 and, what, $80,000 car, you shouldn't be looking at payments

rid. There's a difference. You know? My last car was a Ford Focus that I had for 10 years. And and, yeah, I put it on payment, but I, you know, paid it off, you know, rid. 3 3, 4 years into the thing and then had had it for 10 years. So, you know, I I guess it's a big conversation, but still, like, it's it's wild to hear the mentality sometimes. Our old house was next to a brush factory in Hamilton here,

and they had, like 2 shifts of workers coming in and out every day making brushes on the assembly line.

And I got to know the owner pretty well, rid. Because, like, we we were chatting and whatnot. And, like, it's funny because you he came he drove like a 15 year old Saab or, like, a clapped out pickup truck, and then when he would come on weekends, he'd pull up in a Tesla or, rid. He had several of the cars and he's not an idiot. He's not driving a freaking g t r, like, while his employees have to work 10 hours wearing a mask, you know, like he's rid. He kinda knows, like, you you don't make your employees mad by showing them that type of stuff. That that doesn't motivate them to work for you. Yeah. That is that's always weird. It's like the boss' Here's the boss's spot, and he's pulling up in a Rolls Royce or something like that. That's not right to me. I would rather pay my employees that Monthly whatever. That monthly thing that you're putting towards that car.

And, okay, just to go along kind of with the money theme here, next question is from Kutson Kaplan, and he asks, how do you manage your money? Do you use a software ledger, CLI, YNAB, or do you not manage it at all? Are you familiar with rid. Plaintextaccounting.org.

We've been talking in the past about maybe doing, like, a money themed show at some point just to talk about, like, our Our philosophy is about that, but I'd never ever heard of this plaintext accounting .org, which seems like a a very developer way to do. You know, I'm gonna tell you right now, I do not have the patience For a CLI based way to manage my money or, anything like this, this looks a little bit more like like okay. I was I was rid A little bit cautious on even doing home assistant, which felt like it was too much time to do. But, like, with money stuff, for me, I want it rid be as simple as possible because if it's not, I'm not gonna use it, and I need to use it, or else you just don't have that type of visibility. So I budget. We used to do it on our own spreadsheet, which was nice because Courtney and I would sit down, like, on, every other Sunday and just go over the budget and and do it all by hand. And then that was fine. But then when you have kids, it's kind of unattainable.

So I did move to YNAB last year.

In YNAB Well, I actually use Personal Capital for a little off for that, and it was fine, but it's not really budget focused.

And YNAB is interesting because It takes a different mindset where, like, normal budgeting software, you're like, alright. I have x amount to spend. It categorizes your expenditures and, like, shows you How much more you have to spend in each of those categories, and then you basically say, alright. Based on my paycheck, here's what I'm You know, first, you take care of your fixed expenditures, then you take care of everything else that you know, whatever extra stuff, whether for entertainment streaming services, that type of deal. But with YNAB, you have, like, a buckets, and you're putting money into buckets.

And you're basically assigning money to things before You're spending it rather than saying, here's how much money I have to spend here. It's like, I have, like, an emergency fund bucket that's not a Separate account, but YNAB kinda shows it to me as if that emergency fund is a separate account.

And that way, if I wanna say, I want my emergency fund to be this filled by this date, It can tell me exactly how much I need to put in each month to get that that so my that money is almost accounted for before I'm even spending it. Yeah. And YNAB is is neat, but the software isn't as awesome as I would like it. So I'm I'm in the The process of trying a new one. You know me. I'm always trying new things. And the new one I'm trying right now is called Copilot, which, Copilot Dot money is the URL, which is great URL, is probably the most beautiful app I've used in terms of Tracking your finances. So if you're the type of person who's motivated by, like, the beauty of an app or if you just wanna check this gorgeous app out, just install and check out the demo mode. This thing is really nice because it handles, everything, whether that's your savings accounts, your your retirement account investment stuff. You can check it all that. It has, like, really good budgeting software, but it has some neat features. Like, one, it it does, like, authenticating into Amazon In categorizing your Amazon purchases for you, so a lot of other budgeting softwares will just see, oh, it's an Amazon purchase. Then you gotta go look it up and see, like, what it was that you bought. And this can tell you, oh, this thing was this and, like, this was groceries or whatever that you can automatically categorize. That's like when you buy Tylenol or makeup at the grocery store. Mhmm. It's like, oh, that wasn't food.

But Right. You know that. Right. That shouldn't be counted as groceries, and I will not have that, rid ruin my grocery budget.

But yeah. No. I I like this app. So if you if you haven't heard of this one, give it a try. I don't Android people, I'm sorry. It's for Mac and iPhone. I'm so sorry. But if you have a Mac, you can use it because there's a really nice desktop app for it as well. Rid. So there's that. Awesome. My budgeting is just being Dutch.

I I have, like, a pretty good rid. Dial on incoming and outgoing and everything. But I don't have I got a couple of spreadsheets as well. But no. You know where things should be. Rid. Yeah. No system like this. And and often my, like, my wife will say, like, alright, like, I want to buy this and we'll talk about it. And if it's It's like, alright. Well, how much should we spend last month on, like, house stuff or clothes or things like that? And

so I I'm pretty happy with that. Yeah. Yeah. Totally. One one thing that is handy is, like, a little money tip that people don't often think about is, like, how many streaming services are you connecting to? Like, You know, HBO Max and all this all this stuff. Right? And and how often are you actually watching those? So, like, what Courtney and I will do is we rotate them. This month, we're doing HBO Max, and we'll catch up on all the HBO shows that came out. And then next month, we'll do this, and we'll catch up on all the shows that were for that. And then that way, we're not paying for, rid. You know, more than 1 or 2 of them at a time because it's I like how you can't watch all the stuff on all of them all the time. Alright. Next question we have here is from Raja.

I'm confused about all the module loaders in JS. What should I consider using? There's a lot of option. We have common JS, AMD, UMD, ESM, rid. And then there are things like system JS and require JS. How do they come into the picture? I'm so confused. Alright. So, a module Is a way for you to package and modularize your JavaScript so that you're not Just dumping all of your JavaScript into 1 file, and, you can there's a lot of benefits to it. Basically, just keeping things in scope, being able to share code, rid being able to trim code that you're not using, all that type of stuff. And there are many different ways to write modules.

Back in the day, we had AMD and UMD.

That's a synchronous module definition in UMD. It was unified u let me look it up.

Yeah.

Universal module definition, which is funny that it's universal, and we have 4 plus different ways to define modules. So those were big, rid. In the jQuery days where, we started writing applications that were getting larger and larger and larger. And rid. Before jQuery or sorry. Before that, we kinda just like, alright. Let jQuery on the page, then load all your plugins, then load all of your JavaScript, and it must go in this rid this order because the the code that comes after it is assuming that the code before it is there. And that gets out of hand really quickly because You end up just loading literally everything on every single page, so you hope everything is available to everyone.

Now with with modules, you can say, alright. Well, like, I need this thing, so I'm just going to it's it's called dependency injection. I want to import this dependency before I can go ahead and use it. And that makes things a lot easier because you rid. Just need to import the things that you need for those specific pages or those specific applications. So AMD, UMD, those are still popular, but not just because of of legacy reasons. So I probably would not even care about those types of things, anymore unless you're specifically using something. I was actually This morning, I was looking at Bauer.

Remember Bauer?

Oh, yeah.

Bauer was a guy. Yeah. I would love that, you know, Logo. It was the, like, front end package manager, and you could, like, npm install jQuery and, like, Flickety. And, like, what were the other, like, popular, rid things that you could you could Bauer install. They're all front end packages. And before we realized, oh, we can just put front end packages in npm as well. Rid. So Bauer has kind of gone. It's still being maintained, and it's it's hilarious. They've got tons of

sponsors still. Oh, yeah. 420 coupon codes? That's a big time sponsor right there. Yeah. Sorry. No no shade attendant on that one, but it's the sponsor list is a little interesting. There's a lot of A lot of sponsors that are have nothing to do with tech.

Yeah. And it's they're just they're just sponsoring it so they can get the link back, The SEO juice out of it, which is hilarious, but somebody is still maintaining Bauer and making sure that it runs because its legacy projects need it, rid to go. Anyways, Bower is not used anymore either. So what should you you be using? The other 2 we have are common JS and ES modules. Rid. So CommonJS was the node way that we wrote things, and then, ES modules was the the new spec. And often people would write rid. Code in common JS, and then you can compile it to AMD or UMD, and then use libraries like System JS or Require JS to actually load all of those dependencies in. Thankfully, we don't have to worry about that anymore. The answer today is rid Use ES modules as much as you possibly can. You will still encounter things that use common JS because that was the system for 15 10, 15 years.

And I actually just just yesterday, I've pushed my last commit converting my entire Codebase from common JS over to ES modules, and we'll have a whole show on how to do that. But this sounds very confusing, But it's much easier now. Just use ES modules because you can import common JS modules and into it and almost never. Actually, I'm going to say I've never run into a situation where I need to import

a AMD or UMD module. Yeah. And it's a it's it is for people, anybody complaining about today, it's been a wild time. I remember being introduced to to Bauer and at first being like, Man, I sure heck don't understand why I need this, because at the time, you were just like, let's let's down like, Let's go to jquery.com.

Let's click the download button. Let's drag the folder into our project, and then let's use the files that rid or whatever. That was just the way you did it.

And little did we know or little did I know, and I wanna speak for anybody else, that was, like, Just a precursor to the world that we'd be living in. And and, honestly, I I I don't know how, we all survived doing it the drag and drop method, but, hey, we did it. I guess it was because we had, like, 1 dependency with no child dependencies rather than 10,000,000,000