Syntax Live at Reactathon

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.

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?

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

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.

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

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

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.

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.

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

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

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

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

Canadians.

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

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

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

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?

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.

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,

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.

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.

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, [email protected]/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.

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

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.

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

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.

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

hot take? Hot take.

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

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.

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.

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

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.

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

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.

Can't do it. No.

The next one, for loops are not needed.

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

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.

What did they?

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?

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

Alright. Next one.

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.

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?

Wow.

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

You're done.

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.

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.

That's what I make. Shadesights

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

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.

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.

Classes were a mistake.

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.

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.

Yeah.

TypeScript is overrated and overhyped. No.

No. Oh. Oh, what?

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.

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

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.

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.

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

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

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

Yeah. There we go. Alright.

Okay. So we have a hot mic here.

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

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

the

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.

Pretty close. But why do we do this?

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

hand, actually. Yeah. Is yes.

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

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.

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.

Let's get some stickers out here. Yeah.

Oh, it's

The forgot the first semicolon.

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

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.

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

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

It's Zoom 1 for everybody listening on audio.

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.

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

What is it?

Anybody know? Enforces

layout.

NIEED. Wow.

Mister Moo Tools himself.

What? That's coming.

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

Why did we need

the PNG fix? Why did we need PNG fix?

I'm a be honest.

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

but I have seen this before

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

So Wow.

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

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

Today's youth.

Yeah.

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

So they had a white background.

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.

Alright. On up.

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

Alright. Alright. Let's see.

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

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

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.

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.

Alright.

What is the name of this technique,

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.

Give him the mic. Oh, the mic?

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

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

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

Why are we doing it this way?

Alright. The so it's a GIF background.

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.

And that's in the right?

On the left,

We've got it. The same

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

What's this called, folks?

Anyone got the name?

Did we stump the entire audience?

Sliding doors. Who's that? Sliding doors.

Yes.

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.

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

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

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

Sometimes.

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

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

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

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

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

We're not in arrow functions time yet.

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

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

This and that, I remember.

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

Nailed it.

Exactly.

Nice.

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.

Alright. Well, we need more people.

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

3. 3.

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

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

This this is a cruel one. Yes?

Well, the first one is obvious.

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

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

Yep.

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

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

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

Oh, this one Yeah.

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

What does this statement test for?

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

array dot sort, empty array dot sort.

No. No.

That would be a a very sane guess.

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

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

It's testing for opera, the browser opera.

Really?

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

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.

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

Alright, John.

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.

Mhmm. Mhmm.

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

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

bootstrap.

Beautiful. Thanks, Everybody, thank you. Yeah.

Here you go.

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.

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.

You wanna check it out at, developer.

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

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.

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.

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

What's wrong with this code?

There's 2 no.

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

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

didn't Initialize your last 2 variables.

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

Let's size and number.

Who who sees it?

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

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

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

Ah.

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

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

K. Waiting.

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

Objects, status code, headers.

This is from a Netlify serverless function. Okay.

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

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

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

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

Alright. For West. Alright.

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?

Everywhere.

Where? If I.

Got it. L.hidden eagle.

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.

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

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.

Oh, these are this is too hard. Alright.

The the error is on line number 8 once again.

Okay.

Oh, there's no car.

I was skipping over the console log.

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

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.

TypeScript.

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

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

not right.

Alright.

So

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

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

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

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

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

J S Or NAES.

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.

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.

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,

or is it a password hashing library for Node

Or both or both.

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

There's more votes than participants.

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

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

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

Okay. Next one.

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

Oh, reveal.

Voting heads and elbows.

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

Cherry Box. Is this an HTML Canvas utility library

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

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

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

Oh.

14%.

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.

Tokens.com.

It is a Web 3 focused

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.

Alright.

Let's reveal.

Oh.

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.

Like, sick. You know? It's not

alright. Next one is pachycephalosaurus.

Is this a dinosaur that head butts

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.

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

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

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.

Next one is Remux.

Is it a React package to integrate mux videos,

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

or both.

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

Alright. Get those votes in.

Alright.

Reveal time.

Yeah.

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.

Alright. Next one, Figgy Pudding.

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

or an actual dense moist Cake

or both.

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.

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

27%.

Didn't know it was Bo.

What about it? For a library.

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

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.

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

Squamish.

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

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

or both.

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.

Gonna reveal,

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.

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

or a short winged swan Or both?

Hajime.

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

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.

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

It's true. Short winged swan.

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

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

Get those votes in.

Reveal time. See it.

Boom.

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.

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

26 23.6% of you.

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

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.

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.

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

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.

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

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

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.

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

Oh. Interesting.

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,

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.

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

Can we get a live break dancing performance?

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

So no, I guess.

Do it. Do a little

Woah. Woah.

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

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

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

I could do that too, But nobody asked me.

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

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

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?

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

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.

Like, BC.

Anybody from BC? Yeah. Oh.

Quebec.

No. Totally.

BC, Alberta, Manitoba.

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

Oh my gosh. Yeah.

Ontario, Quebec, Newfoundland.

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.

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.

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

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

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.

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.

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

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.

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

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.

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.

Yeah.

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

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.

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.

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.

Yeah.

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

I don't.

Yes. I don't.

What do we got? Let's see here.

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

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

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

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.

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

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

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.

What the Flexbox? Thank you. Words.

Thank you.

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.

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.

Henri.

What are 2 podcasters listening to podcast wise.

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

Yeah.

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.

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.

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.

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.

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

Thank you. Yeah.

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

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