Ahoy hoy, JSNation & React Summit!

Nick, you’re back from Amsterdam.

Ahoy-hoy. I am. It’s very fun.

I’ve missed that hoy-hoy on the show… Although it hasn’t been that long. You weren’t gone that long.

No, no. About a week.

Is this your first trip and a while, I suppose?

I haven’t gone anywhere – well, I haven’t gotten on a plane to go anywhere since going to a Node+JS Interactive, which is now OpenJS World, but… The 2019 one in December in Montreal.

Wow.

That was pre-pandemic. Yeah, December 2019.

It’s been a few years. So we sent you to Amsterdam, with your wife; fun trip, you attended JS Nation, and React Summit. Thanks to our cool friends and our partners over at GitNation for getting out there and getting you involved. We had this whole idea of providing the pre-show entertainment. But to be honest with you, I didn’t know exactly what that was gonna look like.

Me neither.

[04:08] I figured you would just figure it out when you get there. I hope you did. I hope you figured it out.

I hope so. Yeah. [laughs] It was a lot of fun, and… Yeah, we just kind of put it together… I was kind of just pacing back and forth in the hallway, talking to myself for hours…

Super-nervous, or just not knowing what’s going to happen, or…?

Yeah, yeah, pretty nervous the first time. Just, you know, not really sure what to expect and trying to fill like an allotted time with something that I really – the format of it that we went with was not something that I could really just like pull in. I had to kind of go into it and just do a lot of improv… And I think it turned out pretty well.

So your years of improv classes really paid off in this case.

Yeah… My zero years of improv.

You didn’t take those classes?

I was looking for YouTube videos to download to my iPad for the trip over on improv… [laughter]

I’m not sure if it’s something you can just learn off a YouTube and then deploy immediately… I think it takes practice. That’s my just intuition. I’ve also never taken classes. I know Kball was part of an improv troupe at one point.

Yeah, I know that that’s –

But we didn’t send Kball.

That’s something that he touts as being a very good thing, and I think it is. I’d love to take those. My foray into, I guess, semi-public speaking is just karaoke, going that route. I didn’t watch any videos on the way there. I watched Stranger Things, and… Yeah, I enjoyed that.

Did you do any karaoke while you were there?

I did.

Oh, nice.

It was the best.

Alright, save that. Save that for the highlights, perhaps. But I do want to not sell you too short… So I mean, you’ve done some MC-ing, and you’ve been podcasting now for years, you were an MC at TSConf… Or is it TypeScript Conf? I can’t remember the name of it, but it’s official TypeScript conference. The much-lauded and award-worthy Nebraska JS Conference… Not award winning, but award-worthy, for sure… You MC-ed that five times, and you were the highlight of the show. So you’re no stranger to this.

So I’ve done nine MC gigs. I’ve also married nine couples. I’m an online ordained minister, and…

Okay, nice.

I don’t know. There’s a lot of improv and boisterous public speaking that happens for that, so…

Excellent. So they hired the right guy, and we sent the right guy.

Yeah.

And before we get to the actual pre show and the events, I’ll say these were back to back events, in the same venue. It’s actually pretty nice. The same people putting them on. JS Nation one day, followed by React Summit the next day. But this is your first time flying in years, international flying even.

Hard mode.

Was it hard? Was there anything that went wrong? On the way there, specifically.

On the way there - well, no, not really. It actually went quite smoothly… Surprisingly, because I flew – you know, in Omaha it’s not an international airport, so I had to fly to somewhere that was, so that I could go to Amsterdam. And that place on the way there ended up being Atlanta. And I have notoriously just had bad luck in Atlanta, where I get stuck there because a thunderstorm follows me there and then sits on top of the airport for a couple hours, and then… Yeah, not great.

But none of that.

None of that. And I was very worried. I was like, I should have gone a day earlier, because if one thing goes wrong, I’m just gonna miss the conference. I got there a whole day ahead of time, but it was also like – time’s weird, right? We lost eight hours going there, or seven hours going there, and then got there… I was up for a full 24 hours, and basically dropped my stuff off at the hotel, successfully made it, got all of the packages there and everything, including a giant, amazing JS Party sign, which was awesome, and not super-fun to carry from like the airport onto a train, then carrying around Amsterdam to get onto a metro, and then…

[08:15] I warned you… [laughter] So the previous - was it Friday? No, it was like Monday or Tuesday. I can’t remember. You left on Tuesday, so it was Monday; the day before.

Yeah.

You and I met up and had lunch, and I gave you some stickers, hopefully you deployed those nicely…

We did.

And I gave you this big box that has what I thought was a Changelog banner… Because I forgot that we had a separate – we have a Changelog banner for the Changelog, and we have a JS Party banner, which we’ve taken them both different places, and I took the Changelog one to London and back one time… And for some reason, I thought I had that one at my house. But Adam has that one. I had the JS Party one, which worked out great. But I’m like – it was even like, I didn’t even open the box. It was all taped up. I’m like, “Here, take the box. It’s heavy, it’s cumbersome, but I think it has wheels.” Did it actually have wheels?

It does, yeah.

Okay.

I didn’t have that though. I just – you gave me that box, and I gave that box to the airline, and then I took that box… And I was planning on putting it back in there and taping it back up to come home. The hotel threw it away. I left it in my hotel room…

Those buggers…

…they thought it was trash and threw it away.

That was a nice box, how could they think it was trash?!

[laughs] So it was much easier to carry home, because I had the handles.

Did they throw away your laptop, too? I mean, jeez…

[laughs] No, I didn’t have a Windows laptop.

Ohh, there you go… Put that in the Recycling Bin.

But yeah, that worked out well. It was a JS Party sign.

Perfect. It’s like we planned it.

Good thing it wasn’t a Go Time sign, or something.

Yeah, Go Time would have been bad. We should probably have one of those as well. So you made it, no major problems there. The JS Party sign came with you, and you were just there a day early. You probably didn’t have time to sleep off any jetlag or anything. You went straight into it.

I went to the hotel room and I quickly showered, because I felt like I had been up for a long time… And then I went straight to the conference hall, and kind of met the organizers. I met Daria, and several others, and then I was just like, “Do y’all need any help?” and I jumped into the - what’s it called?

The recording booth?

No, what’s the – the assembly line of putting swag bags together. And I filled thousands of bags.

Ohh… So you have a lot of experience at this. Swag bagging. So you’re like now doing manual labor? Okay, this is nice. This is nice.

Yeah, yeah. We filled out the JS Nation ones, and then as soon as we got done with those, we had what seemed like thousands of other ones. My wife went with me, and then she stayed back at the hotel for a little while, and I was like, “Oh, do you want to come meet up?” and–

Do you wanna do some bags?

She came over and helped with the bags, too… [laughter]

Well, that was sweet of her…

Yeah.

…because we’ve done that work before. This is not fun at work. This is very much like the same thing over and over again, your stuffing bags… You didn’t happen to stuff any of our stickers in there, did you? I mean, that’s the easy way to get rid of them.

I did not. They had already filled so many before I got there… Yeah. But I did deploy –

You wouldn’t have had enough either, because we didn’t have that many stickers.

Yeah. I did deploy them, and they were getting picked up a lot… Because I put them down on a table and I’d walk back and check on them and they’re completely gone.

And they’re just gone, yeah. People love stickers, especially at conferences. So much fun to just be at a conference again, and just like go grab a sticker off a table. Did you have so much fun just seeing people?

Yeah, it was so great. I mean, this was just like a fantastically well put together set of conferences. I have nothing but good things to say about the organizing team, and everything that they did. But it also - it just hit different, because it was the first time going to a conference. And I don’t think anybody would disagree, it is so much better than an online conference… Because you get to actually–

[12:01] Yeah. There’s no comparison.

Yeah. Yeah, absolutely.

Like, it was good enough– well, it was something, and I think we learned that hybrid is important, but…

Yeah, and this was hybrid, too. So there was a lot of online as well, which made it fantastic.

So help us understand the difference now between these two events, because they’re back to back days, same venue, same organizers; same pre show, I guess, or a similar pre show…

Yeah, yeah.

…which, I want to hear about the pre shows that you did.

It was fun.

JS Nation - like, is there a thrust to JS nation? Is it just like “JavaScript? Yay!” Or like, is there a theme? I mean, obviously, React Summit - it’s all React-focused stuff. But as JS Nation just whatever?

Um, whatever around JavaScript, yeah. It seemed like they had –

So if you wanna submit a React talk, you’re just like, “Well…”

I think you could… I’ll be honest, I went to a couple of talks at both, but I didn’t – like, I was there for the conference environment, and the hallway track was really…

It was banging.

Yeah. But they were fantastic talks, and the production of them - it was amazing. The speakers walked up to music, like this really awesome music and light show that started playing…

Oh, nice.

They looked like rock stars. It was very professionally done. Major props to the AV crew that put all of that together, because you could tell that it took some planning for that, and they executed it perfectly. But yeah, so they had up on stage, they had like different stage setups for each of them, and for the JS Nation one they had the definition, or a definition of nation. It’s like a like-minded group of people that share common interests, or something like that. I don’t remember it word for word, but they kind of defined why it was called JS Nation.

So it was a lot of JavaScript talks… I’m trying to think of the different talks I went to. I went to Cal Simpson’s talk on being an imposter, like basically wearing that as a badge, instead of it being like a negative connotation, which was really good. And there was a talk by – I’m forgetting names now at this point, but there was someone from Mozilla talking about JS modules from the browser’s perspective, and really went into some of the history of why things are the way they are, why they’re asynchronous, why they couldn’t just use things like common JS, and really went their own way… And it was it was fascinating just hearing that, hearing why the design decisions that we now live with are the way they are. It really helps, I think, to give some context to that.

Could that possibly be Yulia Startsev?

That’s it, yes.

Awesome. Yulia was on the show. It would have probably been 18 months ago now. I was super-impressed. I remember emailing afterwards and saying, “You should come back on.” She was all about it. And then sometimes these things just never come back together, so maybe that’s the prompt that we need to get Yulia back on the show. She actually works for Mozilla.

So a couple of cool talks… You were in the hallway track most of the time, and also you were doing this pre show. So tell us about it. What did it turn into? And was it cool? Would you do it again? Was it a was it a flop? Was it stressful, was it amazing? What happened? Did people watch it?

I think so, yeah. I didn’t actually get to see it. I didn’t get to see it yet, but I think it will be on YouTube later, so I’ll definitely go check it out… But yeah, I didn’t really know what to expect until I got there, and kind of talking with the organizers and with the video team about what to do.

[15:41] They gave me a wireless mic that we decorated for each day. So like the JS Nation day I had the JS Nation logo on the mic, and the React Summit day I had their logo… And the way that they did the conference was like, you know, the conference started in the morning, Amsterdam time, for all of the live attendees. And then for the online attendees, they didn’t join until the afternoon. It’s just to fit better with American time zones. I think that was the idea, at least. But what I did was, leading up to that live stream starting, I recorded kind of a walkthrough to give the online attendees an idea of what it was like live and in-person at the conference. So you can maybe think of it as a little bit of an ad for what to expect at a conference like JS Nation and React Summit, and also just like give them an idea of the vibe that’s there, which was really, really awesome, really something else.

So were there interviews, were you telling jokes? Did you stand on your head? Did you juggle? Sing songs, karaoke?

[laughs] What I did was I basically started at the front. I started at the registration desk, basically, where everyone comes into the conference, and just kind of did a walkthrough of, you know, showing them the vast hallway track, zig-zagging through that. And along the way, I was kind of hoping to run into, serendipitously, attendees and organizers and speakers. And because I was like, you know, I was just doing it and I didn’t really have anything planned in terms of like “Okay…” There was no plans, like “You stand here, and I’ll randomly run into you and talk to you about this.” I was just like going up and accosting people with a microphone, asking them some questions.

Nice.

I actually recorded it. The original idea I think was to do it live and just have it live broadcast out… But with the wireless camera and mic and all of that, there were concerns about that not really working super well. So instead, we recorded it ahead of time, and then we just played that.

Gotcha.

So the goal was to fill it for 10 minutes and just have like a 10-minute walkthrough. And there was a lot to cover, so I was really trying to stay within that 10 minutes. I was like, constantly talking, and talking a little fast… And the first time I did it, it ended up being like six minutes.

I don’t think we ended up using that one, and I just immediately went and re-did it again. But it worked out well.

You started over.

Yeah, yeah. It worked out well, because I got to do the thing, kind of hit the same highlights as I was going along… I think on that second one I ran into Kyle Simpson on the way back, and I got to tell him that he was one of the first JavaScript talks that I had ever seen at Strange Loop in 2010, which was pretty cool. And you know, I got to ask him about his talk, and it was just a lot of fun doing that.

There was also a big tie-in to the online portion, because after each of the speakers go, they had these booths set up, where from each of the two tracks, the speaker would immediately go there after their talks, and then people knew where to find them to go ask them questions. But also, once the online talk started, there was a computer and some microphones there, and so they could get questions from the online attendees too, and answer those. So I was really trying to highlight that that’s like one of the tie-ins to getting the online attendees to have more participation with the speakers, as if they were actually there. They can live-ask them questions, and things like that, which was really cool.

And then - yeah, so kind of walked through, touched on a little bit of the sponsors, I got to randomly talk to some attendees, ask them some random questions on, you know, is this their first conference after the pandemic, or since the pandemic started… And you know, ask them random questions like “What’s your favorite hook?” or things like that, just to get some, some fun, random responses.

[20:04] And then I kind of showed the main conference hall, where all of the main level tracks were happening. A really cool setup that they had. I was just so blown away by how well put together everything was. But I did it the second time, got it closer to nine minutes, which was really good…

Yeah, now you’re well-practiced at this point. You’ve done it a few times.

Yeah. And then yeah, that went out before the online conference started… And I haven’t seen that one. I think it went well. [laughs]

We’ll find out. Everybody else already knows.

Yeah. [laughs]

We’ll see if they invite us back next year to do a pre show or not. Awesome. So this was your first time in Amsterdam, you have your wife with you, you had some free time built in on the tail end… Did you do anything cool, anything noteworthy? Anything you would suggest people visiting Amsterdam do? Or did you run into anything that’s story-worthy?

Well, yeah. Amsterdam, first off, is just an amazing city, with an infrastructure I wish we had here… But it probably doesn’t make sense here. But the main thing that I was just so enamored with was that bikes were first and foremost the method of transportation. And there were bike paths that were specifically set up for bikes. It seemed like that was the first class, and then cars came next. And that’s just phenomenal. You could get everywhere on a bike.
And they have a wonderful metro line that really took us – we were able to go straight from our hotel with like a six or seven minute walk to a metro station, get right to the city central, and then we could walk that for miles. And the way that Amsterdam is set up is like a series of U shaped canals that go back and back… So there’s all of these streets, and you can see boats going by in the water… We went on a boat tour through those canals, which is just amazing, and beautiful.

They’re not without their problems, because it’s a very old city, and several of the buildings are tilted and falling onto each other. You can see – I don’t know what they’re called, but they’re like on the bricks, there’s the steel beams on the bricks holding them together, preventing them from falling further… Yeah, the whole city is built like that, and it’s just beautiful.

Somewhere in there is a metaphor for software architecture, right?

Yeah, for sure. [laughs]

Just some steel beams holding stuff together for now; just for now, until they have time to sit down and really refactor that thing. Hilarious. Well, I’m jealous. Never been, especially with my wife, which I’m sure you guys had a great time away from the kids, a little break from raising little ones to spend some time just the two of you. So that’s spectacular. Now, I hear the getting home process was nothing like the getting there process. Suddenly, trouble, or time; lots of time. Tell us about getting back.

Well, yeah. The night before, or I guess over the weekend, we were kind of like in our hotel room at night, we turned on the news, and they were just talking about how worldwide this was like the busiest weekend for airports yet in 2022. We’re like, “Oh, great. It’s probably not going to be any better at the Amsterdam airport.” And it wasn’t; it was awful when we got there. But we took the metro, and then took a train there, got to the airport, and just had a heck of a time trying to find where to go with things. You know, it’s all in Dutch; all the signage and everything is in Dutch, so we were trying to figure out where to go… And asking people. Everyone there, super-polite, by the way. But they showed us where to go, they like told us what check in process to go through, and we found that, but we couldn’t – like, it was packed. It was just completely packed. And we ended up – we couldn’t even find how to get in, because there were just so many people going back and forth, and covering up the entrances, and things like that.

[24:22] So I just asked a security guard, I’m like, “Where do I go for this line?” And he’s like, “Oh, I think it’s over there.” And I’m like, “I was just over there. I don’t see anything.” And he’s like, “You know, just got under.” And somehow we just got right in to check our bags and stuff.

Nice.

Then we make our way to the security line, which was like – it looked like it was a several hours long line. But as soon as we got there to the end of the line, which was like – it was like all the way downstairs, and then you go like a huge long line, and then it starts zigzagging to go up an escalator, where it zigzags back and forth upstairs, to finally go through security. And right as we got to the end of the line, somebody who works at the airport was guiding a group of people to another entrance to the security line… And I was just like, “Oh, are you taking people to the security line?” She’s like, “Were you just waiting in line here?” and we had just gotten in line, so I just go “Yes.” Because that’s what we were doing. She’s like, “Follow me.” And she took us right to the priority boarding line, so we got to go in as if we were first class…

Oh, wow…

…through that, and we bypassed that entire line, got through in under a half hour.

So would you have missed your flight, you think, if you hadn’t done that, or?

We were there four hours early, and I think we would have missed our flight. Like, it was that bad.

Wow.

But also, I had set up this app on my phone called Flighty, that you can put in your flight numbers and it will track the flights and it’ll give you notifications about any gate changes or updates to the flights. And the night before, it was just going crazy sending me like, “Oh, you’re not going to Detroit anymore. You’re going to Boston.” And I kept going back and forth between that. I was like, “Well, that’s not good…”

Yeah, that’s concerning. Like, “Where are we going?”

When we got there, and they got everybody on the plane, they explained it to us that because of staff shortages, they only had two pilots, and the amount of time it takes to get from Amsterdam to Detroit was too long for those two pilots to legally fly. So they needed a third pilot, but they didn’t have one, so they had to stop in Boston to pick up another and then go. So we stopped in Boston for 90 minutes, they wouldn’t let anyone off the plane, and we picked up a new pilot and refueled or whatever, and then took off to Detroit. But by that time, we had missed our connecting flight to get back home. So the airline put us up in a hotel, which was not a great experience, because we didn’t get there until like 1 AM, and then we had to get up at four to get back to the airport…

From one to four… It was like, “Why even get a hotel?”

Exactly.

Why didn’t you tell him you’re ordained online as a pilot? Or at least a copilot; tell him you’ve got a subscription. [laughter]

I’m an ordained Jedi Knight online, so…

Yeah, “So I can fly this plane if you get too tired… Although I’m also very tired, so…”

[laughs] But yeah, we got back to the airport by 4:30 for our 7 AM flight to New York to get to Omaha. So we had to go all the way back to the East Coast and then get Omaha. But as soon as we got through the security line, we look at the TV screen to find out where our gate is, and it’s canceled. So we had to leave security, go find the customer service desk, talk to them… And they couldn’t get us out until seven PM the next night. But luckily, we were able to get on a standby flight, and we made it home except, for my luggage, which just arrived before we talked now. They left that–

We’ve just confirmed, they have all the luggage, and our JS Party banner, so we’re good to go.

Yep. Pro tip - I put an AirTag in that JS Party banner bag…

Smart.

…so as soon as we landed in Omaha, I checked it, and I could see that it was just sitting in the Detroit airport, and I was like “Well…” I just went immediately to the counter and was like, “Yeah, the bag is here. I can see it.”

[28:13] Yeah, exactly. “I can see it in Detroit.” Here’s a pro tip - I put one of those in each of my young children’s shoes when we go to places like the zoo and the College World Series, because it’s a little peace of mind. You know, the huge crowds… Actually, my wife told me they’re starting to make wristbands now that holds an AirTag, so like other people are having that idea… Because in the shoe it works especially if you’re gonna get kidnapped or whatever, because they won’t know it’s in there… That’s like the worst-case scenario. Whereas a wristband, if you’re gonna if you’re gonna grab a kid, you see the AirTag; hopefully you’re smart enough, although most people who are kidnapping are not smart humans. But in the shoe is a safe place in that case to tail down a kidnapper or two.

Yeah, that’s a fantastic idea. I love that. And it’s not like a watch, so there’s not like an interactive thing that the kid is gonna get distracted by, or anything like that.

No, the only problem is like, they want to put it in their pocket, and I’m like, I don’t trust you in your pockets. This thing’s gonna fly out and be gone. Especially my boys, they’re crazy… And they do complain a little bit, like “Ah, it hurts in my shoe.” I’m like, “You’ve just got to find the sweet spot. I don’t care, you’re wearing it. There’s thousands and thousands of people here, and you are–” You know, especially my youngest boy, he just likes to run around and do stuff. So like, you turn around, he’s gone. I lost him at Adventure Land for about seven minutes… And he actually freaked out, grabbed a lady, asked her if he could use her phone, called my wife at our house back in Omaha, and said “I’m lost!” And so all sudden, she’s calling me, she’s like “You lost Ezra?!” And I was like, “No, I didn’t. He’s right here.” I’m like, “No, doggone it, he’s not right here. You’re right. He’s gone.”

[laughs]

And so he did a pretty good job of finding me, but that was pre AirTag. If I had the AirTags, I just would have found him immediately.

Oh, yeah. A funny story with that was my parents were watching my kids and my dog, and I just so happened to have a collar that I screwed and AirTag into on my dog… And a couple days into the trip, my mom - she like she calls me from another phone and she’s like “I’ve turned off my phone and I keep getting this message that I’m being tracked by something, or something is like following me… What is it? I don’t know what’s going on.” I’m like, “Oh yeah, that’s my dog.” Because the dog had been with her the whole time.

Right. He’s following her. That’s hilarious.

[laughs]

Weird. Weird things happen. Unintended consequences of having little hardware, RFID - is it RFID? I don’t know, little things with trackers in them. So real quick, highlights and lowlights. I know you had met a few listeners, right? I think that’s a highlight; obviously, the hallway track was something that you were doing. What about JS Party listeners? Did you say hi to any?

I did.

Did they say “Hoy-hoy?” “Hey, aren’t you the hoy-hoy guy?”

[laughs] No, no one recognized me from that.

Okay, you’ve gotta work on that. Gotta get that out there.

[laughs] Next year. But several folks did come up and talk about - you know, they listen while they’re running, or things like that. And I know they were telling the truth, because they mentioned a few specific episodes, which was really awesome. And for others, it was just, you know, a great way to chat with them about what we do on this podcast, how we try and have a lot of fun… I got to talk a lot about the different game shows that we’re having… I might have mentioned to a few people an upcoming one that I happen to see…

Oh, yes, we do have a new Frontend Feud in the works. I can’t confirm a date, but I can confirm the battling teams will be Shop Talk versus the CSS Podcast. It’s happening, we just don’t know when; we’re all batting around Thursdays. But that will be a thing coming soon. That will be a fun one.

Yeah, for sure. And yeah, it was just kind of, you know, being able to talk about how we try and have fun, we talk about a lot of really cool projects. We have a lot of, you know, the thought leaders from around JavaScript, React, all of that on the show… And yeah, we just like to have a lot of fun. That was really cool.

[32:16] Well, if you were at JS Nation and/or react Summit and you said hi to Nick, shout out to you. I was emailing with Omar from BEJS who runs the React Brussels Conference, and he happened to be at JS Nation at the time that we were emailing. He’s like, “I just saw Nick at the event.” So that was kind of cool.

Yeah. That’s awesome.

So what is up Omar? Glad you got to see Nick, and I think we’ll be working with him as well on some of the stuff that they’re up to. So that’s cool. Low lights I think we kind of talked about the travel home… Anything else happened that is like, we could have passed on that? Did you can get food sick, did you know, eat any bad mushrooms or anything? Something poisonous?

[laughs] No, surprisingly, I didn’t. I was worried, you know, not having really–

Didn’t get Covid while you were?

Yet to be seen, probably… [laughter]

You don’t know anymore. Sometimes you just have it now, and you’re like, “Oh, I guess that’s what I have.”

[laughs] But lowlight would have been the travel; the travel home specifically, it was just awful. Not the conference’s fault, obviously… And I do want to say though, Jerod, you and I have organized a few conferences in our day, and I was looking at this conference from like an organizing perspective, and all of the things, you know, trying to highlight some of the things that they did really right, or unique… And I just have to say, it was phenomenal. It felt like they had thought of everything. There was everything there, they really focused on the right things… You know, the hallway track just seemed really great. They had a job board setup, they had lots of different ways to interact… They had little cards around, with conversation starters on them, so that you can just look at those and get ideas for how to approach people and actually talk to them…

That’s cool.

…which was really awesome. And, you know, they had these coffee machines everywhere, making espressos, making cappuccinos all day long. There was always lines at them. So that was really great. They had food trucks there over lunch, and they also had food provided at the venue, and just… The food was great. And like I said, the conference AV team was just - it was the best I’d seen at a conference. It was just so well put together with everything. So major, major shout out to the organizers, The GitNation team for the work that they did at both conferences, because it was just amazing.

Absolutely. So you have a tweet thread with some more details, which we’ll link to in the show notes as well, with pictures of all the things you’re talking about. And specifically, if you want to see the walk-up, the entrance for the speakers, the rock stars, Nick has a nice video of that, as Tobias Koppers is introduced. Super-cool. So what’s next then? So this is your first time traveling… We’re getting back out into the conference scene… We have some upcoming stuff as well, and I know one confirmed is that we will be at All Things Open this October; I think maybe it’s like right around Halloween… So expect Changelog/JS Party things at All Things Open. If you’re thinking about attending that event, definitely come see us. But what else was for you coming down the road? Travel, events, TS Conf what have you got going on?

Well, this made me realize how much I have missed in-person events, because it was so much fun, and I really want to do more. And I’m just so excited that the world is opening up again for things like this, because it’s been a long winter without that. And so yeah, coming up - I don’t really have anything confirmed yet. We’re still kind of looking at our options for TSConf and what the future of that will be. We definitely want it to be back, but it’s still, like, this event went super-well. I’ve seen other events go super-well. It’s still like a strange post COVID, or continuing COVID world… Yeah, it’s tough to say exactly what’s happening next, or I can’t say anything yet… So be on the lookout for exciting announcements.

[36:29] There you go. Stay tuned to this channel for exciting announcements. If you organize an event and you’d like to have JS Party be involved, we do enjoy doing that, so reach out to us, jsparty@changelog.com, or you can hit up any of the individual hosts or co-hosts on their Twitter, or wherever. But if you want to reach the organizing team, jsparty@changelog.com, let us know. We would love to work with you, we like to promote people’s events, and we’d love to go to them, once again.

Well, this episode isn’t entirely comprised of Nick and I chit-chatting; we have two awesome interviews lined up as well. Hung Nguyen, who won an OS award for most exciting use of tech with JestPreview, and Raman Lally, who gave a talk on Apollo cache right after this.

Alright, so I am here with Hung. Hung, how’s it going?

I’m doing great. How are you doing?

I’m doing fantastic. So we’re both back from React Summit, but actually, you weren’t at React Summit. You attended online, right?

Yeah.

I didn’t know that when I was at the conference, because one of the really cool things that they had in person was kind of a tweet wall where they were showing tweets about the conference up on a screen, right next to the speakers, and I saw your name up there a couple of times. And then I recognized your name from the site too, talking about the Open SourceAwards. And so I just thought you were there, and I kind of reached out to you on Twitter, but then found out that you were attending online. So yeah, I want to ask you how that was, how was the online experience?

Yes. At the end of May I surprisingly received an email from the React Summit team. They informed me that my project got nominated in The Most Exciting Use of Technology category in the React Open Source Awards, and they invited me to the React Summit. I think it’s not real, but turns out it is. I’m located in Vietnam, so I have to obtain a visa to enter Netherlands. I applied for it, but unfortunately, I haven’t had the result yet, so I had to attend the conference virtually.

Even though I didn’t get the chance to join the conference this year, I learned a lot and I made a lot of new friends. It’s a very exciting and interesting experience for me.

Awesome. Yeah, that’s really cool. That’s how we got connected, and it did work out well, and I really appreciated those multiple ways to attend the conference. If you can’t or if you’re not comfortable attending in-person, you can attend online. And yeah, that was really nice, because you still get a lot of that experience, and being able to connect with people.

So let’s talk about your project. You did mention that it was nominated for The Most Exciting Use of Technology category in the Open SourceAwards. What’s your project called?

It’s Jest Preview.

Jest Preview. From that name, I can get an idea that it’s kind of around testing, and around Jest specifically, but what does it do?

Yeah, Jest Preview is a library that boosts the productivity of a frontend engineer by at least 300%. And when you write an end-to-end test, you can see the UI. You use Cypress, you have a dashboard, you can see step by step. But when you write unit tests and integration tests in Jest, you do not know how the UI looks like. If you use a React testing library, you have some tools like screen.debug(), but the output is a long HTML in the terminal, and it’s painful to read and debug.

Yes, it is.

And it bugged me for years. For now, I am a full-time open source contributor, but before that, I was a lead frontend engineer for almost five years. It’s not just my problem, because it slowed down my team’s productivity. So I need to have some kind of solution to boost the productivity of my team.

[42:05] So I asked myself a question that when I run screen.debug(), I can see the whole HTML, but can I put that HTML into the browser? It’s just my idea, but I tried to make it happen, and it turns out it’s possible, and it helped me a lot. The first version and the current version of Jest Preview is very different; they are completely two different libraries. But because I am using my own package, so I can improve it and add more features to it over time. And because you have the ability to “see” your application UI in the browser, so you can save a lot of time when testing a web application.

In the past, sometimes you’d try to click on a button, but nothing happened, because of a loading spinner. Now you can see the loading spinner before you can write the test code to click that button. So it’s going to save you time. It makes your life easier, and it improves the quality of web applications in general by encouraging you to write more tests.

Yeah, so I can just immediately, just looking at the docs for this - fantastic docs, by the way - but just looking at this, I can immediately see that it’s useful. And I just kind of want to walk through what I’m seeing right in the introduction in kind of a little repeating GIF, to give an idea of what it’s doing and how easy it is to set up. So you mentioned what I do right now with my Jest tests, which works, but it’s still very hard. I just do the screen.debug() and I look at the markup that gets printed to the terminal. Not the easiest thing, but it does give me an idea. Usually, it’s like “Oh, my suspense wrapper is still waiting right there.” So that does help me a little bit.

But looking at this, it looks like what you do is you just import a preview from Jest Preview, and then I could change my screen.debug() to preview.debug(). And that’s pretty much it, alongside also running Jest Preview.

Yeah. But in a recent version, I released a feature called Automatic Mode. You don’t even need to import preview from Jest Preview.

Really?

Yes, it automatically previews if your test fails. You don’t have to do anything else, just run the jest-preview CLI, and whenever your test fails, it’s going to preview the app into your browser automatically. It’s amazing. You don’t have to call debug() anymore.

Okay, that is incredible. That makes it so much easier, because you don’t have to do any modifications to your tests.

Yeah. You just have to install jest-preview and configure it a little bit.

Okay. So you config it, and then - do you basically run jest-preview instead of jest to run your tests?

No. Actually, you have to run two commands. The first one is your test command, for example jest – watch, or something like that. The second command you have to run is jest-preview. That command will initiate a Node server, and it will serve something I call Jest Preview Dashboard. And that dashboard will preview your app in Jest. So, yeah, basically you have to run two commands.

That is incredible, because it just makes it so much easier, and you don’t even have to modify the test. I’m thinking to myself, like, could I test this out without getting buy-in from the rest of my team and just use it kind of on my own, locally, to get started? And it seems like I could, if I just could install it globally and then set up a config file and then start running it.

[46:20] And so when it’s running, it’s opening up a browser, and in your example here you’re finding an element in the component, like a button, or finding get by text with screen, and then clicking it, and you can see that it’s clicking every time. You can see exactly what it’s doing in the browser. And so it gives you that kind of visual debugging experience that is very much lacking from writing component tests with Jest.

Actually, in the documentation there is some kind of best practice. I haven’t had time to write how to use it properly. Actually, I can think of two use cases you would like to use Jest Preview. The first one is you debug an existing test when you just plug the debug command whenever you want, so you can see the exact UI in the browser.

The second one is when you write a new test, you put the debug() at the end of the it/ test’s callback block. Whenever you write a new line of code and I hit Save, the UI previews in the browser immediately. And it’s very fast for you to write a test.

Before Jest Preview, for example, I’d write a whole test for a new feature. It’d take me 20 hours, but now it’s just taking me 5 hours.

Wow. So it’s a big productivity booster for you.

And you can imagine for a company with thousands of engineers, if they can save that amount of time, how much money we can save?

Yeah, that is amazing. Now, I want to ask a little bit about the underlying tech that it’s using. Did I hear you say that it’s using Cypress to power that experience?

No.

No? What’s it using?

The implementation is dead simple. It’s just one line of code. The idea is very simple - when we run the test in Node, because in the Node environment there is no DOM, right? So we have to use some kind of JSDOM, like jsdom or happy- dom, or something like that, so we can have access to window, document. Even though it’s not a real DOM, but it’s pretty close to the real one. And the DOM has a property outerHTML.

I just do a very simple thing, like console.log(document.body.outerHTML) and I save it to a file on a disk. Then I make a Node server to serve the file. And whenever the file changes, the web page automatically reloads by a WebSocket connection. It’s very simple. Just one line code.

Yeah. Okay. I was thinking it was something like Playwright or something like that, kind of driving the browser, but that is much simpler.

Super-simple.

Yeah, I like that.

I invite you to read the source code on my GitHub. It’s very simple. It’s not some kind of crazy, technical thing. It’s just a few lines of code.

Okay, awesome.

[50:03] The most difficult thing when I work with Jest Preview is related to the CSS. Because if we just bring the HTML to the browser, it’s very easy. But to support CSS, it takes about 90% of my time working with Jest Preview, because there are a lot of CSS strategies and standards to write them. Like vanilla CSS. Some techniques require PostCSS, like TailwindCSS, CSS Modules. Some use CSS-in-JS, like styled-component, Emotion, Stitch, and the one that Airbnb just adopts recently, Linaria… Proceeding each one is very different to each other. So I spent a lot of time writing Jest code transformations to transform the CSS, so you can display the style in the Jest Preview Dashboard.

Nice.

If you have ever configured Jest from scratch before, you can see that whenever we hit the CSS file, we just return the string in the Jest Code Transformation. But if I want to make the preview looks the exact same way as it’s on production, you have to write a custom CSS code transformation. And it’s the hardest part when working with Jest Preview.

Yeah, I can imagine. That was one thing I was going to ask about, was how that works. So that’s really cool.

So yeah, definitely check out Jest Preview. We’ll have a link in the show notes. We’ll also have a link to your Twitter, and people can reach out to you if they have any questions, or want to learn more. Is there anything else that you want to drop or plug in here?

Yeah, I’m happy to support anyone. If you have any questions or you have any trouble integrating Jest Preview into your application, just simply hit me on Twitter.

Excellent. Well, Hung, thank you so much for coming on. Again, check out Jest Preview. It was the nominee for Most Exciting Use of technology in the React Open Source Awards, and I cannot wait to try it out and learn more. So I appreciate it, and thanks for stopping by.

Yes, thank you very much, Nick.

Alright, I’m here with Raman Lally. Raman, how’s it going?

It’s going alright… Yeah, being back is nice… You know, being able to be in a cold place again…

A cold place?

Not because it’s Canada… Well, just because it’s home… You know, trying to keep it very cool. I can run very hot.

Yeah, I get that for sure. Although the weather there - we were talking about React Summit in Amsterdam… The weather there was actually quite nice. It was really warm one day, and then I did have to wear a jacket the next day, going out and exploring Amsterdam, which really felt good.

Well, I mean, it felt like a lot like home. You have no idea what’s going to happen; one day it’s super-hot, and you’re sweltering, and the next day it’s like, “I have to wear a jacket tonight, and I don’t know how to bring it.”

Yeah, right. So as we alluded to, we met at React Summit in Amsterdam, where you were a speaker. But before we get into that, why don’t you introduce yourself? Tell us a little bit about who you are and what you do.

Yeah. So I’m Raman, senior dev at Shopify… Been here for like nine(ish) months; eight, nine months. I like all things GraphQLy, and I guess that’s kind of what the talk was about. Mainly frontend stuff. And oh, I’m in Canada. I guess that’s an important piece. People love to hear that, I hope. They’re like, “Yeah, okay. He’s trustworthy.” [laughter]

Trustworthy and nice.

Yeah.

Awesome, awesome. Well, welcome. We met at React Summit – I think we met at the after party on that… But you were a speaker there, and I guess before we get into that, what did you think of the conference?

I thought it was great. I wasn’t expecting it to be so well put together. Sometimes I feel like these things can be a little scrappy; and that’s nice, there’s nothing wrong with that. But this one was just like, everything was organized. Like, most things were on time. Like, I wasn’t on time, but that’s just me. But yeah, nothing felt very out of place. And the speakers were top notch. I was like, “Why am I here?”

No, no, you’re included in that, for sure. Yeah, I’ve organized a few conferences, and I was commenting to one of the organizers of React Summit that just like the LED wall that they had for like the TV in the main area - I was like, I think that that’s my entire conference budget right there… [laughter] So yeah, it was a fantastically put together conference. And as we keep saying, you spoke at it. What did you speak about?

So I was speaking about Apollo Caching, and befriending it. So just like getting a little deeper… You know, things that people get tripped up on, and stuff. It kind of spawned from like - we’re moving over to client three Shopify right now. So from client two, which - that was like… You know, client three came out a while ago, like a couple of years ago. But it’s pretty mature now, like we’re swapping over… But it brings some new features, or whatever. But the conversation came up with like bugs and stuff people ran into. So that’s what really got me thinking about it. I was like, “Oh, like, I know a decent bit about this. I’m sure I can help people not run into these things.”

Yeah, super-interesting. I do use Graph QL, although I wouldn’t say that I’m much of an expert on it. Just kind of make a query and it works. I haven’t thought about it too much. I would like to, because I’m sure that I could be doing things a lot better. But when you say like client two and three, you’re talking about like Apollo Client?

[58:03] Mm-hm. Yeah, the versioning. The move to client three was like a lot of changes, the way the cache worked, type of thing… And it brought in like a whole bunch of new features. You could do a lot of local state management just with Apollo now. You don’t need to quite do the whole “Oh, I’ll copy data to Redux, and then I’ll pull it back out from Redux, type of thing… And that’s where my state management will happen… But then I’ll kind of deal with the cash from Apollo, but I can’t really interact with it too well…” But with Apollo Client three it was very different. You could do it all in one. Not that you’d have to, but yeah, you’d definitely be able to.

Cool. So let me ask another probably silly question to ground myself a little bit more in that… I guess when I interact with making queries and mutations, I’m doing it through React Query, and that is using, internally – or not internally, but we use inside of there… I think it’s GraphQL Request to do that, and then we use like GQL for the tagged template for the query itself… So I’m like throwing out my vague knowledge of my stack and what we do, and what seems to work… But basically, would Apollo Client replace all of that and just simplify it, or…?

Yeah, I mean, you could still use the GQL tag templates if you want. I don’t Shopify we use GraphQL files, and we build the types out using TypeScript from those files, and like that gets auto-generated. Let’s say you make the query, and you get the data back, you want to type anything, it’s all typed for you… That’s beautiful.

That’s so nice. I use a GraphQL code generator to–

Yeah, exactly. And I actually prefer the files over the tags; my previous company used tags. But the files are just easier to – I don’t know, I like just to have a file where it’s like, “Okay, this is the query.” Like, if you need to go look at the Query, you just go look at the file. Instead of like in the component, you’re like, “Okay, yeah, I had a variable, and that’s where the tag template was.”

Yeah.

But yeah, I guess it would essentially replace that whole – like, React Query would instead use a client. But it’s more of a lift. I feel like React Query is really light. I’m sure you use it wherever you need to. With Client, it’s like, you have the context, and it has to wrap your whole app and then you build around it a little bit more, I think.

Yeah. Okay, one follow-up question… Do you do just one query per file then?

Yeah… Do we? No, no. I mean, we have kind of like a frame component, where a lot of data gets pulled in there. That one has multiple queries that get fired, either just to like see data, like to prefetch, and then like, you don’t actually use it there. You’ll requery it down the line, with the same variables and everything, just so you can grab it from the cache easily, instead of having to like, you know, prop-drill it, or anything like that. But then with those ones, you could collocate that query with the component that’s going to use it, and then just lift it up to this top-level component and fire it there.

Okay, nice. I was just curious, because there’s so many ways to organize all of this, and I’m just endlessly fascinated by the different ways. I know for a fact that I could be doing things a lot better, so… Thank you. So the title of your talk, “The Apollo cache is your friend, if you get to know it” - can you break that down a little bit? Maybe I don’t understand fully what you mean by the cache. Is literally just like a cached response from GraphQL?

Yeah, so I feel like that was like my fourth slide, was like, “What is it?” And yeah, literally, they’re in memory cache, that gets built for you. Even just what I was saying before, we make the query, and then later on, we’re making the same query, but you’re not going to network, you’re going directly to this data that’s been cached on the frontend.

Yeah.

[01:02:00.23] So it’s like a mechanism they have for saving all your query data, but it’s not exactly your data. It’s just a representation of it. So they’ll normalize your data as it comes in. So deduplicating it, and making sure that it’s a really flat data structure… And that makes it so it’s like really quick to look up any piece you need. But obviously, the only pieces that can be normalized are things that have IDs, and they’re specific entities… But I had a whole new slide on that as well… [laughs]

But yeah, essentially, it’s an in-memory cache. So if you were to reload, obviously, you’ll lose all that. But yeah, the data that’s come in - you just grab it again, quickly. And you could modify it to, obviously; there’s APIs to directly access it. But I didn’t go into that, because that’s like a whole other can of worms.

Sure, yeah. So one of the big benefits of it then is you can just – anywhere that you need to make these queries, you can make those queries, and the first one wins, and then the rest of them just read from the cache… Is that kind of the –

Yeah, exactly. And you don’t even need to make the whole query from the other components. Let’s say, I don’t know, you had this top-level component that pulls in this big query. It’s huge, right?

Yeah.

And then you have these child components that query fragments, so just partials of the query… And let’s say you had a use query way down the line, just for a piece of that data… If that piece of data changes in the future, that component automatically updates, because not only is it making the query, it’s also listening to the cache.

For just that fragment?

Just for that fragment, yeah.

Wow…

It just kind of works. It feels very magical. But then, you know, once you realize how it works, “Oh, okay. It’s a little less magical” but still magical enough.

That’s awesome. Do you have to do anything special with the design of your schema or anything like that to get this to work properly?

Yeah, I mean, the main thing is having really stable identifiers for every entity. So anything that – I had an example of a query where we had a list of items… So the thing that was the list, the entity of the list - it doesn’t have an identifier, because it’s just, you know, a collection of these other items. So that can’t be normalized. But each item is normalized. So those ones can be pulled out and like given their own space in the cache, so they can be directly identified… But if you don’t have a lot of IDs in your schema - which you definitely should… Like if you have an entity, in theory, in the database it should have its own identifier; you would want to have that in your schema, right? So every single specific object is uniquely identifiable. And they kind of make it a little bit easier… You don’t need to have like an explicit ID field. There’s like a key fields API, so you could take a few other fields and like turn them into an identifier, as long as it’s still stable and unique.

Oh, cool.

So that’s really the main thing you have to look out for. And then obviously, use types. I was like, I don’t know, the first few schemas I ever worked on, you end up with these God types, where it’s like this enormous object with like 2030 fields on it… People are like “This is really nice. We have a huge object” and it’s like “No… We don’t want a huge object. We want smaller types that are easier to compose and reuse and whatnot.” I mean, obviously, the basic schema design principles come in, for sure.

Nice. Yeah, that sounds super-interesting, and it’s making me realize there’s just – I’m only scratching the surface of GraphQL, I think, because there’s a lot to it. But I am doing a lot – you know, I get all of the type safety, the generated types, things like that. I do get kind of some cache things through React Query, but I’m not sure about fragments, being able to pull off cached pieces of like a larger query down the line somewhere else. That sounds really cool, and worth looking into more.

[01:06:00.28] Yeah, for sure. I mean, I did have a conversation with someone after the fact, where they were using Relay instead of Apollo… And they were using it specifically because they could add the fragments to their component; they’re like a component field, essentially. So like, they would compose those fragments up, and like, wherever – let’s say a whole bunch of components were contained inside this container. The container made the query by pulling the fragments that each component owned, and like just making the query with those fragments only. So each component only knew about its fragment of data, but the query was made elsewhere.

The nice thing about Relay was you didn’t have to make the query in the child component. All it had to do was define the fragment. But that made it so it was listening for that fragment. The difference with Apollo is like, you have to do the use query in the child for that fragment, to make it listen to that fragment, and like hope that somewhere up the line the query had already finished, and that you’re only getting the cached data. Whereas with Relay, it’s a bit more explicit, where they have like a compilation step beforehand, that makes it so that component is tied to that fragment; it will only listen to changes for that fragment. So it’s a little cleaner. But yeah, they were building that functionality on top of Apollo… It was very interesting.

I feel like I had the same conversation, with the same person… [laughter] Yeah, that’s awesome. Well, cool, that sounds really awesome. Your talk, “The Apollo cache is your friend, if you get to know it” will be published, I believe, by the conference, in the next couple of weeks. But if folks want to learn more about you and what you’re up to, where can they go?

I guess Twitter… That’s probably the best place. I mean, I don’t really brand myself very well, but I guess now I have to. [laughs]

Gotta get on that. We’ll definitely have a link to your Twitter in the show notes, as well as to the conference. So be on the lookout for those talks when they get published, and definitely check out Raman’s talk, it’s going to be something that immediately goes to my Watch Later, if not to just immediately watching. So I’m looking forward to it. Raman, thanks so much for joining us today, and have a great day.

Yeah, thanks for having me. You too.

Jerod, can I do one more kind of self-promotion thing, I suppose?

Yup. At the after party for JS Nation and React Summit they had a silent disco going on, and they had a lot of fun activities… But primarily, the one I was most excited about was their karaoke night. And I don’t mean to brag, but I think that that was my best rendition of Kiss by Prince I’ve ever done. So it felt good to be back out doing that.

Video or it didn’t happen… I mean…

I saw phones out… I don’t know. I didn’t see any videos. [laughs]

Alright, here’s a call to action - if you were at the party and you videoed Nick, karaoke, we will pay cash money. I’ll pay five US dollars, maybe more, if it’s good video, high-quality, turned sideways, not that vertical stuff, of Nick karaoking. Maybe even $10. I’m negotiable. jsparty@changelog.com. Hit us up. [laughter]

Awesome. Alright, that’s JS Party for this week. Nick, so glad you went, so glad you made it home safely. So glad our sign made it home safely, and so glad your wife made it home safely as well, even more so than the sign… But I’m glad the sign got back. And thanks for sharing that with us, and thanks for going there and being part of the community. It’s awesome. We’ll talk to you again next week.