React Miami Live Show

Welcome to Syntax.

This is the React Miami live version of the podcast. Thanks everybody so much for coming on out.

This is gonna be a little bit of a different episode than normal. We're not just gonna be sitting here talking about lame CSS rules or something like that, but, we got all kinds of fun stuff planned for you today. Hi. I'm Scott Tolinski. I'm a developer from Denver. You can find me at s Tolinski on all of the social media. I'm Wes. I'm a developer from Canada. Any Canadians in the room? Syndax is officially a Canadian podcast about web development, so make sure you grab one of the Syndax Canada stickers.

This is the whole Syndax team. Wes Bos, me, myself, Caitlin Blum, Ben Vinegar, Randy Rector, and CJ Reynolds, we're all here today. Say hi.

Give it up for Randy on the knobs today. Yeah.

So we're a podcast. We've got hasty treats on Monday, tasty treats on Wednesday, and supper club on Friday, which is our interview style podcast.

And today, we've got a live podcast for you.

So the plan today is that we have a lot of segments. The first one is going to be we shouldn't have put this one first. Yeah. It's gonna be tough. I'm kinda worried about this one. Map filter reduce, where we've given each other a map filter, well, map filter and reduce, and you have to determine the output just by looking at the code.

Next up is syntax error where we try to stump each other on syntax bugs that we've, deviously hidden in code.

Wes got JS or NAAS, which we're gonna get audience to participate in. You guys get your phones out. You're gonna, vote on whether something's a JavaScript library or a made up word.

We'll have a an audience stumped. If you're brave enough to come up and have us badger you with questions about server components or weird CSS issues, we got it for you. We got a a free T shirts for Yeah. The winner itself. Yeah. It's gonna be pretty sweet. So grab your phone, QR code this sucker up, because we got a couple live things that are necessary for this.

This will be available again later on the show too. So pigeonhole.atforward/sick.

You don't need the caps. Yeah. You don't need them? Oh, you checked it. That's good.

Alright. MAP filter reduce. We give each other a chain MAP filter reduce, and the other person must find out what the output is. Scott, are you ready for your I gotta go first? Map filter reduce.

This is gonna be brutal. Oh, no.

Okay. Oh, man. Why you do this? Audience as well. You try to figure it out. Student name length times the student score. Okay.

So out of the first one, you get the properties.

So you get individual, name, score, and then points.

So for Wes, it's obviously going to be 3, times 2. We have, that is 6.

I don't wanna do this, Wes. Wait. Are you are you on are are you on the map? Sorry. I shouldn't have made you do math in front of a bunch of people. Yeah. Well, how about anxiety

making thing ever. I'm just gonna ignore that part for right now. Okay. The filter, okay.

Come on.

What what for bonus points, what's that little thing called? Modulobe.

Wow.

What does it do?

How many times something goes into something else? Or is that that's division.

Yeah. That's division. What remainder.

Bam. Got it. Remainer. Model. Oh, come on, Wes. Okay. After something has been evenly divided by 2, how many are left over? Okay. So that really gives us only the even ones. So which ones are even? So Wes is even. CJ is going to be even.

2 times 4. Okay. Scott is 5 times 3, not going to be is that even? Node. 5 times 3.50. No. Not even. A note. Yep. Okay. So so so far, we are filtering out Scott. We have Wes, which is, now points of, 6. CJ points of 8. Yep. Okay? And the reduce, we are adding the student points together, and you're just returning the points.

So the point is, we have 6 plus 8 equals 14.

Fifteen. What?

Wait. Did I get that? Yeah. I must have got it right.

Audience, what did we do wrong here? What did I do wrong? Only Scott is kept. Only Scott is kept. Why? Why? Because the module results in 0. I did the opposite. Module let me stand up for this one. Module results in 0, which JS, say it with me, faulty.

Brutal. Filter. You return a faulty value from a filter. It does not keep it. Yeah. Mine isn't this hard, so thank you. I thought I I thought you got it. Yeah. I pulled this up, and I was like, oh, maybe this is a bit too hard.

Sorry about that. I did come up with this game, though, so it's on me.

Alright. For me alright. Scott data, job producer, producer, podcaster, designer, data map, bring the job back. So we got an array of strings, producer, producer, podcaster, designer.

Filter where the job does not equal designer, so we have producer, producer, podcaster.

Then we reduce.

We start with a blank object.

We set the accumulator's current string of producer, podcaster, podcaster to be equal to itself or no. If it exists, it's going to be itself plus 1 or it's going to be 1. So you're just tallying up, which by the way, you don't need this anymore because of object dot group by. Doesn't matter.

So the answer will be producer 2, podcaster 1.

Let's see.

Oh. Oh. Oh, hold on. Hold on. Hold on.

There.

Do I get a T shirt? Thank you. Thank you. That was good.

We did the 2 hardest

things for us first. Actually, all of these are kinda brutal. Yeah. They're all Yeah. We I we always forget this. Syntax error. We show each other code with no syntax highlighting, and the other person must find it. It could be either a syntax error or a logic error for Scott.

K. So

you can you can ask 1 person in the audience for help. The interface looks fine.

The user document has 2 IDs, which I guess is fine.

1 is a number. 1 is a string.

Export default async function.

Save user promise user document.

Is okay. I don't I can't answer anything. It's not that the fetch you don't know there's it's not that there's not a type card on the fetch. Yeah. And you have syntax highlighting in here for me. I intentionally put it on. I was like, this is so good that I can put the syntax highlighting on.

I'll give you a hint. It is a syntax error. It is a syntax error. Oh, man. I gotta, like, blur my eyes to see this.

You're you're gonna kick yourself. I know. How many of you guys see it?

Gosh. Darn it.

That's a pressure. This is something I do at least once a day.

I don't know. I don't see it. Alright. Audience.

Interface.

Interface. Interface does not need a A semicolon.

Nope.

Interface does not need an equals. Equals.

I don't use interface that much. Well

Yeah. TypeScript.

We don't need your propaganda, Ken. Yeah.

Alright, Wes. For me. Alright. Import React component from React. Class button component extends component. Constructor props.

Remember class components? Yes. When was the last time?

Okay. My first thought JS, do you need a super in the constructor? Does component take anything? So then we Scott handle click equals that.

Problem not inside this function. Okay.

Render return.

Is it it's the return is not on the same line as the No. That's fine. That's fine. That's just

a that's fine. That's fine. I think it's just a image thing. It's not an image. That's not the intention. I can see the line numbers. I know. It's not intentional. Okay. Well, I I extra point for that one.

That's that's right. Right? Like, you can't put the return on the next line if you don't have parenthesis. Okay. Yep. It's React. Okay.

Syntax highlighting was turned off.

You need a comma after the instance methods.

You need a super. Need a super. I said it.

Hey.

You did say it. Remember you needed, like, commas and weird cases, though? Yep. That was weird. Yeah. Yeah. Alright. For Scott, this one does not have syntax highlighting in it.

You are defining the type, then you're yeah.

The equals to an object. I feel like that is the wrong order of things.

Let me just check the rest of it.

I did that to you last live episode. Did you really? Yeah.

I gave you the wrong syntax for the default destructured object.

I isn't this the wrong syntax for the Node,

gosh. Darn it. Kind of. Yes. Yeah. You're look. I'll tell you. You're on the right line. It's the first line. Okay.

Function, user, card.

Let's see.

Oh, man. You're crushing me.

Did I make these too hard for him? Wait. I feel kinda bad.

I was seeing red when I was doing them. No. This is the fine. That's fine. Okay.

User is I mean, we'd obviously don't know what user is. User is users destructed.

Yep. D yeah. Okay. So users should should be the variable user, not inside of brackets.

Right? Because this is React. Yeah. This is React. It's props.

Now I don't write React.

I don't see it. What is it? Alright. Gotcha. Audience.

Wes should have a timer. Right here. What?

Yeah. Exactly. So the d the the destructured default value should be inside a property called user because you are destructuring user prompt. So I was on the right. You were on the I was looking into him. We'll give it to him. Round of applause. Yeah. Oh, hey. I don't want your pity.

Alright. Alright. Numbered list. Destructure the numbers. Consting equals list. Return u l list items.

Is this this is not React.

You forgot the dot join, which is going to give you a semicolon as you stringify an array.

I think it just might be cut off.

What? I Scott this. But that's an error. Yeah. Oh, you know what? Because you use that library that you don't need to join your arrays.

Yeah. That Node. Okay. Yeah. So that's not the issue? I cut I yep.

You're

I intentionally made these easier. Because last time I was too rough on you. The implicit return and opening No. LI needs to be on the same line. Is that not a line, folks? Node? Okay.

Oh, numb no.

No. Node JS, no. You can have a Vercel number. This is a future question.

Node is not a reserved word.

No. Is it? No. No. Alright. I give up. Audience? No key.

No keys. No.

You don't need keys. Yeah. Honestly, it's have you ever not used a key and it's fine?

Yeah. It works.

No. Keys are dumb.

Okay. CSS. Thank you. This one this one is tricky.

Transform. Okay. So translate x looks fine. Translate y. Let's see.

We have let's check the parentheses.

3 open, 3 close, 2 open, 2 close, var var move, move 10 pnpm times negative 1 px, and that's inside of the calc.

Calc needs a no. No. No. I'll tell you, it's not a syntax error. It's not? It's a it's a this would run-in the browser, but not give you a value. Okay.

Why? Why? Let me see this. Calc, there's no misspellings. It's not something devious like that. Nope. Yeah. Var move is is fine both times. Those are both pixels. You're multiplying pixels. There's nothing crazy there.

We need well, it How many of you see it. Can you do a translate y and a translate x to separate properties? Yeah. You you can. Quick. Because I never do that. That's fine. Always three d.

Oh, yeah. You pass them to a a a trans translate 3 d and pass all 3 in 1 instead. And I don't think you don't need a comma between those 2. No. No? Should I give you a hint? Yes. It's something to do with the way that I'm calculating.

Yeah. That's kind of what I was looking at. Anybody see it?

Aw, man. They're like, give give a sec. Yeah.

Calc.

I don't see it. What is it? Alright. Help me out there. What do Wes got?

Exactly. You cannot do calculation of Vercel values. If you want to if you wanna flip a pixel value to be its negative counterpart, you must multiply it by negative Node and not negative one p x.

Boo. And not a hard ask me how I know.

Alright. Last 1, import for React, Node from React interface props.

Type submit.

Oh my gosh.

Can I ask Kent to help me with this one? Fancy buzz in his friend.

This one hurts me. Yes.

This one hurts me too. Yeah.

Oh, you can't add class. It's class name. Class name.

Man, I was, like, deep into the, like alright. How do you make, like, a flexible type that can extend the HTML attributes, but you add your own? Forward ref was a red herring. Yep. You got me. Yep.

Alright. JS or Nas, open up your phones. We need everybody to be voting on these.

Okay.

Esno, is this a JavaScript compiler and TypeScript checker written in Rust with a focus on static analysis and runtime performance?

Or is it Gen z slang for easy no used to quickly shut down your friends' plans? For example, hey. Wanna go see Machine Gun Kelly this summer? E easy no. Ease no. Eze no. Eze no. Or both.

Alright. Lock those votes in, folks.

Well, let's see. Alright. Let's Alright. Get your votes in.

And the winner is it's a JavaScript compiler.

39% of you. So most of you guessed wrong in that it is a JavaScript. And it it that's actually kind of exciting that it's a a TypeScript type checker written in Rust, not just a TypeScript.

Good. Wow. We we got them.

Alright. Who is invented with inventing up the Boolean? Ada Lovelace.

George Buhl.

Grace Hopper. Dan Abramov.

Alright. Ready to go? Get your votes in. And And I'm gonna hit go.

It's Joel. George Boole, 63% of you got that correct.

10% of you thought Dan Abramov. He invented React, silly goose.

Next question here.

Which of these statements about MySQL is false? The my sequel dolphin is named Sekila.

My my s q l, which is the way you pronounce it, was named after the inventor's daughter, Mai.

Or PlanetScale attempted to fork my sequel after licensing disagreements in 2020? Which of these is false? False. Which one is false?

Oh, some of you goofed it up. That's okay.

Some of I think you'll be surprised at this one. Which one is false, you flip it? Let's get have it, Scott. Let's see it.

Boom.

Oh, wait. No. That's wrong. That's wrong. I did that wrong. What? What? No. No. That's right. No. That's right. Have done the negative. Which one is false? PlanetScale did not attempt to forecast SQL. So the the MySQL dolphin's name is Zequila, and MySQL was named after the inventor's daughter whose name is Mai.

That's real.

What is Vextor, a library for validating and extracting JSON database on schemas.

Brand name for the Venlafaxine antidepressant medication in Mexico or both? Get your votes in.

Vextor.

Vextor. What are we gonna do? Let's see it.

Both 62% of you got it correct. Got it.

I thought that Node would get them. Got it, guys. I'm impressed. I'm impressed.

Alright. TikTokin, is it a fast byte parent coding tokenizer for use with OpenAI's models?

A ByteDance's design token generator that outputs to CSS, JavaScript Tailwind, SwiftUI, and Android Compose, or both? Yeah.

Yeah. Bytedance is the parent company of TikTok, if you haven't if you didn't know that. I'm sure. Get your votes in. Guys are Americans, so I'm sure you've heard about that.

Sorry about that. It is a fast byte pair encoding tokenizer. Only 49% of you. So we tricked Wes tricked half of the people here Yep. Thinking that it is a design token generator.

Didn't the Android part throw you? Android part threw me. Yeah.

Alright. We got 2 more questions here. 2 more.

Zuber, is this Uber's zoo stand based state machine library for architecting real time UIs.

Is it an unincorporated community in Marion County, Florida or both?

Zuber.

This one's for the locals.

It's an unincorporated community in Florida.

34% of you incorrectly guessed that it JS an Uber's Suzanne based tape machine library.

That's pretty believable, don't you think? Yes.

Last Node, Temporal. Is Temporal an Australian metalcore band which disbanded after 2 years in 2012?

An upcoming standard library for JavaScript for working with date and times or both? Get your votes in.

Ready?

And both.

63% of you got it correct. Both. Congratulations.

3 only 3%.

Node person got all of them right. Who was it? Woah.

That's so impressive. We should get him something. Yeah. Give him a shirt. Alright. Come see us after. We'll give you a code for the Syndax Wes store. That's impressive.

No. Not right now. But Yeah. Not right now. Alright.

We're kinda doing a show.

Yeah.

Alright. Audience, who wants to be stumped? We need 4 people who are willing to come answer a trivia question. Come on up. Come on up.

Or or we'll get the runner, Mike. Whatever.

Alright. What's your name? Rob. Rob.

Alright, Rob. We got a question for you.

4. Right? Yeah. 4. We got 1, 2 3. 3. One more. Number 4 right here. Yep. Just Dial X. You can come up. We'll we'll I know what we got. No. We already Scott. We got 2. Alright. I'm sorry. We got them.

Wes have them we're having them on the podcast anyway. It's okay. Yeah. Alright. 1st Wes. On a blank HTML page Wait. Who are we asking this? Who are we asking? Me? Okay. On a blank HTML page, the body element has what default spacing property and value applied to it? Border Bos? Space? I have no idea. So the body element GitHub a reset, you got a bunch of spacing around. So it has no margin? Yes. It has a margin of how many pixels? 18.

No. Who's got it? 12? Deno. Nope.

16? No. 8. 8. Who said 8? Nice. That's good. Yo. You get a prize anyway. Just send us a DM, and we'll give you a code for a shirt. Everybody gets The body has a default margin of 8 pixels.

Alright. Next Wes, Dev.

What's your name? Dev. Dev.

React DOM's use form state was recently replaced with what hook for working with server components?

He might know this one. Use action Scott? Woah.

Use action state.

I'm I'm impressed because it's not in it's not in anything yet. It's not in Next. Wes, therefore, not in React.

Alright. What's your name? Search.

Serge.

What are the 3 valid options for a form method equals blank. Get post pnpm.

Nope. Nope. You want it? Correct. And Dialog.

Dialog.

Damn.

The what? That JS a hutz. That was a tricky

answer. Follow-up question.

Why is get posted dialogue the third one?

So you can close

the dialogue.

HTML has a way to close the dialogue. You must use JavaScript to open the dialogue. Thank you.

I went deep on the the GitHub website for that one. Michael. Michael.

Good. Thank you. Oh, thanks, Rainey. Send us a DM, and we'll get you a

a shirt. Next question for Michael.

Name eight reserved keywords in JavaScript.

Alright. Don't don't look at the screen. I'm gonna show them all. We're gonna show them. So you Scott look at all these people.

I gotta guess the ones that you have oh, you have a lot of them. There are a lot of them. Yarn a lot.

For, switch, function, class.

Why am I there? Default.

Function. Vercel.

That's Oh my gosh. He's got a mom. Keep going. How many names can you do? Alright. We're just gonna click them all. He's got them. Keep going. Keep going.

Await.

Yeah. Yeah.

Try, catch, replay.

Recently.

Alright.

I see. Nice job.

Awesome job. Thanks, everybody. Alright. The last section we have here is q and a. If you've got a question for us, either we got Caitlin on the mic right here. Just throw your hand up. We'll answer it. You got a question about how do server components work, what is love, whatever you want. We'll answer it. You ask it or submit a question on the pigeonhole in person or online.

Oh, yeah. I guess we gotta open up the Yeah. We do have 1. We have 2 in let's see.

Who codes better, Wes or Scott? Let's ask the audience. Who do you think is a better coder? Wes or Scott?

Clear clear winner on that one. Scott is a much better coder than I am. Thank you. Wes did Scott get his dope shirt? Mac Weldon. This shirt is from Mac Weldon.

That's a dope shirt.

Have you guys struggled with Next. Js caching as much as Sam? How do you say he's the same? Selikhoff. Selikhoff did yesterday on stage and Me on My Side Projects. Yeah.

Node. That's true.

Yes. I have been using the unstable cache, which where you can tag them. I really like that API, but, yeah, it's, and, honestly, the amount of times in my career that I've, like, cried because of caching is is more than 7. Yeah.

So It's always caching. Yeah. It's it's always caching. Like, when I did Apollo, we would have pagination, and you would cache all of the items in the pagination. But then you add an item to the front, so you have to, like, ripple delete every other page. And, like, it's it's always just a big pain. So I think we're gonna be trying to figure this out for a while. Alright. Let's see. What is better than React? Smelt.

Solid. Sorry.

Smelt.

What else? I yeah. I think we just named all of them. Sorry. Literally everything, but who cares? Because React is king.

Well, isn't it just the man? Coming in. Yeah. When will you get Tim Berners Lee on the podcast? That would be sick. I tried to do it loud there. I go which 1? We did that one. Scott's a better coder than my than us. Yep. Yep. No no problems with that. What is your favorite CSS property?

Low key, I like aspect ratio. I use that all the time. Aspect ratio for me. Oh, man.

I've been liking, inset and inset block.

Inset rule. I'll stand up for this one. Anybody tried inset block before? If you wanna set left and right values in the same swoop, inset 0, and it will set left 0 and right 0 in one go. Because block are the new logical properties where you can set left and right, and then, oh, no. Block is top and bottom. The other way around. Yeah. Modal's easy for that. Yeah. Yeah. Insight 0? CSS is awesome. The color mix stuff, I'm really excited about.

All the new HSL stuff. Wes, what is your least favorite thing about the current state of React? Oh,

I I will tell you it was freaking binding to form input events and updating to state. Like, what a pain in the ass. Like, just let me like, the most common thing we wanna do is take all of the data from a form and pull it out and put it in a state. So the new action stuff is is I'm really excited about it. Yeah. For me, it's just

the little buggy things that get in the way, the needing a key, the Yeah. Node. The class name stuff, like, this useCallback, the stuff that a compiler could do for you.

Any memo wise that I get it. Yeah. Any questions in the audience? Back end of choice. Oh, of course, JavaScript.

Yeah. JavaScript.

Data layer. Right now, my latest 2 projects have been Drizzle, which I've been a big fan of. I've been a big fan of I'm like, going forward, all of my, APIs must be fetch fetch based. So request response, web response, you know, all of that type of stuff. So a big big fan of Hano JS.

Hey? No. No. No. No.

No. Node. I when I when I say I wanna use fetch, I wanna mean that, fetch is based on web request and web response. Those are 2 primitives in the browser, and you can have a request in the browser, and you can have a request on the server. And the fact that those are standardized and not like some Connect JS version of request response Yeah. Is beautiful because now all of this stuff starts to work together.

Yeah. For me, I like data layer wise.

Right now, I'm using Pocket Bos for everything.

Pocket Base is sick. It's easy to host your own old office bake baked right in. But if I'm going full data, like we did on the Syntax site, it is, it's Prisma and, MySQL. But Yeah. I also like Drizzle and Postgres JS well as Drizzle and SQLite. All that stuff is good for me. Why is Century's brand all purple? David Kramer here?

Nope. He's he said it on the podcast. He stole it from, Heroku.

Oh, yeah.

Purple's sick, though. Yeah. I love purple. Where can I buy a Webmaster shirt? They are sold out.

Better luck next time. We'll have some more cool ones.

Oh my gosh. Any questions in the audience? These keep jumping around. Might be No. It's nicer when you could just be a keyboard warrior and

type it in online. I get it. When was the last time you coded vanilla JS?

When was the last time I coded Vanilla JS? Like, daily. I I'm a big fan of Vanilla JS, and that's that's why I like the Svelte stuff as Wes.

And, like yeah. Scott of that's why I'm talking about Wes response, because Vanilla JS

back end is now possible. I like the DOM Yeah. Myself.

Change of opinion.

I stopped using React. I like Tailwind.

I do like React, though. I think I like Tailwind.

Hey.

Who's wrong? I see. Yeah.

First.

Yeah. How long for SPAs to become cool again? I just rode an SPA,

on the flight here, and, it was great. It was really nice not having to worry about the server. I didn't need server side rendering. And if you don't need server side rendering, it just makes things harder. That's So yeah. Again I like server side rendering when you need it. It's easy enough. Beauty of JavaScript, beauty of React, Do you need to do server? Sure. Use React. You need to do

SPA? Sure. Use React. You Node? Need to Static? Static site? React. What's up? I guess it's expanding on what you're just previously talking about. When would you choose, like, playing React over or Next. JS? Like, what situations you would choose them in?

In in now, I don't know. Too many times I'd pick something that wasn't a meta framework on top of React, because I mean, even create React app was kind of like a starter kit, not like something you'd probably keep around forever.

But now with the server side components or React server components, there really isn't a React platform for server components. You have to use Remix. You have to use, Next. Js. And and to me, I'm going to pick one of those more full featured frameworks personally. Yeah. That to me is React at this point. I'm hoping for, like, a like, I usually

default, wanna try something in React. I HTML file, install React, and use Vite. Right? And then if it becomes a, like, a full blown project, then I'll I'll reach for a meta framework.

Alright.

Have I used Remix? Yes. Love Remix. Very bullish on Remix. Big fan. I like Remix, what they did for actions and, then what everybody copied from them from that. And I'm I'm glad everybody copied that from them because it's, the best way to do form stuff. Poor Ryan is gonna just fix all the server component stuff for us so we don't have to

well, like, it's not our problem. It's Ryan's problem. Yeah. You know? Yep. That's kinda nice.

Alright. Last question we have here.

How many episodes of ZoomText did you think you would record when you started? I don't know. Node don't I don't even know what happened. Literally anything. I don't even know what happened for dinner tonight. Yep. That's actually very true for both of us. Yeah. Yeah. Just let her rip. Yeah. We we actually came up with syntax about a whole year ahead of actually recording an episode,

and it just kinda sat in a Google Drive document for a whole year. And then one one day, both of us were like, oh, wait. Remember that thing we were gonna do? Oh, yeah. Let's do it. Yeah. And then it's really easy to just keep going once you start. And then now we're at 700 something. So thank you so much, everybody. Thanks, everybody, for coming out. This is super fun. Have a good night.

And please, if there's any koozies left, take as many as you want. Please, we do not wanna take as Sanity JS you want. Beers, koozies. You want. JS stickers there's millions of stickers. Don't feel bad. Just take in, like, 70.