React Miami Live Show

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, make sure you grab one of the Syndax Canada stickers.

it's a JavaScript compiler.

user, card.

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

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.

Oh my gosh. Any questions in the audience?

and it just kinda sat in a Google Drive document for a whole year. And then score, and then points.

Yeah. For me, I like data layer wise.

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

Now I don't write React.

to be equal to itself

so so far,

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

times negative 1 px, and that's inside of the calc.

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 Data layer. Right now, my latest 2 projects have been Drizzle,

This one hurts me. Yes.

Oh, yeah.

No. Who's got it? 12?

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

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.

And I'm gonna hit go.

see. Nice job.

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.

Yes. When was the last time?

instance methods.

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

8. Yep. Okay? And the reduce,

Mai.

Alright. Last question we have here.

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

We have let's check the parentheses.

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.

calculating.

Default.

the student points together,

Oh, yeah. You pass them to a a a trans Function. Vercel.

there really isn't a React platform for server components. You have to use Remix. You have to use,

Yeah.

function,

Thank you. Thank you. That was good.

1 is a number. 1 is a string.

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

Any memo wise that I get it. Yeah. Any questions in the audience? QR code this sucker up, because we got a couple live things that are necessary for this.

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

Function,

Damn.

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.

3 open, 3 close, 2 open, 2 close,

Node is not a reserved word.

And the winner is

was named after the inventor's daughter whose name is Mai.

plus 1

An upcoming standard library for JavaScript

or it's going to be 1. So you're Space? I have no idea. So the body element

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

is is more than 7. Yeah.

Get your votes in.

PlanetScale

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

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

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.

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

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

Ada Lovelace.

Gosh. Darn it.

Exactly. You cannot do calculation

with what hook for working with server components?

Which of these is false? False. Which one is false?

Both 62% type checker written in Rust, not just a TypeScript.

How do you say he's the same? Selikhoff. Selikhoff did yesterday on stage and Me on My Side Projects. Yeah.

Hey.

Did I make these too hard for him? I've been liking, Yes. It has a margin of how many pixels?

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

Audience, what did we do wrong here? What did I do wrong?

antidepressant

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?

Try, catch, replay.

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, Hey? data map, bring the job back. So we got an array of strings, producer, producer, podcaster, designer.

all of my, APIs must React. What's up? Alright. TikTokin, That's a pressure. This is something I do at least once a day.

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

Does component take 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, No. Node. I when I when I say I wanna use fetch, I wanna mean that, Alright.

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

is it a fast byte parent coding tokenizer

medication in Mexico

Serge.

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.

Oh, man. You're crushing me.

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

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

Hey.

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

Wes should have a timer. Right here. What?

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.

Back end of choice. Oh, Joel. George Boole, 63% of you got that correct.

So Wes is even. CJ is going to be 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.

You're

70.

3 only 3%.

design token generator that outputs to CSS, JavaScript Tailwind, SwiftUI, and Android Compose, We did the 2 hardest defining the type, then you're yeah.

Yeah.

Wow.

component. Constructor props.

switch, individual, 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.

Next question here.

No. No. No. No.

For,

These keep jumping around. Might be No. It's nicer when you could just be a keyboard warrior and Change of opinion.

Postgres JS well as Drizzle and SQLite. All that stuff is good for me. Why is Century's brand all purple? David Kramer here?

18.

And, like yeah. Scott of that's why I'm talking about Wes response, because Vanilla JS I I will tell you it was no. If it exists,

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

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

okay.

oh, no. Block is top and bottom. The other way around. Yeah. Modal's easy for that. Yeah. Yeah. Insight 0? Smelt.

Alright. Lock those votes in, folks.

destructured

In

Why is get posted it's going to be itself producer 2, podcaster 1.

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

Border Bos? Interface. Interface does not need a A semicolon.

so you have to, like, ripple delete every other page. And, like, it's it's always just a big pain. So

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

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

or both? no. You can have a Vercel number. This is a future question.

React DOM's use form state was recently replaced

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.

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

Woah.

Let me just check the rest of it.

database on schemas.

of you. So most of you guessed wrong in that it is 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, Interface does not need an equals. Equals.

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

Wes

the stuff that a compiler could do for you.

Interface.

Alright.

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

but, Who codes better, Wes or Scott? alright. Scott data, job producer, producer, podcaster, designer,

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

Rob. Rob.

Yeah. You you can. Quick. Because I never do that. That's fine. Always three d.

Use action state.

That's real.

There.

14.

Only Scott is kept. Only Scott is kept. Why? Why?

it's Prisma and, MySQL. But Yeah. I also like Drizzle and is this a JavaScript compiler and TypeScript checker written in Rust with a focus on static analysis and runtime performance? Zuber.

class.

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

Is it it's the return is not on the same line as the No. That's fine. That's fine. That's just 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.

reserved keywords

no.

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.

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

phones. We need everybody to be voting on these.

Last Node, Temporal. Is Temporal an Australian metalcore band which disbanded after 2 years in 2012? dialogue the third one? 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.

Calc.

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.

we have 6

accumulator's vote on whether something's a JavaScript library or a made up word.

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

Alright. What's your name? a JavaScript. And it it that's actually kind of exciting that it's a a TypeScript

Clear clear winner on that one. Scott is a much better coder than I am. Thank you. Wes did Scott get his dope shirt? This one hurts me too. Yeah.

Yeah. TypeScript.

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.

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

Yes. I have been Okay. My first thought JS, do you need a super in the constructor? community in Florida.

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

Fifteen. What?

it's have you ever not used a key and it's fine? It's an unincorporated and you can have a request in the browser, and you can have a request on the server. And the fact that

Okay.

Await.

6. CJ points of

both.

We're kinda doing a show.

just tallying up, which by the way, you don't need this anymore because of object dot group by. Doesn't matter.

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

we are filtering out Scott. We have Wes, which is, now

It's

Vextor.

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.

or both? inside of brackets.

All the new HSL stuff. Wes, what is your least favorite thing about the current state of React? for working with date and times or both?

Grace Hopper. Dan Abramov.

sick. I tried to do it loud there. I go Good. Thank you. Oh, thanks, Rainey. Send us a DM, and we'll get you a

So the point is,

Mac Weldon. This shirt is from Mac Weldon.

Let's see.

even.

equals

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.

Fancy buzz in his friend.

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.

Type Recently.

Problem not inside this function. Okay.

Alright. Ready to go? Get your votes in. And var var move, move 10 pnpm Syntax highlighting was turned off.

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? be fetch fetch based. So request response, We start with a blank object.

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

So It's always caching. Yeah. It's it's always caching. Like, when I did Apollo,

after licensing disagreements in 2020?

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.

I stopped using React. I like Tailwind.

Yep. D yeah. Okay. So users should should be the variable user, not Oh, But now with the server side components or React server components,

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

let me stand up for this one. Module results in 0, which JS, say it with me,

on the flight here, I isn't this the wrong syntax for the Why? Let me see this. Calc,

got all of them right. Who was it? Can I ask Kent to help me with this one? Deno. Nope.

and, honestly, the amount of times in my career that I've, like, cried because of caching

Dev.

plus well, map filter and reduce, and you have to determine the output just by looking at the code.

Node. That's true.

faulty.

Or is it Gen z slang for easy no No. Not right now. But Yeah. Not right now. Alright.

version of request response Yeah. Is beautiful because now all of this stuff starts to work together.

So then we Scott handle click equals that.

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

default, wanna try something in React. I HTML file, I do like React, though. I think I like Tailwind.

that get in the way, the needing a key, 8 users destructed.

of course, JavaScript.

we are adding I don't know. I don't see it. Alright. Audience.

And My my s q l, which is the way you pronounce it, was named after the inventor's daughter, Alright, Rob. We got a question for you.

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

Brand name for the

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

the

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

You don't need keys. Yeah. Honestly,

Name eight

we would have pagination, and you would cache all of the items in the pagination. But then you add an item to the front, Or or we'll get the runner, Mike. Whatever.

Get your votes in.

Venlafaxine

Good. Wow. We we got them.

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 fetch is based on web request and web response. Those are 2 primitives in the browser, You need a No. Is it? No. No. Alright. I give up. Audience? No key.

answer. Follow-up question.

You are

object.

like, give give a sec. Yeah.

Nope.

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

This one's for the locals.

anything? for use with OpenAI's models? He might know this one. Use action Scott? Woah.

What are the 3 valid options for a form method

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

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

times 2. We have, that is 6.

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.

Is this this is not React.

Yeah. Bytedance is the parent company of TikTok, if you haven't We set the

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

or both? 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,

Dialog.

George Buhl.

Yeah. Exactly. So the d the the destructured default Boom.

in JavaScript.

attempted to fork my sequel Remember class components? What's your name? Dev. Dev.

for Scott.

current string of producer, podcaster, podcaster

So you can close

blank. Get post pnpm.

So you get

which where you can tag them. I really like that API, Alright. For me

well, it How many of you see it. Can you do a translate y and a translate x to separate properties?

remainder.

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

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

the little buggy things

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 which I've been a big fan of. I've been a big fan of I'm like, going forward, Wait. I feel kinda bad.

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

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.

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

I I gave you the wrong syntax for the default inset Is it an unincorporated

not like something you'd probably keep around forever.

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.

Or

Then we reduce.

and inset block.

Alright. What's your name? Search.

No keys. No.

a library for validating and extracting JSON Nope. He's he said it on the podcast. He stole it from, Heroku.

Oh, numb

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,

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

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

name,

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

Yeah. JavaScript.

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

Esno,

Node? Okay.

Boo. And not a hard

Node,

You forgot the dot join, which is going to give you a semicolon

CSS is awesome. The color mix stuff, I'm really excited about.

So the answer will be

Yeah. Yeah.

I think it just might be cut off.

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

Come on.

yeah, it's,

Solid. Sorry.

and you're just returning the points.

I don't use interface that much. Well 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?

Oh my gosh.

the Yeah. Node. The class name stuff, like, this useCallback,

ask me how I know.

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

the dialogue.

Have you guys struggled with Next. Js caching as much as Sam?

GitHub a reset, you got a bunch of spacing around. So it has no margin? 39%

Save user promise user document.

Aw, man. They're This is gonna be brutal. Oh, no.

Oh, wait. No. That's wrong. That's wrong. I did that wrong. What?

Ready?

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

A ByteDance's Zuber, Alright. Next Wes,

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

web response, you know, all of that type of stuff. So a big big fan of Hano JS.

comma after

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.

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

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

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

of you got it correct. Got it.

Alright, Wes. For me. Alright. Import React component from React. Class button component extends SPA? Sure. Use React. You Node? Need to Static? Static site? 16? No. 8. 8. Who said 8?

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

Who's wrong? I see. Yeah.

and MySQL Alright. Who is invented with inventing up the Boolean? Render return.

Well, isn't it just the man? Coming in. Yeah. When will you get Tim Berners Lee on the podcast? That would be

Export default

No. Keys are dumb.

What is Vextor, as you stringify an array.

a shirt. Next question for Michael.

Because the module results in 0. I did the opposite. Module

So for Wes, it's obviously going to be 3, That's a dope shirt.

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

Do I get a T shirt?

First.

async function.

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

using the unstable cache, Let's see.

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

equals

Yeah. It works.

Why?

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.

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.

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

Syndax is officially a Canadian podcast about web development, so 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.

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? community in Marion County, Florida

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,

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

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

where we've given each other a map filter,

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

server components or weird CSS What does it do? You're you're gonna kick yourself. I know. How many of you guys see it?

Wes got JS or NAAS, which we're gonna get audience to participate in. You guys get your phones out. You're gonna, Inset rule. I'll stand up for this one. Anybody tried inset block Yeah. That's division. What 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? I did that to you last live episode. Did you really? Yeah.

a free T shirts for Yeah. The winner itself. Yeah. It's gonna be pretty sweet. So grab your phone,

So the plan today

badger you with questions about those are standardized and not like some Connect JS

We'll have a an audience stumped. If you're brave enough to come up and have us No. Node JS,

issues, we got it for you. We got a Alright. JS or Nas, open up your 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.

to Syntax.

Welcome in person or online.

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

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