468

June 8th, 2022 × #javascript#webdev#podcast

Syntax Live at Reactathon

Wes Bos and Scott Tolinski host a live podcast episode from Reactathon, featuring debates, old code, syntax errors, JS or NAS, and audience Q&A.

or
Topic 0 00:00

Transcript

Guest 99

We have another dynamic duo for you.

Guest 99

Extremely excellent educators, these 2, and host of the supremely popular podcast, Syntax.

Guest 99

So they are here to host a very special episode live and in person On Stage. Please put your hands together for Scott Dalitsky and Wes. Bye.

Announcer

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

Scott Tolinski

This episode is is sponsored by 3 amazing companies. We're talking about Century, FreshBooks, and Payments hub. We'll be talking about all of those throughout the course of the show. So thank you to our sponsors for sponsoring. Alright. How's everybody doing?

Topic 1 00:36

Podcast sponsored by Century, FreshBooks, PaymentsHub

Wes Bos

Enjoying it. Yeah? Awesome. Thanks so much for coming out. This is super exciting.

Wes Bos

We have a podcast called Syntax, And, we do 2 plus 3. We're gonna talk about that in a second. On Mondays, we have a podcast called The Hasty Treat. It's kinda focused on JavaScript, HTML, CSS, Node, soft skills, everything, web development. So hasty treat on a Monday, we do, like, a 20 minute episode, something nice and short.

Topic 2 01:20

Hasty Treat podcast on Mondays

Scott Tolinski

On Wednesdays, we do a tasty treat, which is our longer breakdowns into all sorts of topics, really. We, it's super educational, but also a lot of

Wes Bos

fun. And, just now, you're gonna know that we are releasing a 3rd weekly episode called The Supper Club.

Topic 3 01:31

New Supper Club podcast releasing

Wes Bos

Woo. Yeah. It's gonna be all interviews with people. We don't do a ton of interviews, and, some people are much smarter than us. So, we thought we'd bring on some some people, so Buckle up for that.

Wes Bos

We we didn't see earlier, but does anyone actually listen to the podcast here, Cuddle People? Okay. Good. That was much better than Yeah. Because we were standing behind that thing, and It was just like, hey. Listen. And it's just like so oh. Oh, boy.

Scott Tolinski

You can find me at s talinski on Twitter and everywhere and at level up tutorials.

Wes Bos

Sorry. They did anyone else get beer as part of their presentation? I don't think so.

Wes Bos

It's pretty sweet. My name is West Boss. I'm from Canada.

Wes Bos

That's why I say JavaScript funny. Woah. Hey. Canadians.

Wes Bos

Canadians.

Wes Bos

Yes. Canadians make the best developers. I'm I'm at Wes Boss on Twitter, Mostly Instagram as well.

Wes Bos

Today is a live podcast, and the plan for today is,

Topic 4 02:40

Live podcast overview

Scott Tolinski

Well, the, first thing we're gonna be doing is we're gonna warm you up with some JavaScript hot take hot take tweets.

Wes Bos

Then, we're gonna a new section that we've never done so far Kicking it old school. We're gonna go back to who's been a developer for over 10 years here?

Scott Tolinski

Oh, wow. Okay. Yeah. Buckle up. Yeah. Buckle up for that one. Then we're gonna do syntax error where Wes and I have sneakily put in some syntax errors into some code, and we're going to try to stump each other With where those syntax errors live, so that'll be a lot of fun.

Wes Bos

Then we have a very popular segment called JS or NAS. We're gonna talk about, is it a JavaScript library or something completely different, like a carbon fiber road bike or,

Scott Tolinski

And you'll be able to vote. So we'll have everyone voting in the audience. Y'all got phones? We're gonna try yeah. Y'all got phones. We're gonna try to trick you on, Some fun JS libraries.

Wes Bos

And then we're gonna wrap it up with q and a. So if you have any questions about literally anything, life, love, JavaScript barbecue. Barbecue, breakdancing.

Wes Bos

Yeah. We will answer it confidently if even if we don't even know what we're doing. That's how it goes. Yeah. The URL for today, if you have your phone, we have a q and a coming up. Feel free to drop your q's and a's, anytime@pigeonhole.atforward/sick QR code. How you know QR codes have been around for, like, what, like, 12 years, and everyone always thought they're dumb. Pandemic. Like, like, the unsung hero Yeah. Of the pandemic was the QR code, So I'm pretty stoked about that.

Wes Bos

Alright. We're gonna start off with some hot take tweets.

Wes Bos

I asked people on Twitter, like, we all love to trash talk all day on Twitter. Right? Look. What is your unpopular opinion, or what's your hot take in in web development and JavaScript in general? So we're gonna go through them all, and attempt to answer them all.

Wes Bos

So first one we have here is NAN was a mistake.

Wes Bos

Any operation that yields, Nan, should simply throw an error. And this one this one had me go, I didn't even I never even thought about that. It's true. Like Nan. Yeah. Because, like, if you get to Nan, something went wrong.

Wes Bos

You know? It's not Nanon. Like, maybe you should've checked if it was a number first. Right? Yeah. Maybe. That's kinda interesting. Not sure how to think about that, but

Scott Tolinski

hot take? Hot take.

Scott Tolinski

Next 1 is putting all the imports at the top of each file makes code Extra harder to read, navigate, and refactor.

Topic 5 05:05

Debate on putting imports at top of files

Scott Tolinski

It just adds to jumping around in the file to see what, see what something is or where it's used. And, actually, I collapse all mine anyways. I, do a region collapse on there. So Interesting. Yeah. I don't like them.

Wes Bos

I I like it. I don't like it. Because so here, I was refactoring a whole bunch of common JS, and I was just putting my requires right before I needed them In, like and not always, but in in some of my files. And then it's like, no. You can't do that anymore. So how many of you think you would like to put imports anywhere that you want? Anywhere. You, Bologna. Just anywhere. Yeah. Oh, it's a hot take for, hot take for a reason, folks.

Scott Tolinski

Semicolons should not be optional. No. I went I don't I don't use semicolons. Who needs semicolons? I'm

Wes Bos

I I'm wondering if this guy thinks Semicolons should not be there at all. Like, the option should be don't have them or entirely.

Wes Bos

I'm gonna go I'm gonna go I agree.

Wes Bos

You should enforce them. Enforce them not being here. People that don't use semicolons, I sleep at night. I don't use them. I sleep fine.

Topic 6 06:04

Debate on enforcing semicolons

Wes Bos

Can't do it. No.

Wes Bos

The next one, for loops are not needed.

Wes Bos

Okay. Let's get the audience. Let what do you think about this? Oh. Technically.

Guest 99

K. K. So

Wes Bos

I so I followed up to the suite. I'm like, you mean, like, the 4, I plus plus one. Right? And he's like, no. Like, all of them. Like, 4 of, 4 in, 4 regular ass, For, and I was like, no. Because, like, a for loop is like, you ever try to sink away inside of a map or for each? Sucks. It sucks. I know you can do the reduce thing where you return a promise of the next one and, like, no way to live your life. No. You should not be doing that. 4 you can't break early from a a 4 each. 4 loops, I love 4 loops. I don't think they're used often enough. People are too Too hardcore about making everything an array method.

Topic 7 07:06

Debate on usefulness of for loops

Wes Bos

What did they?

Scott Tolinski

I take. Yeah. I'm I'm fired up. I don't I don't use them that much, but I use them enough where it's like, yeah. Okay. You know? I don't I don't need them, but they're there, and I can use them if I want. You don't need them. I don't need them to be there. Needs for loops?

Wes Bos

Alright. Let's go hang out after. Yeah.

Scott Tolinski

Alright. Next one.

Scott Tolinski

People that are excited about for static typing in native JS weren't there for Or just forgot or blacked out ES 4 Harmony and its chaos.

Wes Bos

Yeah. There was a lot of, I mean, ES 5 took what? Like, Yeah. We should explain for the folks that weren't around for that. It took, like I don't know. How many years did it take to get e ES 5 out the door or What or so many it was a huge deal when it came in. Cancel it at some point. So I I think that our standards process is better. Like, we've seen We've seen a lot more come out the door, so I I disagree. I think if we if we're getting static typing in JavaScript, it'll go a bit smoother. I like that. Microsoft will just do it for us. Yep. Who thinks we should get types in JavaScript?

Scott Tolinski

Wow.

Wes Bos

Yeah. Yeah. Who doesn't think we should get types in JavaScript? Okay. Get Out.

Scott Tolinski

You're done.

Scott Tolinski

This episode is sponsored today by Sentry at Sentry dot I o. Sentry is the perfect place to see All of the errors and exceptions and all sorts of things on your site, but mostly it's a tool for understanding what your users are experiencing on your site at any given time because this gives you tools to see what kind of bugs are happening, which pages are slow, what's Going on. Where are the issues on your site? And you can attach them quickly to issues, assign them to users, make sure these things get done, fixed, improved pun or any of that stuff. And Century is one of those tools that works with everything you know and love and has been around for a long time. We love Century over here, and I We've been using it for a very long time as, long before we did this podcast, I've been a big fan of Sentry. So we what we want you to do is head on over to century@s entry.i0.

Topic 8 08:16

Debate on adding types to JavaScript

Scott Tolinski

Use the coupon code tasty treat, all lowercase and all one word. And What you're gonna do is you're gonna get 2 months for free of Century's amazing services. So go ahead and give them a try, plug it in with your app, and then Just be amazed as as you get to find out about the bugs that happen on your site happen before your users email you saying there was something wrong. Thank you to Century for a sponsor. A good website webshate? Webshate. That's what you make. Right? Webshate.

Scott Tolinski

That's what I make. Shadesights

Topic 9 09:35

Ad for Sentry error tracking

Wes Bos

.net. Hit me up. A good website should function without JavaScript. Forms should work without JS, and accessibility should not be broken when JS does not Load.

Wes Bos

Interesting thought, Scott. Not that hard of a take. Not that hard of a take. But I do like JavaScript. I primarily like JavaScript. I I think every day. I think the form thing, Absolutely.

Wes Bos

Because, like like, form like, we looked at it in Ken's talk yesterday. Like, forms are already built into the browser And into the server. You know? Like, we got it already. You know? And, like, you can you can step in there. Fine. You don't have the animations or, know? No. But, like, you can now. Yeah. You can you can use, like, most of that and then just add a little sprinkle Yeah. Of of whatnot. But I don't know. I don't know. I think, like, I think the I think that JavaScript is a pillar of of the the web. Yeah. Turning it off, you're gonna have a bad time. Bad time in 2022. Yeah.

Scott Tolinski

Classes were a mistake.

Wes Bos

I got I got no problem with classes. I don't use them, but I gotta gotta open it up. Yeah. And I don't it's like classes didn't add anything to language. Right? It just was Sugar. It's just sugar. Yeah. I like sugar. Yeah. Thank you. I I don't really use them all that much, but yeah. Not not We're we're laughing because we coulda we coulda filled this whole talk with Brian Larew, Tweek. Here? He's, here tomorrow. Yeah. I've been saying this for years, but I think the best way to build an app is to stay as close to the platform primitives That's possible and not transpiling. I remember Brian was very outspoken when Baoil came, and he's like, no. We're just doing ES 5 until until you can support it. Folks bias to ESM or folks should bias ESM web components, progressive enhancement, tightest shifting.

Topic 10 11:18

Debate on using platform primitives vs transpiling

Wes Bos

I kind of agree. I don't think I'm gonna ever, like, totally Let go of my build step. Yeah. But, like, that's why we're pushing for for, like, standards and platform primitives is maybe one day we won't. I like my magic. If we can get types in JavaScript. Yeah. I like a little bit of magic. Little bit of magic. Yeah. Mister Svelte over here. Yeah.

Scott Tolinski

Yeah.

Scott Tolinski

TypeScript is overrated and overhyped. No.

Topic 11 11:40

Debate on usefulness of TypeScript

Scott Tolinski

No. Oh. Oh, what?

Wes Bos

Next one. Some claps go ahead. Hold on. We got we got too many of these. Let's let's go through here a couple more.

Wes Bos

I'm sorry. Alright. Let's move on to next section.

Wes Bos

Kicking it oh, we'll go back to that. We could talk about hot takes all day long. Yeah. We can talk about it. Long. Kicking it old school. Alright. This is the section of the show Where we are gonna ask you folks to come up. We are gonna show you some code from the last 10 to 15 years, and you're gonna have to guess What does this code do? What's it do? What does it do? And if you I got stickers.

Wes Bos

I got I'll give you a free course. Scott probably give you a free course. Whatever you want. Maybe some of those we can just make up guests. Free Hasoor for 10 years.

Topic 12 12:18

Kicking It Old School segment

Wes Bos

I'm joking. I'm joking. That's not a that's not real Unless they want to.

Wes Bos

So folks who want to try to win at this game, please line up over here. Come on down.

Wes Bos

Don't be shy. Don't be shy.

Scott Tolinski

Yeah. There we go. Alright.

Scott Tolinski

Okay. So we have a hot mic here.

Scott Tolinski

Test. Test. Hot mic. Yes. You are first.

Scott Tolinski

Okay. What does this line of code do? Specifically,

Wes Bos

the

Guest 4

The first and last lines where Yeah. That's the Jquery. Not the middle line. The fade and suffix button. Yeah. Calls the interior code with Jquery as the context. I mean, it's an I it's like an immediately invoked function. Right? So you're calling, you're calling you're passing jQuery in to be consumed From the function itself and only in the function itself.

Wes Bos

Pretty close. But why do we do this?

Guest 4

So that you can modify jQuery and then Have, like, some kind of, like, attack on it, I guess, or, like so that jQuery is, like, specific to the context that you're calling the function in? I I think that's pretty close. So That's the Yeah. They're really

Scott Tolinski

hand, actually. Yeah. Is yes.

Wes Bos

Back in the day, we had the dollar sign Would be, uh-oh, cops coming.

Wes Bos

They heard that tights meant, hot take. Yeah. I've seen that, At the border border patrol show. They're coming to get the Canadian.

Wes Bos

The reason we did this is because there was multiple libraries Popcorn. That had the global dollar sign variable in jQuery days. Other libraries use the dollar sign. So by passing in the jQuery object, It would then, rename itself as an argument to dollar sign, and then you could use it freely inside of that function without worrying about Some other library that use the dollar sign, so it's no longer a global variable.

Scott Tolinski

Let's get some stickers out here. Yeah.

Scott Tolinski

Oh, it's

Wes Bos

The forgot the first semicolon.

Scott Tolinski

In front of the f e. In front of the f e. Oh, that's

Wes Bos

Wow. That's so that's a joke for people that use semicolons. They used to put the semicolon instead of in front of the iffy because they don't use semicolons. Bizarre way to live your life again.

Scott Tolinski

Alright. What does this code do? That's a good question. What's the purpose of it?

Guest 5

Maybe this is one of those futuristic, APIs that we heard about in the talk.

Wes Bos

It's Zoom 1 for everybody listening on audio.

Guest 5

Zoom 1. I don't know. Maybe they maybe they added this in 2020, like, from the Zoom company. No. Okay. That's good. This is from, what, 10, 15 years ago.

Wes Bos

I don't know. I'm lost. Alright, folks.

Wes Bos

What is it?

Scott Tolinski

Anybody know? Enforces

Wes Bos

layout.

Wes Bos

NIEED. Wow.

Wes Bos

Mister Moo Tools himself.

Wes Bos

What? That's coming.

Wes Bos

You need to under oh, because yeah. That's the next one, k. Next one. Next one. Lana.

Scott Tolinski

Why did we need

Wes Bos

the PNG fix? Why did we need PNG fix?

Guest 6

I'm a be honest.

Guest 6

15 years ago, I was, like, 10. So

Scott Tolinski

but I have seen this before

Guest 6

Working on working on IE, compatibility for stuff in, like, 2017.

Wes Bos

So Wow.

Guest 6

But I would just don't remember. It's Probably, like, it's I see filter, so it probably has to do with transparencies.

Scott Tolinski

Oh. Nailed it. Yes. So this was to y'all go clap. Yeah. That's how Good deduction.

Wes Bos

Today's youth.

Wes Bos

Yeah.

Wes Bos

So this, the PNG fix was a little library you could add, and IE 6 did not support transparent PNGs.

Wes Bos

So they had a white background.

Wes Bos

So by adding a 1 pixel by 1 pixel blank GIF And applying this bizarre set of, postcode and pasted it. I don't understand how it worked, but it it made transparent PNGs have a transparent background in IE 6.

Wes Bos

Alright. On up.

Scott Tolinski

Nicholas, what does this code do? Oh, jeez.

Guest 7

Alright. Alright. Let's see.

Wes Bos

Swap image. Yeah. This is probably the hardest one. Sorry, Nicholas.

Guest 7

Looks like it's affecting, the source object of the or the source for the image. Yeah. We got an array.

Wes Bos

The name of this one was also very a very popular function name you would see on ViewSource a lot. I'll make a I'll make a guess. Yes. But I'm I'm I'm guessing this is wrong. Is this something having to do with maybe, like, lazy loading and having a preview image before and then changing to a different image after? Don't think we we thought too much about lazy loading then. Yeah. It's not, actually. It doesn't lazy load, but you pretty much have it. Yep. So this was the code that was generated by, stands for macromedia.

Wes Bos

This was the code generated from Dreamweaver Oh, wow. That Before we had hover states in CSS, if you had a button you wanted to change the background on, You literally had to change the source object of an image Yeah. Or the source of a background image. And what that would do is it would it would take a sec. Do you remember the load? And it would have to, like, download, and then you would get the background of that button. And then as you hovered it, it would go pretty pretty wild times. Yeah. Wild times. Yeah.

Wes Bos

Alright.

Scott Tolinski

What is the name of this technique,

Wes Bos

and what's the purpose of this? Do you have any idea? Don't give him a sticker yet, Scott, what was this? I'm just hanging out. I got a another Scott. Sick. Oh, it's up, Scott. Yeah. Loading Oh, mic. Scott. Mike.

Wes Bos

Give him the mic. Oh, the mic?

Scott Tolinski

I thought it was, like, somebody named Mike. No. Wait. Where's Mike? His name's Scott.

Guest 8

Alright. So we're we're we're selecting a list item in the header. The important part is the background

Wes Bos

anchor And the background images and the background anchoring of these 2 selectors.

Wes Bos

Why are we doing it this way?

Guest 8

Alright. The so it's a GIF background.

Wes Bos

GIF. I mean, the guy just died, and on his deathbed Yeah. Yeah. He's a really good Yeah. Okay. I'll give him that.

Guest 8

And that's in the right?

Scott Tolinski

On the left,

Guest 9

We've got it. The same

Guest 8

thing with petting. I've I'm not sure.

Wes Bos

What's this called, folks?

Scott Tolinski

Anyone got the name?

Wes Bos

Did we stump the entire audience?

Scott Tolinski

Sliding doors. Who's that? Sliding doors.

Wes Bos

Yes.

Wes Bos

So sliding doors was before we had background gradients and bat and, rounded corners, you if you wanted to have a button or a link And you wanted for that to, extend much wider, then you would put you would make a very, Very, very long longer than you could possibly ever need button off for the right hand side, and then you would anchor that on the right, And then you would get, like, the end cap of that button and stick it on the right hand or the left hand side, and it would overlap. That's why, like, the the anchor link that was inside of the list item, And that would be called Sliding Doors. So if you had a short link dog, it would be a very small button. If you had a very long dog. Button, it would, it would extend to it. And at a certain point, if you had too long of a button, you'd run out of out of background image because you couldn't repeat it, Yeah. Because it was anchored. Yep.

Scott Tolinski

Man, the things we did before, border radius or drop shadows. Alright. So this one

Wes Bos

is why are we doing the 2nd line? Var that equals this.

Wes Bos

And I should say this is not, like, old. Like, we still do this.

Wes Bos

Sometimes.

Scott Tolinski

Man, I this this is gonna be hard, but,

Guest 10

That's not my real voice, Oh, my brother. Oh, I was gonna say that's a good voice. Oh, yeah. My brother my brother wanted me to use it. He's gonna watch this live stream. I love

Scott Tolinski

I got a hold of it. It is too hard to maintain that that deep voice. You know what I'm saying?

Wes Bos

Yeah. But, that's good. We should get him to do the intro.

Guest 10

So this, What is it doing? I started in 2016, so this should be familiar.

Guest 10

We're not in arrow functions time yet.

Wes Bos

You're you're hot. You're you're getting warmer. Yeah. Yeah. Yeah. You're you're pretty close there with arrow practice. Yeah? Arrow functions? Okay. It's be we wanna make

Guest 10

oh, shoot. There's a confusing that again.

Guest 10

This and that, I remember.

Guest 10

I'm a give a general answer. It's it's to maintain the right this context.

Scott Tolinski

Nailed it.

Scott Tolinski

Exactly.

Scott Tolinski

Nice.

Wes Bos

So, when you create a new function, the this context is rebound to that function. So what do you use now to get away from this? An arrow. An arrow function. Good. Love it.

Wes Bos

Alright. Well, we need more people.

Scott Tolinski

How how How many more we got left so we can 1, 2,

Wes Bos

3. 3.

Wes Bos

3. Alright. 3 more people real quick. Come on down. These ones are easy. Yeah. Alright. Yeah. Yeah. Yeah.

Wes Bos

What do these 3 selectors do? Underscore padding, Star padding and padding 10 p x forward slash 9.

Scott Tolinski

This this is a cruel one. Yes?

Guest 9

Well, the first one is obvious.

Wes Bos

Yeah. 1st one's obvious. Just padding t 10 p x. I

Guest 9

I'm not sure about the second one. I think the third one is for IE.

Guest 9

Yep.

Guest 9

And the last 1, I think, only new browsers will know how to parse. Pretty close. So it's,

Wes Bos

The underscore is IE 6 star, and there's actually a whole list of, like, 10 of them, is, IE 6 and 7, And then the forward slash 9 is 6, 7, and 8. So if you had to, you would likely put different Values in here because it didn't look the same on the same browsers, and you needed to tweak it a little bit here or there. So

Scott Tolinski

hopefully those days. When in doubt, you could probably just answer IE for most of Yeah. Yeah. I think that's fair.

Wes Bos

Oh, this one Yeah.

Wes Bos

Is this one is very tricky. I apologize. I I have asked for this one.

Wes Bos

What does this statement test for?

Guest 99

Oh, no.

Scott Tolinski

Regex is a bad time. Yes. Regex is a bad time. Word function dot test,

Wes Bos

array dot sort, empty array dot sort.

Guest 99

Are we trying to figure out if the object being targeted is an array?

Wes Bos

No. No.

Wes Bos

That would be a a very sane guess.

Wes Bos

This one's particularly Should I say it? Does anyone know?

Guest 4

See if sort is yet. If you have sort in the browser. If you have sort in the browser. No.

Wes Bos

It's testing for opera, the browser opera.

Wes Bos

Really?

Scott Tolinski

Yes. It's What? Oh, you're gonna Prentice, you can have that. Who figured that out?

Wes Bos

Who figured that out? And the funny thing is that opera back in the day Had an entire style sheet and JavaScript file that would fix popular websites.

Wes Bos

So people would say, my bank website's broken On Opera. This is before Opera used the engine same as Chrome, and it would they would just fix websites. They would just, like, monkey patch all these websites

Scott Tolinski

Alright, John.

Wes Bos

This is the last one. Why is there a bang inside in front of this function? And this is coming from the original Twitter Bootstrap.

Guest 9

Mhmm. Mhmm.

Guest 9

That one, I have no No idea. I'm sorry. Anyone know?

Wes Bos

Nope. No. It's apparently another way to do an IFFY. Instead of the parentheses, you can just put a bang in front of it, and you can run it again. I wish I had no idea. Yeah. I I

Scott Tolinski

bootstrap.

Scott Tolinski

Beautiful. Thanks, Everybody, thank you. Yeah.

Topic 13 25:04

PaymentsHub sponsor ad

Scott Tolinski

Here you go.

Wes Bos

I have tons more stickers. I just can't leave them around, so come hit me up. I'll give you more. Let's talk about one of our sponsors, PaymentsHub.

Wes Bos

They are an easy to use API and SDK that allow developers to create ecommerce websites, Develop in person point of sale applications and launch a fully featured omnichannel payment solutions. They have an API rich product Landscape for partners that are interested in programmatic merchant onboarding and accessing payment transactions through API. So if you're building of course, if you're building, you're accepting money. But if you're building an app that needs other people to accept money or you need to be able to onboard users and and they have to submit their Own banking information. You need to onboard them. All of that stuff. That that sounds pretty complicated. And that payment that's what Payments Hub does. They give you the APIs to do all of that, and it's pretty awesome.

Wes Bos

You wanna check it out at, developer.

Wes Bos

Paymentshub.com Forward slash Syntax and you can see the integration payment processing APIs. They can onboard you in as little as 90 minutes.

Wes Bos

It's pretty sweet. I went through all of their documentation myself. I even sent them, this is funny thing that happens with sponsors. I send them, Like, I I I feel like I know our audience pretty well. So I was like, hey, you should update your your, one of their documentation didn't have fetch in that. I was like, you should show a fetch example. I know our listeners would love that because We talk about that all the time. So it's pretty good SDK. You gotta check it out. Developer.paymentshub.comforward/ syntax. Thank you, Payments Hub, for sponsoring.

Topic 14 26:39

Syntax Error segment

Wes Bos

Next section is syntax error. We show each other code with no syntax highlighting, and the other person must figure out what's wrong with it. We were cruel to you, and now we are cruel to each other. Alright.

Scott Tolinski

Wes, what is wrong with this code? This is, this is TypeScript, in case you're wondering.

Scott Tolinski

What's wrong with this code?

Wes Bos

There's 2 no.

Wes Bos

The f's, that's you can do 8 f's because of,

Scott Tolinski

So anyone wondering, you can do 8 f's there because Transparency. Yeah. Transparency and hex. Okay. It's a good little red herring. You

Wes Bos

didn't Initialize your last 2 variables.

Scott Tolinski

No. If I did, no. Those are just Mhmm. No. Those are just declaring the type.

Wes Bos

Let's size and number.

Wes Bos

Who who sees it?

Scott Tolinski

I had to turn syntax highlighting off on this one. I think so. Yes. The Syntax Hiling would have revealed.

Scott Tolinski

Alright. Tell me. Alright. Well, the error is on line number 8.

Scott Tolinski

What's wrong with line number 8? Oh, float is not a type. Yeah.

Wes Bos

Ah.

Scott Tolinski

Alright, Scott. This is itty bitty. No. I'm sorry about that. Okay. I tried to make it a bit harder. Export default. The first thing I'm looking for is, misspelled words, which I'm I'm not particularly

Wes Bos

No. That's not the case in this one. Oh, my gosh.

Scott Tolinski

K. Waiting.

Scott Tolinski

Callback is a callback. It's just being executed.

Scott Tolinski

Objects, status code, headers.

Wes Bos

This is from a Netlify serverless function. Okay.

Wes Bos

Which I don't think that Alright. At all. The,

Scott Tolinski

yeah, the error is on the very last line of the code.

Scott Tolinski

It is a a curly, And we need a, wait. Yeah. We need a we need a parenthesis. Nailed it. Wow.

Wes Bos

Very good. Impressive. Yeah. Thank you, sir.

Wes Bos

Alright. For West. Alright.

Scott Tolinski

This one is is, is Gosh. God, these are too hard. I'm sorry. This one's actually really not hard. The iframe ref Just do line by line. You'll find it. Return. Don't worry. You didn't put a semicolon there. That's Where did I not put a semicolon?

Wes Bos

Everywhere.

Wes Bos

Where? If I.

Wes Bos

Got it. L.hidden eagle.

Wes Bos

You put the arrow inside of the quote of destroy. No. That's that's a string. Oh, yeah. You're right. That's just a console log. Okay. I would I think he used this fancy font with the arrows.

Wes Bos

L that parent node l that parent node dot There's 1 extra curly bracket.

Wes Bos

Oh, don't if the no. No. No. There's not. There's not. I was gonna say there's even curly bracket highlighting on this one.

Wes Bos

Oh, these are this is too hard. Alright.

Scott Tolinski

The the error is on line number 8 once again.

Wes Bos

Okay.

Wes Bos

Oh, there's no car.

Wes Bos

I was skipping over the console log.

Wes Bos

It was because I was like, oh, like, I just when I'm debugging,

Scott Tolinski

I'll skip the console log because it's, like, probably not that. It's the console log. I got it. Alright. So this one I gave you highlighting because it's so tricky. Yeah. You Folks. Well, okay. So some background here. I was gonna go somewhat easy on this. Maybe we should've And Wes was like, I got one that's pretty cruel. And I was like, Okay then. Let's, let's work on this. This is TypeScript.

Scott Tolinski

TypeScript.

Scott Tolinski

I mean, You're doing stuff you probably shouldn't be doing. Right. So you're saying that title is a string of my first post as the type? No. No. You're not. That's the that's your Destructuring. Structuring a default value of

Wes Bos

Man. Okay. God. In the oh oh, the nuts that we can do this Stupid. In in JavaScript. Like, you're like, oh, like, why is the syntax like this? Because people do this. This is stupid. Yeah. I know. It's just not right. Just

Scott Tolinski

not right.

Scott Tolinski

Alright.

Scott Tolinski

So

Wes Bos

Who sees it? You 2, 3, 3 p No. Very good typescriptors.

Scott Tolinski

Very good TypeScriptures. This one's tough to see. Yeah. Should we ask to ask the audience? Alright. Who's got this one? Yeah.

Guest 5

Okay. So the type has to go before the assignment.

Wes Bos

Nailed it. So the, the type right here, It needs to go before the fallback assignment of the structured data.

Wes Bos

That's the key. Okay. Well, like, why would you not just make the type outside that function? Alright. We are going to do audience participation now. You don't To come up this time, you open up your phone. Go to pigeonhole.atforward/sick, and we are going to

Scott Tolinski

J S Or NAES.

Scott Tolinski

So the general premise of this is that we will give you, we'll give you the name of a JavaScript Script library that exists on NPM, or, we'll give you the name of something. Yes. And you have to determine if it's a JavaScript library that exists on NPM. Yeah. Or something else. Else. Or both.

Wes Bos

This is Awesome. Shout out to Pigeonhole. They give it to us for free every time we do it. This is an awesome app that's all built on WebSockets. It's amazing.

Wes Bos

Okay. One zero nine. And everybody live streaming at home, you can you can play along as well. Is, so bcrypt, Is it an offline first crypto wallet built in Python,

Scott Tolinski

or is it a password hashing library for Node

Topic 15 32:24

JS or NAS audience participation

Wes Bos

Or both or both.

Scott Tolinski

Alright. And we have get those votes in. Alright. Just about everyone is in.

Scott Tolinski

There's more votes than participants.

Wes Bos

Okay. Well, let's let's We'll just do it from here. How many did you get? Okay. So

Scott Tolinski

8.4% said it's an offline first crypto wallet.

Scott Tolinski

68% of you got this correct. It is a password hashing library for Node. Js.

Scott Tolinski

Okay. Next one.

Wes Bos

Oh, oh, core or right here. We're gonna say reveal.

Scott Tolinski

Oh, reveal.

Scott Tolinski

Voting heads and elbows.

Wes Bos

I have it yeah. 69% said Said it was a password Hassling library from Node. Js. Good job. Good job. Alright. Next one.

Scott Tolinski

Cherry Box. Is this an HTML Canvas utility library

Wes Bos

or a cherry store in Traverse City, Michigan, or both.

Wes Bos

There it there we go. And now it's now we're working. Down. 61 votes. There we go.

Scott Tolinski

Alright. Reveal that sucker. Alright. The answer's coming. Get it in.

Wes Bos

Oh.

Wes Bos

14%.

Scott Tolinski

Oh, I knew it wasn't right. It is an HTML canvas. You still live. Yeah. I think there's a lot of cherry stores in Traverse City, but I don't know if Cherry Box is one of them.

Wes Bos

Tokens.com.

Wes Bos

It is a Web 3 focused

Scott Tolinski

Crypto investment platform, and online auth and permissions control SaaS, or both? Or both. Oh, you can see I'm streaming it live. Yeah. Let's look at this. Yeah. Oh, yeah. You can see them coming in.

Scott Tolinski

Alright.

Scott Tolinski

Let's reveal.

Wes Bos

Oh.

Wes Bos

Only 99 percent of you knew it was a Web 3 focused crypto so we Actually, fooled everyone. Doesn't that sound like a like a Auth0 competitor or something like that? You know? Oh, yeah. I'm using tokens.com.

Wes Bos

Like, sick. You know? It's not

Scott Tolinski

alright. Next one is pachycephalosaurus.

Scott Tolinski

Is this a dinosaur that head butts

Wes Bos

or a package to patch other packages or both? Oh, I'm impressed at this one. Yeah. Me too. Folks, Get those votes in. Some smart folks in this, audience here.

Scott Tolinski

It's getting good. This one's gonna be really close.

Scott Tolinski

Alright. I'm gonna reveal. Get those answers in.

Wes Bos

Correct. It's just a dinosaur that head butts things. It's got a big old Tony played on that, though. Isn't that a good name for a package that would, like, monkey patch? Like, you know, you have, like, a node package. You're like, oh, damn. Like, You have to open the node modules and, like, just edit the code. Smithsonian. Yeah. Better get on there. But, like, if it was you know how, like, Rack Hillman is built by the NFL? Yeah. Wouldn't it funny if it was, like, built by the Smithsonian or, like, a dinosaur museum? Dinosaur museum. So can anyone work at a dinosaur museum? None. None. Wow. That's surprising. Wow. Yeah. None. I would've thought at least 3. Alright.

Scott Tolinski

Next one is Remux.

Wes Bos

Is it a React package to integrate mux videos,

Scott Tolinski

a term for migrating a video container without re encoding the quality,

Wes Bos

or both.

Wes Bos

We can see the numbers streaming in as you're getting it wrong.

Scott Tolinski

Alright. Get those votes in.

Scott Tolinski

Alright.

Scott Tolinski

Reveal time.

Wes Bos

Yeah.

Wes Bos

That's a term for re encoding video. 65% of you knew the term for re encoding. That seems like it could be a library. That was a that was one where I just made it up. Was like, Remax, that's gotta be a package. Yeah. It's not. I don't think so. They're combining words. There you go.

Scott Tolinski

Alright. Next one, Figgy Pudding.

Scott Tolinski

Is this a JS library for managing and composing cascading options objects

Wes Bos

or an actual dense moist Cake

Scott Tolinski

or both.

Scott Tolinski

Everybody loves Figgy Pudding. I mean, I I don't has anybody seen Figgy Pudding? Who's seen Figgy Pudding? I've never even seen one. Know it from the song. What's Figgy Pudding? Well, it's in that song. What song? That Christmas song. Bring out some Figgy Pudding. Oh, yeah.

Wes Bos

I know. I've never seen a Figgy Pudding. What do we got here? It's Bo.

Wes Bos

27%.

Wes Bos

Didn't know it was Bo.

Wes Bos

What about it? For a library.

Scott Tolinski

That's a great name. And why do you cascading

Wes Bos

Amazing. It actually had, like, a 1000000 downloads too. I'd never heard of this thing. Yeah. Amazing that, like, we're professionals, And this is the name of stuff that we're we're using to, like like, we we're running banks.

Scott Tolinski

And, like, this is the stuff Oh, Reese. Hold on. I just need to install Figgy Pudding, and you'll be right on that.

Wes Bos

Squamish.

Wes Bos

Is it a small town logging town in British Columbia, Canada?

Scott Tolinski

And Nginx package for adding h t t 3 pre h t t p three compression

Wes Bos

or both.

Scott Tolinski

That's a lot of words to say. Alright. This is really fun to see the I love seeing them stream. Stream in? Stream in. Yeah. Sockets, man. Alrighty.

Scott Tolinski

Gonna reveal,

Wes Bos

it's just a small block. 50% of you, it is a small I'm not sure how small it is, but it's in a town in British Columbia. Think you can assume if there's Canadian towns in this small. Is squamish.

Scott Tolinski

Alright. Hajime, Is this a full service, self hosted GraphQL database backed by Redis

Wes Bos

or a short winged swan Or both?

Scott Tolinski

Hajime.

Wes Bos

Oh, man. This one's Oh. People are unsure. People are unsure. Yes, ma'am. We should people to change their votes.

Wes Bos

There's an option, though. Oh, that's an option? Yeah. Because then you could see it, like, go up and down. Okay. Reveal time. Reveal. What do we got? That's Just A Swan. That's Just A Swan.

Wes Bos

Although that that's a great name It's a great name. For a a package. You got a logo built in. Yeah.

Wes Bos

It's true. Short winged swan.

Wes Bos

Last 1 we have here, Treeact. Is it a vanilla DOM rerendering engine for existing content heavily inspired by React? Is it a hashtag

Scott Tolinski

for the controversial straight cut logging operation in Ontario or both? Get those votes in.

Scott Tolinski

Get those votes in.

Scott Tolinski

Reveal time. See it.

Wes Bos

Boom.

Wes Bos

43% of you got it right. It is a vanilla DOM rerendering engine for existing content heavily inspired by React. Yes. It is, and it is not.

Wes Bos

That is not a hashtag for controversial straight cut logging operation in Toronto.

Wes Bos

26 23.6% of you.

Wes Bos

Let's talk about one of our sponsors, FreshBooks.

Topic 16 39:07

FreshBooks sponsor ad

Wes Bos

FreshBooks is the cloud accounting solution for your small business. You're gonna get paid faster. You're gonna spend less time doing, doing your books. They are the easy to use accounting and bookkeeping software that you need to check out.

Wes Bos

Go to freshbooks.comforward/syntax, and that's gonna give you a 30 day, unrestricted free trial. You don't even need a credit card to sign up. Thank you, FreshBooks, for sponsoring.

Wes Bos

Alright. Is that it? That's it. Alright. Let's move on to the next section.

Topic 17 39:37

Audience Q&A

Wes Bos

Q and a. If you've got q's no. You gotta you gotta display the q's to me, Scott. Whoops. If you got a question for us, feel free to come line up.

Wes Bos

You want our thoughts on anything, or, you want us to try to explain something

Guest 5

Podcast. Questions about the questions about how Canada is. How long you should smoke your meats. Yeah. Smoking meats. So, Wes, You said you, are very much in favor of 4 loops Yeah. Versus using, like, array methods. I I heavily use array methods, but there's sometimes where People make array methods harder than they have to be or a 4 loop would save your bit. But sorry. Go ahead. So my brother just Start as a junior engineer. Yeah. And he went through your JavaScript 30 course. Yeah. And he was using dot 4 h for everything. Yeah. And I had to explain him explain to him about, like, How it doesn't work with a a weight and Yes. Or

Wes Bos

and so yeah. Then I heard you comment about, oh, yeah. Poor loops, and I'm like, wait. Am I just saying the wrong stuff all the time? Yeah. So I will reach for a for each or a map or whatever, by default when it's an array. But when it comes time to doing a sync away or, having to modify a variable or an object that is outside of the loop or or anything like That, then I I'm I'm a big fan of for loops. I I'm not like, oh, for loops for for life. I love everything, but, I think people say, no. For loops are bad. You know? Use use array methods. They're considered harmful. They're considered harmful. You know? Like, I saw a talk on it, So thank you. Alright. We got a question here.

Wes Bos

What web tech do you think is overhyped right now, And which is underhyped? Oh.

Wes Bos

Oh. Interesting.

Wes Bos

Over. Alright. That's a that's a jerk thing to say. Yeah. Because, like, people work hard on this stuff, and what I've learned in my career is that there are so many different use cases for something. And when I don't like something, it's probably because I don't understand Why somebody needs something or, like, somebody clearly has a problem, and they say this is how I would like to solve it or within our company. So,

Scott Tolinski

I agree. Yeah. Yeah. I don't that's kind of a non answer. Which one's underhyped? So we can talk about that. I I like, here's a library that not a pop a lot of people know about is, Mercurius is a Graph QL Node. Js library, like an alternative to Apollo or something like that. It's, done by Matteo, who does all sorts of Node. Js stuff, and it's Awesome. It rules. It has data loader built in. It has caching built in. Yeah. It works with Redis really well. It's Fantastic, and it works actually with Cogent really well too.

Scott Tolinski

So, yeah. Beautiful. We're curious. Underhyped. Underhyped.

Wes Bos

Can we get a live break dancing performance?

Scott Tolinski

May I well, I got a microphone on here, and I'm gonna I'm gonna ruin the microphone.

Wes Bos

So no, I guess.

Wes Bos

Do it. Do a little

Scott Tolinski

Woah. Woah.

Wes Bos

Folks at home, the glasses This went flying. Woo.

Scott Tolinski

Wow. No really way. I can't believe you did that. And That's unreal.

Scott Tolinski

I was trying to think, what can I do without ruining the microphone?

Wes Bos

I could do that too, But nobody asked me.

Wes Bos

Would you rather have to switch to Dvorak or have to use a MacBook butterfly keyboard? Oh, that's the one where the crumb gets underneath, and it's you throw it out. You know what I did? I switched I switched my phone to Dvorak

Scott Tolinski

And Not My Computer, and that was a terrible outcome. Yeah.

Wes Bos

I would I would love to switch to a different keyboard layout at some point, But, like, I just don't got the time for that. Ain't got the time. Yeah. So maybe at one point, I'll, I'll do it. So what would I rather do? I I would rather use the MacBook butterfly keyboard. And you just don't eat nature valleys around it, and you're good. Yeah. No nature valley. That's a good rule overall. Yeah. Can you name all 13 provinces and territories in Canada? Scott, can you name them all? The northeast territories?

Scott Tolinski

Northwest Territories? Is that it? Northwest Territories. Northwest Territories. Okay. Nunavut.

Wes Bos

Ontario. Yukon. No. Let's let's do it in order. Otherwise, we're There's a order? Yeah. Well, you gotta go left to right.

Wes Bos

Like, BC.

Wes Bos

Anybody from BC? Yeah. Oh.

Scott Tolinski

Quebec.

Wes Bos

No. Totally.

Wes Bos

BC, Alberta, Manitoba.

Wes Bos

Skipped 1. I skipped 1? Oh, Saskatchewan. My wife is from Saskatchewan.

Wes Bos

Oh my gosh. Yeah.

Wes Bos

Ontario, Quebec, Newfoundland.

Wes Bos

Oh my gosh. I don't know all the provinces. Can you name all the 50 states? I got all the territories, though. Can I name on it? Maybe. Sure. Nova Scotia, PEI.

Wes Bos

What am what am I missing? Yukon. You no. I said Yukon. Brunswick. New Brunswick. Oh, yeah. Yeah. Yeah. That's for me on the movie right now. New Brunswick. Yeah. Good. Good. Good. Alright. Next 1.

Wes Bos

Favorite Syntax FM episode. What's your favorite one to do?

Scott Tolinski

My favorite episode? I don't know. I liked,

Wes Bos

I liked the how to learn things fast one that I had planned a lot. That was a good one. I I really like the fundamentals episodes that we've done, TypeScript fundamentals, CSS fundamentals, JavaScript fundamentals. Those are, like, good, like, go back to listen to those. Then we had the Wordle guy on Oh, yeah. And, like, he emailed us, which was really, really funny.

Scott Tolinski

And yeah. And we were muting mortal on Yeah. We he couldn't get he couldn't reach us because we'd both had Wordle muted on Twitter.

Wes Bos

That was a cool one. Yeah. Lot these ones are really fun in person.

Wes Bos

Lots of good ones. Some of the upcoming, like, interview ones are are really good. You get some really good insights from from folks. And and we also just talk shop about, like, Keyboards and phones and and whatnot. So it's good stuff.

Scott Tolinski

Ryan asked, how did you first meet, and what was your 1st collab? Wes and I met doing a, mastermind group Yeah. With a a handful of people that we were just talking, basically, ripping apart each other's

Wes Bos

Businesses. And I think one of the sessions we had was make Scott cry about his landing page. Yeah. Because we would meet, like, once every 2 weeks And just be like, hey. Like, what are you doing for email and, like, landing pages and, like, what about, like, streaming bandwidth and random stuff? Because we both make tutorials, and we were with Joel from Egghead, and, it was good. And then, like, when we like, we kinda, like, ran that out after a year and a half, and then we're like I was like, hey, Scott. Like, We should do a podcast. And, actually, how I met is that Scott released a course Oh, yeah. Called React for Beginners Yes. I did. On YouTube, which is the name of a course that I already had. And I I emailed him. I was like like, hey, mean guy. I was like, who are you? What are you doing? Like, can you not do that? Yeah. And he's like, oh, sorry sorry, man. And, like, that was really cool because he could have been a jerk. I gotta watch my language here. Yep.

Wes Bos

And, he could have been a jerk, and then we would never have started Syntax. So Life lesson. Don't be a jerk. Don't be a jerk. Don't be a jerk.

Scott Tolinski

Yeah.

Wes Bos

Fitter what's your favorite Trader Joe's snack? Mochi mochi bits. They're, like, crunchy Is that a mochi? Short winged swan?

Scott Tolinski

No. It's not a short wing. It's rice. They're like little rice bits, and they're crunchy, and they're super salty. Mhmm. And honestly, I'm I'm a little salty because they didn't have them right before I left. That's like my airplane snack, and my wife went to Trader Joe's. She's like, no mochi beds.

Wes Bos

My favorite we don't have Trader Joe's in Canada, so we just get the, the peanut butter cups when we go and, like, hot sauces and and stuff like that. So not a whole lot. Oh my gosh. There's Thousands of questions. Do I have stickers? Yes.

Wes Bos

Would you hire an American or a European developer? European. You guys don't use metric, and it drives you crazy. Oh, man. It was 85 degrees the other day. What does that mean? You were just up here. Plus, it's like, it's a hot 20 degrees out here. I'm like, what are you talking about? Yeah. No. Can't Can't do it. Use the metric system.

Wes Bos

Yeah.

Wes Bos

Probably you probably don't use semicolons either, do you?

Scott Tolinski

I don't.

Scott Tolinski

Yes. I don't.

Wes Bos

What do we got? Let's see here.

Wes Bos

Brisket or pork, what's your take? Pork.

Scott Tolinski

Brisket. Really? Pigs are really smart. Pigs are smart. They're very smart. So oh.

Wes Bos

Oh, so it's like a it's deeper than just taste. It's deeper than taste. Yes.

Wes Bos

And cows aren't smart? You ever seen a happy cow? You ever seen that? Where these farmers put these, like, big brushes on a on a spinner, And the cows just go, like Hold on. Let me see. I don't go Happy cows.

Scott Tolinski

Isn't there, like, a cheese company called Happy Cow? Cows make cheese. Yeah.

Wes Bos

And so, like, they have these things, and the cows just freaking love it. They're like, oh, itches.

Wes Bos

So that makes him smart. Yeah. That makes the cow smart. What cow what kinda smart thing doesn't look a good itch? Okay. Yeah. Oh my gosh. So if like, after today, go home. YouTube, Cows that love itches or something like that. I'm not gonna do that. It's great.

Wes Bos

What the Flexbox? Thank you. Words.

Wes Bos

Thank you.

Wes Bos

Why will RN never be as fast as native apps? Ask the folks that were just talking about React Native. I don't know a whole bunch about it. Oh, somebody's asked about BigInt. Let's see. What would you approach validating a product idea For building a small SaaS applications, talk to people. Talk to people. Yeah. You gotta you gotta see what people are struggling with. That's That's the big thing. Right? You gotta figure out what people are frustrated with, and then just put something out and see if you get traction with it. That's kinda what I did with my videos at the first 1st get go is I just put a couple blog posts out there, a couple smaller videos, and eventually, one of them's gonna land. And that's the one that you gotta sort of take it and run with. You you you can figure it out from there.

Scott Tolinski

Yeah. And, typically, if you're having, like, problems and you're solving problems that you are having, You know, maybe other people are having those problems too, and that's a good place to start. Last question here. Henri.

Scott Tolinski

Henri.

Guest 9

What are 2 podcasters listening to podcast wise.

Wes Bos

Oh, Scott likes sick pics of podcast, like, every podcast.

Wes Bos

Yeah.

Scott Tolinski

What are we listening to? I listen to, like, 18 hockey podcasts, so, I don't know why so many. They all say the same thing over and over again. I've been I've been really liking the Steve o podcast. Oh, Steve o. Yeah. Which yeah. The from Jackass.

Wes Bos

Yeah. And so he has a van With, all the recording gear in it. And he drives around and meets people, and he just, like, interviews, like, a lot of these old, like, skater types and, I have some really cool stories.

Wes Bos

Good, and he's always kinda dishing on some stuff that they you know, risky stuff. Yeah. Yeah. Like, he asked questions like, oh, I can't believe he asked that. So The Steve O podcast. I think it's called the Steve O Wild Ride. I've been super into that one lately. Yeah.

Wes Bos

But that is it. I think we're out of time here. Should we wrap this up? Oh, wow. I did. I did. Yeah. That's it. We just did it. Yeah. Wow. Thank you, everybody, for tuning in. That was awesome.

Wes Bos

I got lots of Stickers later. Come say hi, and I'll give you a pack.

Scott Tolinski

Thank you. Yeah.

Scott Tolinski

Head on over to Syntax dot f m for a full archive of all of our shows.

Scott Tolinski

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Share