Your favorite web dev podcasts join forces for a super collab that’ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show while Divya teams up with Wes Bos & Scott Tolinski from Syntax. Let the FEUDing begin!
Featuring
Sponsors
Retool For Startups – More and more startups are using Retool to focus their time on their core product. That’s exactly why Retool launched “Retool For Startups” — it’s a program that gives early-stage founders free access to a lot of the software needed for great internal tooling. Retool has bundled together a year of free access to Retool with over $160,000 in partner discounts to save you money while building Retools apps with common integrations. Learn more, apply, join lightening demos and much more at retool.com/startups
Auth0 – The for developers, by developers identity platform built for the cloud era that secures billions of logins every year. Security, compliance, and industry standards are always up-to-date, plus devs are free to provide the login options their users want with the security their application demands. Make login Auth0’s problem. Not yours. Learn more at Auth0.com
Micro – Micro is reimagining the cloud for the next generation of developers. It’s a developer friendly platform to explore, search, and use simpler APIs for everyday consumption all in one place. They’re in early development building out the first set of APIs, and they’re looking for feedback from developers. Signup and get $5 in free credits.
Notes & Links
Transcript
Play the audio to listen along while you enjoy the transcript. 🎧
Hello there, and welcome to Frontend Feud. I am Jerod Santo, your host for today. It has been a while since we played this game, but we are happy to be here today, and we have a podcast super-colab. We got together some of our friends from some of our favorite web dev podcasts in the space; I’m sure you’ve heard of them. It is gonna be Team Syntax versus Team ShopTalk. Hey, everybody. Welcome to Frontend Feud!
Heyy!!
Yaayy!! [laughter]
Now, we wanted to give it a little JS Party flavor, so we’ve sprinkled in some JS Party panelists onto each team… So joining Team ShopTalk, which is Chris Coyier and Dave Rupert, is Amelia Wattenberger. So Amelia, you are on Team ShopTalk. What do you think?
I love it. We’re gonna win.
Oh, absolutely.
Good answer… Good answer… Good Answer…
No chance!
And joining Team Syntax, which is Wes Bos and Scott Tolinski is Divya. Divya, welcome to Syntax.
Hey-hey! Best team!
Best team!
Divya is an old pro at Frontend Feud, but I believe the rest of us are all new, even Amelia, so we should have a lot of fun. I’ll quickly explain the rules. So this is a game all about the JS Party lovely listeners. We had 140 people fill out our Frontend Feud survey. We appreciate y’all for doing that. I really appreciate you, because I went back to the form at the end and realized the average take time was 37 minutes. I am so sorry. That thing took forever. And that’s because we asked 25 questions, so we can play the game a few times, without having to go back and do more surveys. So I super-appreciate all of y’all for filling those out.
[04:22] The goal of the game is to match our listeners’ answers. So we have polled them on different things, and each team is gonna try to match the answer with the most answers from the survey. And as you go about doing that, you win points. If you fail to do that three times in a round, the other team can steal, and the team with the most points at the end of the game wins. Any questions?
It’s not the most correct answer, right? I used to play Apples to Apples with my super-pedantic uncle, and he was always like “But my answer is more correct” and you’re like “Dennis! It’s not about correctness!” [laughter]
Oh, that’s such a Dennis move. [laughter]
Exactly, right. In fact, many of our questions are subjective, so it’s according to people’s tastes, and what they think. So there really aren’t right answers. The right answers are the ones that the most people said. So we will start off with a face-off; this is where two contestants step forward virtually and get a chance to answer first. The person who gets the highest answer on the board takes that board for their team, and their team participates in that round.
Ladies first, we’ll have Amelia and Divya, please step right up. Round one will start with Amelia. Amelia, if you get the highest answer, you immediately take the board. If you don’t take the highest answer, Divya gets a chance to take it. We asked 140 lovely JS Party listeners “What is your primary web browser?”
Oh, no pressure… I’m gonna go with Chrome.
Good answer, good answer, good answer, good answer.
Number one answer, with 52 responses… So that means Team ShopTalk is on the board.
ALRIGHT!
So we will now go in order. You can keep guessing. There are six browsers in the list, so you have to match all six to take the board.
What…!?
Oooh…
You have the number one answer, which is Chrome, with 52. There’s five left. Let’s go to Chris.
Firefox.
Firefox. Show me Firefox. Number two answer, with 43 points. Very good.
There’s no conferring? Who goes next? Me?
There’s no conferring. Now we go to Dave. So we’re going around. Dave, it’s your turn.
It gets infinitely harder from here on out… I’ll go with Edge.
Show me Edge. Number four answer, with 11 points. Edge is on there, so you have three of the six. Now we go back to Amelia.
I literally do not know any other browsers. I don’t wanna say Internet Explorer…
Is that your answer?
It is not. [laughter] My answer is gonna be better than that.
Okay… So what is your answer then?
You got it!
No, it’s gonna be Internet Explorer.
Okay, show me IE. [fail sound]
Sorry…
I’m sorry, that’s your first strike.
It’s all good.
That’s okay, because that could have been like a total troll answer. I feel like that was fully valid, yeah.
Yeah, I was trolling.
For all the testers out there using IE…
Yeah.
Gotta represent.
Alright, we go to Chris.
So do we keep it, because strikes? Yeah, okay.
Yup. So you have one strike. You have two strikes left, and then there’ll be a steal opportunity.
I’m gonna go with Safari, because it feels like one of the big three.
Show me Safari. Number five answer, with eight respondents using Safari.
Oh, so number three is still available?
Remember, it’s their primary browser. Okay, so now we go back to Dave.
We’ve got this.
Oh, boy… I’m gonna go Brave.
Show me Brave. Number three answer, there it was. Number three. Eighteen people out there using Brave as their primary.
Wow, number three?!
[08:05] So we have one strike against you. You have Chrome at number one, Firefox at two, Brave at three… We also said Safari at five. Did you say the number four? You did, you said Edge, at number four. So there’s one left.
That’s nuts.
And we’re back to Amelia. You have two strikes… So just take a guess.
There’s that one where it has – oh, I’m not gonna give any clues. I don’t actually know the name.
Okay. Do you wanna guess something random, or do you wanna just take a strike?
I use one called Stack, that I know no one else uses…
Show me Stack. [fail sound] You were correct, nobody else uses Stack… [laughter]
Dang it.
So are we gonna get a point for that? She was correct…
She was correct, nobody uses it… So we go to Chris now. This is your last guess before team Syntax gets to steal.
Oh, we’re gonna steal it.
I’ve gotta go with the big O, Opera. I know it’s a wild card, but I just feel like it might be hanging on.
Show me Opera. [fail sound]
Whow…!
Three strikes and you’re out. So Team Syntax gets one guess. You can confer amongst the team. And if you get it right, you steal the board.
Okay. Can we confer openly?
Yes.
Samsung.
I was gonna say… Vidalvi?
Yeah, maybe. Vivaldi.
Vivaldi?
Vidalvi? Isn’t that what it is?
Vivaldi.
I’m just naming browsers here, yeah.
I thought it was Samsung, because they have a bunch of developer advocates in this stuff. And also, you use it when you use your phone, right? So…
They don’t have a desktop browser though, do they?
No, I think it’s only mobile. I think it’s just like a mobile thing, which is why I’m like “Is it…?” I don’t know…
What’s Vivaldi?
Vivaldi. V-I-V-A-L-D-I.
What is it?
We can’t google it, so I can’t tell you.
Yeah, that’s true. Okay, so you’re thinking Samsung, you’re thinking Vivaldi…
Vivaldi is also a famous person.
I think Vivaldi is like a – wasn’t it like a security-focused browser? So I could see there being one…
Or Tor, actually, which is also another–
Can you use that as a –
Man, this is tough…
Alright, let’s make a decision here… What are you guys thinking?
Okay.
I think we should go – what do you think, Scott?
Oh, I have no idea. In terms of browsers that I just heard mentioned recently, Vivaldi was one of them, so that’s why I –
Yeah, that sounds fine, I guess…
I don’t know though. I have no idea. Samsung could definitely be it, too.
I’ve seen it on Hacker News a few times, which is why I wanna go with that.
Are JS Party listeners Orange folk, too?
I don’t know… There’s gotta be one…
Yeah…
It’s a good question.
There has to be one, yeah.
Alright, pick one. Let’s move on. What have you got?
Vivaldi.
Vivaldi. Is that number five? Show me Vivaldi… [win sound]
Yeah!!
Yeey!!
I told you! Yes!
Five JS Party listeners…
Five?!
Five people use Vivaldi?!
That’s crazy.
Five out of 140, yeah.
Who builds Vivaldi?
Do they get all the points for the entire round?
They stole 137 points on that.
Wait, we made those points!
Well, anybody can guess the other browsers… [laughter]
I went out on a limb with Edge, I felt like…
It was the third one I wrote down when I was writing down browsers here…
There you go.
Amazing.
Alright. So after round one we have Team Syntax with a steal, 137 to nothing. There’s lots of game left to play, so we now go to round two, a face-off between Chris and Scott.
I hope it’s about browsers again.
So we gave Amelia the first guess last round, so we’re gonna give Scott the first guess…
Oh, no…
If you don’t hit number one, then Chris will have a chance.
Okay.
We asked 140 of our fascinating JS Party listeners “Name a tool or technology that you use, but don’t fully understand.”
Use, but don’t understand… I am going to say it is – I have a lot of options here. [laughter] Let’s just say… Let’s say WebPack.
Show me WebPack. Number one answer.
I knew it! Hold it, I haven’t closed my door. My wife texted me “What’s going on?!” [laughter]
He’s having too much fun. Alright, so with that, Scott takes the round, and team syntax will play. Now, there’s five answers on the board, of which you have taken the number one answer, so there’s four left… And we go now to Divya.
So this is frontend frameworks people don’t understand?
Let me read it again. “Name a tool or technology that you use, but don’t fully understand.”
Hm… A tool or technology that people use, that they don’t understand… Oh, man. This is a very open-ended question.
You know, like WebPack…
Like WebPack, yes.
I’m so impressed that you got that, Scott.
I have a lot of options here.
Alright, Divya, we need an answer…
I wanna say… What’s another tool that’s similar to WebPack? Oh, SnowPack.
Show me SnowPack. [fail sound]
Aww…
Not enough users of SnowPack.
Sorry, SnowPack was not on the list. Okay, Wes, we go to you.
Redux.
Good guess.
I like that one, but did it make the list? [fail sound]
What?!
What?! I guess everyone knows Redux…
That was almost one of my number ones here…
We’ve got two strikes and you still have four answers left on the board. We go back to Scott now.
Docker.
Oh, that’s a good one.
Show me Docker. Number two answer, Docker, with 12 responses.
Oh, man… Alright, I guess I’ve gotta go to CI/CD now… [laughter] Kubernetes… This is probably wrong.
I grouped that with Docker, because there were people answering both. So those are together, Docker and Kubernetes.
Oh, I had Kubernetes on my list here.
Yeah.
They’re very different tools, I will say…
I know they are. But people were mixing and matching them, so please pick another one.
Let’s see…
I can’t believe Redux wasn’t there…
Can I just say CI, or does it have to be a tool?
A tool or technology.
Is CI a technology, technically?
I think so…
It’s a concept?
I think it is…
CI/CD.
Alright. Show me CI/CD. [fail sound]
Aww…
That’s surprising, actually…
There’s no way they’ll steal this. That’s okay, no sweat.
There’s no way everyone understands CI/CD.
But maybe they don’t use it. It’s a technology that you use, but don’t fully understand.
Maybe they don’t think about it.
Come on! Deployments…?
Maybe they do, maybe they don’t. Alright, Team ShopTalk can confer on a chance to steal.
Okay, we’ve got a couple of possible options…
You’ve got three possibilities here.
I’ve got that too
I feel like the troll answer is to just say CSS, because people like to be like “I don’t understand…”
Okay, okay, yeah…
Okay…
And then the one that you probably actually don’t understand is Git.
Oh, that’s for sure on there…
Oh, man…
But those are just ideas, you know…
I had Git, too. I also have Bash…
JavaScript is a troll answer, too…
Bash, okay…
JavaScript is good, Bash… And Babel, which I don’t know about.
Oh, I just thought of one…!
You can say it… [laughter]
No, I’m not saying it. I’m gonna message Wes.
I had serverless, and stuff like that, but… You know, I think I like Git, or… Yeah…
What do you think, Amelia?
I like Git.
[15:58] Okay, we’re gonna go with Git.
Alright. For the steal, show me Git. [win sound]
Yeah! Big steal!
It’s a game of steals.
That’s the number four answer, with eight respondents saying Git.
Interesting. So there’s a missing three.
Number three was React… And number five was npm.
Fair enough…
A couple of honorable mentions…
I’m actually surprised no one said Regex.
Oh, that would have been good.
That’s a good one. Just thought about it.
Or Redis…
Tools that make me fall asleep.
But if you don’t know it, maybe you just don’t use it…
Maybe, yeah…
Chris, four people said CSS. It just barely missed the board. Three people said Node, two people said “Dependency injection”, which I think you should know how it works before you use that one… And one person said PHP, and then in parentheses they said “I don’t think anyone will ever fully understand PHP.” [laughter] Okay, so some commentary there…
Install WordPress…
Yeah, just use WordPress.
Cool. That was fun.
Alright, so let me add these up here. So nice steal…
Cool…
And that is–
Was it one to one? Is that how it works?
No, we’re still winning, by far.
It’s points-based, but I’ll tell you, the last rounds the points double, so there’s usually a chance to come back near the end… Okay, so you’ve stolen 63; there were 63 points available that round. So currently, Syntax is still in the lead, 137 to 63. But everyone’s playing quite well, quite within reach…
Alright, let’s move to round three, which is gonna be Dave versus Wes. Now, Team Syntax got to guess first last round, so we’ll go to Dave for the first guess. We asked 140 brilliant JS Party listeners “What’s something you do to reach a state of dev flow?” Yes, Dave.
Music. Do I need to be more specific? Like, electronic music…
Music is just fine. Show me music. Number one answer. 66 people say they listen to music. They also had a bunch of different kinds of genres and stuff, but I just combined them all together. So that’s team ShopTalk, you guys get to play this round. You already have the number one answer. There are five total answers, four left on the board…
Freakin’ A.
And we go to Amelia. What’s something people do to reach a state of dev flow?
I drink a lot of coffee.
Totally on there.
Good answer, good answer, good answer…
Show me “Drink coffee.” Number four answer, good job.
[20:07] Wow, four…
That’s generally drinking things. Drink coffee, people said drink tea, drink energy drinks… That’s worth nine points, so good one. And now it is Chris’ turn.
I am just dying here… Dev flow. What do you do, that’s like a common thing that you do…? Is there something like move locations? Is that too vague? Like, go to a coffee shop?
Somewhat vague.
Somewhat vague. Um, shut the door.
Shut the door. Show me “Shut the door.” [win alert] I will give it to you.
Wow, nice…!
This is a category of things where people said “Remove distractions, go to DND, close the door…” Have a quiet place, some people were saying. So I’ll give you that one.
I feel like Wes clued them in when he closed the door… [laughter] It definitely helped.
I’m sinking my own ship here.
Wes is really in dev flow right now. So that was 26 points. That’s the number two answer. So you have one, two and four. So three and five are still on the board, and that puts us back to Dave.
Oh, boy. Blocking time on your calendar?
That was part of the remove distractions one, yeah.
Well, I need a new one… And the next one is not good. [laughter] Let’s see… You’ve gotta have your hot chip. Snacks.
[laughs] I was like, “What’s Hot Chip?” Um… Show me snacks. [fail sound]
Nah…!
That’s your first miss. So you’re doing well, you have two misses left… And it is now Amelia’s turn. Amelia, what’s something you do to reach the state of dev flow?
I definitely eat hot chips… [laughter]
Hot chip.
I guess if not that, you wanted Chris to be more clear about his going to places thing, so I’m gonna go with a specific place, which is going to your desk. I don’t like that face.
Show me “Going to your desk.” [laughter] Maybe just a little bit too on the nose… But a good effort. We go back to Chris.
It sounds like none of these are related to technology. None of them is like “Troll around for cool VS Code extensions”, or whatever.
“Go on Twitter.”
Is that how you get in flow? Installing plugins? [laughs]
Twitter is the exact opposite of flow…
Yeah, I know how to get out of flow. Can we do that one? [laughter] Like, YouTube…
Yeah… I’m gonna go with “Put on sweatpants.”
Yeah, good answer, good answer, good answer…
Good answer, good answer… I’m going to give you that one.
Nice!
This is a combination of “Prepare yourself.” So there was like “Get the room set up, good posture, sleep first, put on certain clothes…” People said “Put on comfy clothes”, so that’s why I’m giving it to you. So that’s ten points, which means there’s one left. Number five is still out there, and you have one strike left… And Dave has a chance at it. Go ahead, Dave.
Okay, so recap - we’ve done music, we’ve done get comfy, we’ve done…
Remove distractions…
Coffee…
Remove distractions, we’ve done coffee… And there’s one more?
There is one more.
Turn off email? That’s in distractions.
That’s remove distractions, yup.
Oh, boy…
So sorry, Dave…
It’s tough.
Go for a walk?
Show me “Go for a walk.” [fail sound]
Oh… That was on my list.
Oh, man…
Alright, we get to steal.
Alright, chance to steal. I tell you, this is a tough one, so you’ve got your work cut out for you.
Alright, guys, what are you thinking?
I had “Put on headphones”, or something…
Yeah.
Yeah. I was gonna say, noise-cancelling headphones, white noise…
[24:10] White noise, yeah…
Exercise…
Meditate…
Meditate. I had meditate.
Somebody did say “Go for a walk”, which could be constituted as exercise maybe, so…
yeah…
Meditate, or noise-cancelling headphones.
Wait, was noise-cancelling headphones “removing distractions” though? Is that part of the whole umbrella?
Yeah…
I had that as my very first one on the list.
Yeah, I’m gonna say that’s part of removing distractions, because it’s kind of like “Get quiet.”
Okay.
So we’ve got white noise… I have full-screen, which is probably also “remove distractions”.
Yeah…
Blocker apps, that’s part of it…
Blocker apps, remove distractions.
Meditate, white noise…
What do people do to focus?
I’m trying to think of all the Tim Ferriss productivity hacks… Morning routine…! [laughter]
I have a “go to coffee shop” as one of my things on my list, which is going somewhere…
Oh, you mean like working at the coffee shop?
Just going to the coffee shop, because that’s what I do when I really can’t focus…
I think that’s under coffee.
Yeah, that one was kind of broached, I think both with your environment, and there was “Drink coffee”, so…
Gotcha.
I think meditate.
Maybe meditate, yeah.
Yeah. I don’t have anything else.
Let’s just Hail Marry it.
Show me “Meditate.” [fail sound]
Oh, man…
I thought that was it.
Meditate didn’t make the list.
Good for us!
What happens now?!
But I also – I have no idea, I wouldn’t know that answer.
This one - I would not have guessed this… Five people said they listen to podcasts. Here we all are, on a podcast…
I do that, yeah.
That’s kind of refreshing, that at least five people listen to podcasts. That’s great. [laughter]
And one specifically said “Listen to the JS Party podcast.” I said, “Oh, I appreciate that call-out.”
Aw, that’s nice.
Happy to help you get in the flow. It’s the opposite for me - I don’t wanna listen to podcasts.
Oh, I do.
What I actually do is – like, do something that you’re in the mood to do. If I’m like “I just feel like coding on this thing”, then I’ll get flow, because I’m not fighting against what I wanna do.
Right. Work on something that you feel like working on.
Where was “Wander around Home Depot for nine hours”? [laughter] Was that on the list?
That’s funny, because one person said “Procrastinate for ten hours.”
Nice. [laughs]
There’s the honesty right there. And then a few people said “Drink alcohol and smoke weed”, and I thought “I’ve never been in the flow in these states.” I don’t know. Different strokes for different folks, I guess.
Alright, so no steal, so ShopTalk gets the points… They missed the last one, but they still managed to score 110 points in the round.
Oh, wow…
That’s gonna kick us to the lead for sure
Nice…
Major league comeback. After three rounds we have Syntax with 137 and ShopTalk with 173.
Balance restored, balance restored…
That’s a big gap.
We now move to round four…
Hey, stop giving them easy questions… [laughter]
This is called The Inverted Round. This round works a little bit different than our previous rounds. There’s no face-off, it’s just a back and forth between the two teams. So we just rotate back and forth… And you’re trying to match the board, but it’s inverted. So you wanna match the bottom of the board, not the top of the board.
So there are six things on the board, and the bottom one get 60 points, and the top gets 10 points. There’s lots of points to be had, but you wanna match the board, but at the bottom. Okay?
So we asked 140 handsome JS Party listeners “Name your favorite HTML element.” There are six common answers, and since Team Syntax is losing, we’ll let them go first, and we’ll start with Divya. Divya…
Oh my gosh, this is so hard…
…name a favorite HTML element. Remember, you do not want to have the most favorite.
I’m trying to think of the bottom ones…
Oh, my God…
And we will have no conferring during this time.
[28:11] Yeah, but you don’t want the ones that are so far gone… You want the six most popular elements.
That’s right. Four, five and six are the sweet spot.
Yeah.
I’m thinking span…
That’s what I would have said. It’s number four.
Show me “span”. [fail sound]
What?!
Alright, span didn’t make the board.
Who don’t like span?!
No one likes span?
It has to be your favorite…
It’s all these React developers… [laughter]
Yeah, exactly.
All these React devs just using divs for everything…
I know, seriously…
Why use span when you can I or div inline-block
Div inline-block, love it. Okay, we go over to Team ShopTalk. Let’s have Amelia, “Name a favorite HTML element.”
Uh-oh… It might be way too obscure, but I know it’s got some fans out there… We’re gonna go with marquee.
Show me “marquee”. [win alert]
Good answer, good answer…
Well done!
Good answer. That’s the number two answer, actually… So it ties the board
Oh… Not obscure… [laughs]
It turns out it’s not that obscure… So you get 20 points for that one. And we go back now to Syntax… And we’ll have Scott.
Let’s think here, about HTML elements… What elements do I like a lot? Let’s say button.
Show me “button”. Number three answer, button.
Whoa! Good!
So we get 30 points for that one. Well played. So now number two and number three are taken. Marquee and button. So number one, four, five and six are still out there… And we go now to Chris.
Okay, so we’re just going back and forth here? That’s another way?
Yeah, we’re just gonna go back and forth.
Okay.
Two of six have been answered…
And one’s gonna be – oh, why would I give you answers? I’m not gonna do that.
[laughs]
I’m gonna hope that “a” is on the list. A, the Inker element.
Show me “a”. [fail sound]
That checks out. It’s a JavaScript podcast. [laughter]
I’ll just say, personally, “a” is my favorite element, personally…
On-click as an attribute…?
Div with an on-click, yeah…
Div with an on-click… [laughs] I think we all are hovering around number one… Okay, so we go from Chris over to Wes on Team Syntax.
I’m gonna go paragraph tag.
Paragraph tag. Is it popular? [win sound] It is.
Nice!
That’s the number five answer.
Yeah! Points, points, points, points…
So you score a whopping 50 points on that..
Dang…! Fifty?
Yes. Oh, that probably put us ahead.
Don’t you wanna get less points, for some reason, on this weird round?
So that was Wes. Now we’re looking back around to Amelia.
It’s Dave’s turn.
Yeah, you’re right. Dave’s turn. Sorry, Dave.
We need something less popular than “p”, but more popular than, like, the Ruby element… [laughter]
That’s quite a range…
So… “ul”.
Show me “ul”. [fail sound]
Oh, no…
All that default styling…
I forgot it’s a JavaScript podcast!
It’s a React podcast now.
Just think, “Is there anybody out there who thinks “My favorite element is an unordered list. I just lov ’em.”
Divya, now we have to decide if we take the easy, known number one, or risk it for the biscuit.
I know…
I think we take the easy points, if you’re asking me…
We can take the easy one and then go for the later one…
Yeah.
That’s probably a good strategy.
You might be sick of the joke, but look at your name, you know…?
I know…! Clearly, you have a Div on the team, gotta use it. [laughter]
Show me “div… ya”. [win alert] Yes, of course, the number one answer.
Nice job.
45 respondents’ answer was div. Okay. We now have number one, div, number two, marquee… I can’t remember the other ones. Number five, “p” tag.
Button is number three, marquee is number two.
Yeah, that’s right. So we’re missing four and six.
Okay. There’s only like 112 elements left in there, so… [laughter]
Each team has one strike, so if you strike out, then we’ll end the round. So you have a couple of guesses left. That was Divya, so now we’re back to Amelia, right?
Yeah. I like images… Kind of obscure, but also very nice…
Okay, let’s go, let’s go… Let’s go!
Show me “image”. [fail sound]
Who doesn’t love an image?!
I would have thought that would be on.
For sure, that’s a good guess.
Yup. So two strikes for ShopTalk… Let’s go back over to Syntax. We’re back to Scott.
Favorite. Hm… Let’s see…
Consider the ruby tag, that’s really popular.
I love it.
It’s pretty popular. So for annotations, or something…
Superscript, that’s a good one.
The WBO…
WBR, yeah…
Yeah, WBR… [laughter]
The table element…
Let’s say the nav element.
Getting semantic… Show me nav. [fail sound]
Aww, man…
Sorry, my bad.
Alright, each team has one more guess. One more correct guess. So here we go, back over to Team ShopTalk. It’s Chris again, right? Yeah, Chris.
I’m gonna just shout out h1.
Yeah, that was my second guess.
Show us h1. [fail sound] Ah, there’s too many elements…
Alright, here’s my last one… Am I allowed to confer on this one?
No.
For the sake of like a good podcast…? [laughter]
For the sake of good podcasting? No… Uninterested.
Okay. Well, I’m gonna think out loud here. I’m either thinking header/footer, or body, or html.
Oh. Super-meta.
Do you think people will be sassy enough to say – like, “What’s your favorite HTML tag?” “Html”. Body, header, footer… I’m gonna say…
There’s too many choices.
Part of me wants to say html. I’m saying body though.
I’ll tell you - that body was answered by one person. [fail sound] It did not make the top six.
Okay. Svg…
So - still, pretty good scoring on that round. Number four most popular element, input.
Oh, input.
People like input?!
Nobody likes inputs…
Inputs are the worst-styled…
Yeah, but they make you be able to do things on your website.
That’s true.
And the number six most popular… Hey, it is a JavaScript podcast after all - script.
Oh, what…?!
I forgot that that was part of HTML. I thought it was part of WebPack…
Honorable mentions - a couple people mentioned iFrame… UL was mentioned by a couple people. The picture element was mentioned twice… Somebody said “Keep it on the DL”, so they’re being very cute with that… And someone actually said div, and then in parentheses they put “ya”, so Divya
We get points for that though, right?
Yes, we get points.
I counted that towards the div, so they got their points. Alright, so in that round, ShopTalk scored 20 and Syntax scored 90. So we have a game here… It’s going back and forth, and after four rounds, syntax is in the lead with 227, and ShopTalk trails with 193. It’s anybody’s game at this point.
We now go to round five, and I’ll tell you, in round five all scoring is doubled, so it’s certainly anybody’s match… Let’s get back to the face-off. And everybody has faced off at this point, correct?
I believe so…
I think so, because it’s round – yes, so we’ll go back to the top of the face-off, with Amelia and Divya. And Amelia guessed first last round, so we’ll let Divya go first this round. Alright, so there’s four answers on the board… Divya, name a common mistake that developers make.
This is such a broad question… A common mistake developers make?
It even rhymes. I’ve just noticed that.
They spell debugger wrongly.
I’m not on your team, but good answer, good answer… [laughter]
Show me “Spelling things wrong.” [win alert]
Yes!!
Oh, wow!
So we’ve joined forces… Typos and misspellings was the number one answer; I combined the two. So there’s 29 there, with typos and misspellings. Because what is a misspelling if not a typo, and vice-versa. I mean, you end up spelling it wrong when you typo. So pretty much the same thing. That’s 29 points, and you get to play the round.
Alright!
Let’s go!
Team Syntax in control. You have three things left on the board. Of course, you have three strikes to give… Scott, it’s your turn. Name a common mistake that developers make.
Oh, gosh… I don’t make mistakes very much, I don’t know… [laughter] Let’s see…
It’s tough, I get it. I get it. It’s tough.
Scott makes no mistakes.
Yeah, never, ever, including not spelling things wrong, ever… Let’s see. Here’s a decent answer; I don’t know if this will work - they pick the wrong technology.
Show me “pick the wrong tech.” [fail sound]
Oh, man…
That was very valid, yeah.
Not bad, but didn’t quite make the board… Alright, Wes, it’s your turn.
Alright… Would syntax error be covered under spelling things wrong?
Ah, boo…! [laughter]
Is that what he was gonna guess?
No, it’s just – it’s your namesake.
It’s your namesake.
Oh, yeah, yeah, yeah…
Yeah, syntax is a big mistake.
It is? [laughter]
I’m gonna go like syntax error–
I think I lumped it in with typos. I think I did, because I’m not seeing it…
I think that’s similar to typos though, yeah?
Yeah.
Alright, I have another one then…
Okay.
Forgetting to save.
Oh, that’s a good one.
Good one.
Show me “Forgetting to save”. [fail sound]
What?! Oh, man… I guess it’s just us…
It’s a tough one.
They’ve got autosave on.
There we go. Alright, so two strikes…
That’s crazy.
What’s the average age of the audience? Are they all 12-year-olds on iPads, and everything is autosaved? [laughs] Oh, man…
Alright, we’re back at Divya.
Okay, cool. I think a common mistake that developers will have is – okay, this is very generic, but messing up version control, or Git commits.
Oh, yeah.
Hm. Show me “Git problems”. [fail sound]
What…?!
Amazing.
So that’s three strikes…
All the things on my list are X’es. Yeah, this is crazy.
So ShopTalk can steal… There’s still three things on the board. We only have number one.
No, we only got two wrong.
We only got two, didn’t we?
All three of you got one wrong, didn’t you?
Picked wrong tech, forget to save, Git mistakes…
Yes, there we go. Chris is in it.
Oh… Come on, give us one more. [laughter]
Alright, ShopTalk, you can confer amongst yourselves…
Oh, we get to talk. That’s right.
Yes.
There’s only five answers, or…?
Four total. Three left.
There’s no points to steal here…
It is a low-scoring round, yeah….
They deploy on Friday, is a possible answer… [laughter]
Deploy on Friday… Messing up types, like trying to add a number in a string?
Type coercion, or whatever?
Type coercion…
Or really big bundles, or memory leaks…
Oh, performance problems.
Performance? Okay, I like that…
Div as a button… [laughter]
Semantic elements, yeah…
How do you say performance – do you just say like “Do performance bad…?”
Yeah, like bad performance…
Yeah, you can say “Do performance bad.” I think that’s the way to say it… [laughter]
Yeah, you should say that.
Oh, no… Wes is in the database, like – Wes has reverse-engineered the form. [laughter]
He found the form printouts in the dumpster out back…
Alright… Show us “Do performance bad”. [fail sound] [laughter] Fail to steal.
I was gonna say “Refresh production.”
So a lot of missed ones here. This was a trouble round. Number two answer, “Off by one errors.”
Oh, that’s good.
Yeah, yeah…
Number three, “Forgetting semi-colons.”
That’s a syntax error.
I purposefully do that, yeah.
I said “Syntax error, forgetting semi-colon.” [laughter] Roll the tape…
It was a very specific response, so I let it have its own.
That’s a stylistic thing, too…
I specifically said semi-colon though…
Oh, you did?
Yeah.
Wes did say that. He did say syntax.
My fault, I’m sorry. I heard “syntax error”, and then Chris started making fun of it, and I…
Point, point, point, point-point…
Alright, we’ll get that back.
Everybody missed it. My bad. Number four, premature optimization.
Okay. Fair enough.
Now, there’s a lot of them that just barely missed the top four…
Who put that answer? Was that Kyle Simpson, or something? [laughter]
Spamming our forum? Yeah, perhaps… There’s a bunch of them that were tied at five. Breaking production was answered a lot, editing or testing the wrong things… So that’s similar to what you were talking about there, Wes, with not saving… Leftover console logs… Bad docs, no docs, and then over-engineering. Those were all mentioned five times. One person said “Building the wrong thing.”
“Oh, I accidentally built a website for it.”
One said “Building things nobody wants.”
Yeah… Showed up to meeting… [laughter]
Built a div instead of a button…
One person said “Writing code”, and then one person said “Getting stuck in Vim.”
Getting stuck in Vim… [laughs]
Oh, man…
Every Frontend Feud has to have a Vim reference, and there it is…
Come on…
So there’s your trolls. Alright, so there’s 29 points scored by team syntax, and since it’s a double round, we will double that…
Yeah!
Do we get points for the semi-colon, too?
No.
We fought hard and we lost.
I apologize.
That’s an upset.
The law won
So after round five, it’s Syntax 285, and ShopTalk 193. We have just one round left.
Sick…! Let’s go!
Alright, round six is also a double score round, so this is ShopTalk’s big chance to make a comeback. Step right up. Chris versus Scott. Now, which one of you two got the first guess last time around? Was it Scott? We’ll let Chris take the first guess here.
[44:12] I did.
Round six, a double round… We asked 140 intelligent JS Party listeners “Name an organization that helps push the web forward.” Chris.
The W3C.
Show me the “W3C”. That is the number three answer. It’s not the number one answer, which means Scott has a chance to take the round… Scott, name an organization that helps push the web forward.
An organization…
You’ve got it, you’ve got it.
…that helps – an organization. Does that include non-profits, like the – um, helps push the web forward. Man, this is tough… I don’t know…
Take a guess.
Let’s say…
Come on, Scott, we had a show on this.
Phone a friend!
We had a show on this?
No helping him…!
We had a show on this… What is that. What could we possibly have had a show on? [laughter]
Scott’s now going through 300 episodes… [laughter]
We’re gonna need an answer here, Scott… Guess one.
Shoot! Shoot! I don’t know… Organization that helps push the web forward… I’m sorry, Wes. I’m very sorry. [laughter]
Wes is trying to provide visual aids here… [laughter]
Whoa, whoa, whoa…! We’ve got some baseball –
This is table talk… Apparently he wants you to steal a base… I don’t know what he’s doing.
Yeah, I don’t know what he’s saying either.
The Baltimore Orioles? [laughter]
Alright, Scott…
I’m so sorry. Yeah, FreeCodeCamp. Who cares.
FreeCodeCamp. Show me “FreeCodeCamp.”
Oh, that’s a good one.
[fail sound]
That’s pretty good though.
I liked it.
Alright. ShopTalk gets the round. ShopTalk, you’re well-positioned to steal this game right here and now. Chris got the number three answer. There’s five total answers on the board…
We’ve got this. We’ve got it.
So there’s four left. Numbers one, two, four and five, and we go to Dave. Dave, name an organization that helps push the web forward.
Google Chrome… Google…
Show me “Google”. Number two answer, Google.
That makes sense.
With 28 responses.
I wasn’t thinking like corporations…
Alright, that’s two and three. One, four and five are left. Amelia. It’s up to you.
I’m gonna go with MDN.
Show me “Mozilla Developer Network.” Yes, number one answer; over 51 answers were Mozilla and MDN.
Yes!
So… Killin’ it. You have just –
But we can lose it if we don’t get the fourth one…
…two left. There’s five total. There’s two left.
Oh, no…
Yeah, back to you, Chris.
Oh, boy. Two left? Uh-oh… It’s not gonna be freakin’ Apple, right? All they get is yelled at for not pushing the web forward…
[laughs]
WebKit everything…
Remember, you get three strikes, so you can throw one out there and see what happens.
Oh, that’s true. I’m just gonna go with Microsoft, because they actually do work on the web. Microsoft.
Show me “Microsoft”. Survey says… Number five answer. So now you’ve gotten one, two, three and five. There’s one answer left, and you have three strikes, so you’re sitting pretty… Dave, it’s to you.
I’ll do TC39. ECMAScript…
Show me TC39… [win sound]
Eeey!
Wow, man…!
That was the one I was telling Scott we did a show on.
Yeah, I know, I was like –
I was gonna say CSS-Tricks.
Why were you touching your head? I was thinking like “Head. What’s got a head involved?”
I didn’t get the hat thing…
Look at your hat! What hat are you wearing?
It’s a GitHub hat. [laughter]
Oh, GitHub would be a good answer, yeah…
That is true, yeah.
I would have said Smashing Magazine personally…
Well, GitHub is Microsoft at this point…
[48:14] That’s true. So that was a huge round for ShopTalk. That was round six, the final round. It was also a double round…
Oh, man…
They’ve scored all of the points, and when you double all those points, that round alone was 216 points.
Oh, yeah!!
I’m so sorry…
So, with 409 points, the winner of Frontend Feud super-colab is ShopTalk.
I’ve never lost on this program! [laughter]
I’m so sorry, guys…
Congratulations… You stole it from us…
I know…
“No, thanks” to double points, yeah…
Killer
I like my points non-doubled, okay? Thank you. [laughter]
Alright. Well, ShopTalk, congratulations on the big win. What do you win? Well, you win an opportunity to shout-out or say whatever you like. You cannot gloat. You must say something not about syntax. It has to be anything else. Shout-out something. This is your chance to speak to the JS Party listeners.
Chris, do you wanna go? You said you had something earlier…
I was just thinking of it, because it came across my desk… There’s like a local feud in town here, in Bend, and this guy is really mad that they’ve put a gate on his property… And he made a whole website about the gate and how mad he is about it… And I wanna shout out to feud websites, because we’re playing the feud anyway…
Nice.
I think it’s extra-cool to make a website out of your madness. [laughter]
Make the beef public… Just make that beef public. [laughter]
Well, at least build something constructive…
Yeah.
That’s beautiful. My shout-out is gonna be to Amelia’s cool GitHub visualization project, to help you visualize a GitHub repo in a non-directory-of-files way… I think it’s really cool, so…
Thanks, Dave.
Yeah.
I will double that effort. I think I shouted it out last episode; we’re so impressed we just keep bringing it up, Amelia. Nice work. Would you like to give a shout-out, maybe back to Dave, or anybody else?
I was actually gonna say CSS-Tricks for the last question, so… Shout-out to CSS-Tricks, even though it wasn’t on the board, for some reason…
For pushing the web forward? I agree. That’s what I do…
I should say there were a couple of honorable mentions that round, and in all of the excitement, I forgot about them. So the Chromium team themselves got a couple of shout-outs… Vercel got three shout-outs, the EFF (Electronic Frontier Foundation) got four, and then a couple people shouted out open source, even though it’s not an organization… But definitely, the open source community pushing things forward.
I will back up what Amelia said and say CSS-Tricks is definitely pushing web developers and web development forward over the years… As well as y’all’s podcasts… Awesome stuff continuing to put out…
Totally.
As well as FreeCodeCamp too, right? That’s also a good one, yeah?
Yeah, absolutely.
I’m surprised that one wasn’t on there…
It got one mention, I believe…
Yup.
Level Up Tutorials, yeah. Anything else to shout out?
Wes Bos’ blog… [laughter]
WesBos.com/courses.
React For Beginners wasn’t on there, because I feel like 100% of people who know React know it because of Wes’ course. So it’s not on there…?
There we go. We got all our plugs in. There we go.
Yup, there we go.
Definitely should have been on there. Well, we’ll give one last shout-out to a JS Party listener, the winner of the free JS Party T-shirt. Remember, everybody who took the survey had a chance at it… It is [drum roll] Geneve Parish. Geneve, you won a free shirt.
Yaay!
That was so sad… [laughter]
Of course, that means that 139 of you did not win, but don’t fret; you can always just buy yourself a shirt at merch.changelog.com, how about that? And as a bonus, since I’m feeling generous, we’ll also give out a free shirt to one random member of our JS Party community Slack… So if you don’t hang out in there with us, you should. It’s #jsparty. You can hop in there at changelog.com/community; it’s all free, hang out during the live shows, talk web dev with us… And on September 17th I decided we’ll just pick a random person in that channel and we’ll ship you a free JS Party T-shirt as well.
I wanna thank the guys from Syntax and ShopTalk for joining the show and playing this awesome game with us. A round of applause for just the participation right there… And of course, thank you to Divya and Amelia for sprinkling the JS Party into the show. I love it. Thank you all listeners for playing along with us. This has been Frontend Feud, this has been JS Party, and we will talk to you next time.
Our transcripts are open source on GitHub. Improvements are welcome. 💚