Syntax Live at Reactathon

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

the web. Yeah. Turning it off, you're gonna have a bad time. Bad time in 2022. Yeah.

I think the I think that JavaScript is a pillar of of the

Because, like like, form like, we looked at it in Ken's talk yesterday. Like, forms are already built into the browser 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.

without JavaScript. Forms should work without JS, and accessibility should not be broken when JS does not Load.

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

Yeah. Of of whatnot. But I don't know. I don't know. I think, like,

Classes were a mistake.

My favorite episode?

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

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

Woah. Woah.

Oh.

Yeah. And, typically, if you're having, like, problems and you're solving problems that you are having,

and I'm gonna I'm gonna ruin the microphone.

and it works actually with Cogent really well too.

Brisket or pork, what's your take? what I've learned in my career is that Today is a live podcast, and the plan for today is,

What are we listening to? I listen to, like, 18 hockey podcasts, so, what does this code do? Oh, jeez.

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.

Quebec.

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

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

Scott, can you name them all? The northeast territories? So, Yeah. Oh.

Yeah. And so he has a van and we are going to button off for the right hand side,

What do we got? Let's see here.

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 Yeah. We will answer it confidently

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

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

Thank you. Words.

Oh my gosh. Yeah.

Ontario,

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.

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, and IE 6 did not support transparent

there are so many different use cases for something. And when I don't like something, it's probably because I don't understand 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,

Pork.

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 Oh, man. This one's Oh. People are unsure. People are unsure. Yes, ma'am. We should people to change their votes.

and the cows just freaking love it. They're like, Oh, don't like, we all love to trash talk all day on Twitter. Right?

BC, Alberta, .net. Hit me up. A good website should function array dot sort, empty array dot sort.

What the Flexbox?

I don't.

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

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

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

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.

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

Probably you probably don't use semicolons either, do you? That would be a a very 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.

Yeah.

Henri.

2 podcasters

having to modify

No. Totally.

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

by default when it's an array. But when it comes time to

What am what am I missing? set of, 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, That's why I say JavaScript funny. Woah. Hey. Canadians.

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.

Thank you. Yeah.

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.

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.

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.

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.

You want our thoughts on anything, or, No. That's not the case in this one. Oh, my gosh.

Can we get a live break dancing performance? And then we're gonna wrap it up with q and a. So if you have any questions about literally anything, life, love,

So no, I guess.

PEI.

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,

What are

Anybody from BC? Oh. Interesting.

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

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

Yeah.

listening to podcast wise.

Yes. I don't.

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

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

right now, And which is underhyped?

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

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.

May I well, I got a microphone on here,

You know, maybe other people are having those problems too, and that's a good place to start. Last question here. Henri.

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.

So,

Why will RN extend much wider,

oh, itches.

My favorite we don't have Trader Joe's in Canada, so we just get the, and we were with Joel from Egghead, and,

Wes and I met doing a,

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

What web tech do you think is overhyped Anywhere. You, Bologna. Just anywhere. Yeah. Oh, it's a hot take for, or a short winged swan Or both? Yeah.

1st get go is I just

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,

With, all the recording gear in it. And he drives around and meets people, Absolutely.

nature valley. That's a good rule overall. Yeah. Can you name all 13 provinces and territories in Canada? Is it an offline first crypto wallet built in Python, Landscape for partners that are interested in programmatic merchant onboarding and accessing So thank you. Alright. We got a question here.

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

Thank you.

you want us to try to explain something

I don't know. I liked,

Yeah. Yeah. Who doesn't think we should get types in JavaScript? jerk. I gotta watch my language here. Yep.

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

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

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? we're using to, like like, we we're running banks.

Or just forgot or blacked out ES 4 Harmony and its chaos.

Wow.

done.

You're

People that are excited about for static typing in native JS weren't there for

Mhmm. Mhmm.

coming.

I'm not sure.

and it would

What? That's coming.

The name of this one was also very a very popular It's true. Short winged swan.

Is

it's I see filter,

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

like,

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

It's testing for opera, the browser opera.

Really? 3 selectors do? Underscore padding, Star padding I'm gonna go I'm gonna go I agree.

I started in 2016,

This is the last one. Why is there a bang

Okay. So we have a hot mic here.

of the

compatibility for stuff in, like, 2017.

postcode and pasted it. I don't understand how it worked, but it it made transparent PNGs have a transparent background in IE 6.

and padding 10 p x forward slash 9.

Back in the day, we had 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.

Alright. Well, we need more people.

Yes.

Anyone got the name? a term for migrating a video container without re encoding the quality,

Pretty close. But why do we do this? I I'm wondering if this guy thinks

What is it doing?

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.

bootstrap.

layout.

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

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

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.

And applying this bizarre Do it. Do a little Ah.

Mister Moo Tools himself.

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

Why are we doing it this way?

the source object

Oh, this one Yeah.

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.

object

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

That's a good question. What's the purpose of it?

So by adding a 1 pixel by 1 pixel blank GIF

macromedia.

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

PNGs.

so this should be familiar.

Working on working on IE,

Yeah. There we go. Alright.

It's Zoom 1 for everybody listening on audio.

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

Anybody know?

So people would say, my bank website's broken On Opera. This is before Opera used the engine same as Chrome, you would put you would make a very, Very, very long longer than you could possibly ever need That is not a hashtag for controversial straight cut logging operation in Toronto.

you're passing jQuery in to be consumed

So Wow.

does this code do?

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

We've got it. The same

NIEED. Wow.

Alright. Alright. Let's see.

the dollar sign

But I would just don't remember. It's Probably,

background gradients and bat and, rounded corners, you if you wanted to have a button or a link And you wanted for that to, Oh.

From the function itself and only in the function itself.

inside in front of this function?

I'm a give a general answer. It's it's to maintain

What does this statement test for?

This and that, I remember.

Give him the mic. Oh, the mic? I have some really cool stories.

style sheet and JavaScript Like, stands for

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, Okay. One zero nine. And everybody live streaming at home, you can you can play along as well. Is, BC.

Alright.

the right this context.

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

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

if you had a button you wanted to change the background on, It would then,

pretty pretty wild times. Yeah. Wild times. Yeah.

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

We're not in arrow functions time yet.

So sliding doors was before we had

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

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 Oh, wow. That Before we had hover states in CSS, 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, 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 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,

Let's get some stickers out here. Yeah.

Sliding doors. Who's that? Sliding doors.

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

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

you're calling

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

The underscore is IE 6 An arrow. An arrow function. Good. Love it.

Would be, uh-oh, cops or a package Alright. Let's go hang out after. Yeah.

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,

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

So this,

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

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

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

the PNG fix? Why did we need PNG fix?

Nailed it.

Who figured that out? And the funny thing is that opera back in the day Had an entire

Enforces

Well, the first one is obvious.

then

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

Sometimes.

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

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

I got a hold of it. It is too hard to maintain that that deep voice. You know what I'm saying? Cherry Box. Is this an HTML Canvas utility library

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

Beautiful. Thanks, Everybody, thank you. Yeah.

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

3. 3.

This this is a cruel one. Yes?

the

Yep.

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.

thing with petting. I've

sane guess.

hand, actually. Yeah. Is yes.

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

I'm a be honest.

being targeted is an array?

or the source for the image. Yeah. We got an array.

Alright, John.

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.

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

Alright. The so it's a GIF background.

So they had a white background.

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

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

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

Are we trying to figure out if the

What is the name of this technique,

but I have seen this before

What's this called, folks?

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

so it probably has to do with transparencies.

How

Looks like it's affecting,

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.

No. No.

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

that would fix popular websites.

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

they would just fix websites. They would just, like, monkey patch all these websites And I should say this is not, like, old. Like, we still do this.

Oh, no.

Oh, it's

And that's in the right?

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

It is a a curly, Nice.

code, headers.

a default value of

Alright. Who's got this one? Yeah.

There's 1 extra curly bracket.

I mean, TypeScript is overrated and overhyped. No.

what is wrong with this code? Why did we need

Initialize

didn't 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, There's 2 no.

What's wrong with this code?

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

L that parent node l that parent node dot 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, Nailed it. So the, I could do that too, But nobody asked me.

this is TypeScript, in case you're wondering.

bcrypt, Yeah. 1st one's obvious. Just padding t 10 p x. I Did we stump the entire audience? if the no. No. No. There's not. There's not. I was gonna say there's even curly bracket highlighting on this one.

It needs to go before the fallback assignment of the structured data.

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

Alright.

Okay.

let's work on this. This is TypeScript.

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

Where? If I.

Got it. L.hidden

Who who sees it?

No. No. You're not. That's the that's your Destructuring. Structuring

wait. Yeah. We need a we need a parenthesis. Nailed it. Wow.

Alright. For West. Alright.

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

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

TypeScript.

Oh, there's no car.

so So this, the PNG fix was a little library you could add, I sleep at night. I don't use them. I sleep fine.

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

Where did I not put a semicolon? And we need a, Nicholas,

we'll give you the name of a JavaScript Script library that exists on NPM, You're

not right.

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

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

Objects, status

2, 3, 3 p No. Very good typescriptors.

K. Waiting.

The the error is on line number 8 once again.

something else. Else. Or both.

So the general premise of this is that we will give you,

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.

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 rich product 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,

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

Let's size and number.

Everywhere.

or,

I was skipping over the console log.

J S Or NAES.

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

This one is is,

is it a password hashing library for Node

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?

your last 2 variables.

or

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

Oh, these are this is too hard. Alright.

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, of you got this correct. It is a password hashing library for Node. Js.

This is,

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

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

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

eagle.

sick. You know? It's not QR code. How 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.

cascading options objects

43% The forgot the first semicolon.

or both?

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.

Alright. And we have mastermind group Yeah. With a a handful of people that we were just talking, basically, ripping apart each other's

And Nginx package for adding h t t 3 pre h t t

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

get those votes in. Alright. Just about everyone is in.

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.

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.

Only 99 percent of you knew What is it? 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, oh. Oh, boy.

68%

Didn't know it was Bo.

I have it yeah. 69% I know. I've never seen a Figgy Pudding. What do we got here? It's Bo.

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

of you got it right. It is a vanilla DOM rerendering engine What did they?

Alright. Hajime, Alright. Next one.

Get those votes in.

Next one is Remux.

Oh, reveal.

Is this a full service, self hosted GraphQL

26 23.6%

Okay. Well, let's let's We'll just do it from here. How many did you get? Okay. So Who sees it? You Any operation that yields, Nan, should simply throw an error. And this one this one had me go, Manitoba.

Okay. Next one.

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

Hajime.

Boom.

It's

Is this a JS library for managing and composing

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.

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

Yeah.

or both.

Is this a dinosaur that head butts

Get those votes in. Some smart folks in this, 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.

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

Is it a small town logging town in British Columbia, Canada? And so, like, they have these things, and he just, like, interviews, like, a lot of these old, like, skater types and,

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.

There's more votes than participants.

or both.

Alright. Next one, Figgy Pudding.

Reveal time.

for existing content heavily inspired by React. Yes. It is, and it is not.

And, like, this is the stuff Oh, Reese. Hold on. I just need to install Figgy Pudding, and

Squamish.

Is it a React package to integrate mux videos, So folks who want to try to win at this game, please line up over here. Come on down.

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

Tokens.com.

alright. Next one is pachycephalosaurus.

p three compression

Oh.

Like, The next one, for loops are not needed.

Voting heads and elbows.

or both.

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

8.4%

Alright.

or an actual dense moist Cake 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,

to patch other packages

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.

27%.

you'll be right on that.

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

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

FreshBooks.

backed by Redis

Let's reveal.

Alright. Get those votes in.

said Said it was a password Hassling library from Node. Js. Good job. Good job. Alright. Next one.

said it's an offline first crypto wallet.

Gonna reveal,

of you.

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

None. None. Wow. That's surprising. Wow. Yeah. None. I would've thought at least 3. Alright.

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

Reveal time. See it.

Oh, I'm impressed at this one. Yeah. Me too. Folks,

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.

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

What does this code do? What's it do? What does it do? And if you I got stickers.

I'm

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.

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

No. Oh. Oh, what?

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

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

Okay. Let's get the audience. Let what do you think about this? Can't do it. No.

K. K. So

Oh. Technically.

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? 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, 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? doing a sync away or, Over. Alright. That's a that's a jerk thing to say. Yeah. Because, like, people work hard on this stuff, and 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 Alright. On up.

making everything an array method.

before Crypto investment platform, and online auth and permissions

entry.i0.

your users email you saying there was something wrong. Thank you to Century for a sponsor. A good website

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

webshate? Webshate. That's what you make. Right? Webshate.

That's what I make. Shadesights

if you have your phone, we have a q and a coming up. Feel free to drop your q's and a'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.

if even if we don't even know what we're doing. That's how it goes. Yeah. The URL for today, Oh, so it's like a it's deeper than just taste. It's deeper than taste. Yes.

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, hot take for a reason, folks.

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, 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? Sorry. They did anyone else get beer as part of their presentation? Newfoundland.

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

and attempt to answer them all.

breakdancing.

hot take? Hot take.

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.

JavaScript barbecue. Barbecue, Or both or both.

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

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.

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

So I'm pretty stoked about that.

[email protected]/sick 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? And this is coming from the original Twitter Bootstrap.

I asked people on Twitter,

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

Awesome. Thanks so much for coming out. This 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, This was the code generated from Dreamweaver file

companies. We're talking about Century, Alright.

And, I would I would love to switch to a different keyboard layout at some point, Go to freshbooks.comforward/syntax,

Enjoying it. Yeah? 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,

soft skills, everything, web development. So hasty treat on a Monday, we do, like, a 20 minute episode, something nice and short.

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?

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

We have a podcast called Syntax, It was because I was like, oh, like, I just when I'm debugging,

we do

2 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,

They are an easy to use API and SDK that allow developers to create ecommerce websites,

Paymentshub.com Okay. Get Out.

syntax. Thank you, Payments Hub, for sponsoring.

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.

Here you go.

It's pretty sweet. I went through all of their

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 This is from a Netlify serverless function. Okay.

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/ It is a Web 3 focused Let's talk about one of our sponsors, Yeah. But, that's good. We should get him to do the intro.

omnichannel payment solutions. They have an API is super exciting.

Develop in person point of sale applications and launch a fully featured 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.

You wanna check it out at,

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.

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

payment transactions through API. So if you're building of course, if you're building, Would you rather have to switch to Dvorak or have to use a MacBook butterfly keyboard? What about it? For a library.

developer.

documentation myself. I even sent them, audience here.

Canadians.

some people are much smarter than us. So, we thought we'd bring on some some people, so Buckle up for that.

Mostly Instagram as well.

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

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

Yes. Canadians make the best developers. I'm I'm at Wes Boss on Twitter, We can see the numbers streaming in as you're getting it wrong.

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

I don't think so.

Woo. Yeah. It's gonna be all interviews with people. We don't do a ton of interviews, and, the type right here,

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

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

Yeah.

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.

doing your books. They are the easy to use accounting and bookkeeping software that you need to check out.

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.

FreshBooks is the cloud accounting solution for your small business. You're gonna get paid faster. You're gonna spend less time doing, Today's youth.

and that's gonna give you a 30 day, But, like, I just don't got the time for that. Ain't got the time. Yeah. So

We have another dynamic duo for you.

This episode is is sponsored by 3 amazing Ryan asked, how did you first meet, and what was your 1st collab?

Extremely excellent educators,

live and in person

So they are here to host a very special

On Stage. Please put your hands together for Scott Dalitsky and Wes. Bye.

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

episode

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.

You should enforce them. Enforce them not being here. People that don't use semicolons,

I I like it. I don't like it. Because so here, I was refactoring a whole bunch of common JS,

It just adds to jumping around in the file to see what,

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?

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

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

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.

Semicolons should not be there at all. Like, the option should be don't have them or entirely.

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